Get Started with the Template

How to Update Text and Images

Updating Text

1. Select the text element on the canvas. Click once to highlight the text field.
2. Enter edit mode. Click again or press Enter to start editing.
3. Type your new content. You can add, remove, or rewrite anything directly in place.
4. Apply styling if needed using the Style panel.

Updating Images

1. Click the image you want to replace.
2. Open the Settings panel using the gear icon in the right sidebar.
3. Choose "Replace Image."
4. Upload a new file or select an existing image from the Assets panel.
5. The new image updates instantly across the canvas.

How to Use Custom SVG Icons

1. Find the icon element you want to replace on the canvas.
2. Open the Settings panel for that element.
3. Locate the SVG embed block — the icon markup lives inside an HTML embed element.
4. Paste your new SVG code into the embed block, replacing the old SVG markup.
5. Save and publish. The new icon appears immediately.

Customize Animations & Interactions

1. Select the element that has an animation or interaction.
2. Open the Interactions panel (the lightning bolt icon in the right sidebar).
3. View existing triggers — hover, click, scroll into view, page load, etc.
4. Edit or remove actions within each trigger sequence.
5. Add new interactions by clicking the + button next to a trigger.
6. Adjust timing, easing, and targets as needed.

SEO & Meta Settings

1. Open the Page Settings for each page (gear icon in the Pages panel).
2. Fill in the SEO Title — keep it under 60 characters.
3. Write the Meta Description — aim for 150–160 characters.
4. Set the Open Graph image for rich social sharing previews.
5. Enable/disable indexing via the "Exclude from search results" checkbox.
6. For the homepage, also update the site-level SEO settings.

Using Lottie Files

1. Find the Lottie element in the canvas (used for the hamburger icon animation).
2. Select the element and open the Settings panel.
3. Locate the "Lottie Animation" source field.
4. Replace the JSON file URL with your own Lottie animation file URL.
5. Adjust playback settings — loop, autoplay, direction, and speed — as needed.

GSAP Customization

The Dojeen template uses GSAP 3 + ScrollTrigger for scroll-based reveal animations.

1. Find the custom code block in your page or site settings that loads GSAP.
2. Locate the animation definitions — typically using gsap.from() or gsap.to() with ScrollTrigger.
3. Adjust the target selector, duration, ease, and properties to match your design needs.
4. Use scrub: true for scroll-linked animations, or remove it for trigger-based animations.
5. Test responsiveness — use ScrollTrigger.matchMedia() to apply different animations on mobile vs. desktop.