How to add additional info boxes to an existing row in Beaver Builder

This article is a guide on how to add an extra box on the page where rows of boxes already appear.

1. Log in to Wordpress and open the page where you want to make the changes in.

2. Open Beaver Builder (top left corner).

3. Hoover over on one of the boxes and choose 'Info Box Settings'.

4. Click on the '+' button on the top right corner of the page and choose the 'Rows' tab within it.

Snip20180712_78

5. Choose the correct amount of columns you have in each row, in this case '3 Columns', and drag and drop it below the last row of the boxes (Beaver Builder will guide you by providing placement suggestions as you are dragging the 3 columns over the page).

Snip20180712_79

6. You should now see three dashed box outlines. To copy the settings and add a new box, you first need to duplicate the boxes from the existing layers. Hoover over one of the above boxes and choose 'Edit Columns' and click on 'Duplicate Column'.

Snip20180712_80

7. Now, drag and drop the box by holding the navigator icon and move it over to the empty row of boxes below. Again, Beaver Builder will guide you by providing placement suggestions as you are dragging the box.

Snip20180712_81

8. Delete the empty box layout by choosing 'Remove'

Snip20180712_82

9. Repeat steps 6.-8. for every new box in the row.

10. Before you Publish the page, check that all the boxes are equalised. Choose to 'Edit Column' and then 'Yes' in the 'Equalize Column Heights' dropdown in the 'Column Settings' box that just popped up.

Snip20180712_83

11. Finally, Save the box, click Done on the page (top right corner of the page) and Publish all the changes.
Snip20180712_75