Working with columns

Pages contain blocks, blocks contain columns, and columns contain elements. In this article, you'll learn how to add columns to your page and manage them.

How to add a column to a block

When you choose a block template, it will already hold columns and elements. When you create a block from scratch, you will need to add a column to the block to add elements afterward. Each block can contain up to 7 columns with your content elements.

To add columns to a block, click the +add column icon below the purple block settings bar. Another way to add a column is to duplicate one that is already in the block in the orange column bar (more on this later).

When adding columns to your block, you can’t always have them with an equal width. The grid has 24 compartments, which means you can have 2, 3, 4, or 6 equal columns.

When you click to add a column, you’ll see an orange outline on your page and the orange columns settings bar.

Moving a column

Columns can be moved by clicking the drag icon (4 dots) and dragging it to another spot on the same page. The column can be moved to where the page shows an orange horizontal bar.

All column settings explained

Every column has its own settings. They can be edited by hovering over the column and clicking on the gear icon in the orange settings bar in the top right corner of the column.

• Background

  A column can have a background color or a background image. On top of this color or image, you can still place elements such as text or buttons. This setting is different for each column.

  

• Border
  A border can be set around the whole column or, when you turn off all sides at once, a border can be placed at all sides separately. The color and thickness of the border can be set here as well.

  

• Shadow

  The shadow setting will set a shadow to the column. You can decide the color, size, and width of the shadow. With the blur radius, you can soften and fade the shadow.

  

• Spacing

  Set the spacing between the elements and a column by moving the sliders or by simply typing a number.

  The more spacing you add, the more the elements will be away from the side of the column. You can add spacing to all sides at once or adjust it for every side separately.

  

• Alignment

  By using alignment, the position of the content within a column can be controlled. The content can be aligned right, left, centered, and top, bottom, or middle.

  There are two directions to choose from: vertical and horizontal alignment. You can set the vertical alignment of all the content in the column and set the horizontal alignment of all the content in the column.

  

• Navigation

  When a column contains more content than the height of the block, the column will show navigation arrows, so the reader will know there’s more to read. These navigation icons can be styled in the navigation part of the column settings.

  

• Animation
  With the animation setting, you can use animations to make your column and its contents fly in, zoom in, fade in, etc.

  💡 We recommend not overdoing it with animations. Your audience will have too much to look at and can’t focus on what is really important.

  

Change Background

With change background, you can replace the background image of the column. Once you click on it, a pop-up will appear that shows the background section of the column settings. We have discussed these column settings in more detail above.

Duplicating a column

A column can be duplicated by clicking on the duplicate icon of the orange column bar. The copy will then appear in the same block.

When duplicating columns in your block, you can’t always have them with an equal width. The grid has 24 compartments, which means you can have 2, 3, 4, or 6 equal columns by duplicating the column.

Deleting a column

When a column needs to be deleted, click on the trash can icon with the Remove label in the orange settings bar. A small pop-up will appear in which you are asked if you are sure you want to delete the entire column.