Multiple columns
A way to showcase image cards of the same style in rows
Last updated
A way to showcase image cards of the same style in rows
Last updated
Steps:
In the theme editor (Customize), click Add section
Select Multiple columns
Make necessary changes
Save the settings.
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.
Cards' content alignment: Left/Center/Right;
Show border
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.
Set the number of columns for desktop view (2-12 columns) and adjust the gap between the columns and rows.
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.
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).
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.
