Instructions
Course
If you don't have experience with Webflow, we recommend enrolling in the Webflow 101 Crash Course. This course will help you learn the basic possibilities of Webflow and understand the Webflow design process.
Services Carousel (GSAP)
The draggable services carousel on the Home page is powered by custom GSAP code. This functionality allows any block to be dragged horizontally within its parent container. To activate this feature, at least two elements are required: a parent block with the “overflow: hidden” property applied in the Style panel, and a child block placed inside it.
How to enable and configure:
- Select the wrapper (parent) block in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attributes:
data-carousel="wrapper"— defines the wrapper (parent) block of the carousel.data-carousel-mass="1.36"— controls how “heavy” the carousel feels after releasing it from dragging. - Select the inner (child) block in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attribute:
data-carousel="inner"— defines the inner (child) block of the carousel.
How to disable the animation:
To disable the animation, remove all the data atributes from the parent and child blocks.
Spacing
To manage vertical spacing, we've used the utility classes "Margin Bottom". To add bottom space to an element, wrap it into a <div> tag with applied one of the following classes:
- Margin Bottom Extra Small
- Margin Bottom Small
- Margin Bottom Medium
- Margin Bottom Large
Colors
All the colors in this template are set globally using Webflow variables. You can modify any color across the entire website in the variables panel.
Fonts
You can modify any font family across the entire website in the variables panel. To change other font parameters of your website, click on the "Body" element in the Navigator panel, then select the "Body (All Pages)" selector from the Style selector dropdown in the Style panel. Afterward, modify the font parameters in the Typography section.
SVG Icons
To change the color of an SVG icon, follow these steps:
- Open the Assets panel.
- Download the SVG icon file.
- Open it using a code or text editor.
- Locate and modify the color value within the code.
- Save the changes.
- Upload the modified icon to your Webflow website.
