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

Testimonials

Lovely team to work with; found a solution to help redesign our website with a restricted budget yet produced a great design and UX.

Lou Devine - Give a Kidney CIO

We have been using Designworks services for over five years and we could not ask for a better web design company to work with.

Anna Brisley - Westmorland and Furness Council

Thanks so much for all your help and patience with the Giving Hope website, it will help the CIC achieve its aims in supporting vulnerable women.

Claire Mason - Giving Hope CIC

Their designs are fresh, engage the intended audience and respond perfectly to the brief.

Stacy Hurley - Waste into Wellbeing

We have already had some great comments about the new site so a big thank you to everyone at Designworks for their help and support.

Sharon Bianchi - The European Outdoor Conservation Association

We’re delighted with the new website that Designworks have created for us. They have been fantastic throughout the entire journey.

Mike Heal - WDAD Communications

We are delighted with the new site and have already received positive feedback and new sales enquiries!

Alistair Stewart - 4S DAWN Clinical Software

Such a wonderful team to work with, and we’re so delighted with our new refreshed Family Arts Campaign website!

Sophie Evans - Family Arts Campaign

The team delivered the commission to a very high standard, impressing with the way they took ownership of the project and delivered pragmatic solutions to the challenges faced along the way.

Mark Brierley - Westmorland and Furness Council

A highly responsive, professional team. Designworks are mindful of their customers needs and efficiently work with you to find solutions. Excellent!

Martin Elliott - Boeme Design

We’re delighted with our new site, which maintains the feel and spirit of our business, but with a more modern refreshing feel. We’ve had lots of compliments from our customers and would definitely recommend Designworks

Adrian Thomas - Elterwater Hostel

Altogether the experience was friendly, professional and we got exactly what we asked for, for the amount we were quoted. Thank you Rory, Jonathan and the team, great job.

Tom Hunt - British Guild of Agricultural Journalists

Design for good

We operate with a clear commitment to social and environmental responsibility, ensuring our projects have a positive, lasting impact, and partner with clients and suppliers who share our values.
Read more

green small business logo The Green Web Foundation logo