Using the WP Bakery Page Builder

Interface

We really like the way the plugin gives content builders two different options for creating pages and layouts. For those more familiar with page builder platforms such as SquareSpace or Wix, there is a visual editor that allows creators to layout their pages and see their content in real time. For those from a more performance-based focus, there is also a back end editor to quickly duplicate, re-order, and insert new blocks of content.

We also like that when things get a little whacky (because it can happen with anything done on computers) there is a “classic mode” that shows the actual WordPress shortcodes (ahhhhh….the good ole days) that WP Bakery uses to render the pages.  That’s right! The page builder actually stores the page content and information in the standard WP formats! We’ll get to why this is really important with the “Extensibility” part of this post.

Front End Editor

The front end editor works by rendering a near-copy of the page on the screen and adding controls that appear as you hover over the various layout blocks. These controls allow you to do almost anything you need and then see the result right away. You can add new “rows” to the content and break it into columns. You can add new element blocks such as images, carousels, galleries, or – of course- text.

The front end editor is pretty good, but it does take a bit of horsepower on your computer to run it, sometimes. It’s also not perfect at rendering all the things in the same way the finished page will look to the public. Still it’s a pretty great way to get things built without having to know anything about coding!

Back End Editor

Because the front-end editor can tax computer resources a bit, the back-end editor is often preferred by many content creators. It has many of the same controls settings used by the front-end editor, but it uses blocks of (mainly) text instead of the rendered content to allow editing. Columns, content elements, rows, and sections can be dragged around the screen in the same way they are on the front-end editor to make the layout work the way creators intend.

Extensibility

WordPress is built on the idea that your website is going to have unique needs. As a result, the platform is made to be adapted to different types of businesses and organizations. This is done through plugins and even custom code. This is great for designers and developers, but not always as easy to manage if you don’t have that background.

One of the biggest reasons we like to work with WP Bakery, is that the plugin’s framework makes extending the available elements and templates is easy. This allows us to give our clients an approachable way to update their sites and add new content without needing to know any coding and still make use of all the plugins to add the special content used to make it work for their needs.

WP Bakery’s shortcode mapper is great tool. The mapper makes it easy to expand what elements are available for the drag and drop elements offered when building a new page. Many plugins are available that do not have their own integration into WP Bakery. By using the shortcode mapper, you can create one on your own!

It may take a little experience using the shortcodes to set up the mapper with all of the options available, but the process is pretty easy. Looking at the screenshots, you can see that the basic process is to enter the shortcode like you would if you were to be adding it directly to a post. You can include variables and content if the shortcode supports it.

WP Bakery will then show you a parsed version of the shortcode and allow you to set default values, add new variables, and set up other details. Once the shortcode is mapped, it will appear along with the other WP Bakery content elements in the page builder.

As developers, it’s also easy for us to leverage the hooks in the plugin to add elements to the offered to our clients. This means some of the elements we have built into our Good Harvest theme are available as well. You can see an example of our Responsive Image element here with all the settings that come with that we’ve built into it.