Section: Multicolumn

Everything you will need to know on how to setup your icon with text blocks section.

Jalal avatar
Written by Jalal
Updated over a week ago

The Multicolumn section makes it possible for you to add a nice section with for example USPs with icons anywhere within your theme.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Multicolumn', then click on Multicolumn

3) Done, your 'Multicolumn' section is added.

General settings

The general settings contains the settings for the styling and layout of the 'Icon with text blocks' section.

Columns per row:
Set the amount of columns per row, maximum is set on 4.

Heading position:

Configure the position of the heading text. You can choose between left and center.


Heading:
Fill in the title of the section. Don't want to show a title? Simply leave the field empty!

Heading font:

Choose the font family for your header from primary or secondary option.

Heading size:

Select the size of the heading from a range of small to extra large.

Heading color scheme:
Select the color scheme for the heading.

Heading font weight:
Select a font weight for your heading.

Text:
Fill in the subtitle for the section. Don't want to show a title? Simply leave the field empty!

​​Text font size:

Select the size of the text from a range of small to extra large.


Button label:
This text will show on the button, for example: 'Read more'

Link:
Enter a link for the button, for example to your customer service page.

Button color scheme:
Select the color scheme for the button.

Show link instead of button:
Check this box if you don't want a button to show, but only a clickable text.

Alignment columns:
Set the alignment of the columns, do you want them aligned to the left or center.

Heading font:
​Control the font family of headings in the columns.


Heading size in columns:
What heading size do you want the columns to have? When you choose for "Extra large", the size of the description will also be a bit larger than normal.

Heading color scheme:
​Control the color scheme of headings in the columns.

Heading font weight:
​Control the font weight of all heading in the columns.

Text font size in columns:
What font size do you want the columns text to have? When you choose for "Extra large", the size of the description will also be a bit larger than normal.

Layout:

You can select from slider or in rows for the columns on mobile.

Alignment columns:

Control the alignment of columns on mobile.

Spacing

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

Control the stacking order:

Control z-index of the multicolumn section.

How to configure the multicolumn and change the columns?

By default, there are 4 blocks added, you can edit them, remove them or add more blocks.

1. Editing the blocks
To edit the blocks you simply click on the block you want to edit in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the following sidebar will open.

First off, you can choose an 'Icon' that will fit with your USP/text. Don't want to use a preconfigured icon? You can always upload a 'Custom image'.

The recommended size of this custom image would be 110x110px. Make sure to use a .png file to get a transparant background!

Want to use a .svg format icon/image? You can upload this under the 'Use .svg format' setting by pasting the URL to the file that you've uploaded under 'Files'

More information about uploading files can be found here

Image height:
Using a custom image? Set the height for the image here!

Heading:

Simply put in the title of your block, for this example we're going to use: 'Ordered before 4PM? Shipped today!'

Text:
In the text field you can fill in more text to reinforce the USP. For this example we're going to use: 'Fast and reliably shipping, order now!'

Button label:
Set the text for the button

Link:
Set the link for the column

Button color scheme:
If a label is set, which color scheme do you want to give it?

Show link instead of button:
Check this if you want to use a normal textlink instead of a button.

2. How to remove a block?
Don't want to use 4 blocks? But you want to use 3? You can always remove the blocks one by one to fit in your needs.
To remove the blocks you simply click on the block you want to remove in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.

Simply click on this button and your block will be deleted.

Did this answer your question?