Instructions

How to Edit Headings, Text, and Links Globally?

‍

1. Select the Element: Click on the heading, paragraph, or link you want to style.

2. Open Style Panel: Go to the right-hand side and open the Style Panel.

3. Choose Global Selector: At the top, select “All [element name]” like “All H1 Headings” or “All Paragraphs.”

4. Apply Changes: Now any style you set—like fonts, colors, or spacing—will update everywhere that element appears.

‍

How to Create Symbols for Reusable Elements?

‍

1. Select the Element(s): Choose the single or group of elements you want to reuse.

2. Right-Click: Click and select “Create Symbol” from the menu.

3. Name Your Symbol: Give it a clear name like "Navbar" or "Footer" for easy identification.

4. Reuse Anywhere: Drag and drop the symbol into any page to keep your design consistent.

‍

How to Set a Responsive Image?

‍

1. Select the Image: Click on the image you want to make responsive.

2. Adjust in Style Panel: Set the width to 100% and use max-width if needed to control scaling.

3. Preview Responsiveness: Use device preview mode to check how it looks on tablet and mobile.

‍

How to Edit Typography for All Text Elements?

‍

1. Select a Text Element: Click on any heading or paragraph.

2. Choose Global Style: In the selector dropdown, pick “All Headings” or “All Paragraphs” to edit them all at once.

3. Adjust Typography: Change font size, color, weight, and spacing in the Style Panel.

4. Test Responsiveness: Preview on tablets and mobiles to make sure the text looks great everywhere.

‍

How to Change Background Images?

‍

1. Select the Section: Click the section or element with the background image (like a div or hero block).

2. Open Style Panel: On the right, open the Style Panel for editing.

3. Find Background Settings: Scroll to the "Background" area.

4. Replace Image: Click the background thumbnail or "Choose Image," then pick or upload a new one.

5. Adjust Settings: Customize position, size, repeat, overlay, and scroll behavior as needed.

6. Preview Responsiveness: Check how it looks on desktop, tablet, and mobile views.

7. Save and Publish: When satisfied, save your changes and publish your site.

‍

How to Update Your Meta Description and Favicon?

‍

To boost SEO and strengthen your brand, update your meta description and favicon:

Meta Description: Go to Project Settings > SEO tab, then add or edit your meta description. This helps search engines know what your page is about.

‍

Favicon: In Project Settings > General tab, upload a custom favicon. This small icon shows in browser tabs and bookmarks, making your site easily recognizable.

‍

How to Add or Edit CMS Items?

‍

1. Open CMS Panel: Go to the CMS Collections panel in Webflow Designer.

2. Select Collection: Click the collection you want to edit, like “Blogs” or “Projects.”

3. Add or Edit Item: To add a new item, click “+ New Item.” To edit an existing one, click on the item name.

4. Fill Content Fields: Enter the title, description, images, and any other custom fields.

5. Adjust Settings: Configure featured image, categories, tags, or SEO fields as needed.

6. Preview Changes: Check how the content displays on the template page and across devices.

7. Save and Publish: Click “Save” and then “Publish” to update your live site.

‍

How to Use GSAP - Text Animations in This Template?

‍

1. Add Class: Assign one of the animation classes (hero-title, section-title, inner-page-heading, big-text, primary-design-text, secondary-grey-text, get-intouch) to your text element.

2. Scroll Trigger: Animations automatically trigger when the text scrolls into view.

3. Customization: Adjust animation properties like duration, distance, scale, or blur in the JS code if needed.

4. Advanced: Add new classes to the JS arrays to animate additional text elements.

‍

Webflow Interactions with GSAP