Themeisle Docs

Appearance

The Section Block ​

The Section block lets you build flexible, multi-column page layouts in the block editor. It allows the creation of more pleasing content by combining different blocks in multiple columns, with separate settings for the section container and each individual column.

In this article

📝 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.

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.

Responsive column layout and breakpoints ​

The Section block arranges its columns differently on three fixed screen sizes:

  • Desktop - screens 960px and wider.
  • Tablet - screens between 600px and 959px.
  • Mobile - screens 599px and narrower.

These breakpoints are built into the block. There is no setting, global option, or filter to change the width at which the block switches between desktop, tablet, and mobile.

For each screen size, you can choose how the columns are arranged. Switch the editor's device preview using the Desktop / Tablet / Mobile icons in the top toolbar, then select the whole section and open Settings > Columns & Layout > Layout. The layout you pick applies only to the device you are previewing.

To make your columns stack on top of each other on smaller screens, choose the Collapsed Rows layout for that device. By default, a multi-column section uses Collapsed Rows on mobile, so columns stack below 600px, but keeps them side by side on tablet. This is why two-column layouts can still look cramped between 600px and 959px. Switching the Tablet layout to Collapsed Rows stacks the columns across the whole tablet range without any custom code.

[Screenshot: The Columns & Layout panel with the Tablet device preview active and the Layout set to Collapsed Rows]

📝 Note: The Reverse columns option appears only when the layout for that device is set to Collapsed Rows. See How to reverse columns on mobile using Otter's section block.

Force columns to stack at a custom width ​

Because the breakpoints are fixed, the built-in layouts can only switch at 600px and 960px. If you need the columns to stack at a different width - for example, to stack a two-column section up to 767px but keep it side by side above that - add custom CSS with your own media query.

To apply the change to all Section blocks, navigate to Appearance > Customize > Additional CSS and add a snippet like the following:

css
@media (max-width: 767px) {
  .wp-block-themeisle-blocks-advanced-columns > .innerblocks-wrap {
    flex-direction: column;
  }
}

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

css
@media (max-width: 767px) {
  #wp-block-themeisle-blocks-advanced-columns-ID > .innerblocks-wrap {
    flex-direction: column;
  }
}
  • Replace 767px with the width below which you want the columns to stack.
  • Replace ID with the actual number shown in the section's ID attribute.

💡 Tip: A broad selector like .wp-block-themeisle-blocks-advanced-columns affects every Section block on your site. Use the section's unique ID when only one layout needs the override.

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:

css
@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:

css
@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

Was this helpful?