Block configuration

ThemeWare® extends selected CMS blocks with a block configuration in the CMS sidebar (2). The block configuration allows you to control the responsive behaviour of your CMS blocks conveniently - without having to enter CSS classes manually.

The configuration is divided into two areas: the Responsive block layout (3 – gutter and alignment) and the Responsive column layout (4 – column arrangement, visibility and expert mode).

This is the first version of this feature. We already have some ideas for further configurations, but we’d like to focus on your feedback on the current version first.

Tip: Do you have any suggestions for further configurations or other features for ThemeWare®? If so, please feel free to send us your ideas at any time via the ThemeWare Service Portal:

• Suggestion for improvement (Feature request)

Important: This feature is only available in the ThemeWare® Pro Edition.

---

Responsive block layout

In the "Responsive block layout" (3) section you configure the gutter and the alignment of the columns within the block.

Gutter

Sets the horizontal and vertical gap between the columns. You can choose from various predefined spacing values or "Default".

Alignment

Select the horizontal alignment of the columns within the row:

• Default (left) - Default alignment

• Center - Columns are centered

• Right - Columns are right-aligned

• Space between - Equal space between the columns

• Space around - Equal space around the columns

• Space evenly - Fully evenly distributed space

Advanced configuration

With the "Advanced configuration" toggle you can configure gutter and alignment individually for each viewport. The following viewports are available:

• Desktop Large (≥1200px)

• Desktop (≥992px)

• Tablet (≥768px)

• Mobile Landscape (≥576px)

• Mobile Portrait (<576px)

Note: Without the advanced configuration the values apply equally to all viewports.

---

Responsive column layout

In the "Responsive column layout" (4) section you configure the column arrangement and visibility of the individual columns.

Column arrangement

Sets how many columns are displayed side by side instead of stacked in a specific viewport. For example, you can reduce three columns to two on a tablet.

Visibility

Controls whether a column is visible or hidden in a specific viewport.

Asymmetric from

Only available for asymmetric column blocks (e.g. Two columns 3-9, Three columns 3-3-6). Sets from which viewport the columns are displayed in the predefined asymmetric layout of the block. Below this viewport the columns are arranged equally or stacked.

Expert mode

Allows manual CSS class input per column (e.g. col-12 col-md-6). The expert mode overrides the column arrangement and visibility configuration.

Advanced configuration

With the "Advanced configuration" toggle you can set column arrangement and visibility individually for each viewport.

Note: Without the advanced configuration the values apply equally to all viewports.

---

Supported blocks

Not all CMS blocks support all areas of the block configuration. The following overview shows which block types offer which configuration areas:

Column blocks (symmetric)

Symmetric column blocks such as "Two columns", "Three columns", "Four columns" and "Six columns" support:

• Responsive block layout (gutter + alignment)

• Responsive column layout (column arrangement + visibility)

Asymmetric column blocks

Asymmetric column blocks such as "Two columns 3-9", "Two columns 4-8", "Three columns 3-3-6" etc. support:

• Responsive block layout (gutter + alignment)

• Responsive column layout (column arrangement + visibility + asymmetric from)

Grid blocks

Grid blocks such as "Grid One", "Grid Two", "Grid Modern" etc. support:

• Responsive block layout (gutter only, no alignment)

One column

The "One column" block supports:

• Responsive column layout (column arrangement + visibility, no gutter, no alignment)

Tip: Do you have any suggestions for further configurations or other features for ThemeWare®? If so, please feel free to send us your ideas at any time via the ThemeWare Service Portal:

• Suggestion for improvement (Feature request)