WPBakery Page Builder: The Definitive Guide to WordPress's #1 Page Builder Plugin

WPBakery Page Builder: The Definitive Guide to WordPress’s #1 Page Builder Plugin

Introduction:

Welcome to the most comprehensive guide ever created for WPBakery Page Builder, the powerhouse plugin that has empowered millions of WordPress users to build stunning websites without ever touching a line of code. Whether you’re a complete beginner taking your first steps into the world of web design, a content creator looking to break free from rigid theme layouts, a seasoned web designer seeking to streamline your workflow, or a developer aiming to extend WordPress’s capabilities, this guide is your definitive resource. Within these pages, we will embark on a journey that will transform you from a novice into a WPBakery virtuoso, capable of crafting professional, responsive, and engaging websites with unparalleled efficiency and creativity.

The WordPress Page Builder Landscape

Before we dive deep into WPBakery, it’s essential to understand the ecosystem it inhabits. In the early days of WordPress, creating a page was a linear experience: a single content box where you would type your text, add an image, and hope your theme’s predefined styles would make it look good. The desire for more visual control led to the birth of the “page builder.” These plugins revolutionized WordPress by introducing a visual, modular approach to content creation. Instead of a single block of text, you could now build pages using a collection of “elements” or “modules” – text blocks, images, buttons, galleries, etc. – and arrange them on a grid of rows and columns, much like stacking Lego bricks.

Today, the page builder landscape is more crowded and competitive than ever. Giants like Elementor and Divi have captured significant market share with their slick interfaces and extensive feature sets. The WordPress core itself has evolved, introducing the block editor (Gutenberg), which is a form of page builder built directly into WordPress. So, where does WPBakery fit in this modern landscape?

WPBakery Page Builder, formerly known as Visual Composer, is one of the original pioneers in this space. It has a long and storied history and has been bundled with hundreds of thousands of premium themes, making it one of the most widely installed page builders in the world. Its longevity is a testament to its robustness, flexibility, and the massive ecosystem of third-party add-ons and integrations that have been built around it. While newer builders might offer flashier interfaces, WPBakery’s strength lies in its powerful backend editor, its deep integration with the WordPress ecosystem, and its granular control over design and responsiveness. It remains a favorite among developers and experienced users who appreciate its stability and the ability to create complex, custom layouts without being locked into a proprietary system.

This guide will not only teach you how to use WPBakery but also help you understand its unique philosophy and how it compares to other tools. We’ll explore its strengths, acknowledge its weaknesses, and provide you with the knowledge to decide if it’s the right tool for your project.

What is WPBakery Page Builder? (History: Formerly Visual Composer)

At its core, WPBakery Page Builder is a premium WordPress plugin that provides a drag-and-drop interface for creating and managing website content. It replaces the standard WordPress editor with a much more powerful and flexible system. But what does that actually mean?

Imagine you’re building a house. The standard WordPress editor is like giving you a single, large room and telling you to arrange all your furniture inside. You can do it, but your options are limited. WPBakery Page Builder, on the other hand, gives you a plot of land and a set of tools to build walls, create rooms of different sizes, add windows and doors, and then furnish each room exactly how you want. It gives you the structural freedom to design your layout from the ground up.

This is achieved through a simple yet powerful hierarchy: Rows, Columns, and Elements.

Rows are the horizontal containers that form the basic structure of your page. You can stack rows on top of each other to build your page vertically.
Columns reside inside rows. They divide a row into vertical sections, allowing you to create side-by-side content. WPBakery offers a variety of predefined column layouts (e.g., 1/2 + 1/2, 1/3 + 1/3 + 1/3) and allows you to create custom column widths.
Elements are the content blocks that you place inside columns. This is where your actual content goes. WPBakery comes with a vast library of over 50 built-in elements, including text blocks, images, buttons, sliders, contact forms, social media feeds, and much more. You can drag and drop these elements into your columns and then customize their appearance and functionality through a series of intuitive settings panels.

It’s important to clarify the name change. For many years, this plugin was known as “Visual Composer.” In 2017, the development team rebranded the plugin as “WPBakery Page Builder.” The name “Visual Composer” was then used for a separate, newer website builder platform (visualcomposer.com). This has caused some confusion, but they are now two distinct products. This guide is exclusively about the WordPress plugin, WPBakery Page Builder, which you can find on CodeCanyon. If you see references to “Visual Composer” in older tutorials or theme documentation, they are almost certainly referring to what is now WPBakery Page Builder.

Who is This Guide For? (Beginners, Content Creators, Web Designers, Developers)

One of the reasons for WPBakery’s enduring popularity is its versatility. It caters to a wide range of users with different skill sets and goals. This guide is structured to be valuable for all of them.

For Beginners: If you’re new to WordPress or web design, the sheer number of options can be overwhelming. This guide will start from the very beginning, holding your hand through the installation and setup process. We’ll explain the fundamental concepts of rows, columns, and elements in plain English, with plenty of screenshots and step-by-step instructions. We’ll walk you through creating your first page, adding content, and making it look good. By the end of this guide, you’ll have the confidence and skills to build your own professional-looking website from scratch.
For Content Creators & Bloggers: As a content creator, your primary focus is on your message. You don’t want to be bogged down by technical limitations. WPBakery allows you to break free from the constraints of your theme’s blog layout. You can create visually rich articles, landing pages for your products or services, and author pages that truly reflect your personal brand. We’ll show you how to use elements like tabs, accordions, and galleries to present your content in a more engaging and organized way, keeping your readers hooked and improving their experience on your site.
For Web Designers: For designers, time is money. WPBakery is a powerful tool for rapid prototyping and development. Instead of writing custom HTML and CSS for every layout, you can build complex pages in a fraction of the time. We’ll delve into the advanced design options, showing you how to achieve pixel-perfect control over typography, colors, spacing, and responsive behavior. We’ll also cover efficiency-boosting features like Global Elements and Templates, which will allow you to create a consistent design system across your clients’ websites and make global updates with a single click.
For Developers: WPBakery is not just a tool for non-coders. It’s a highly extensible framework that developers can leverage to build powerful, custom solutions for their clients. We’ll explore the developer-centric features of WPBakery, including how to create your own custom elements (shortcodes) using the vc_map() function. We’ll show you how to integrate these custom elements into your themes, providing your clients with a user-friendly interface for managing content that would otherwise require technical expertise. We’ll also cover best practices for integrating WPBakery into your themes and ensuring compatibility.

