Section

The Section component (on 📕 Utility components → ↳ Section) is an empty website section: an outer section with an inner container. It already has the ACSS section spacing, side gutter and content width applied, so any section you build inside it lines up with the kit’s templates and follows your plugin settings.

How it’s built

Layer	What it does	Linked to
Section (the component itself)	Full website width, with padding at the top, bottom and sides, and a background color	D Website Width, Desktop/D Section Space M (top and bottom), Desktop/D Section Gutter (sides), Backgrounds/BG Default
Inner Container	Holds your content and keeps it at the content width, centered	D Content Width, gap Desktop/D Content Gap

The Device property switches between Desktop and Mobile. The Mobile variant uses the Mobile versions of the same variables (M Website Width, Mobile/M Section Space M and so on).

In ACSS terms, the outer frame is a section and the inner frame is its container: the same structure a developer builds in WordPress. Read more about content width and section spacing in the ACSS docs.

Build a section

1. Drag the Section component from the Assets panel onto your page, or copy it from the Section page.

2. Set Device to Desktop or Mobile.

3. Add your content inside Inner Container: headings, text, buttons, images or a grid from the templates.

4. Change the inner layout if you need to, for example switch Inner Container from horizontal to vertical auto layout.

Change the spacing or background

• Section padding: select the section and pick another section spacing variable for the top and bottom padding, for example Desktop/D Section Space L for a roomier section.
• Background: change the section’s fill to another background variable, for example Backgrounds/BG Dark for a dark section. Then use the light text colors (Text/Text Light) inside it.
• Width of the content: link Inner Container’s width to a narrower width variable, for example D Width 60, for a text-only section.

To change these values for every section in the file at once, change them in the plugin instead, on the Spacing and Layout screens.

Good to know

• The section padding, gutter and content width are the same ones the templates use, so a section you build here sits flush with the template sections above and below it.
• Use the Sitebuilder when you want ready-made content rather than an empty section.