Instructions

How Can I Edit Globally a Heading, Paragraph, Links, etc.?

Select the Element: Click on the element you wish to edit (this could be a heading, paragraph, link, etc.).

‍Open the Style Panel: On the right-hand side, open the Style Panel where you can manage all style-related settings.

‍Select the Global Element: Under the "Selector" field at the top of the Style Panel, choose the option that says "All [element name]". For example, if you are editing a heading, it will show "All H1 Headings" or "All Paragraphs" for a paragraph.

‍Apply Styles: Once selected, any changes you make to typography, color, spacing, etc., will apply globally to all instances of that specific element type throughout the project.

How Can I Create a Symbol for Reusable Elements?

Select the Element(s): Highlight the element or group of elements you want to reuse.

Right-click: Select "Create Symbol" from the context menu.

Name the Symbol: Give your symbol a meaningful name (e.g., "Footer" or "Navbar").

Use It Across Pages: Now, you can drag this symbol into any page to reuse it across your template.

How Do I Add Interactions to an Element?

Select the Element: Click the element you want to animate.

Go to Interactions Panel: On the right-hand side, click the "Interactions" tab.

Add Interaction: Choose from scroll, hover, or click interactions and customize them.

Preview and Save: Test your interaction and save when satisfied.

How Do I Set a Responsive Image?

Select an Image: Click on the image you want to set as responsive.

Open Style Panel: Adjust the width to "100%" and set the max-width value as necessary.

Check on Different Devices: Preview how the image behaves on tablet and mobile devices using the device preview mode.

How Do I Add a Form to My Page?

Drag and Drop a Form Block: From the Elements panel, drag the "Form Block" into your page.

‍Customize Fields: Add or remove input fields, buttons, or text areas as needed.

‍Style the Form: Use the Style Panel to edit the appearance of the form elements (fields, labels, buttons).

‍Set Up Form Notifications: In the settings panel, configure the form submission notification email.

How Can I Edit Typography for All Text Elements?

Select a Text Element: Click any text element (e.g., heading, paragraph).

‍Choose Global Text Style: In the "Selector" dropdown, choose "All Paragraphs" or "All Headings" to apply changes globally.

‍Adjust Font Style: Modify font size, color, weight, and spacing in the Style Panel.

‍Check Across Devices: Ensure your typography adjusts well for tablet and mobile views.

How To Edit The Team Section?

Locate the Team Section: On your page, find the team section that contains the team member profiles.

‍Select a Team Member: Click on the individual team member block you want to edit (this typically includes an image, name, and description).

‍Edit Content:

Change Image: Click on the image and replace it with the desired team member's photo using the "Replace Image" option in the Settings panel.

‍Edit Text: Click on the name and role text to modify the content directly.

‍Style the Section: Use the Style Panel to adjust font, spacing, alignment, and other design elements to match your desired look.

‍Repeat for Other Team Members: Follow the same steps for each team member block you want to modify.

‍Check Responsiveness: Switch to mobile and tablet views to ensure the team section looks good on all devices.

‍Save and Publish: After making the necessary edits, save your changes and publish the updated site.

How To Change The Background Images?

Select the Section: Click on the section or element that contains the background image (this could be a div, hero section, or any block with a background).

‍Open the Style Panel: On the right-hand side, open the Style Panel, where you can edit styles for the selected element.

‍Locate Background Settings: Scroll down to the "Background" section in the Style Panel.

‍Replace the Image:Click on the background image thumbnail or the "Choose Image" button.Select an image from your asset library or upload a new one by clicking the “Upload” button.

‍Adjust Background Settings:Customize the background settings like "Position," "Size," "Repeat," and "Overlay" to fit your design needs.You can also adjust options like "Fixed" or "Scroll" for background behavior.

‍Preview Across Devices: Check how the background image displays on different devices (desktop, tablet, and mobile) using the responsive view tools.

‍Save and Publish: Once you're happy with the background image and its settings, save your changes and publish the site.

Use SVG Icons for a Superior Visual Experience

For the best visual quality and performance, we recommend using SVG icons. You can explore a wide selection of SVG icons at flaticon.es to enhance your design.

Optimize Your Images for Faster Loading

To improve your site’s loading speed, we recommend optimizing all your images using tools like Tinypng.com.You can also run an image responsiveness check in Webflow by pressing Shift+Ctrl+I to ensure your images are properly sized for different devices.

Update Your Meta Description and Favicon

To improve SEO and branding, make sure to update your meta description and favicon:

‍Meta Description:
‍
Go to the Project Settings in Webflow.

Under the SEO tab, add or edit your meta description. This helps search engines understand your page content.

‍Favicon:

In the Project Settings, navigate to the General tab.

Upload a custom favicon that represents your brand. This icon appears in browser tabs and bookmarks.

How to Edit

GSAP Animations

This section explains how to manage and customize the GSAP animations used throughout the site, including
fine-tuning animation behavior, removing animations, and understanding the animated elements.

Element Map

The following classes are used to apply GSAP animations:

.has_fade_anim :      Fades and slides elements from top, bottom, left, right, or in (fade only) on scroll or page load.

.img_anim_reveal:     Reveals image with zoom effect on scroll.

.has_char_anim:     Animates each character of text (SplitText) with staggered opacity and movement.

.has_word_anim:     Similar to .has_char_anim, but animates by word instead of character.

.has_text_reveal_anim:    Reveals text characters with a vertical slide and fade-in effect.

.has_text_move_anim:   Animates text lines with 3D perspective and rotation (like flipping in).

.img_anim_group_scale img / .has_image_zoom img:   Smooth zoom-in or zoom-out effect while scrolling.

.nb_common_img, .nb_common_img_alt:  Adds/removes .is-inview class using IntersectionObserver when images enter the viewport.

Customizing Key Variables

You can control each animation using data-* attributes on the HTML elements. Below is a list of common variables and how to change them:Fade Animation (.has_fade_anim)
‍

<div class="has_fade_anim"
     data-fade-from="left"
     data-fade-offset="100"
     data-duration="1.2"
     data-delay="0.3"
     data-ease="power4.out"
     data-on-scroll="1">
  Content
</div>

Removing GSAP Animations

To completely disable the animation:
‍
Option 1: Remove the class Simply delete the has_fade_anim class from your HTML element.

Option 2: Comment/remove the JS blockIn your main JavaScript file, comment out or delete this entire GSAP logic block:

Vidgenie

Instructions

How to Edit

GSAP Animations

Experience the Magic