Online Store

Columns block

This type of block can be used to describe various features of your product or various services that you offer. You can customize the icons and place links to individual pages with detailed descriptions of these features or services.

Adding the Columns block

Here’s how you add a Columns block:

  1. Choose a location where you want to add your Columns block and click the Add a block (+) Plus button.
  2. In the Block library, choose Columns from the list to see the pre-designed layout for this block type.  
  3. Click the pre-designed layout you like to add it to your page.

    columns-block-1.png

Customizing block settings

You can customize the Columns block with the help of its control pane.  To activate it, click the block and then click the Block settings icon.

columns-block-2 (1).png

The Block settings menu will appear. It consists of two tabs: the Layout tab and the Appearance tab.

In the Layout tab, you can switch the block layout and choose which elements should be displayed in the block. To hide a specific block element (for example, if you want to delete a button), remove the blue tick next to the element’s name.

columns-block-3.png

In the Appearance tab, you can make the following changes:

  • Block style: Change the color scheme of the block.
  • Block spacing: Adjust the whitespaces at the top and the bottom of the block.
  • Horizontal alignment: Choose the horizontal content alignment for the block (left or center)
  • Content layout: Choose the number of items in a row.
  • Content style: Add borders or shadows to make the elements stand out on the page.

Once you are done customizing block settings, click Save.

Note: Depending on the block layout you choose, you may have more or fewer controls in the Appearance tab. 

Read about block customization options in detail in our Block settings article.  

Customizing Columns block elements

You can duplicate some of the block’s elements to create space for more features or services. Hover over the element you wish to duplicate and click the Duplicate icon. The identical element will appear to the right of the original element.

columns-block-4.png

Note: The design of the block will adapt automatically to preserve the look and feel of your website.

Read more about moving the elements in the block and deleting them in our Customizing block elements tutorial.

Customizing block icons

You can customize any icon that appears in the Columns block. These tutorials can help you: 

Customizing buttons

You can link buttons to another page of your website, for example, the Contact us page or a landing page with your offer. You can also link the buttons to a page on another website or enable users to send an email from this page. 

To learn more about how to customize buttons, read this article.

Another helpful article: 

Note: You can reverse any action by clicking Undo or pressing Ctrl+Z (Command+Z on Mac) on your keyboard.

Once you have completed customizing your block, click Publish to make changes live.

We hope you find this article helpful. If you have any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
0 out of 0 found this helpful