What is WPBakery Page Builder?

WPBakery Page Builder is a plugin added to your wordpress website for layout, structure and content. It allows you to add elements such as text blocks, images, contact forms and videos whilst giving better control of how these elements laid out on the page.

Getting Started

Whether creating a new page or editing and existing one, you will need to make sure that you have WP Bakery Page Builder enabled for the page.

If you cannot see the page builder options, click the ‘backend editor’ button.

You should then see the below options

Or if it is an existing page, something like this:

Adding/Editing Text

One of the things you will want to do most often is to add or edit a text block.
When adding a new text block you can either add it to an existing row or add a new row with a text block

You will then add the text box

Once you have done this a popup box will appear with some dummy text, replace this with your text and then save the changes to the element and update the page to see your changes on the front end of your site.

If you want to edit an existing text block the hover the mouse over the element and click on the green pencil icon.

Adding/Updating an Image

As with the text element you will either use one of the plus icons to add a new image to an existing or new row or you will click on the green pencil icon to update an existing image.

If you are adding a new image element you will need to choose this from the selection of elements:

There will then be a popup in order for you to add your image:

You can drag and drop images from your desktop in order to upload them.
Images that you upload should already be the correct size/dimensions for the area on your site you are using them on.

Once you have made your changes you should click ‘Save changes’ and update the page.

If you are editing an existing image block and you wish to change the image then click the red ‘X’ in order to replace the existing image.

Adding a Contact From

WP bakery Page Builder has elements for both Contact From 7 and Gravity forms so that you can add an existing form to a page

Contact Form 7:

Simply choose the form from the dropdown menu and click ‘save changes’

Gravity forms is a similar process (if you cannot find an element in the list you can use search, as soon as you start to type the list will start to reduce):

Adding Video

You can embed videos on the site from third party services such as Youtube or Vimeo.

Choose the video player element

Then paste the link to your video in the field in the popup box

Adding empty space between elements/rows

If you find that there is not enough space between an element and the one below or a row and the one below, you can use the ’empty space’ element

You can then input the amount you wish the gap to be, the default is 32px so maybe try this first and then increase or decrease if it is not quite right.

Duplicate Element or Row

A useful tool within WP Bakery Page Builder is clone functionality, you may have a row that you wish to reproduce with slightly different information or you may just wish to clone it so that you can work on edits for the row and know that you have a backup.

For similar reasons you may want to clone an individual element, hover over the element and click the green clone icon

Adding Slider Revolution Element

WP Bakery Page Builder has an element for Slider Revolution in order for you to add sliders to your page, for help on how to edit your sliders/slides see our Slider Revolution User Guide page

Choose the Slider Revolution element

Choose the slider that you want to add