The Section Block

📝 Note: These blocks are part of the Otter Blocks plugin, which you can get from here. 

📝 Note: The blocks' appearance can be improved using the Otter features, such as Transform to Sticky, Visibility conditions, Dynamic Values or Images, as well as Counting / Typing / Loading animations, and Patterns.

The section block is a very important feature of this plugin because it allows the creation of more pleasing content by combining different blocks in multiple columns, as well as applying this block's specific settings to make a more interesting aspect.

Apart from the general options that are available for any block, there are specific customizations available for the section parent (hovered with blue) and section column (right under the Section).

Section Parent

The section parent is the top level of the section, which has different customizations than the columns. It allows you to set a full-width or a wide width, which can be useful in the case of Hero Images/Sections. Apart from this, you can control the vertical alignment of the inside block:

In the right sidebar, you will find two panels with available options:

Settings

• Columns & Layout - change the number of columns, which will unlock multiple layout options.
• Section Structure - here, you can control the dimensions of the section block, like the maximum content width and minimum height, as well as the HTML tag.
• Responsive - here, you will find options to hide the section on desktop/tablet/mobile. Also, if you have more than one column, an option to reverse columns in mobile devices will be available too.

Style

• Dimensions - adjust the padding and margin according to the device type.
• Background & Content - create a more attractive appearance by adding colors to the available areas.
• Border - set a distinct color, adjust the width and radius, or add a box shadow to the section.
• Shape Divider - customize the section using outstanding shapes.

Section Column

The section column offers different customizations. You can control its vertical alignment too.

Unlike the parent block, the settings are less diverse, and they are divided into Layout and Style.

Layout

Column Structure- here, you can control the column width and the HTML tag.

Style

Here, all the options of the parent block are available except for the Shape Divider.

Use cases for the Section block

• building a stunning partners section

📝 Note: In this example, we have used the section block in combination with the icon block to present multiple platforms' logos and to take benefit of the section settings, such as full-width layout, gradient background, and 3 columns layout.

• creating a responsive About Me section

• building a custom Blog Header using the Custom Layouts