Instructions

Introductory Guide: Use this simple guide to start editing your website smoothly.

Support:

Discover Webflow University's extensive library of video lessons to help you get started with ease.

- Getting Started with Webflow 🔗- Lesson library 🔗

Before Publishing:

Delete unused sections/pages, clean up CSS classes, clean up unused interactions and delete unused components.

- Style manager 🔗- Using Interactions 🔗

Animation

In this template, we are using Webflow Interactions, and Webflow GSAP. There is no code for these animations all inbuild in the Webflow.

- Interactions-with-gsap 🔗

Custom Code

This template incorporates Lenis Smooth Scroll. You can locate the code in the page settings under the </body> section.

- Lenis SmoothScroll 🔗

Customize the Progress Bar

This Site as interactive tabs with automatic rotation and a visual progress bar that fills over each tab’s duration. Active tab text fades in smoothly, and manual switching resets the animation without interrupting auto-play. Features include adjustable rotation speed, customizable progress bars, smooth text fades, and full control over styles and transitions via CSS and JS.

Zeltac slider (Home Page)

Zeltac Slider is a no‑code Webflow app for creating responsive sliders with live preview. It automatically generates slider elements, styling, and scripts, supporting various slider types, transitions, autoplay, loops, vertical layouts, touch navigation, and CMS content. To use, add Zeltac Slider from the Webflow App Marketplace, drag it onto your page, and customize slides and settings directly in Designer.

-Zeltac Slider -Get Zeltac Slider

Breakpoints:

Test your design on various devices by selecting different options in the viewport's Bottom bar.

Backups:

Restore previous versions from the Backups section in the left sidebar and clicking Settings in case of accidental deletions.

Editing Images and Text:

Edit text by double-clicking on static content or use the CMS section for dynamic text. Replace images easily by clicking on them and choosing "Replace Image."

Dynamic Content (CMS):

Learn how to manage and update dynamic content using the CMS, which instantly updates referenced content across pages.

Components:

Utilize reusable components for efficient editing and consistency across layouts.