Key Benefits and Potential Drawbacks

No tool is perfect, and it’s important to have a balanced understanding of what WPBakery excels at and where it might fall short.

Key Benefits:

Massive Ecosystem & Theme Integration: WPBakery’s biggest advantage is its ubiquity. It has been bundled with countless premium themes for years. This means if you purchase a premium theme, there’s a good chance it comes with WPBakery and has been specifically styled to work with it. This saves you money and ensures a seamless integration.
Powerful Backend Editor: While many page builders are moving towards a purely frontend editing experience, WPBakery’s backend editor remains a favorite among many professionals. It’s fast, lightweight, and provides a clear, uncluttered view of your page structure, which can be invaluable when working with complex layouts.
Dual Editor Interface: WPBakery gives you the choice between a Backend Editor and a Frontend Editor. You can switch between them on the fly, allowing you to use the editor that best suits the task at hand. The backend editor is great for structural changes, while the frontend editor is perfect for fine-tuning the visual appearance.
Extensive Element Library & Third-Party Add-ons: With over 50 built-in elements and a thriving ecosystem of third-party add-ons, WPBakery can handle almost any design or functionality requirement you can throw at it. From e-commerce integrations to advanced sliders, there’s likely an add-on for it.
Granular Control over Design & Responsiveness: WPBakery gives you precise control over every aspect of your design. You can customize everything from font sizes and line heights to padding and margins on a per-element basis. Its responsive controls are also very powerful, allowing you to fine-tune your layout for different screen sizes.
Role Management: The built-in Role Manager allows you to control which user roles can access the page builder. This is a crucial feature for multi-author sites, as you can prevent contributors or authors from accidentally breaking the site’s design.

Potential Drawbacks:

Steeper Learning Curve Compared to Newer Builders: Compared to some of the newer page builders on the market, WPBakery can have a slightly steeper learning curve, especially for complete beginners. The interface, while powerful, can feel a bit more dated and less intuitive at first glance.
Potential for “Bloat”: Because it’s been around for a long time and has so many features, WPBakery can sometimes be perceived as “bloated.” If you’re not careful, it can add a significant amount of CSS and JavaScript to your site, which can impact page load times. We’ll cover performance optimization in this guide to help you mitigate this.
Frontend Editor Can Be Slower: While the backend editor is fast, the frontend editor can sometimes feel a bit sluggish, especially on complex pages. This is because it has to render the entire page and all its styles in real-time.
Cleaner Markup from Competitors: Some newer page builders generate cleaner, more semantic HTML markup out of the box. While WPBakery’s markup is perfectly valid, it can sometimes be a bit verbose, which might be a concern for developers who are very particular about code quality.
The Shift Towards Gutenberg: The rise of the block editor (Gutenberg) in WordPress core has changed the landscape. While WPBakery still works perfectly with the block editor (you can use WPBakery on a page-by-page basis), the future of WordPress page building is increasingly tied to Gutenberg. However, WPBakery’s massive installed base and feature set ensure it will remain a relevant and powerful tool for years to come.

A Note on Versions: WPBakery vs. Visual Composer Website Builder

As mentioned earlier, the name change from Visual Composer to WPBakery Page Builder has caused some confusion. It’s crucial to understand that these are now two separate products from the same company.

WPBakery Page Builder (wpbakery.com): This is the classic, legacy WordPress plugin that is the subject of this guide. It is sold on CodeCanyon and is known for its dual editor interface (backend and frontend), its vast library of elements, and its deep integration with the WordPress theme ecosystem. If you have a premium theme that “includes Visual Composer,” it is almost certainly this plugin.
Visual Composer Website Builder (visualcomposer.com): This is a newer, completely separate product. It’s a full-fledged website builder that aims to be an all-in-one solution for creating entire websites, not just individual pages. It features a purely frontend editing experience, a different set of elements, and its own ecosystem of templates and add-ons. It is sold directly from its own website via a subscription model.

This guide will focus exclusively on WPBakery Page Builder. While the two products share a common ancestry, they are now developed independently and have different features, interfaces, and licensing models. If you’re using the newer Visual Composer Website Builder, this guide will not be applicable.

Now that we have a solid understanding of what WPBakery is, who it’s for, and its place in the WordPress ecosystem, it’s time to roll up our sleeves and get our hands dirty. In the next part, we’ll walk you through the process of installing and setting up WPBakery on your WordPress site, and then we’ll dive deep into its interface and core concepts. Let’s begin the journey to mastering WPBakery Page Builder.

Part 1: Getting Started & The Fundamentals

This first part of the guide lays the groundwork for your entire WPBakery experience. We’ll start from absolute zero, guiding you through the process of getting the plugin installed, activated, and configured correctly on your WordPress site. From there, we’ll introduce you to the heart of WPBakery: its user interface. We’ll demystify the two editing modes, the core elements of rows and columns, and the essential tools you’ll be using every day. By the end of this part, you’ll have a solid grasp of the fundamentals and be ready to start building.

