Section Blocks

Section blocks keep everything aligned and responsive

Section Blocks are fairly easy to use once you understand how they are structured. The purpose of the Blocks is quite simple. They are containers to keep your text and images aligned and responsive. All you have to do is drag the Block on the canvas and you will see its outline divided into as many sections as the icon in the menu points out.

It is important to know that these blocks or tables have sections that fit inside each other with a kind of hierarchical structure.  The rows are inside the tables and then there are cells inside these rows. Each time you click on one of the items, the blue border that appears shows you where the selection is located within the table hierarchy.

A table is made up of a horizontal row element, or rows, and internal columns that are called cells, or cells. When selecting the cell and clicking on the brush in the upper right menu, you will see in the right sidebar the properties related to the cell: dimensions: width, height, margins … as well as the typography and decorations section.

Also in the top menu on the hamburger icon (the one with 3 lines), you can see the hierarchical structure of the tables.

In some cases, if the edges of the blocks are set to zero, it is difficult to realize that there are blocks nested within each other because all you would be able to see is one fine line.

When you select a block that is nested in this way, the innermost block in the hierarchy is always selected by default. So In order to edit that specific block, you must navigate with the upward-pointing arrow that is in the blue menu of the block until you can see the configuration of this block in the right sidebar.

The table or block in a section has the default width set to 100%. The 1 section Block is set to 100%.  The two-section one has two cells of 50% each. The three-section one has three cells of 33.33% each. And the one called three-sevenths has two sections, one of 33.33% and the other of 76.66%.

It is important that the width of the cells that are within its section add up to 100% so that they fit correctly. If you need to add more cells than the default, you will need to do a little math. For example, if you want to make a table with 4 columns, each cell will have to be 25%. Start with a one-section table and change the cell width to 25%. Then duplicate your cell 3 times and you have your 4 column table as you need.

In the cell, it is actually where we will drop our content. The cell is responsible for keeping our text and images content aligned as we configure.