You can use rows to decide the amount and layout of the columns before content is added. Rows can consist of multiple columns depending on how you want your content to be showed. Below you can see which row types you can choose between, when you are about to place and structure your content.

Some row types are available when you create your header, others when you create your footer and landing page. Below you can see a list of  row types (Figure 1.1).

Figure 1.1 Row types

A row consists of 12 columns divided into sections (confusingly also called column). The following column configurations exist:

  • 1 column
  • 2 columns
  • 3 columns
  • 4 columns
  • 6 columns
  • 2 columns 8/4
  • 2 columns 3/9
  • 2 columns 9/3
  • 2 columns, flexible sizes (only available for footer)
  • 3 columns, flexible sizes (only available for footer)
  • 4 columns, flexible sizes (only avaiable for footer) 

When you add a row to a page, it shows up in the visual editor with a placeholder for each column - here 4 columns (Figure 1.2). You can then drag & drop columns onto the placeholder to create content.

Figure 1.2 A row with placeholders

Hover over the row and click the pencil-button to open the row settings (Figure 2.1).

Figure 2.1 Row settings

These settings are used to control how the row appears in frontend - you can:

  • Select the row width
  • Set the row height
  • Set the space between columns

Additionally you can also:

  • Style the row by selecting a theme
  • Choose an animation for the different columns in the row
  • Set a publication period
  • Tweak the accessibility settings and e.g. hide this row on phones/tablets/desktops

Animation on scroll lets you create visually impressive pages where columns fade in from either top, bottom, left or right.

The section is found in the row settings and are controlled through the following menu:

Figure 3.1 The animation on scroll settings

As shown on the image above, each column can be controlled individually and works indepentently from the other columns.