Chapter 1: Installation, Setup, and First Steps

Welcome to the beginning of your journey with WPBakery Page Builder. This chapter is designed to take you from zero to having a fully functional page builder on your WordPress site, ready for action. We’ll cover everything from purchasing the plugin (if you haven’t already) to navigating its initial dashboard. Let’s get started.

1.1. Purchasing and Downloading the Plugin WPBakery Page Builder is a premium plugin. This means you purchase a license directly from the Envato Market (CodeCanyon). A single license allows you to use the plugin on one finished website (you can use it on a development/staging site as well).

The Process:

Visit the WPBakery page on CodeCanyon.

Click the “Purchase” button and complete the checkout process.

Once purchased, go to your Envato account’s “Downloads” section.

You will find the WPBakery Page Builder plugin file, typically named something like js_composer.zip. Download this file to your computer. Keep this file safe, as you will need it for installation and future updates.

Important Note: Many premium WordPress themes bundle WPBakery Page Builder. If your theme includes it, you may not need to purchase it separately. Check your theme’s documentation. However, a separate license gives you direct support from WPBakery and updates independent of your theme.

1.2. Two Methods of Installation There are two primary ways to install WPBakery on your WordPress site.

Method A: Installing the Downloaded Zip File (Most Common) This is the standard method if you purchased WPBakery yourself.

Navigate to Plugins > Add New.

Click the “Upload Plugin” button at the top of the page.

Click “Choose File” and select the js_composer.zip file you downloaded from CodeCanyon.

Click “Install Now”.

After the installation is complete, you will see a success message. Do not stop here. You must now click the “Activate Plugin” button.

Method B: Activation via a Bundled Theme If your theme bundles WPBakery, the process is often different.

After installing and activating your theme, look for a notification or a new menu item in your admin panel, often labeled “Install Plugins” or “Required Plugins.”

This page will list WPBakery Page Builder as a required or recommended plugin.

Simply find WPBakery in the list and click “Install” and then “Activate”. The theme often handles the file installation automatically.

1.3. The Crucial Activation Step: Entering Your Purchase Code This is the most critical step that is often missed, leading to update issues. Activating your license links your site to your CodeCanyon account, enabling one-click updates and official support.

After activation, you should see a new “WPBakery Page Builder” item in your WordPress admin menu.

Go to WPBakery Page Builder > License.

You will see a field asking for your “Purchase Code.” To find this:

Go back to your Envato “Downloads” page.

Click on “License Certificate & Purchase Code” next to your WPBakery purchase.

Copy the long code of numbers and letters.

Paste this code into the field in your WordPress admin and click “Activate”.

You should see a green success message confirming your license is active. Your plugin is now ready for updates directly from your dashboard.

1.4. The Initial Setup Wizard: A Guided Tour Upon first activation, WPBakery will often launch a helpful Setup Wizard. It is highly recommended that you complete this short process.

Role Manager: The wizard will first ask you to set which user roles can use the WPBakery editor (e.g., Administrators and Editors). This is a security feature to prevent contributors or subscribers from accessing the page builder.

Tutorial & Preferences: The wizard will guide you through the choice between the Backend and Frontend editor (we will explore this in-depth in the next chapter) and may offer a quick tutorial. You can always skip this and return to it later.

Template Library: It may prompt you to download a set of pre-made templates. This is optional but can be a great source of inspiration.

1.5. Understanding the Role of a “WPBakery-Compatible” Theme While WPBakery works with virtually any WordPress theme, a “compatible” theme is one that has been specifically designed or tested to work seamlessly with it. This often means:

The theme’s built-in styles (CSS) do not conflict with WPBakery’s styles.

The theme may include custom WPBakery elements specific to its design.

It ensures that rows and elements stretch to the full width of the browser as intended.

If you use a theme that is not optimized for WPBakery, you might encounter minor styling issues, but these can almost always be resolved with a little custom CSS.

1.6. Your First Contact: The WPBakery Dashboard Now that setup is complete, let’s take a quick tour of the WPBakery dashboard (WPBakery Page Builder > General Settings). This is your plugin’s control center.

General Settings: Here you can set the default editor mode (Backend or Frontend), disable responsive design (not recommended), and disable certain elements you don’t use.

Design Options: This is where you set global color palettes and font families. Defining these here makes it easier to maintain a consistent design across your entire site.

Custom CSS: The place to add site-wide CSS rules that will override any other styles.

Product License: Where you verified your purchase code. You can check its status here.

Role Manager: Revisit and change which user roles have access to the builder.

Templates: Manage your saved templates and the default template for new pages.

Chapter 2: The Interface Demystified: Frontend & Backend Editor

Now that you have WPBakery installed and activated, it’s time to familiarize yourself with its interface. This is where you’ll be spending most of your time building your pages. WPBakery offers two distinct editing environments: the Backend Editor and the Frontend Editor. Understanding the strengths and weaknesses of each is key to working efficiently. In this chapter, we’ll take a deep dive into both interfaces, explore the core components of the editor, and learn how to navigate them like a pro.

2.1. The Two Faces of WPBakery: Backend vs. Frontend Editor (A Deep Dive)

One of WPBakery’s defining features is its dual-editor approach. Unlike many modern page builders that focus solely on a “what you see is what you get” (WYSIWYG) frontend experience, WPBakery gives you the choice between two distinct modes of operation. This flexibility is a major advantage for experienced users who want to choose the right tool for the right job.

The Backend Editor: The Architect’s Blueprint

