One Column, Two Columns, Three Columns, Four Columns




Grid elements can be used to create a 1 to 4 column grids. The width of all columns together corresponds to the total width of the content area of a page. The distribution of the columns can be changed and adjusted at any time.

You will recognize the four symbols with columns when you create a grid element. The fifth symbol will appear in the content area.
Tab General
The General tab of the grid elements contains the same fields as in the header element. Unlike other elements, grid elements cannot be converted to another grid element in the Type field. A grid element can only be adjusted to other content elements there.
Grid Layout
For example, to turn a Two Column Element into Four Columns, use the option under Grid Layout in the General tab. The current grid element is already selected. To change the grid element, simply click on the symbol of the desired grid or select it from the drop-down menu. You must then confirm the change.
If there was already content in the columns, their position can be adjusted in the Grid Elements tab. Learn more about the Grid Elements tab.
Plugin Options
The plugin options are partly different depending on the number of columns in the grid. The width of the columns can be adjusted. While the options for column height and alignment of the contents are the same.
Two Columns – Distribution of Columns
With a Two Column element it is possible to set the distribution of the columns for the desktop and tablet view.
Distributions in percent in the Desktop View:
50 % and 50 %, 66 % and 33 %, 33 % and 66 %, 75 % and 25 % or 25 % and 75 %
Distributions in percent in the Tablet View:
50 % | 50 % or 100 %
With the 100 % option, the two columns appear below each other instead of next to each other.
Three Columns – Distribution of Columns
The Three Column elements offer the most customization options for column widths.
Distributions in percent in the Desktop View:
33 %, 33 % and 33 % or 50 %, 25 % and 25 % or 25 %, 50 % and 25 % or 25 %, 25 % and 50 % or 15 %, 70 % or 15 %
Distributions in percent in the Tablet View:
33 %, 33 % and 33 % or 50 %, 50 % and 50 % or 100 %
Distributions in percent in the Mobile View: 50 %, 50 % and 50 % or 100 %
Distributions in percent in the Mobile Portrait View: 50 %, 50 % and 50 % or 100 %
Four Columns – Distribution of Columns
There are no options to adjust the distribution of the columns in the Four Columns Element.
The columns are automatically distributed evenly, since they are very slim anyway.
In the mobile and tablet view, either two columns are displayed or all four columns are displayed below each other.
Equal height columns & Alignment of content elements
From two columns on, there are also options to adjust the column height uniformly and to determine the alignment of the content elements, provided that they have the same width. In the dropdown menu for alignment, you can choose from the following options:
- Stretch first element
- Stretch last element
- Align elements at the top
- Align elements at the bottom
- Center all elements
- Distribute elements equally
One, Two, Three or Four Columns in Frontend
On our preview page you can see grid elements in use in many places. The one, two, three and four columns are often the basis for the presentation of other content elements.