Instructions
First time using this template? This guide will show you exactly how to customize and make it your own—clear steps, no confusion, just a smooth start.
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.
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.
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.
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.
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.
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.
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.
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 GSAP2. 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.