The Backend Editor is the classic, original interface of WPBakery (formerly Visual Composer). When you edit a page in this mode, you are not looking at the rendered, styled version of your page. Instead, you are presented with a visual representation of your page’s structure, like a blueprint or a flowchart.

What it looks like: The Backend Editor replaces the standard WordPress content editor with a grid-like canvas. Your rows, columns, and elements are represented by stylized blocks with icons and labels. Text content is displayed in plain text, and images are shown as placeholders. The interface is clean, focused, and free from the distractions of your theme’s styling.
Strengths:
- Speed: The Backend Editor is significantly faster and more responsive than the Frontend Editor, especially on complex pages with lots of elements. Because it doesn’t have to render all the CSS and JavaScript in real-time, you can add, move, and configure elements with minimal lag.
- Clarity of Structure: For complex layouts, the Backend Editor provides a much clearer view of your page’s hierarchy. You can easily see which elements are inside which columns and which columns are inside which rows. This makes it easier to troubleshoot layout issues and reorganize your content.
- Focus on Content: By stripping away the visual styling, the Backend Editor allows you to focus on the structure and content of your page without being distracted by colors, fonts, and other design elements.
Weaknesses:
- Not a True WYSIWYG Experience: The main drawback is that you’re not seeing the final, styled version of your page. This can make it difficult to get a sense of the visual balance and spacing of your elements. You have to constantly switch between the Backend Editor and previewing the page to see how it actually looks.
- Less Intuitive for Beginners: For users who are new to web design, the abstract representation of the page can be confusing. It’s not immediately obvious how the blocks in the Backend Editor will translate to the final design.

The Frontend Editor: The Designer’s Canvas

The Frontend Editor is WPBakery’s answer to the modern WYSIWYG page builder. When you edit a page in this mode, you are editing the page directly on the frontend of your website, with all your theme’s styles applied.

What it looks like: The Frontend Editor loads your page as it would appear to a visitor, but with interactive controls overlaid on top of each element. You can click on an element to edit its settings, drag and drop elements to new locations, and see your changes reflected in real-time.
Strengths:
- True WYSIWYG Experience: The biggest advantage of the Frontend Editor is that you are seeing exactly what your visitors will see. This makes it much easier to fine-tune the visual aspects of your design, such as spacing, colors, and typography. You can make a change and immediately see its impact on the overall look and feel of the page.
- Intuitive and Visual: For beginners, the Frontend Editor is much more intuitive. The direct manipulation of elements feels natural and is easy to grasp. It’s a very visual and hands-on way to build a page.
Weaknesses:
- Performance: The Frontend Editor can be slow and resource-intensive, especially on pages with a lot of content or complex styling. Every change you make triggers a re-render of the page, which can lead to lag and a frustrating user experience.
- Can Be Cluttered: Depending on your theme’s design, the Frontend Editor can feel cluttered. The editing controls can sometimes obscure the content you’re trying to edit, and it can be difficult to select nested elements.
- Less Precise for Structural Changes: While great for visual tweaks, the Frontend Editor can be cumbersome for making major structural changes to your layout. Dragging and dropping columns and rows can be imprecise, and it’s easy to accidentally drop an element in the wrong place.

Which One Should You Use?

The best approach is to use both editors in tandem, leveraging the strengths of each for different tasks. A common workflow is:

Build the Structure in the Backend Editor: Start by building the basic structure of your page in the Backend Editor. Add your rows and columns, and place your core elements (text blocks, images, buttons). This is fast and efficient.
Switch to the Frontend Editor for Styling: Once you have the basic structure in place, switch to the Frontend Editor to fine-tune the design. Adjust colors, fonts, spacing, and other visual details. This allows you to see your changes in real-time.
Use the Backend Editor for Troubleshooting: If you run into a layout issue or something isn’t behaving as expected, switch back to the Backend Editor. The clear view of your page’s structure will make it easier to identify and fix the problem.

By mastering both editors, you’ll be able to work much more efficiently and create better-looking pages in less time.

2.2. The “Add Element” Button: Your Gateway to Content

Regardless of which editor you’re using, the “Add Element” button is your primary tool for adding content to your pages. It’s the gateway to WPBakery’s vast library of elements, and understanding how to use it effectively is crucial.

In the Backend Editor, the “Add Element” button is a large, prominent button with a plus (+) icon. It appears at the bottom of each column, and you can also click the “+” icon on the top right of a column to add an element to that specific column.

In the Frontend Editor, the “Add Element” button appears as a grayed-out “+” icon at the bottom of each column. When you hover over it, it becomes fully visible and clickable.

When you click the “Add Element” button, a modal window will pop up, displaying all the available elements. These elements are typically organized into categories to make them easier to find. The default categories are:

Content: This is where you’ll find the most commonly used elements, such as Text Block, Heading, Single Image, Button, and Separator.
Structure: These elements are used to structure your content, such as Tabs, Tours, and Accordions.
Social: This category contains elements for integrating social media, such as Social Media Icons and Facebook Feed.
WordPress: These elements are related to WordPress core functionality, such as Post Grid, Post Carousel, and Widgets.
Deprecated: This category contains older elements that have been replaced by newer ones. It’s generally best to avoid using these unless you have a specific reason.

To add an element, simply find it in the list and click on it. The element will be added to your column, and a settings panel will appear, allowing you to configure its properties.

Pro Tip: If you know the name of the element you’re looking for, you can use the search bar at the top of the “Add Element” modal to quickly find it. This can save you a lot of time, especially if you’re working with a large number of elements.

2.3. The Control Bar: Save, Publish, View Page, and Mode Switching

At the top of both the Backend and Frontend Editor, you’ll find a control bar with a set of essential buttons. These buttons provide quick access to common actions and settings.

