Columns component

add Columns to your pages to split them vertically

multiple Columns layouts
split your content into sections with Columns
use Columns to place different components next to each other

The Columns component allows you to split the page vertically. This creates an opportunity to place content more freely on the page and brings more variety to your website.

on this page:

Component settings , Opens In New Window Front-end examples , Opens In New Window

Allowed components , Opens In New Window Step by step , Opens In New Window

The Columns component allows for more variety for placing your other components, by splitting the page into vertical sections. Different Column layouts are available and the spacing can be adjusted as well. Using a Columns component you can place different components next to each other instead of underneath.

Glossary:

Example:

1. Column

33%

2. Column

33%

3. Column

33%

Android- oder iOS-Smartphone

Android: Ab Version 4.0.3. Kompatibel mit Smartphones und Tablets.
iOS: Ab Version 9.0. Kompatibel mit iPhone, iPad und iPod touch.

Ein Girokonto bei der

Ihre persönlichen Zugangsdaten für George

Um sich in die App einloggen zu können, benötigen Sie Ihre persönliche Verfügernummer und Passwort.

go to top

tab: General

tab: Spacing

Editorial hint:

Theme

Since the Columns component doesn't have a common Theme element to add a background color to the component, you can use a Section With Headline component to add a different background color. Simply place the Columns component inside the Section With Headline and set the Theme element for the Section With Headline. If you don't want to add a headline, just leave it empty.

go to top

Column 100% no offset

Column 100% left offset

1 Grid Column

2 Grid Columns

3 Grid Columns

4 Grid Columns

5 Grid Columns

6 Grid Columns

7 Grid Columns

8 Grid Columns

9 Grid Columns

10 Grid Columns

Column 100% right offset

1 Grid Column

2 Grid Columns

3 Grid Columns

4 Grid Columns

5 Grid Columns

6 Grid Columns

7 Grid Columns

8 Grid Columns

9 Grid Columns

10 Grid Columns

Column 100% left & right offset

1 Grid Column left & right

2 Grid Columns left & right

3 Grid Columns left & right

4 Grid Columns left & right

5 Grid Columns left & right

6 Grid Columns left & 4 Grid Columns right

7 Grid Columns left & 3 Grid Columns right

8 Grid Columns left & 2 Grid Columns right

9 Grid Columns left & 1 Grid Column right

10 Grid Columns left & 0 Grid Columns right

Example: Layout

1 column (100%)

2 Columns (50% / 50%)

2 Columns (30% / 70%)

2 Columns (70% / 30%)

3 Columns (33% / 33% / 33%)

3 Columns (25% / 50% / 25%)

4 Columns (20% / 20% / 20% / 40%)

4 Columns (25% / 25% / 25% / 25%)

5 Columns (20% / 20% / 20% / 20% / 20%)

go to top

There are several components that can be placed inside a Columns component. Here are some examples:

File List Component

Dummy GIF , GIF , Opens In New Window	GIF (990 KB)	01/02/2017
Dummy OGG , OGG , Opens In New Window	OGG (4 MB)	01/02/2017
Dummy DOC , DOCX , Opens In New Window	DOCX (14 KB)	01/02/2017
Dummy MP4 , MP4 , Opens In New Window	MP4 (496 KB)	01/02/2017
Dummy SWF , SWF , Opens In New Window	SWF (25 KB)	01/02/2017
Dummy PNG , PNG , Opens In New Window	PNG (57 KB)	01/02/2017