Use Page Builder for any page, post, release, video, event or product.

Click on the “Backend Editor” button at the top left of your WordPress text editor to switch to Page Builder mode. If you see the “Classic Mode” button, that means the Page Builder has already been enabled.

Click on “Add A New Element” and choose from the list of elements that you’d like to add.

Create a Row

The “Row” is the main WPBakery Page Builder container structure.

Each rows can be displayed differently: you can choose a background, a main Skin Tone – Light: dark font for light background or Dark: light font for dark background -, and the column layout you want to use.

Depending on the settings you choose, the design of the theme (row padding, margin etc..) will adapt automatically.

Row settings example

But if you wan to polish the row design even more, you can use the “Custom” tab to add your own padding and margin settings and even add your own custom CSS.

Note: Margin and padding adjustment are widely used in theme.

Row custom settings example

Column settings

Columns are the second level container of the row. This is where you will insert your different elements. Just like rows, columns come with many settings to create advanced layout. For each column you can set a different background, color tone etc…

You can check a few examples of what it’s possible to do with the Row & Columns system on this demo page.

Elements

The WPBakery Page Builder elements are the actual content that you can insert in your page. It includes, text blocks, icon box, custom headings, medias etc…

To insert an element in your column, click on the “+” icon in your column to open the WPBakery Page Builder elements window.

Use WPBakery Page Builder to Display Posts.

In the WPBakery Page Builder backend editor, click on “Add Element” and choose the “Posts”, “Releases”, “Products” elements or any other available post type.

You will be able to choose the layout and styling options for your post module.

Check out the full documentation for WP Bakery here: https://kb.wpbakery.com/docs/learning-more/

Documentation