Journo Portfolio Logo

How to create multi-column layouts

You may want to use columns to organise the pages on your portfolio or to make certain images stand out. Here we look at how to add and delete columns, and how to change the layout of those columns. Just be aware when you are choosing a multi-column layout how it may look on mobile devices.

Adding a column

You can add columns to sections. First you need some content to add to your column. Add a block to your section that you will then move into the new column.

Let's say you want to add a column so that your profile picture appears next to your portfolio title and bio instead of above it.

Enable Edit Mode

Click the edit button circle that appears in the bottom left corner of your browser screen when you are logged in and viewing your portfolio.

Drag and drop into new column

Drag the thing you want to move (in this case your profile picture) to its desired position.

When the column goes dark it is in the correct position and a column will be created.

Edit the column

Now you have created two columns. They will be equal size and there is no way to adjust this currently. You can continue to make more columns and they will always divide the section equally. The other sections on your page will not form columns, you will need to edit them separately.

Edit section

Go to the top right corner of the section and click Edit, then Advanced.

Here all your options will appear on how to edit the columns in that section. For example increasing the padding and spacing will make the content appear further apart. You can choose whether your content should appear at the top, centre, or bottom of each column, which will make a big difference if you have a lot of content in your section. You can also re-order the different blocks in each column by dragging them to the desired position.

Delete a column

To delete a column first you have to empty it of content. You can do this by dragging the content into a different column or by deleting it.

Delete empty column

An empty column will have a delete icon in the centre of the column that only appears in edit mode. You can keep this column empty in order to move your content to one side of the screen or you can delete it to re-centre your content.

Other ways to adjust your layout

Adjust columns in article block

If you hover over an article block you can change the target number of columns. The number of columns will still change depending on how wide the screen it is displayed on but it will be limited to the target number of columns on a wider screen.

Change to sidebar

Or you can change your navigation to a sidebar to give the appearance of columns on your site without having to drag and drop content. Hover over the header and change it to the sidebar option.

Still need help?