2.1 Columns

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

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.

Creating a column element

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'. (2.1.2) 

In the 'General' tab you can see that the content element type 'Grid Element' (1) and Grid Layout 'Advanced two columns grid' (2) are selected. You can also add a regular Header (3) and Link (4). (2.1.3)

Scroll down to the section 'Plugin Options' to configure the columns.

There will be one section of settings for each column, except the first option (Container wrapper), which applies to the whol column element. In the example images you will only see the settings for the first column.


Container wrapper

'Container wrapper' (1) refers to the columns grid that, if needed, can be set to 'Container' or 'Container-fluid'. The option '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 and don't set the 'Container wrapper', 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. Most subpage layouts (templates), already have a container for the content areas. In these cases you will need to the set the 'Container wrapper' to 'Container-fluid' instead. This also applies to creating a column element inside another column element.

Device view settings

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 (these are referred to as span, where the total for a page is 12 span). 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 medium desktops. It will then be inherited to large desktops (if it is set to blank). Leaving the mobile- and tablet-view without any setting will automatically create a single column with content for these two devices.

Column layout

'Column Layout' (6), can add background color to the column. The color options are preset in the styling sheet of the website, and if changes are needed, these are added by developers.

Column offset

'Column Offset' (7) is like a tab function for the content inside the first column, leaving a blank space on the left side of the content. Every offset step will count as one (1) span and if you add offset you need to balance the total of 12 span, by retracting span from the columns. If you in the end have 13 span, the content in the last column will either shift to the next row or be displayed outside of the content area.
For example, if I want to have some space before the first column I will set the offset to 'Offset column 1 of 12'. To balance the first first column, I will change it to ´7 of 12' instead. If I wish to have an offset on the right-hand side of the content in column 2, simply retract 1 span from this column, making it '3 of 12'. The total will add up to 12 span.

Column content wrapper

When the website design demands a certain styling for content in a column, this can 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.

Column class

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.