Save/Update Button: This is the most important button on the control bar. It saves all the changes you’ve made to your page. It’s crucial to save your work frequently to avoid losing it in case of a browser crash or other unexpected error. The button will change from “Save” to “Update” after the page has been saved for the first time.
Publish/Update Button: This button is located next to the Save button and is part of the standard WordPress publishing flow. Clicking this button will save your changes and make the page live on your website. If the page is already published, it will be updated with your latest changes.
Preview Changes Button: This button allows you to preview your page in a new tab without publishing it. This is useful for checking how your page looks to visitors before making it live.
View Page Button: This button takes you to the live version of the page on the frontend of your website.
Mode Switching Button: This is a dropdown menu that allows you to switch between the Backend Editor, the Frontend Editor, and the Classic Editor (the standard WordPress editor). This is a very useful feature that allows you to quickly switch between different editing modes without having to leave the page.
Settings Button: This button opens a dropdown menu with additional options, such as “Page Settings,” “Role Manager,” and “About.” The “Page Settings” option allows you to configure page-specific settings, such as the page layout (e.g., full width, boxed) and the sidebar position.

2.4. Working with Rows: The Structural Foundation

Rows are the horizontal containers that form the backbone of your page layout. They are the first level of the WPBakery hierarchy and are essential for organizing your content into logical sections. Understanding how to work with rows is fundamental to building well-structured pages.

Adding a Row

To add a new row, you can click the “Add Element” button at the bottom of a column and select the “Row” element from the “Structure” category. Alternatively, you can click the “+” icon that appears when you hover between two existing rows.

When you add a new row, a dialog box will appear, asking you to choose a column layout. WPBakery provides a variety of predefined layouts, such as 1/1 (a single column), 1/2 + 1/2 (two equal columns), 1/3 + 1/3 + 1/3 (three equal columns), and so on. You can also create custom column layouts by specifying the width of each column.

Row Settings

Once you’ve added a row, you can click on it to open its settings panel. The row settings panel is divided into several tabs, each with a different set of options. The most important tabs are:

General: This tab contains basic settings for the row, such as the row ID and CSS classes. You can also set the row’s “Full Width” status here, which allows the row to stretch to the full width of the browser window.
Design Options: This tab contains all the styling options for the row, such as background color, background image, padding, margin, and border. We’ll cover these options in more detail in Chapter 3.
Responsive: This tab contains settings for controlling the row’s appearance on different devices. You can hide the row on specific devices (desktop, tablet, or mobile) and adjust its padding and margin for different screen sizes.

Manipulating Rows

You can easily manipulate rows using the controls that appear when you hover over them.

Move: You can drag and drop rows to reorder them on the page.
Duplicate: You can duplicate a row to create a copy of it. This is a great time-saver if you want to create a similar section on your page.
Delete: You can delete a row by clicking the trash can icon. Be careful when deleting a row, as it will also delete all the columns and elements inside it.

2.5. The Tree View: Navigating Complex Layouts with Ease

As your pages become more complex with nested rows and multiple elements, it can be difficult to keep track of your page’s structure. This is where the Tree View comes in. The Tree View is a powerful navigation tool that provides a hierarchical overview of your page’s structure.

In the Backend Editor, the Tree View is located on the left-hand side of the screen. It displays a nested list of all the rows, columns, and elements on your page, organized in a tree-like structure.

In the Frontend Editor, the Tree View can be accessed by clicking the “Tree View” icon on the control bar at the top of the screen.

The Tree View is incredibly useful for:

Navigating Complex Layouts: You can click on any item in the Tree View to jump directly to that element in the editor. This is much faster than scrolling through a long page to find the element you’re looking for.
Reordering Elements: You can drag and drop items in the Tree View to reorder them on the page. This is often easier than dragging and dropping elements on the page itself, especially for nested elements.
Troubleshooting: The Tree View provides a clear view of your page’s hierarchy, which can help you identify and fix structural issues. For example, if an element is not appearing where you expect it to, you can use the Tree View to check if it’s in the correct column.

2.6. Templates: Saving and Reusing Your Designs

One of the most powerful features of WPBakery is its ability to save and reuse your designs as templates. Templates can save you a tremendous amount of time, especially if you’re building multiple pages with a similar layout or if you want to create a consistent design across your website.

Types of Templates

There are two main types of templates in WPBakery:

Default Templates: A default template is a pre-designed layout that is automatically applied to all new pages. You can create a default template with a common header, footer, and sidebar layout, so you don’t have to recreate it for every new page.
Saved Templates: A saved template is a custom layout that you can save and then insert into any page at any time. You can save anything from a single element to an entire page layout as a template.

Creating and Saving a Template

To save a section of your page as a template, simply select the row or element you want to save, and then click the “Save as Template” icon on the control bar that appears. You’ll be prompted to give your template a name.

Using a Template

To use a template, click the “Add Element” button and then click the “Templates” tab. You’ll see a list of all your saved templates. Simply click on the template you want to use, and it will be added to your page.

Importing and Exporting Templates

You can also export your templates to a JSON file and import them into another WordPress site. This is a great way to transfer your designs between websites or to share them with other people. To export a template, go to the WPBakery Page Builder > Templates page in your WordPress dashboard, find the template you want to export, and click the “Export” button. To import a template, click the “Import Template” button on the same page and select the JSON file you want to import.

By mastering the use of templates, you can create a library of pre-designed layouts that you can use to build pages faster and more efficiently than ever before.

Chapter 3: Mastering the Core Elements: Rows and Columns

