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:

• 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 column.

📝 Note: Border width is not responsive and applies globally across all devices. Unlike Dimensions (padding and margin), there is no per-device control for border width on Section Columns. To apply different border widths on specific screen sizes, use custom CSS with media queries — see Custom CSS Workarounds for Non-Responsive Controls below.

---

Custom CSS Workarounds for Non-Responsive Controls

Some Section Column style properties, such as border width, do not have per-device responsive controls. To apply device-specific values for these properties, you can add custom CSS using media queries.

Example: Set a different border width on mobile

Navigate to Appearance > Customize > Additional CSS and add a snippet like the following.

To apply the change to all Section columns:

@media (max-width: 600px) {
  .wp-block-themeisle-blocks-advanced-column {
    border-width: 4px !important;
  }
}

To target a specific column only, use its unique CSS ID. You can find the ID by inspecting the column element in your browser's developer tools — it follows the pattern wp-block-themeisle-blocks-advanced-column-ID, where ID is the column's unique number:

@media (max-width: 600px) {
  #wp-block-themeisle-blocks-advanced-column-ID {
    border-width: 4px !important;
  }
}

• Replace 4px with the border width you want on mobile.
• Replace ID with the actual number shown in the element's ID attribute.
• The max-width: 600px breakpoint targets screens up to 600 pixels wide. Adjust this value to match your theme's mobile breakpoint if needed.
• The !important flag is needed here to override the inline styles that the block editor applies directly to the element.

💡 Tip: Responsive controls are available for padding, margin, block visibility, and column order. Border width is not included in these responsive controls and requires the CSS approach described above.

---

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