WPBakery is one of the oldest and most well-known WordPress page builders out there. Released back in 2011, the plugin has close to 400,000 sales and powers countless WordPress websites to this day.
If you want to use this simple page builder to create advanced pages, here’s our beginner’s guide to the WPBakery Page Builder.
Installing and Setting Up WPBakery
WPBakery offers two single-payment licenses on its website: a regular $45 license for a single site and an extended $245 license for a SaaS application, both offering free updates and premium support.You can download the plugin zip file after purchasing a license and upload it to your WordPress website.
Activating the plugin will create a new WPBakery Page Builder tab in your WordPress admin area and a Frontend and Backend Editor while editing pages and posts.
Head to WPBakery Page Builder > General Settings. Here, you can select the Google font subsets available to content elements. You can also select the default templates for posts and pages. More options will become available when you save them first.
In the next section, WPBakery Page Builder > Role Manager, you can decide which features are accessible to the various roles on your website. For example, click “Administrator” if you want to customize the administrator’s role access. Select the “Custom” setting and enable the “Post” option.
Below, you can enable or disable access to privileges like the backend editor, frontend editor, page settings, settings options, templates, elements, grid builder, elements presets, and drag and drop. You can similarly edit access for other roles like editor, author, contributor, and shop manager.
Next in line is the Design Options section. By enabling the custom design options setting, you can select the default colors for various WPBakery Page Builder elements like hover, post sliders, and separators. You can also set the bottom margins for elements, horizontal spacing between columns, and screen width for mobile screens.
The Custom CSS section lets you add custom CSS codes that control the appearance of HTML elements on the web page, while the Shortcode Mapper can add custom 3rd party vendors shortcodes to WPBakery’s content elements.
Page Builder Layout, Elements, and Templates
Head to Page > Add New to create a new page. You can go to the Posts section instead if that’s what you want to create.
By default, the page opens up with the Classic WordPress editor. But you’ll notice two new buttons under the title field named Backend Editor and Frontend Editor. You can use these buttons to access the WPBakery Page Builder. The Backend Editor lets you play around with a huge number of elements and templates to build the perfect page. While the frontend editor offers a what-you-see-is-what-you-get experience so you get exactly what you expect.
The layouts for both the backend and frontend editors are almost entirely similar. We have a toolbar at the top while the editing area takes up most of the screen. The toolbar has the following options:
- The plus icon lets us add elements to the page. Here, you can also access your saved templates and the template library.
- The gear icon lets us add Custom CSS codes to the post.
- The preview button lets you preview your page on different screen sizes.
- The Backed Editor button lets us switch to the backend editor.
- The final two buttons in the toolbar let you save and publish the page.
In the editing area below, we have three self-explanatory buttons to add an element, add a text block, and add a template.
We can choose from more than 50 elements like Row, Single image, Video player, WP search, Widgetised sidebar, Button, Separator, FAQ, Custom heading, and more.
We can also choose from more than 85 page templates to speed up our page building process. All templates can be imported with a click and are fully editable.
Building a page with WPBakery Page Builder
Building a page with the WPBakery Page Builder is simple. Start by adding a title to the page by clicking “(no title)”. Type the page title in the pop-up. Then, click “Save Changes” and close the pop-up. Let’s create a simple page with an image, a text block, and a button.
Adding an Image
To add an image, click “Add element” and select the “Single image” element. A pop-up will appear with all the options available for the image with two sections: General, and Design Options.
In the General section, you can add a widget title and upload the image from an external link or the media library. You can determine how much space the image takes on your webpage by using the Image Size setting.
The page builder supports 4 sizes: Thumbnail, Medium, Large, and Full. Alternatively, you can enter the size in pixels (Example: 200×100). You just need to type the size in the Image size field provided.
Below, you can add a caption to the image, choose it’s alignment, and even select from a list of preset styles for it.
You can choose an “On click action” for the image which will take place when a visitor clicks on the image. You can either link to a large version of the image, open prettyPhoto, open a custom link, or simply zoom into the image. Of course, you can choose if the link will open in a new window or not.
Finally, WPBakery Page Builder lets you add simple animations to elements like fading and bouncing that can create a professional look.
In the Design Options section, you can create a border color, select a border style and border radius, and set a background color for the image. You can set the exact padding, border, and margin values for the element by using the fields provided.
The padding is the space between the image and the border, while the margin determines the space between the border and the edge of the page.
Adding Rows and Columns
In WPBakery Page Builder, elements are added with columns, which are, in turn, placed within columns. This means, to add new elements, you need to add a row and divide it into columns first.
So let’s add a row below the image by clicking the plus icon and selecting “Row” from the elements pop-up. When you hover over the row, you’ll notice some options. These options help us edit the row and column settings. You can click and hold the first button to drag and relocate the row.
To add columns to the row, expand the hovering options and click Change layout. You can either choose from a preset column layout, or type in your own values. Click Update and close it when you’re done.
We can now add two elements in these two columns. Whether you’re a text block, a button, or anything else, the process is similar. However, you’ll get to work with different general options depending on the element.
For example, the text element has the following general options:
On the other hand, the button element has these general options for customization:
Before you publish, make sure the page works on all screen sizes. And if you’re interested in using the Backend editor, the layout and principles are pretty much the same.
This is how you can easily build your page one block at a time with the WPBakery Page Builder. Using just these simple steps, you can create stunning web pages. If you need any help, leave a comment below and we’ll get back to you.
If you prefer a video version, please check the video below:
