Adding new blocks to your page layout in Beaver Builder

Please note: This guide only applies if you have the Beaver Builder page builder installed on your website.

Blocks are objects within your webpage design, such as text boxes, headings, buttons, images and video boxes.  All these blocks make up your webpage design.

You can use Beaver Builder to arrange your blocks into rows and columns to create a professional design for your visitors to see.

1. Firstly, enter the Beaver Builder editing screen (see our introduction to Beaver Builder first!).
2. You may also want to use rows and columns to create your page structure.
3. Next, click the “+” icon in the top-right corner of the screen.
4. You will see a variety of blocks available for you to use.  This may vary for different websites and depending on what was created when your website was first setup:
5. Find the block you want to add. For this example, we will be using the “Photo” block.
6. Hover over the “Photo” label, then drag the block into your page design.
7. You will then see blue lines appear on the webpage, indicating the section (e.g. columns) where you can place the block.  Release your mouse to put the block into position:
8. You can then click on the “Edit” (tool) icon to see more options for your new block.
9. After editing each block options panel, ensure you click “Save” each time.
10. When you have finished editing, click on “Done” at the top of the page, and then click “Publish“.

Moving and editing blocks:

To move a block, firstly you must hover over it. At the top or the bottom of that block, you will see a group of little icons that looks like this:

These icons do the following:

1. Move Tool – This allows you to click, hold and then drag the block to somewhere else on the page.
2. Settings –  This is where you can edit settings relating to the block itself, e.g for a “Photo” box, you can edit the image size, etc.
3. Duplicate – Click this icon to duplicate the block. Get an exact copy of the block and its contents!
4. Column Settings –  This allows you to control the settings of the whole column instead of the individual block.  This typically is for advanced users.
5. Delete – Use this if you want to delete a specific block.

Using existing pre-built blocks:

When using Beaver Builder to edit your pages, there’s a nifty tool that allows you to save and re-use blocks and layouts on other pages.  Primary Image may have created some blocks to help get you started, such as styled buttons in your company’s branding.

To use an existing saved block, click on the “X” icon, then on the “Saved” tab:

You can then drag these blocks or layouts into your pages.

Saving your own blocks for re-use:

On any block or row, you can click the “Save As” button.

This will save the block in the “Saved” area (shown above).

Global blocks:

“Global blocks” are blocks that can be added to several pages, but edited in just one place.

For example, if you have a “benefits” box, you can save this as a global block, and add this to several pages.  By editing the block on one page, the same edits will apply throughout your website to other pages that contain this same block.

Global blocks are signified with an orange label: