Build layout with WP Bakery Pagebuilder

The easiest way to help you understand quickly how to use WP Bakery Pagebuilder combining with Newsbeat theme features is through simple examples. So we gonna be creating a page with Hero Banner, Latests post and a sticky sidebar, something like this:

Just create a new page and use template pagebuilder from Page Attributes box, publish it and start editing with WP Bakery Pagebuider, use front-end editor or back-end editor as preferred.

Front-End Editor

To add new element, click Add Element, a popup will show up.

Post Blocks & Post Bricks are registered by WP Post Blocks, click on these tabs to add your post blocks or use search box to search for specific blocks.

After adding post block, Element Settings Popup will show up right immediately for you to config. If element is added directly to the page, it will be automatically wrapped inside a row and a fullwidth column, you can reconfig number of colums from Row menu buttons. Let’s just add block Hybrid 1x2x2 from tab Post Blocks for example.

As you could see in above figure, post block settings popup has 4 tabs:

  • General – General settings like block title, show/hide/add block elements.
  • Query Settings – Where you config block query criteria.
  • Filter – Where you config filter menu for block, by category or by tag. Block filter menu can be displayed as dropdown menu or inline list, or even singular cat/tag.
  • Styling – Generate custom style for block.

Note that some settings might be available for specific blocks, and also might be programmatically changed by block. For example, you can change post thumbnail aspect ratio for post blocks but can’t for post bricks or some hybrid post blocks.

Now, look at the following figure.

From Row Layout window, you can see various layouts, click on these to change columns for row, here’s the list of pre-defined layouts of row, from left to right, by fractions:

  • 1/1
  • 1/2 + 1/2
  • 2/3 + 1/3
  • 1/3 + 1/3 + 1/3
  • 1/4 + 1/4 + 1/4 + 1/4
  • 1/4 + 3/4
  • 1/4 + 1/2 + 1/4
  • 5/6 + 1/6
  • 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6
  • 1/6 + 2/3 + 1/6
  • 1/6 + 1/6 + 1/6 + 1/2

The theme and pagebuilder use grid system that allows up to 12 columns across the page, so 1/1 will be equivalent to 12 columns, similarly, 1/2 equal to 6 columns and 1/3 equal to 4 columns, simple formula for calculation should be fraction values multiply to total columns which is 12. OK, let’s make calculation for 1/4 + 3/4:

1/4 * 12 = 3
3/4 * 12 = 9

so 1/4 + 3/4 = 3 columns + 9 columns.
Similarly, 5/6 + 1/6 = 10 columns + 2 columns.
And 1/3 + 1/2 + 1/6 = 4 columns + 6 columns + 2 columns.

Easy peasy as lemon squeezy, right? 😉

Continue with Row Settings, you can stretch row content using Row stretch option, add padding to the row or change row background, theme defined background colors are also available under More tab of Row Settings to help you match your style from customizer settings without repicking background color. Below examples use theme defined background with different row stretch styles, you can visually understand how options work (scroll horizontally to see row stretch styles).

Due to compatibility issues, Row stretch uses javascript to expand row wrapper, even when you use different page templates like left sidebar or right sidebar, or fullwidth, it still works. The thing is when the page loads, you might notice row wrapper change its width if you have custom background enabled. This “problem” isn’t really a problem, it’s just kinda odd 😅, but no worry because we have a workaround for this, wrapping Rows with Sections! What we want to accomplish is to create a page with hero banner for featured posts, and a section for latest posts & a sticky sidebar, so we will seperate our content into 2 sections, one for hero banner & one for latest posts + sidebar, and structure should be:

  • Section A: Hero Banner
    • Row A
      • Hero Banner
  • Section B: Latest Posts
    • Row A
      • Content
      • Sidebar

Just add a new section and move a row with post block we created above to this section, then add another sections for Latest posts like this:

As you can see in above screenshot (captured from Backend Editor), Areas marked in red are sections and green areas are rows, and here are what we gonna change:

For Pagebuilder Elements:

  • Section A
    • General
      • Row stretch: Default
    • Design Options
      • padding top: 30px
      • padding bottom: 30px
    • More
      • (Theme) Predefined Background: Primary Light Color
  • Row A: Keep the default settings.
  • Section B
    • Design Options
      • padding top: 30px
      • padding bottom: 30px
  • Row B: Keep the default settings.

Other settings:

  • Newsbeat – Page Settings (can only be configurable in backend side)
    • No Padding top – Mobile & Desktop
  • Page Template: Pagebuilder (really important, you can use template fullwidth but template Pagebuilder is made to be compatible to WP Bakery Pagebuilder).

If you use stretched row inside a section, keep the default setting for section stretch. and page template from Page Attributes must be selected to Pagebuilder for full compatibility.

Instead of enabling background for the Row A, we enable background for Section A and no more “problem” when page loads, that’s it, and our final result:

To enable sticky content for column sidebar we open Column settings -> More then check option (Theme) Has Sticky column? then open parent Row settings -> More -> (Theme) Has Sticky column? and check it as well. Save your page and check it, now you can see sidebar (ad space) stays sticky when you scroll through Section 2. Note that sticky column only works on desktop or larger screens, and the other column(s) content must be longer sticky column’s.

Here is complete pagebuilder content for above example, you can copy and paste into Classic Editor – text mode then switch back to Backend Editor for test drive:

[vc_section nb__predefined_bg="primary-light" css=".vc_custom_1529406051484{padding-top: 30px !important;padding-bottom: 30px !important;}"][vc_row][vc_column][post_block_hybrid_1x2x2 thumb_size="" info_above="" info="" thumb_cat="" show_rating="" small_title="" cat="" category__in="" category__not_in="" tag_id="" tag__not_in="" offset="" order="DESC" orderby="date" advanced_orderby="default" time_period="default" filter_by="none" custom_style=""][/vc_column][/vc_row][/vc_section][vc_section css=".vc_custom_1529406070503{padding-top: 30px !important;padding-bottom: 30px !important;}"][vc_row nb__has_sticky_col="yes"][vc_column width="3/4"][post_block_theme_loop title="Latest Posts" thumb_style="default" thumb_size="" info_above="" info="" excerpt="true" small_title="" navigation="load_more" cat="" category__in="" category__not_in="" tag_id="" tag__not_in="" posts_per_page="5" order="DESC" orderby="date" advanced_orderby="default" time_period="default" filter_by="none" custom_style="" template="classic" excerpt_length="30"][/vc_column][vc_column width="1/4" nb__is_sticky_col="yes"][vc_column_text]<img src="" alt="" />[/vc_column_text][/vc_column][/vc_row][/vc_section]