Skip to content

Sections

A Section is a portion of the page that aims at being visually distinct from the rest of the content. Sections are usually top-level blocks that you add one after the other; the sequence of sections is what makes your page layout.

Each Section that you create is composed by several different Areas. In their most basic form, you can think of Areas as columns, which are nothing else than containers for content blocks.

When you add a Section to your page, you’ll need to select how many areas you want to display: to do that, you can select from one of the available presets.

Alternatively, you can decide to create your own grid structure, by clicking on the Grid Designer button. For more about the Grid Designer, see the relative section in this document.

After you’ve added the Section to the page, please note that its Areas are already filled with some dummy content that you can remove.

When a Section is currently selected in the Block Editor, you’ll be able to edit its properties by using the controls available in the sidebar on your right. Here are the properties that define a Section:

Section layout: if you have selected a Section that is composed by, 2 or 3 Areas, you can choose how big those Areas will be. By default, the Areas will be the same in width, which means that, if you’ve chosen a 2-Area layout, each one of them will be covering half of the total Section width. When selecting a different type of arrangement for the Section, the content you had previously added to your Areas will adapt to the new layout.

Here’s a complete list of Section layouts:

  • 1 Area, full-width
  • 2 Areas
    • 50% in width each
    • 33%-66% width
    • 66%-33% width
    • 25%-75% width
    • 75%-25% width
  • 3 Areas
    • 33% in width each
    • 25%-50%-25% width
    • 25%-25%-50% width
    • 50%-25%-25% width

Section settings:

  • Make columns equally tall: if this setting is set to ON, all Areas belonging to the Section will be forced to have the same height; if the setting is OFF, the individual height of each Area will depend on its content.
  • Dimensions: through this panel it is possible to alter the spacing properties of the Section. The spacing properties are different depending on the device you want to target: desktop computers, tablets, and mobile devices. Spacing properties can be altered either by selecting both the values and units.
    • Height: defines the overall height of the Section. By default, when specifying a height for the current section, the CSS output will produce a min-height rule; if you instead choose to lock the height of the section, the CSS rule being applied will be height.
    • Margin: governs the margins of the Section.
    • Padding: governs the paddings of the Section.
  • Background: from here you’ll be able to change the background for the Section. You can choose to either have a solid color as background element, or pick an image from the Media Library. As for the Dimensions settings, the Background settings are dependent on the device width you want to target

Unit control with multiple unit values

Gutters

When working with grid systems, the notion of gutter comes into play. The gutter of a grid is the horizontal space between different columns. For consistency reasons, this setting shouldn’t belong to one specific section: that would lead to potentially have distinct sections, one next to the other, with different spacing properties, leading to visual breaks in the page grid.

For this reason, Grids provides a global page-wide gutter setting.

In order to access this setting, click on the Grids icon in the upper right corner of the editing screen, and open its page settings panel. As with margins and paddings, the gutter control is also dependent on the device it’s being applied to.

Keep in mind that gutter values that are too large to be contained in the grid will almost surely lead to unwanted visual results, especially when using fluid units, such as percentages or vw. The optimal choice for gutter units is to use pixels, instead.

Display

From the Display panel in the sidebar on your right, you will be able to select whether the Section should be/not be visible in the currently selected device width.