As touched upon in our Pages Builder overview article, the Grid Block is an important block to understand, as it provides the ability to have Blocks appear side by side. This allows for huge flexibility in the kind of pages that can be provided. Take the following page:
The page consists of 8 image blocks which have been placed into Grids. Each Grid takes up a full horizontal row, and can contain any number of columns. Within each column, you can have one or more Blocks, which themselves are stacked vertically and can be sorted - much like the Blocks of a page can be. With that in mind, now let’s take a look at the same screenshot, annotated with what blocks are present on the page:
As marked out in read, creating this page involves the creation of three Grid Blocks. The first Grid contains three columns, where an Image Block has been added into each. Then, below the first Grid, a second Grid has been added, this time with two columns, again which contain an Image Block in each. Finally, a third Grid has been added, which again has three columns.
Creating and populating a Grid
When you decide that you would like two or more Block types side by side (let’s say you want a photograph, next to a text description), you want to begin with creating the Grid Block that will contain the desired content in it’s columns. With the Grid Block in place, you’d then want to populate it’s columns with your chosen blocks. So let’s run through the steps, assuming that we’re starting with an existing page:
From the Add Block panel which appears, select the Grid Block. This will insert a new Grid Block, which begins with two empty columns. Now we have a structure we can insert our content columns into. To do so, hover your cursor over the Grid Block, which will reveal the controls for the Grid Block. To insert a Block into a column, you’ll want to hover to the ‘Add Block’ triangle at the top center of a column, which will highlight as orange when hovered over:
Clicking the orange 'Add Block’ will reveal the usual Add Block panel, only this time around, the block you select will be inserted into the Grid Column itself. You can consider a Grid Column to be a smaller version of the page as a whole - you can add multiple Blocks, sort them, and so on.
Access and modifying a Grid Block’s settings
The Grid Block is unique in that you do not access its settings by clicking on the Block itself. The reason for this, is that a Grid can contain other blocks such an Image Blocks which will switch the sidebar to its own settings when clicked on. To access a Grid Block’s settings, hover your cursor over the Block, and click on the ‘settings cog icon’, located within the purple Grid Block controls. Be sure to refer back to the Page Builder overview article which introduces this. Here’s a quick reminder:
As ever, if you have any questions or thoughts, contact us at support.