> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/cms-extensions/cms-blocks/block-configuration.md).

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

<figure><img src="/files/sHWBuu0F9jsymQKPudCC" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
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)](https://service.themeware.design/en/feature-request)
  {% endhint %}

{% hint style="warning" %}
**Important**: This feature is only available in the ThemeWare® Pro Edition.
{% endhint %}

***

## 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)

{% hint style="info" %}
**Note**: Without the advanced configuration the values apply equally to all viewports.
{% endhint %}

***

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

{% hint style="info" %}
**Note**: Without the advanced configuration the values apply equally to all viewports.
{% endhint %}

***

## 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)

{% hint style="success" %}
**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)](https://service.themeware.design/en/feature-request)
  {% endhint %}