5.6.1 Columns

There are a lot of different variations of column elements, some have fixed ratios for the columns and some are more dynamic.

In this section we will focus on the dynamic column elements, and how you can adjust the ratio. Columns with fixed ratios, you only need to save and close after creating them. (Img. 5.6.1.1)

In this example we will create a 2 column element with the ratio 75%|25%. Start by selecting the 'Advanced two columns grid' below the tab 'Grid Elements'. (Img 5.6.1.2) 

Most of the information can be found below the tab 'General' (Img 5.6.1.3). Scroll down to the section 'Plugin Options' to configure the columns (Img 5.6.1.4).

'Container wrapper' (1) refers to the columns grid that, if needed, can be set to 'Container' or 'Container-fluid'. Using the 'Container' will restrict the element to the space in the content area and also add some padding to the content placed inside the columns. For example, if you create a column element on the start page, the content will flow all the way to the sides. By setting 'Container wrapper' to 'Container' it will be restricted to the website content area. This setting is not needed when creating columns on subpage templates, because these templates already has a container for the content areas.

The settings 2-5 configure how the ratio should be for the column in different views. There is one for mobile (2), tablets (3), medium sized desktops (4) and large desktops (5). To set the ratio, have a mindset that the total of all columns should be 12. So if I want a 75%-25% division the first column should have '8 of 12' set, and column 2 should have '4 of 12'. In this example this setting has been applied to both medium and large desktops, but mobile and tablets has been left without any setting. This will allow the content in the columns to automatically be placed in one column for these devices.

'Column Layout' (6), can add background color to the column. These the color options are preset in the styling sheet of the website.

'Column Offset' (7) is like a tab function for the content inside the column, leaving blank space on the left side of the content. Note, that if this function is set for a column element with more than one column, the content of the other columns will shift below the first column.

When the website design demands a certain styling for content in a column, this will be created as an option in the 'Column Content Wrapper' (8). For example, if the text size and color should be different than regular text and color of the website.

In rare cases, a styling class can be added by a developer in the 'Column Class' (9) section, to apply a different appearance of a column.