In the Designer, columns are the building blocks for structuring and aligning content within rows. They serve as flexible placeholders for modules and allow you to create professional and clear layouts. In this article, you'll learn how to add columns, customize their design, and use special features for optimal presentation.

What is a column? Columns are inserted into rows and are placeholders for modules. Within a row, you can have up to 12 columns to organize your content. With the help of columns, you can better structure and align content elements on your pages. Read more about rows, columns, and modules in this article.

On this page:

• How can I add and edit a column?
• Customizing the design
• Digression: Stacking columns

How can I add and edit a column?

When you're working in the editor, move your mouse pointer over the column you want to change, and the blue label "Column" will appear at the top left of the column.

1. Add a column:

To add a new column, hover your mouse over an existing column -> click on "Column" -> click on "More" (three dots) and select the last item "+ Add Column".

2. Drag a column to add more width:

A visual method for adjusting the width is to drag the right edge of the column to add more or less width between it and the adjacent column. Move your mouse pointer over the column and drag the blue bar that appears on the right.

3. Move columns:

To move a column, move your mouse pointer over the column until the handle with the six dots appears. Hold it clicked and drag the column to a new position within the same row.

4. In the quick menu, you'll already find some editing options:

1. Pencil icon: Open the column's editing function. You can find more about this later in the article.
2. Duplicate column: If you want to reuse a column with all its content elsewhere on your website, you can either duplicate or copy it. Duplicating means you create a copy of the column, which is automatically inserted next to the original column.
3. Delete column: You can delete a column and all modules it contains by selecting the red trash can icon.

5. If you click on "More" (three dots), you have the following options:

4. Show on device: Specify on which devices (desktop, tablet, mobile) the column should be visible.
5. Add animation: Add an animation that is triggered as soon as the visitor views the column in their browser.
6. Copy column: Copy a column to paste it anywhere on the website (even on other pages). Then go to the page where you want to insert the column. Hover your mouse over the column next to which the new column should appear -> click on "Column" -> click on "More" -> select "Paste".

Customizing the design

1. Background

A column background can be a solid color or an image:

• Background color: Insert a single color as the column background. You can set the degree of transparency if you wish.
• Background image: Add an image as the column background. You can choose whether to use your header image from Global Data or upload a new image directly to the row. You can set how the image should repeat within the column, its size, and positioning to ensure you can display the image optimally for your visitors.

In addition to the standard image settings, you can also specify how the background image should behave within the column when a visitor scrolls down the page:

• Fixed Position: The image remains in its position when scrolling, while the content slides over it.
• Parallax Scrolling: The image moves slower than the foreground when scrolling, which creates a depth effect.

2. Background Filter

Add a background filter over the background color or image of your column to soften very colorful images or images with strong contrasts. This is also a good way to ensure that the text in the column is easy for visitors to read. Remember that you can also adjust the degree of transparency of your background filter.

Example of a background filter used over an image:

Borders and Spacing

• Shadow: Add a shadow for more depth.
• Border: Add a border to the row and adjust the border's style, color, thickness, and radius. Adjust the margin (space outside the row) and padding (space between the row content and the row border).
• Spacing: With the margin and padding options, you create space around and within your elements. Targeted spacing design ensures a clear, tidy structure and better readability.

Digression: Stacking columns

Activating Stacking Columns is done through the row that contains the columns. It allows columns in a single row to be stacked so that they lie on top of each other. By default, this setting is automatically enabled in tablet and mobile viewports, as this is their normal row behavior. Desktop column stacking is useful if you want, for example, several modules to be displayed one above the other instead of side-by-side, which is the standard behavior in the editor's grid system. With Stacking Columns, you can achieve this without having to add multiple new rows consecutively. You can also activate this function directly via the three dots.

How to activate column stacking:

1. Hover your mouse over the row where the columns are located.
2. Click on "Row" -> "More" (three dots).
3. Activate the "Stack columns" option.

Keywords: Columns, Rows, Design, Web Design, Website Layout, Edit columns, Add columns, Background image, Parallax effect, Responsive Design, Stack columns, Spacing, Margin, Padding, Animation

Updated on: 06/08/2025