Wordpress
WPBakery editor
Right from the start, WPBakery Page Builder is here to help you with ready-to-use content elements. Literally, within minutes, you can build WordPress pages and page layouts with drag and drop interface without touching a single line of code.
Basic usage
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 or adjust advanced pages, here’s our beginner’s guide to the WPBakery Page Builder.
Page Builder
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 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
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.
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 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.
Add & edit content
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.
Add and Edit Text
For example, the text element has the following general options:
On the other hand, the button element has these general options for customization:
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 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.
Publish
Publishing your brand new page or uploading changes to a page is very easy and can be done with just 1 click.
Screen sizes
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.
Publish your site
Publish your page or adjustments quickly and easily by clicking "Publish" or "Update" in the top right of the menu.
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 and edit stunning web pages. If you need any help, Submit a request below and we’ll get back to you.