In this article, you will learn how to use the "CSS class (column)" configuration in CMS elements from ThemeWare®.
Note: This article is intended for professionals and experts. If you are not absolutely sure, we will be happy to support you:
Column CSS classes
Certain CMS blocks of ThemeWare® (e.g. "Six columns (Custom)") can adopt the expert configuration "CSS class (column)" of certain CMS elements (e.g. "Round teaser").
This allows you to define the number of columns in different viewports, provided you are sufficiently familiar with Bootstrap's grid system.
Important: Please note that this feature is currently in a testing phase and may be changed if necessary.
Example
By default, the "custom" CMS blocks have their intended column layout. Here, for example, a six column block:
ThemeWare® "Six columns (Custom)"
With the expert setting "CSS class (column)" in the "Advanced" tab of the CMS element (here "Round teaser"), you can use Bootstrap classes (e.g. col-3) to define a column width for the corresponding element.
The block now looks as follows:
As you will have noticed, all columns are usually aligned to the left. You can also influence this.
In addition to the CSS classes that you can use in the CMS elements, you can also use CSS classes on the CMS blocks, for example, to define the horizontal alignment of the columns in the CMS block.
To do this, just use the corresponding Bootstrap CSS classes (justify-content-...) in the corresponding CMS block. As the block classes are not placed in the right place please use the prefix twt- (i.e. twt-justify-content-...) . These classes are then automatically recognised by the "individual" CMS blocks and passed to the row.
Verwendest du die CSS-Klasse twt-justify-content-center im CMS-Block sieht unser Beispiel nun wie folgt aus:
If you do not want to define column widths and only want to work with the maximum width of the corresponding CMS elements, for example, you can use the css class twt-flex-columns in the CMS block.
In our example, the thumbnails of the images are 227px in size. This leads to the following result:
Using the "Maximum width" configuration in the "General" section of the "Layout" tab, you can define the maximum width of a teaser. If you set 140px here, for example, the teasers in our example will be represented as follows:
