Multiple columns

A way to showcase image cards of the same style in rows

Steps:

1. In the theme editor (Customize), click Add section

2. Select Multiple columns

3. Make necessary changes

4. Save the settings.

Section settings

Section header

Select the header layout (on the Left of the whole cards or the Top).

Give the section a heading, description, and a button. Leave any fields blank if you don't want to show them.

You can also set the alignment of your section header's button.

Left

Center

Card settings

• Cards' content alignment: Left/Center/Right;

• Show border

An example when the option 'Show border' is selected

• Image width: Extra small/ Small/ Medium/ Large/ Extra large/ Full width;

• Image rounded: 0-100 px;

• Heading size: H2-H6;

• Description style: Body text/ Sub text;

• Image hover effect: None/ Scaling up.

Grid settings

Set the number of columns for desktop view (2-12 columns) and adjust the gap between the columns and rows.

Slider settings

Enable the slider for the section if needed (the number of cards > the number of columns).

Show the navigation and/or pagination to navigate the columns.

Mobile settings

Set the number of columns on mobile view: Inherit/ 1 column/ 2 columns.

You can also make the section swipeable.

Then, adjust the gap of the columns and rows on mobile (between 0-50px).

Block settings

Link your card to your desired page. Visitors will be directed to your attached page when clicking on the image or the button.

Select an image and insert its content (heading and description).

Give your button a label and select the button style.