In the previous chapter, we introduced you to the fundamental building blocks of WPBakery: rows and columns. In this chapter, we’ll take a deep dive into these core elements, exploring their settings and capabilities in detail. Understanding how to master rows and columns is essential for creating any layout you can imagine. We’ll cover everything from basic row layouts to advanced styling options and responsive column management. By the end of this chapter, you’ll have a complete understanding of how to structure your pages with precision and control.

3.1. Rows: The Backbone of Your Layout

As we’ve established, rows are the horizontal containers that form the structural foundation of your pages. They are the first level of the WPBakery hierarchy, and all other elements (columns and content elements) are placed inside them. Think of rows as the floors of a building. Each floor (row) can have a different layout of rooms (columns), and you can stack as many floors as you need to create your building (page).

The Role of Rows

The primary role of a row is to group content into horizontal sections. This is crucial for both visual organization and responsive design. By placing related content in the same row, you can ensure that it stays together and behaves as a single unit when the page is viewed on different screen sizes.

For example, you might have a row with a heading and a text block introducing a section of your page. Below that, you might have another row with a three-column layout showcasing your services. Below that, you might have a row with a call-to-action button. Each of these rows acts as a distinct section of your page.

Row Settings: A Closer Look

When you click on a row in the editor, a settings panel will appear. This panel is divided into several tabs, each with a different set of options. Let’s take a closer look at the most important tabs:

General Tab:
- Row ID: This allows you to assign a unique ID to the row. This is useful if you want to link to a specific section of your page from another page. For example, you could create a link like yourwebsite.com/about#team that would take the user directly to the row with the ID “team.”
- Extra Class Name: This allows you to add one or more custom CSS classes to the row. This is a powerful feature for advanced users who want to apply custom styles to a specific row.
- Row Stretch: This setting allows you to make the row stretch to the full width of the browser window. This is a very useful feature for creating full-width sections with background images or colors. You can choose to stretch the row and its content, or just the row’s background.
- Row Type: This setting allows you to choose between a “Standard” row and an “Inner Row.” An “Inner Row” is a row that is nested inside another row’s column. This allows you to create more complex, nested layouts. We’ll cover this in more detail in Chapter 6.
Design Options Tab:
- This tab contains all the styling options for the row. We’ll cover these options in detail in the next section.
Responsive Tab:
- This tab contains settings for controlling the row’s appearance on different devices. We’ll cover these options in detail in Chapter 8.

3.2. Row Layouts: Predefined Column Structures

When you add a new row, you’ll be prompted to choose a column layout. WPBakery provides a variety of predefined layouts to choose from, making it easy to create common column structures.

Common Layouts

Some of the most common predefined layouts include:

1/1: A single column that spans the full width of the row. This is useful for full-width headings, text blocks, or images.
1/2 + 1/2: Two equal columns. This is a classic layout for side-by-side content, such as an image and a text block.
1/3 + 1/3 + 1/3: Three equal columns. This is useful for showcasing a series of items, such as services or features.
1/4 + 1/4 + 1/4 + 1/4: Four equal columns. This is useful for showcasing a larger series of items, such as team members or portfolio items.
2/3 + 1/3: A two-thirds column and a one-third column. This is a great layout for emphasizing one piece of content over another.
1/3 + 2/3: A one-third column and a two-thirds column. This is the reverse of the previous layout.

Creating Custom Column Layouts

While the predefined layouts are great for most situations, sometimes you need a more custom layout. WPBakery allows you to create custom column layouts by specifying the width of each column. To do this, click the “Add Custom Layout” button at the bottom of the layout selection window. You can then enter the width of each column as a fraction of the total width. For example, you could create a layout with columns of 1/4, 1/2, and 1/4 width.

Adjusting Column Widths

Once you’ve added a row with a column layout, you can easily adjust the width of each column. In the Backend Editor, you can click on the column divider and drag it left or right to adjust the width of the columns. In the Frontend Editor, you can click on a column to open its settings panel and then adjust the width in the “General” tab.

3.3. Deep Dive into Row Settings: Backgrounds (Color, Image, Video, Gradient), Spacing, and Borders

The “Design Options” tab in the row settings panel is where you can really unleash your creativity and add visual flair to your pages. This tab contains a wide range of styling options that allow you to customize the appearance of your rows.

Backgrounds

The background settings allow you to add a background to your row. You can choose from several types of backgrounds:

Solid Color: You can choose a solid color for the background. You can either enter a hex code directly or use the color picker to choose a color.
Image: You can upload an image to use as the background. You can also choose how the image is displayed (e.g., cover, contain, repeat) and its position (e.g., top left, center).
Video: You can upload a video to use as the background. This is a great way to add a dynamic and engaging element to your page. You can also choose to show a fallback image for users on mobile devices who may not be able to play the video.
Gradient: You can create a gradient background by choosing two or more colors and specifying the direction of the gradient. This is a great way to create subtle and stylish backgrounds.

Spacing

The spacing settings allow you to control the amount of space around your row’s content. You can adjust the padding (the space inside the row, between the content and the border) and the margin (the space outside the row, between the row and other elements). You can adjust the padding and margin for all four sides (top, right, bottom, left) independently.

Borders

The border settings allow you to add a border to your row. You can choose the border’s width, style (e.g., solid, dashed, dotted), and color. You can also add rounded corners to your row by adjusting the border radius.

Box Shadow

The box shadow settings allow you to add a shadow to your row. This is a great way to create a sense of depth and make your row stand out from the rest of the page. You can control the shadow’s color, blur, spread, and position.

3.4. Column Management: Splitting, Moving, and Adjusting Widths

Columns are the vertical containers that reside inside rows. They are the second level of the WPBakery hierarchy, and they are where you’ll place your content elements. Understanding how to manage columns is essential for creating flexible and responsive layouts.

