Columns component (Footer)

set up multiple columns to organize your links

  • adjustable layout for multiple columns
  • add components inside columns

The Columns component is part of the Footer Navigation Configuration page template and can contain a variation of other components, to display different kinds of links. If set up, it is displayed underneath the Breadcrumbs component.

on this page:
Component settings , Opens In New Window
Image Links component , Opens In New Window Navigation Link Block component , Opens In New Window
Service Box component , Opens In New Window Text Size component , Opens In New Window
Front-End Examples , Opens In New Window Step by step , Opens In New Window

Introduction

The Columns component is part of the Footer Navigation Configuration page template and allows for more variety for placing 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.

This component is also available as a GEM Common component for any Standard Content page template.

Glossary:

Example

Component settings

As this component is identical with the GEM Common Columns component, please refer to that page for the setup of the Columns component.
The only difference are the components that can be added inside the columns, so on this page, only the components used inside the Columns (Footer) are described.

Once you have setup the Columns component it is time to build the actual content. There a 4 components that can be placed inside the columns.

Image Links

tab: General

In the General tab, a headline and the image links are defined

Navigation Link Block

tab: General

In the General tab, the title and link as well as items can be added to the Navigation Link Block.

Service Box

tab: General

In the General tab, the headline, sub-headline, items and phone information can be added and you can decide wether you want to display this on mobile or desktop or both.

Text Size

tab: General

In the General tab, a label for the text size options can be set up.

Front-End Examples

Desktop

Mobile

For mobile devices, all components inside the Columns (Footer) turn to Toggle items, to save space. Try it here:
 

Step by step

1

2

3

4

5

Related topics