Instructions

In this learning path, you’ll discover all the things that make Webflow a unique, visual-first website experience platform. Whether you’re a designer, developer, marketer, or other Webflow champion, you’ll walk away with the foundations you need to start your journey.

Make the most out of this template by familiarizing yourself with Webflow basics using Webflow 101 Crash Course.

This course provides an overview of the Webflow UI, basic building blocks of the web, positioning and layout basics — all of which you’ll need to know to get up and running with this template.

Google Material Icons is a comprehensive collection of symbols designed by Google following their Material Design guidelines. These icons are available as a font family already incorporated into this project, making them lightweight and easily scalable.

To find the exact icon you need, visit the Material Icons webpage where you can browse the complete library. Click on any icon to copy the Icon name from the icon menu.

To add a new icon or replace an existing one, simply add a text element with the class "material-icons" and insert the icon name in the text field. You can customize the icons appearance using standard CSS properties such as color, font-size or font-weight.

SVG is a powerful web technology that allows designers and developers to create interactive and scalable graphics for their websites.
‍
To edit an SVG inside your Webflow project, click on the "Open Code Editor" button within the Embed element settings. This will open the code editor where you can modify the SVG code directly.
‍
To find inspiration or reference additional SVGs, you can browse online libraries where you can view and download various vector graphics. Simply copy the SVG code from these resources and paste it into your project's code editor.
‍
You can style and animate your SVGs using Webflow's visual design tools. Apply color changes, gradients, opacity adjustments, borders, and more through the standard styling options. Enhance user experience by adding hover effects, click triggers, or complex animations using Webflow's interactions panel.

Not sure where and how often you can use this Webflow template? This licensing guide breaks down all the rules for you.

Want to get in touch?