How to use Sections in Webflow Designer

Section Component Overview

All projects come with a Section class that can be reused for most of the sections in the project.

• By default all sections have a set padding from top and bottom. In most instances we have a section that has 96px from top and bottom as padding.
• We’re adding position Relative to each one of the sections by default.
• All sections are Transparent by default.
  
• As we’re scaling the section down to Tablet, Mobile Landscape and Mobile, we’re changing the Top and Bottom Padding to reflect the designs.
• Section element has Flex Vertical Center Applied to it
  

This came in really handy in our instance as from time to time clients can come to ask if we can reduce the padding across the site to increase it or decrease it.

If we decide to have unique names for each one of the sections we’ll end up in a situation where we have to go page by page, section by section and change the paddings inside the sections.

Another thing to note is that each section in Webflow needs to have a <section></section> tag:

Standardising Sections

1. Homepage Hero Section → We’re always creating this class when approaching Development. Usually they are pretty unique so it’s best that we keep it styles for that specific section unique.
2. {Page Name} Hero Section → If we continue to see a trend where pages have a unique set up for the hero we can continue creating unique styles for the hero sections of different pages. Usually the fastest way to create this unique class is to duplicate the Section class and rename it to {Page Name} Hero Section
3. {Sub Page} Hero Section → If we notice that there’s a pattern where most of the pages have a similar hero section we can start creating global classes that can be reused. This is great in order to start creating a design system.
4. Section + BG Navy 100 → In the case where we need to change background color of the section, we can add an additional class to the section like: Section BG White 100 more about global color sections here
5. Section + Padding L → As we have global padding classes, more about global padding here, we can increase or decrease padding by applying one of those classes like: Section Padding XS
6. Section + Overflow None → If we want to add an overflow none property to a specific section.
7. Section + Padding Bot None → If we see a trend that the bottom of the section doesn’t need to have padding, same can be done for the Padding Top None
   

When to create an additional class for the section?

‍

If we come to a place where we need to add more than 2 combo class to the section, we’re usually creating a new unique class addon. Example would be

Section BG White 100 Padding L Overflow None → Section Testimonial Section

Why should we avoid this kind of stacking? When sections start being this unique, from time to time we might want to change a property on tablet only or mobile only and we’ll end up messing up the global Overflow None class. That’s exactly what we don’t want to do, so it’s best practice to create a new unique class for those instances.

‍

What if we’re not in charge of the design?

While working with many design agencies and clients who hand off designs, we’ve had a look at many different design files. Some of them we’re unbelievably good but some not so much.

Before working with the client, we’re usually consulting them that we will try to:

1. Have our designer clean up the file and prepare it for development (A much better option)
2. Explain to the client that we will start standardising in Development
   

This will later apply for all items as margins, paddings and font sizes.

We won’t be actually changing the design, just making sure that we have a proper Padding structure for the sections and that we don’t have to create a unique set up for every single section on the site.