SVG icon use
This method is simpler for static icons that do not require extensive customization or dynamic styling.
- Prepare SVG File: Ensure your SVG file is ready for use.
- Add an Image Element: In Webflow, add an "Image" element to your design.
- Upload SVG: Upload your SVG file to the Image element, similar to how you would upload any other image file.
- Styling: You can then adjust the size and position of the SVG using Webflow's standard styling options for image elements.
- SVG element color : Open the SVG from Assets in a text editor, replace the HEX color with your chosen color, save, and overwrite the original file.
Customizing colors
This template uses Webflow’s Variables feature, allowing you to update colors across the entire site with ease.
- Open the Variables panel.
- Select the color variable you want to edit.
- Adjust the value - your changes will automatically update throughout the site.
Changing fonts
To adjust the font family, open the Variables panel and select the font family you want to modify.
- Open the Variables panel.
- Open Site Settings > Fonts and make your changes.
- After uploading your font in Site Settings, go to the Variables panel and choose the new font family.
Template support
We’re happy to help! Reach out via the Webflow Template Support page and we’ll respond soon.
To begin building your site, duplicate the Starter Page and start editing or adding sections from other pages.
GSAP guide
Every GSAP script used in this template is listed on this page, along with instructions on how to find and edit each one. Each code block includes clear explanations to help you understand exactly how it works.
The script is located in Site Settings under the Footer Code area.
<script>
//COUNTER ON SCROLL
document.querySelectorAll('.counter-animation').forEach(el => {
const finalValue = el.textContent.trim();
gsap.set(el, { textContent: "0" });
ScrollTrigger.create({
trigger: el,
start: "top 80%",
once: true,
onEnter: () => {
gsap.to(el, {
duration: 3,
scrambleText: {
text: finalValue,
chars: "0123456789",
revealDelay: 0.2
},
ease: "power3.out"
});
}
});
});
</script>Important notes
- Always resize your images before uploading them. Large, unoptimized files can slow down your website, so choose the right size for the best performance.
- Compress images: To improve site loading speed, compress your images to AVIF or WebP formats using the built-in Image Conversion tool.
- Clean up: Before publishing your site, clean up unnecessary interactions and remove unused CSS styles to ensure optimal performance.
- SEO: Before publishing your site, be sure to edit the Title tag, Meta description, Open graph image, and other SEO elements.
- Audits panel: Before publishing your site, use Webflow’s Audit panel to identify and fix accessibility issues, ensuring your website is user-friendly and compliant.