Template Info

Get Started with the Template

Practical guidance to help users explore features, follow steps, and complete tasks with ease

How to Update Variables

Open your project in Designer.
Access the Variables panel:
- Select the Variables icon in the Style panel (the small circle with a dot).
- Or press Shift + Cmd/Ctrl + M to open the Style Manager and switch to the Variables tab.
Browse your variable groups such as color and typography. You'll find items like --Primary Color or --Heading Font Size.
Select any variable to change its value.
Once updated, the change applies instantly across all elements that use that variable.
Optional:
You can still adjust colors or typography on individual elements directly from the Style panel if you prefer not to rely on variables.

Select the text element on the canvas.
Click once to highlight the text field.
Enter edit mode.
Click again or press Enter to start editing.
Type your new content.
You can add, remove, or rewrite anything directly in place.
Apply styling if needed.
Use the Style panel to adjust font, size, color, spacing, or any typography settings for that element.

Click the image you want to replace.
This selects the image element on the canvas.
Open the Settings panel.
Use the gear icon in the right sidebar to access image options.
Choose "Replace Image."
This opens your asset selection window.
Upload a new file from your computer or select an existing image from the Assets panel.
The new image updates instantly on the canvas.
If that image is used in multiple places (via Components or Symbols), those instances update as well.

Select the icon element on the canvas.
This highlights the Embed block that contains your current SVG code.
Open the Embed editor.
Click Edit Embed in the small toolbar that appears above the element or in the Settings panel.
Remove the existing SVG markup.
You'll see code that looks like <svg>…</svg>. Select and delete it.
Paste your new SVG code.
Insert the full markup for your new icon, starting with <svg> and ending with </svg>.
Save your changes.
Click Save & Close to update the element.
Your icon refreshes immediately on the canvas, and if it's used inside a Component, all linked instances update automatically.

Select the element that contains the animation.
Click it on the canvas to highlight the interaction connected to it.
Open the Interactions panel using the ⚡ icon in the right sidebar.
This panel shows all triggers and actions applied to the selected element.
Choose the interaction you want to edit.
You can adjust scroll, click, hover, load, or other triggers linked to that element.
Update the animation settings.
Change easing, timing, movement values, opacity, scale, or any other properties included in the action list.
Preview the result.
Use the eye icon in the panel to test how the interaction behaves before publishing.

Open the Pages panel from the left sidebar.
Find the page you want to edit and click the gear icon beside its name to open Page Settings.
Scroll to the SEO section and update the following fields:
- SEO Title
- Meta Description
- Open Graph Image
Save your changes. These details improve visibility on search engines and control how your page appears when shared.

Add the Lottie element to your canvas.
Open the Add panel, search for Lottie Animation, and drag it onto the section where you want it to appear.
Upload your Lottie file.
With the element selected, go to the Settings panel and choose Upload JSON. Pick your .json file from your computer.
Set how it behaves on the page.
Choose the playback type that fits your design:
- Loop – plays continuously.
- Scroll – moves through frames based on page scroll.
- Click – starts when the element is clicked.
- Hover – activates when the cursor enters the element.
Adjust speed and direction if needed.
The Settings panel lets you fine-tune the animation's timing or frame progression.
Preview to confirm everything works.
Use the Designer preview mode to see how the animation behaves in real time.