Columns
Last updated
Was this helpful?
Last updated
Was this helpful?
The footer consists of different columns, which have a content and a heading. In addition to the alignment of the headings, you can select the size and font weight here. You can also choose the font family.
The option Collapse icon (mobile) (1) changes the icon of the collapsible mobile footer columns. Appearance (2) can be assigned a subline to the column heading.
Example:
The content of a column can be very different. It can receive the navigations from the entry point of the footer navigations, the hotline, a newsletter subscription, social media icons, payment informations and much more.
Example:
A layout is built in a so-called grid. You can think of it like a table with 12 columns and any rows. We use such a grid to control the widths of the columns in the footer.
You can assign a column width to each footer column. If the total sum of the widths goes over 100% (over 12 columns) the elements automatically wrap into a new row.
The column widths are defined for tablet and desktop devices. On all smaller devices, the columns wrap below each other.
Example:
In this example, the newsletter has a width 6 of 12 (50%). The information and service columns are "navigation columns" from the selected entry point of the footer navigations in your sales channel. Each created column of the footer navigation got 3 of 12 (25%). Thus, the first row of 12 out of 12 columns is filled to 100%.
The second row consists of the Service hotline with 3 out of 12 (25%), the Social Media Icons column with 4 out of 12 (33.33%) and the optional custom column with also 4 out of 12 (33.33%) width. In total, this gives us 11 out of 12 columns, or 91.67%. So we could still distribute 1 of 12 (8.33%) column widths to a column without starting a new row.
You can set the sorting order by specifying an item number. The higher the number, the further back the column is displayed.
Allowed here are position numbers from 1 - 12.
Example:
On mobile devices, each column of the footer is shown collapsed. The visitor can then expand them by clicking on the line. If required, individual columns can also be displayed initially expanded.
Example:
Footer navigation assignment: You define the entry point for the footer navigation in the of the sales channel.
