How to Use Classes in Webflow (The Easiest Way)

For people wondering How to Use Classes in Webflow, we have set up this quick step-by-step tutorial for you. Using classes in Webflow is essential for creating efficient, consistent, and maintainable web designs.

Further in the post, we will be using elements such as Headings, Image and Text Placeholder and Call to Action (like BUY NOW).

On the left sidebar, you will see a “+” icon, which consists of the Elements Panel. Clicking this icon will open the panel and you can easily add the elements.

Classes are used to maintain consistency in elements. So let’s say we assign a class to all the Call-To-Action buttons on your website, and then they’ll pick the same font, padding, margins, colors and other style options. Let’s practically see how.

1. Add Elements

Here I have added a container on the page and further will add:

• Heading
• Place Holder for Image
• Text Blocks (as many as you need, I have added three)
• Button

2. Name the Classes for Elements in Webflow

Here I have named the container as Product Card.

Name other elements as well. Here I have named Image placeholder as Product Image and Text Blocks as – Text Block 1, Text Block 2, and Text Block 3. You can name the elements as per your requirements.

3. Set Styles for Classes

Now, you can pick classes one by one and set the style for each class. I have set the Font Weight of Text 1 to 700. You can set Color, Font Size, Padding, Margin, Alignment and more as per your design requirements. In case you noticed I also changed the color of the button from blue to black.

Moreover, we can also set the width, margins and padding of the Text Blocks (Discount Price). All these features are available on the right side of the screen under the Style Panel section.

Now let’s change the width, margins and padding of the Product Card.

Read More: Want to know how to hide a page in webflow. Click Now.

4. Apply Classes in Webflow

Now let’s add the same elements once more to test out if our classes are working. Select each element one by one and assign the respective class.

I have selected the container and assigned the class as Product Card. Voila, you can see it has adopted all the styles of the Product Card as we have set earlier.

The moment you apply classes to the elements, they will pick up the styles we set earlier.
Note – You have to edit the content manually, classes only replicate the styles.

5. Bonus Tip – Add Subclasses in Webflow

Now, what if I want to show this button as Inactive because the product is Sold Out? In this case, we don’t need to create a different class, but a Subclass. Let’s see how:

1. Select the element.
2. Go to the Class Bar. Click and type the subclass name and press Enter. Your Subclass has been created. (for ex in the below screenshot “Button” was the class that was already assigned and now to show it as inactive we created another Subclass named “Inactive”).
3. Now we’ll change the style by setting the color of the “BUY NOW” button to Grey to show it as inactive.
4. For future use, you can easily create the call-to-action buttons and assign the Class as “Button” and Subclass as Inactive and it will adapt the same style.

Here is a great video about Classes and subclasses in Webflow.

The good part is Subclass will only apply to the particular element for which it has been created but the rest of the elements which have a “Button” Class applied to them, will still be Blue.

I hope this article has helped you to understand How to use Classes in Webflow. For me, it was quite similar to Styles in Figma. If you have any questions/suggestions regarding classes which I have missed, do comment below. We are there to help.