Instructions

Before making any changes, take a few minutes to explore the project structure. The template is organized into pages, sections, Components, and reusable styles to make customization simple and consistent. Understanding how everything is connected will help you work faster and avoid accidentally modifying shared elements.

Replacing your content is straightforward. Simply select any text element to edit its content directly on the canvas, replace images from the Element Settings panel, and update buttons or links using the corresponding settings. Every section has been designed so you can personalize your website without changing its layout or animations.

The template uses a consistent design system built with reusable classes and Global Variables. Instead of styling each element individually, update colors, typography, spacing, or other design values once, and every connected element will automatically reflect those changes. This keeps your branding consistent throughout the entire website.

All animations have been built using Webflow Interactions (IX3) and are organized to make editing easy. You can open the Interactions panel to adjust timings, easing, movement, or triggers without rebuilding animations from scratch. If you'd like to create your own effects, simply duplicate an existing interaction or create a new one while preserving the overall user experience.

Explain how Components are used throughout the template, how shared instances work, and what happens when you edit a Component. You'll also learn when to duplicate or detach a Component to create unique sections without affecting the rest of the project.

If you have questions while customizing the template, consult this documentation first, as it covers the most common customization tasks. If you encounter an issue or need additional assistance, you can contact me using the Email: tungps0712@gmail.com. Future template improvements and compatibility updates will be available as new versions are released.