(Not rated)

Already rated by you

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.

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. (2.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 (these are refered 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 be inherited to large desktops as well if this is set blank, and the mobile- and tablet-view has been left without any setting as well. This will automatically create a single column with content for these two devices.

'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' (7) is like a tab function for the content inside the first column, leaving 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. 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, I will simply retract 1 span from this column, making it '3 of 12'. The total will add up to 12 span.

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.

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.

Comments (0)

No comments yet