Columns are essential for adding different elements to a page or they can be used to add a column background image to a page. Blocks hold columns and columns hold elements.
In this article
- Adding columns
- All column settings explained
- Moving a column
- Duplicating a column
- Deleting a column
When a block template is chosen it probably already has columns and elements ready to be used. But when you start a block from scratch you will need to add a column to the page in order to add elements afterward.
A new column can be added by clicking on the + icon in the Purple Block Settings Bar of the block. The column will be added to the right side of the block and can be dragged to the right spot by using the drag icon in the Orange Column Settings Bar. The newly added column will be empty.
Another way to add a column is to duplicate one that is already in the block. Columns can be duplicated in the same block and can not be moved to another block.
Note: When creating more columns, you can’t always have equally divided columns because the grid has 24 compartments. You can have 2, 3, 4, or 6 equal columns by duplicating the column.
All column settings explained
By using alignment, the position of the content within a column can be chosen. 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.
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.
A column can have a Background Color or a Background Image. On top of this color or image, you can still place elements like text or buttons. This setting is different for each column.
To make the column stand out, you can set a border around, or at one side of the column. In this setting, you can choose the color, thickness, and place of the border.
The shadow setting will set a shadow to the column. You can decide the color, size, and width of the shadow. Also, the blur can be adjusted here.
A really cool feature is the animation setting. Here you can decide whether you want the column, with its elements, to fly in, zoom in, fade-in, etc.
Tip: don’t overdo the animation, the readers will have too much to look at and can’t focus on what is really important.
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.
Moving a column
Columns can be moved within the same block by clicking on the Drag Icon and dragging the column to the desired spot. A vertical orange bar will appear on the spot the column can be placed.
Duplicating a column
A column can be duplicated by clicking on the Duplicate Icon in the Orange Column Settings Bar. The new column will appear on the right side of the original column. The column size will be equal to the one you duplicate. You can only have 2, 3, 4, and 6 equal columns. The maximum amount of columns you can have in a block is currently 7 columns.
Deleting a column
If you need to delete an existing column, click on the Trash Can Icon in the Orange Column Settings Bar. A pop-up will show before the column is deleted permanently. Deleted columns cannot be retrieved because they are not saved in any back-up.