Getting started using Beaver Builder

Please note: This article only applies if you have the “Beaver Builder” page builder system installed on your website.

Beaver Builder is a new-generation editing system, which allows you to easily update the content on your webpages, whilst having a “real” preview of how your pages look when published:

There’s two ways of accessing the editing interface:

• If you’re already logged-in and you’re browsing the website as a visitor would see it, you can click on “Beaver Builder” on the dark bar at the top of the screen:

• Or, if you’re accessing your pages via the website dashboard and the “Pages” area, you’ll see the “Beaver Builder” link when you hover over an item:

Warning:  If a green indicator is displayed next to the Beaver Builder links, it means that the page content and layout has already been created in Beaver Builder.  Please do not click on the “Edit” or “Edit Page” links, as this will bring up the default WordPress editing screens.  You must click on the “Beaver Builder” links.

You’ll know when you’re in the Beaver Builder editing interface when the bar at the top of the screen changes and displays a beaver logo!  You can now start making edits…

Using Beaver Builder to edit text boxes:

1. Using your cursor, you can hover over any objects you’d like to edit.  A blue outline will appear around the boxes as you move your mouse across the screen:
2. When we click on the text, an editing box appears, which will allow you to change the wording:
3. Using the options within the box, you can add styling, links and more.
4. Once you’ve finished your edits, click “Save“.
5. You can repeat this step for other boxes in your page design.
6. Once you have made all the changes to your page, click “Done” in the top-right corner of the screen:
7. And then click on “Publish“:
8. Your page will now be updated and published for visitors to see.

Changing images:

1. Following the same process as above, you can click on an image and an editing box will appear:
2. Click on “Remove” (indicated in red above) and choose or upload your new image.
3. You can normally ignore any other options as these are for advanced users (i.e. you will typically just use the “General” tab).
4. When you’re finished, click the “Save” button.

Editing other types of blocks:

• When clicking on certain types of objects, e.g. testimonials, lists, etc, you may have to look in the editing dialogue for more options.
• For example, in this testimonials carousel, you’ll need to click on the “Testimonials” tab, and then you can add, edit or reorder the individual testimonials:

• If a block has an orange border in the editing screen, this shows it is a “global” block, which means the same block is reused in several places throughout your website.  If you edit a block with an orange border, it’ll automatically update the same block throughout the website’s other pages for your convenience, so you only need to edit this once.
• If you need any help with particular layouts designed by Primary Image, please contact us and we’ll be happy to guide you further.

Useful to know…

• The software will auto-save all your edits, so if your internet connection is interrupted, your work will be safe!
• You can also save a draft or discard changes (see the Beaver Builder guide on “Save, Publish & Discard”).
• Click “P” to preview your pages, including the ability to see how your webpages will look on tablets and smartphones.
• And, whilst editing, should you wish to undo the last change, click CTRL + Z (on Windows).