Splitting Columns

You can easily split a column into two or more columns. To do this, click on the column you want to split and then click the “Split Column” icon on the control bar that appears. You’ll be prompted to choose a new column layout for the split column.

Moving Columns

You can easily move columns within a row. In the Backend Editor, you can drag and drop columns to reorder them. In the Frontend Editor, you can click on a column to open its settings panel and then use the “Move Column” buttons to move it left or right.

Adjusting Column Widths

As mentioned earlier, you can adjust the width of columns by dragging the column divider in the Backend Editor or by adjusting the width in the “General” tab of the column settings panel in the Frontend Editor.

Deleting Columns

You can delete a column by clicking on it and then clicking the trash can icon on the control bar that appears. Be careful when deleting a column, as it will also delete all the elements inside it.

3.5. Column-specific Settings: Responsive Options and CSS Classes

In addition to the row settings, each column also has its own set of settings that you can use to customize its appearance and behavior. To access these settings, click on a column in the editor.

General Tab

The “General” tab in the column settings panel contains basic settings for the column, such as the column width and the “Responsive” settings.

Responsive Options

The “Responsive” settings allow you to control how the column behaves on different devices. You can choose to hide the column on specific devices (desktop, tablet, or mobile) and adjust its width for different screen sizes. This is a very powerful feature for creating truly responsive layouts.

CSS Classes

The “Extra Class Name” field allows you to add one or more custom CSS classes to the column. This is a powerful feature for advanced users who want to apply custom styles to a specific column.

Design Options Tab

The “Design Options” tab in the column settings panel contains all the styling options for the column, such as background color, padding, margin, and border. These options are similar to the row settings, but they apply only to the specific column you’re editing.

By mastering the settings for both rows and columns, you’ll have complete control over the structure and appearance of your pages. You’ll be able to create any layout you can imagine, from simple one-column pages to complex, multi-column designs with nested rows and custom styling.

Part 2: Building with Content Elements (Approx. 10,000 words)

With a solid understanding of the fundamentals under your belt, it’s time to start populating your pages with content. This part of the guide is all about the elements that make up your pages. We’ll explore the vast library of WPBakery elements, from the essential text and image blocks to advanced interactive components like video players and contact forms. We’ll also cover structural elements that allow you to create more complex layouts. By the end of this part, you’ll be a master of WPBakery’s content elements, able to create rich, engaging, and dynamic pages.

Chapter 4: Essential Content Elements

Every great page is built on a foundation of essential content elements. In this chapter, we’ll cover the most commonly used elements in WPBakery. These are the building blocks you’ll use day in and day out to create your pages. We’ll explore each element in detail, covering its settings and providing practical examples of how to use it effectively. By the end of this chapter, you’ll be comfortable using these essential elements to create a wide variety of content.

4.1. Text Block: The Humble Powerhouse

The Text Block element is the workhorse of WPBakery. It’s the most versatile and widely used element, and it’s where you’ll spend most of your time adding and formatting text content. While it may seem simple, the Text Block element is surprisingly powerful.

Functionality

The Text Block element is essentially a rich text editor that allows you to add and format text, images, links, and other basic HTML content. It uses the standard WordPress editor (TinyMCE), so if you’re familiar with creating posts and pages in WordPress, you’ll feel right at home.

Settings

The Text Block element has a minimal set of settings, which is part of its beauty. The main setting is the content editor itself, where you can type and format your text. You can also add a custom CSS class to the Text Block if you need to apply custom styles.

Using the Text Block Effectively

Formatting Text: Use the formatting options in the toolbar to add headings, bold text, italic text, lists, and more. You can also change the text color and background color.
Adding Links: Highlight the text you want to link and then click the “Insert/edit link” button in the toolbar. You can link to other pages on your site, external websites, or even specific sections of a page using anchor links.
Adding Images: You can add images to your text block by clicking the “Add Media” button. This will open the WordPress media library, where you can upload or select an image.
Adding HTML: If you’re comfortable with HTML, you can switch to the “Text” tab in the editor to add custom HTML code. This is useful for adding things like tables or embedded content from other websites.

Pro Tip: While the Text Block element is great for most text content, if you need to add a lot of text with complex formatting, you might want to consider using a dedicated typography plugin or adding custom CSS. This will give you more control over the appearance of your text.

4.2. Heading Element: Hierarchy and SEO

The Heading element is used to add headings to your pages. Headings are important for both visual hierarchy and SEO. They help to break up your content into logical sections, making it easier for users to read and understand. They also help search engines to understand the structure and topic of your page.

Functionality

The Heading element allows you to add a heading to your page. You can choose from six different heading levels (H1, H2, H3, H4, H5, H6), with H1 being the most important and H6 being the least important.

Settings

The Heading element has a few key settings:

Heading Text: This is where you enter the text for your heading.
Heading Type: This allows you to choose the heading level (H1, H2, H3, etc.).
Alignment: This allows you to align the heading to the left, center, or right.
Link: This allows you to add a link to your heading.
Design Options: This tab contains all the styling options for the heading, such as font size, color, and line height.

Using the Heading Element Effectively

Use Headings for Hierarchy: Use headings to create a logical hierarchy for your content. Start with an H1 for your main page title, then use H2s for main sections, H3s for subsections, and so on.
Use Keywords in Your Headings: Include your target keywords in your headings to help with SEO. However, don’t stuff your headings with keywords. They should still be natural and readable.
Keep Your Headings Concise: Your headings should be short and to the point. They should accurately describe the content of the section they introduce.

