Ask a Question ?
Design & Publish Websites Faster

How to Use the Layout Builder to Fully Customize Your Site’s Structure

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.

Design Mode menu with "Layout Controls" active

You need to activate this option for the Layout Controls to appear

If you want to improve speed and performance, don’t have both Layout Controls and Dots activated simultaneously.

About the Layout Builder

This article will explain how to use one of our most requested features in our website builder: the Layout Builder. Read the Layout Builder release blog post here.

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”).

Layout Diagram of Containers

This diagram illustrates how blocks have sections inside, and sections have columns

Note: as you’ll see below, each of the containers have their own way (buttons) of adding/splitting more of them. Don’t confuse them!

The Block’s button is blue, the section’s is white, and the column’s is white too but only appears after hovering the left border of a column.

Different buttons for adding containers

Different buttons for adding containers

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.

Our web design tool, 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.

Summarized layout diagram

This diagram shows also the hierarchy of blocks, sections and columns

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.

Buttons for adding a new block

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.

Remove block button

If you click on the X, the block will be removed

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.

Block selector for changing type of block

On the leftmost side of your page, you’ll find a selector/identifier for each of your blocks

The available kinds of Blocks are:

  • Header
  • Intro
  • Body(s)
  • Footer

You can have as many Blocks as you want, the extra Blocks will gain the name of Body 1, Body 2, Body 3, etc. The only Block that is required is the header, which must always be the first one at the top.

Note that these tags are only identifiers, to help you locate them later or edit its styles with the Bulk Style Editor.

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.

"Add section" buttons

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.

Left edge of a column

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.

"Featured" section

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

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.

"Merge Columns" button

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.

Edge between columns

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.

Reorder below button

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.

Reordering  buttons

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.

"Remove Section" button

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.

Resizing

You can modify (resize) the width of Columns, but the width of Sections and Blocks (any Block: header, intro, bodies or footer) is fixed.

In order to resize a column, there must be more than one on the current Section. If you have only one Column, you can’t change its size. Once you have two or more (by splitting them, see above “Splitting Columns”), dragging the border that separates them will increase one while decreasing the other one’s, as to retain the total width of the Section (960 pixels).

Apps inside Columns will adjust to the size of that Column (width).

As for height: you can’t directly modify it like the width for Columns. This also applies to Sections and Blocks. The height is automatically adjusted when entering content (or padding and margin).

To sum resizing up: you can resize Columns width manually, but height (for all: Columns, Sections and Blocks) automatically adjusts to the height of the elements contained (Block > Section > Column > App).

Questions?

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

If you have any trouble with it, or there’s something we’re missing in this tutorial, please let us know!

Menu