Customize Layout Design

First, make sure the Layout Controls are activated. For this, use the Design Mode menu on the Shelf at the bottom of the screen to check/uncheck the controls as needed. 

Update!

Now you can hide the controls of the Layout Builder when you’re done setting up your layout, so they don’t interfere with your workflow. It also improves speed! Check out the Design Mode options.

About the Layout Builder

This article will explain how to use one of our most requested features in our website builder: the Layout Builder. 
With it, you will be able to break free from the predefined layout style and customize the structure to your liking. You can add, remove or reorder blocks (formerly known as containers). Within blocks, you can add sections, which in turn can have one or more columns inside. We call this the “Box Model” (as opposed to “Free-form Model”).

Box Model

The box model is better than free form in modern web design, as it is based in an organized structure, rather than a set of widgets randomly placed all around.
If we didn’t use this structure, and content was floating in your layout in a fixed position, the layout may be compromised when the content is subject of change. Free form might make sense in two situations. One, if we were in the 90′s, and web pages were static and without change. The other one: print design, where content is not updated after printing (at least not yet  ).

So how would your content change? In different ways, depending on the type of content. From the latest blog post replacing the one before, having more (or less) wording, or the new banner image for your slider being shorter (or larger) in height, or a telephone or address being added (or removed) in your footer, or a whole new block of content inserted somewhere along your layout.

All these examples will cause your layout to change, vertically. Thus content will be pushed below. Or pulled up, depending on whether the content increased or decreased. It would not be possible if the containers of these blocks of content were in a fixed/static position (as in the free form model). They could start to overlap each other, or no longer make sense in their graphic context, or be way out of place.

With the box model, allows for this flexibility of the layout to adjust as needed, depending on the content itself. Besides, with the layout builder, not only will your containers grow vertically to allow for more content, but you can now add as many blocks and sections as needed. The number of actual columns, as you will find out below, is limited due to width restrictions.

Columns, Sections and Blocks

The following image will illustrate the hierarchy of columns, inside sections, inside blocks.

 Adding a Block

If you want, for example, to move your Navigation app right under the header, you could do so by adding a new block below the header and moving your navigation there.
To add a new block, locate the little blue buttons with a plus sign inside on the rightmost side of your browser. You can either add a block above or below the current one. You’ll identify right away which one will insert a block above and which one below, as they are located on the top right or the bottom right.

Once you click one of these buttons, a block will load there. You can now place your Navigation app inside this new block. Just drag and drop the multi-directional arrow of your app to the right place.
If you decide to revert back and get your app to where it was, you can also delete the block by clicking on the “X” that appears in the middle right. Notice a red overlay that spans the whole block. If you remove a block, all sections and apps within it will be removed too, so use it with caution.

Block Selector

On the left side of your layout, notice that for every block, you have an identifier. Some of them are editable, but not all. This feature is called the Block Definer, and you can learn more about it on this link. It’s helpful to stay organized.

Add a New Section

Within a block you can have many sections. The difference between a block and a section, is that the block spans the whole width of your browser, while the section remains centered. This will affect styling, specifically backgrounds. For example: a block will have a full-width background.
So let’s say you have a layout where you currently have two sections in a block. The upper section is a large image and the one below has a tagline. You may want to insert a new section which will have a set of 4 featured products. To add a section, locate the white buttons with a plus sign on the right edge of a section. You can either add a section above or below the current one. Use the respective buttons in the upper or lower side.

Splitting Columns

Inside sections you have columns. You’ll have one column by default when you create a section. Since you want to add 4 products, you’ll want to have the same number of columns, so they display nicely in a grid. This is because you can’t have apps side by side in the same column. You must necessarily create a column for each one. Otherwise they stack on top of each other vertically.
So to add a column, you must split an existing one into two. Mouse over the left edge of a column,and notice a white button with a plus sign. This one will only appear when you hover over the left edge. If you have problems finding it, try leaving your mouse statically for some seconds right on the bordering edge.

After you click it, that column will be split into two new columns. They will have the exact half size of the original one. So go ahead and duplicate your columns until you have a total of 4. It may be easier to identify the edges of columns (and the whole section) if you add an app. This way your column won’t be empty and will have a larger height than just a thin, “empty” line.
So after splitting your columns and adding some Image apps it should look like the following image.

Note that you can’t split columns if they measure less than 320 pixels of width. This is because a single column can’t have a width of less than 160px.

Merging Columns

Now if for some reason you want to delete a column, you may do so by merging two of them together. For example, if instead of 4 featured products, you want just 3.
To merge two columns together, mouse over the edge of the two columns you want to merge. Notice an “X” button appearing, right below the “Split Columns” button. If you hover over the “X”, a gray overlay will span the columns you are about to merge. Click it and the apps within them will be placed in the single, merged column as a result.

And if you merged two columns, its probable that you want to resize them. You can adjust the size of any column by dragging its edge towards the left or right side. Notice two numbers appearing on the upper side. They show how many pixels each column measures as you drag. This way you can precisely know how long will the widths of your columns be.

Reorder Sections or Blocks

You can reorder your sections or blocks. In the former examples, we added a “featured section” with 4 columns of highlighted products above the “tagline” section. If you change your mind and want the tagline above, you can do so with the section reordering buttons. These buttons are located on the

right side of all sections (and blocks). They are depicted by two arrows pointing upward and downward respectively.

Note that you can’t move a section past the limits of its containing block. If for example, that section is the last on the bottom, you will not be able to move it below again. The same applies if it’s the only section of a block.
The reordering buttons for blocks, since they span the whole browser width, are located on the far right edge. A block will be moved along with all of its sections within.

Removing a Section

Just like blocks, you can remove a section you don’t need. Locate the “Remove Section” button right between the reordering buttons. It has an “X”. When you hover over it, you will notice a red overlay covering the whole section you are about to delete. Clicking it will also delete all the apps within, so be careful.

Note that you can’t remove a section if it’s the last one on its block. And also, you must always have at least one in your layout. The remove button for the last one will not function.

So that’s it for the Layout Builder! Now you have one more powerful tool to take your design to new levels. 

For more information, see the following post:

• Identify and Categorize your Blocks
  

For any questions or comments, please get in touch.