Pro Tip: Use only one H1 heading per page. The H1 heading should be the main title of your page. Using multiple H1 headings can confuse search engines and hurt your SEO.

4.3. Single Image & Image Gallery: Displaying Visuals

Visuals are an essential part of any web page. They help to break up text, illustrate concepts, and make your pages more engaging. WPBakery provides two main elements for displaying images: the Single Image element and the Image Gallery element.

Single Image Element

The Single Image element is used to display a single image on your page.

Functionality: The Single Image element allows you to upload or select an image from your media library and display it on your page. You can also add a caption, a link, and an alt text to your image.
Settings: The Single Image element has a variety of settings that allow you to customize the appearance of your image. You can adjust the image size, alignment, and border. You can also add a hover effect, such as a zoom or a grayscale effect.
Using the Single Image Element Effectively:
- Optimize Your Images: Make sure your images are optimized for the web. This means compressing them to reduce their file size without sacrificing too much quality. Large images can slow down your page load times.
- Use Alt Text: Alt text is a description of your image that is used by screen readers for visually impaired users and by search engines to understand what the image is about. Always add descriptive alt text to your images.
- Choose the Right Image Size: Choose an image size that is appropriate for the space it will occupy on your page. Don’t use a huge image for a small space.

Image Gallery Element

The Image Gallery element is used to display a grid of images on your page.

Functionality: The Image Gallery element allows you to select multiple images from your media library and display them in a grid layout. You can also choose to link the images to a larger version (lightbox) or to a custom URL.
Settings: The Image Gallery element has a variety of settings that allow you to customize the appearance of your gallery. You can choose the number of columns, the gap between images, and the hover effect.
Using the Image Gallery Element Effectively:
- Use High-Quality Images: Since your gallery will be displaying multiple images, it’s important to use high-quality images that are all consistent in style and quality.
- Choose the Right Number of Columns: Choose a number of columns that is appropriate for the number of images you have and the layout of your page.
- Use the Lightbox: The lightbox feature is a great way to allow users to view larger versions of your images without leaving the page.

Pro Tip: If you need to display a large number of images, you might want to consider using a dedicated gallery plugin, such as Envira Gallery or Modula. These plugins offer more advanced features, such as albums, slideshows, and social sharing.

4.4. Buttons and Call-to-Actions: Driving User Engagement

Buttons are a crucial element for driving user engagement. They are used to guide users to take a specific action, such as “Buy Now,” “Learn More,” or “Sign Up.” A well-designed button can make a huge difference in the conversion rate of your page.

Functionality

The Button element allows you to add a clickable button to your page. You can customize the button’s text, link, and appearance.

Settings

The Button element has a variety of settings that allow you to customize its appearance and behavior.

General Tab:
- Button Text: This is where you enter the text for your button.
- Button Link: This is where you enter the URL that the button will link to.
- Button Size: This allows you to choose the size of the button (e.g., small, medium, large).
- Button Style: This allows you to choose the style of the button (e.g., rounded, square).
- Button Color: This allows you to choose the color of the button.
Design Options Tab:
- This tab contains all the styling options for the button, such as font size, color, and padding. You can also add a hover effect, such as a change in color or a shadow.

Using the Button Element Effectively

Use Action-Oriented Text: Your button text should be clear, concise, and action-oriented. Use verbs that tell the user what to do, such as “Download,” “Subscribe,” or “Get Started.”
Make Your Button Stand Out: Your button should be visually distinct from the rest of your page. Use a contrasting color and a larger size to make it stand out.
Place Your Button Strategically: Place your button in a prominent location where users are likely to see it. This is usually at the end of a section or at the bottom of the page.

Pro Tip: Use a consistent style for all of your buttons across your website. This will help to create a cohesive user experience and make your buttons more recognizable.

4.5. Separators and Spacers: Controlling White Space

White space, or negative space, is the empty space around the elements on your page. It’s a crucial part of web design that is often overlooked. White space helps to improve readability, create a sense of balance, and draw attention to important elements. WPBakery provides two elements for controlling white space: the Separator element and the Spacer element.

Separator Element

The Separator element is used to add a horizontal line to your page.

Functionality: The Separator element allows you to add a simple horizontal line to your page. This can be used to visually separate different sections of your content.
Settings: The Separator element has a few basic settings that allow you to customize its appearance. You can choose the line’s color, width, and style (e.g., solid, dashed, dotted).
Using the Separator Element Effectively:
- Use Separators to Divide Content: Use separators to divide your content into logical sections. This makes it easier for users to scan and understand your page.
- Keep Your Separators Simple: Don’t make your separators too flashy. A simple, subtle line is usually all you need.

Spacer Element

The Spacer element is used to add empty vertical space to your page.

Functionality: The Spacer element allows you to add a specific amount of empty vertical space to your page. This is useful for creating space between elements.
Settings: The Spacer element has a single setting: the height of the spacer. You can enter a value in pixels (px) or as a percentage (%).
Using the Spacer Element Effectively:
- Use Spacers to Create Breathing Room: Use spacers to create breathing room between elements. This makes your page feel less cluttered and more visually appealing.
- Don’t Overuse Spacers: Be careful not to overuse spacers. Too much white space can make your page feel disconnected and disjointed.

Pro Tip: You can also use the padding and margin settings in the “Design Options” tab of rows and columns to control white space. This is often a more precise way to control spacing than using the Spacer element.

4.6. Tabs, Tours, and Accordions: Organizing Content

When you have a lot of content to display on a single page, it can quickly become overwhelming. Tabs, Tours, and Accordions are great ways to organize your content and make it more digestible for users. These elements allow you to display content in a compact and interactive way.

Tabs Element

The Tabs element allows you to display content in a series of tabs.