Multicolumn
The "Multicolumn" section enables you to add a wide range of banners with icons/images, and descriptions in the desired quantity, utilizing preset column settings.
Multicolumn
Tip: To hide the title, description, or button, leave the corresponding fields blank.
Heading
Use the "Heading" placeholder to add a section title. Start typing text in the field to view the additional settings:
The font size of the title can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
If you need to change a title color, use the "Color" picker. Here you can paste the hex code into the related field or select the color using the paint palette. The color settings will be used for both desktop and mobile.
Description
Use the "Description" input field to add some descriptive text strings to the section that will appear under the heading. Color settings will be shown after entering text.
The color of the description can be set in the "Color" picker. The color you apply to the item will be used for both desktop and mobile.
Content
The number of items can be set in the "Сolumns in row" picker. Decide whether to display 2, 3, 4, or 6 columns in each row.
Enable the "Show image" option to use banner images for all "Column" blocks in the section. Use the blocks to set up images for each of them individually.
Choose the appropriate image aspect ratio in the "Image ratio" drop-down. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", or "Circle". Check each image ratio here.
Use the "Column alignment" drop-down to decide whether to align the block title and description on the "Left", "Center", or "Right".
This is how the described settings might be displayed in a section:
Enable swipe on mobile
Check the box to add scrollbars instead of displaying the list of images on mobile view.
Title
The font size of the block titles can be changed to "Small", "Medium", or "Large" in the "Size" drop-down.
Button/Second button
Use the settings described below to add or edit buttons that will be displayed under the descriptive text of the section.
Change the internal button text in the "Label" field. Leave the field blank to hide the button.
To redirect customers to the desired page, edit the "Link". Use the link from the source selector, or paste the one if you use an external link.
Use the "Style" drop-down to change the button's appearance in the sections. The theme includes three available styles that can be applied in the section: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following help page.
Use the "Color" picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.
Section layout
The layout settings change the look and feel of the section.
Choose one of the options "In-grid heading", "Heading on top", or "Heading top center" in the "Layout" drop-down.
Use the "Mobile alignment" settings to change the alignment of the heading and description to "Left" or "Center". Leave the "Auto" option to use the pre-designed theme settings.
Decide on the position of the divider using the "Top", "Bottom", or "Both" options in the "Dividing line" drop-down. It will be hidden once you use the "None" option.
On the "Top spacing" and "Bottom spacing" scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.
Block colors
Here you can apply color settings for the "Heading" and "Description" items.
Use the "Icon color" picker to colorize the SVG icons.
Here is how these settings might be displayed in the section:
Animations
Hover animation
If you want to add an animation inside the image container, choose the suggested option from the list. By default, the block uses the "Inherit global settings" option. If there is no need to apply animation settings for the block individually, leave this option as it is. In this case, decide on the animation image effect in the global settings of the Theme Editor by using the "Banner image" desktop hover animation drop-down. Read the details on the following help page.
The "Zoom in" and "Zoom out" options create a zoom effect when the mouse hovers over, either enlarging or decreasing the image. The option "None" deactivates the animation.
You can read more about the described options on the following help page.
In the following examples, you can view how the section might display on desktop and mobile:
Column
Tip: This block can be used several times to set up each banner individually.
Use the "Image" picker to connect an image from the theme library or upload an animation from your device.
The "Icon SVG" field is designed to link SVG icons that come with the theme or your custom SVG icons:
To display the built-in theme graphics, add an icon name to the field. Learn how to operate the theme SVG icons here.
Use the provided field to paste the HTML code of your custom SVG icon. Refer to the following help page for step-by-step instructions on the required modifications.
Leave the field blank to hide an icon.
To display an image above the text, use the "Icon image" field. Here, you can press the "Select" button to add an image previously added to the Image library.
In the "Title", you can paste the block heading.
If you need to pair text with the image, paste descriptive details in the "Description" input field.
Here is how the described settings might be displayed in the section:
Last updated