Multicolumn settings


Setting Description
Color scheme Applying a color scheme to the multicolumn section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.
Heading To add a main section heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink.
Heading size

The heading size setting offers three options to control the size of your section heading:

  • Small
  • Medium
  • Large

Image width 

Choose what width of the column will take the image :

  • One-third width of column
  • Half width of column
  • Full width of column

Image ratio

The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from:

  • Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions.
  • Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height.
  • Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height.
  • Circle: This option crops the images into a 1:1 ratio and displays them in a circular frame, giving a rounded and more stylistic appearance.
Number of columns on desktop The “Number of columns on desktop” setting allows you to choose the number of columns in which your content will be displayed on larger screens. You can select from 1 to 6.
Column alignment Choose left or center alignment of the column.
Secondary background

This option allows you to choose whether to display a secondary background for the columns. You can select from the dropdown menu:

  • None: The columns will inherit the background based on the global color scheme applied to all columns.
  • Show column background: The columns will display a background according to the individual column settings, if specified. This enables you to customize a unique background for each column.

Note: Column background image replaces color.
Button label To make the button visible in this block, you need to add a label to it. The label is the text that appears on the button and gives it a purpose or indicates the action it performs. Without a label, the button will be hidden and not visible to users on the page.
Button link To set a button link, you can enter the link URL directly into the “Button link” field or select a page from the dropdown list of options that appears when you click on the field.
Button style

Choose the button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
  • Link: A minimal button style aligned with the text.
Button type

Button type: Choose how the button will be displayed:

  • Button – a solid button.
  • Button with icon – a button that includes an icon.
  • Link – text styled as a hyperlink.
  • Link with icon – a hyperlink that includes an icon.
Icon Select an icon from the dropdown list; it will be displayed in the button before the text.

Mobile layout 

Setting Description
Number of columns on mobile

Select the preferred column layout for mobile devices:

  • 1 column
  • 2 columns
Enable swipe on mobile Turn on this toggle to display columns in a carousel format on screens narrower than 989 pixels.

Section paddings

Setting Description
Top padding The “Top padding” setting allows you to adjust the amount of space at the top of the section for desktop using a slider. 
Bottom padding The “Bottom padding” setting functions similarly to the “Top padding” setting but controls the space at the bottom of the section for desktop. 
Top padding mobile The “Top padding mobile” setting allows you to adjust the amount of space at the top of the section for mobile devices using a slider. 
Bottom padding mobile The “Bottom padding” setting functions similarly to the “Top padding” setting but controls the space at the bottom of the section for mobile devices. 
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us