Creating and using a layout manager on one of your pages is really quite easy. Lets start with a new blank page so you can get used to using layout managers before you go messing with an existing page. First, create a few basic blocks that you'll be able to recognize. In the example image below, I've created three Title blocks containing the numbers 1 - 3.
Note: The graphic on the left is of the center section of the PageBuilder screen and the graphic on the right is of the drop down list from the upper right section of the Pagebuilder screen.
Without the layout manager, these blocks are really simple. Each is displayed one on top of the other.
Next, we need to add a new block. You should already know that there are two ways you can do this. Either click on a green plus sign ( ) on the block, or click the "add" button in the top-right corner of EZ-PageBuilder. When asked for the type of block, choose "layout manager." You can put your new block wherever you like, but in my case I will choose to add it after block #1, then click "Next Step." At this point you will be required to configure your new layout manager block. For now, we are only concerned with one setting. At the very top you'll see the following option:
Layout style determines the orientation of the blocks located inside of the layout manager block. If the rows option is selected, the blocks inside of the layout manager will be stacked one on top of the other. If the columns option is selected, the blocks will be displayed from left to right.
For now, let's choose "Columns" for our layout style. Then scroll down, and hit "submit" to complete the configuration and create the block. You'll now see a new block in EZ-PageBuilder, but it will be empty. This is our layout manager block
Notice also that in the page outline above, the layout manager block is listed twice. It has a start layout and an end layout. Any blocks in between "2. - Start layout" and "2. - End Layout" will be contained inside of the layout manager. Right now, there's nothing in between them so the block is empty.
Now we need to move our content blocks into the layout manager block so that we can control the way they are displayed. We simply have to get those blocks in between the start layout and the end layout. There are a number of ways to do this. The first is to use the move icon ( ). When you click on that, you'll see an outline of the blocks on the page. You can either select "after" and "start layout" or select "before" and "end layout." Then click move. This will place that block inside of the layout manager. Another way is to use the up arrow ( ) and down arrow ( ) on blocks that are adjacent to the layout manager block. If a block is above or to the left of the layout manager block, click the down arrow to move it into the layout manager. Likewise, if it is below or to the right of the layout manager, hit the up arrow to move it in. Move all your blocks into the layout manager and it should look something like this:
All the blocks are inside of the layout manager block, and are displayed side-by-side instead of one on top of the other. Also notice that the block identification numbers (the red numbers in the top-left corner of each block) have changed. They now start with the block ID of the layout they are contained in, which is followed by a period and the numeric placement of the current block within the layout manager. In other words, inside of the layout manager you have three blocks: 1.1, 1.2, and 1.3. You can see this also in the page outline below:
As was mentioned above, you can also choose to organize the blocks in rows instead of columns. To do so, click on the layout manager block's edit icon (). Then select rows instead of columns and hit submit. The results are displayed below:
In addition to being displayed in rows, you may also notice that changing the layout style from columns to rows did not change the page outline in any way. This outline is identical to the outline of the previous configuration.
) on the block, or click the "add" button in the top-right corner of EZ-PageBuilder. When asked for the type of block, choose "layout manager." You can put your new block wherever you like, but in my case I will choose to add it after block #1, then click "Next Step." At this point you will be required to configure your new layout manager block. For now, we are only concerned with one setting. At the very top you'll see the following option:
). When you click on that, you'll see an outline of the blocks on the page. You can either select "after" and "start layout" or select "before" and "end layout." Then click move. This will place that block inside of the layout manager. Another way is to use the up arrow ( 
) and down arrow ( 
) on blocks that are adjacent to the layout manager block. If a block is above or to the left of the layout manager block, click the down arrow to move it into the layout manager. Likewise, if it is below or to the right of the layout manager, hit the up arrow to move it in. Move all your blocks into the layout manager and it should look something like this:
