Block Row Block

Block row

The Block Row block is extremely versatile. Use it to create rows of content or a grid effect with a variety of blocks such as text blocks, article lists, or event lists. Some examples would be to display a a row of text block lists or buttons, or to create a mini photo gallery. You can achieve significantly different looks by varying the number of columns, using text, pictures or video, or article and event list blocks. You need to create the blocks you plan to place in the Block Row first.

Note: you must enable the Advanced Layout bundle to use this block.

Demo: Block Row Block

1

Create a Block Row

  1. Go to the Shortcuts toolbar and select Blocks.
  2. Click on Add Block at the top of the page.
  3. Select Block Row from the list of options.
  4. Or click Edit Layout on the page you wish to place the block.

Related: How to Place Blocks

Select Block Row

2

Add Label and Title

  1. Label: a name used to uniquely identify the block.
  2. Title (optional): this displays above the Block Row block when placed on a page.

Add a label and title

3

Add Blocks

  1. To add your first block, go to the Column section and either:
    1. Create a new block: select from the Add new block drop-down, fill in the content and click Create block
    2. Or add an existing block: click Add existing block, type in the name of the block, then click Add block. 
  2. Click Add block to place another block vertically in another row. 
  3. Click Add another column to place blocks horizontally. 

Note: In each column section you may add another block which places it vertically and creates another row. You may add more columns to place blocks horizontally, however, depending on the type of block, you will have to experiment with how many will fit in one row without wrapping.

4

Select the Distribution

  1. The Block Row block has three distributions options. 
    1. Auto: distribution is equal width for each block. 
    2. Left: distribution assigns more importance to the first block by making that column wider than the rest. For example, this allows you to create a 2 column layout where the first column is 2/3 of the total width and the second column is 1/3 of the total width.
    3. Right: distribution assigns more importance to the last block by making that column wider than the rest. For example, this allows you to create a 2 column layout where the first column is 1/3 of the total width and the second column is 2/3 of the total width.
  2. Match Heights: click the checkbox to force all blocks to be the same height. This works well when blocks have background colors applied to them and there is only one block per column.

    3. Distributions options
  3. Click Save.

    4. Left distribution

Related Articles