WPBakery Page Builder (formerly Visual Composer) comes with more than 50 built-in content elements, available out-of-the-box. As Toolset is integrated with these elements, you can easily insert any custom Fields or Views into any of them.

WPBakery ElementsToolset dialog for inserting fields
WPBakery Page Builder and ToolsetWPBakery Page Builder and Toolset

 

Custom fields can be used when you create a Content Template, Archive, Product, or even a regular page or post. When designing templates and archives, Toolset allows you to add any fields to any WPBakery Page Builder Element. There are two ways to display post fields:

  • Using a Text Block: Simply display the fields you want using Toolset styling. Use this approach if, for example, you want to display a Google Maps field.
  • Using any other Element: Use fields as arguments for WPBakery Page Builder Elements.

Let’s use our template for Tours as an example. We’ll create an Accordion and insert a field into it.

  • Insert an Accordion Element.

WPBakery Page Builder and Toolset
Adding an Accordion

    1. Your Accordion is inserted. In the Accordion, you need to define the Title of the Section.

      WPBakery Page Builder and Toolset
      Defining the title of the section

    2. In the Title of the Section,we want to insert the Post Title field (name of the post). We need a Toolset field because we want all posts to render their own title.
    3. Hover on the Toolset shortcodes drop-down in the Top Bar and click Fields and Views.

      WPBakery Page Builder and Toolset
      Accessing the Toolset Shortcodes

    4. In the dialog that appears, search for “Post Title” and click to insert it.

      WPBakery Page Builder and Toolset
      Toolset Fields and Views dialog

    5. The shortcode is generated and is ready to be copy-pasted into the Title Section.

      WPBakery Page Builder and Toolset
      Generating the shortcode

    6. This is how the Title Section< looks after pasting the shortcode. Thanks to the shortcode, all posts will automatically render their own title.WPBakery Page Builder and Toolset
    7. Now that we are done with the Title of the Section in the Accordion, we need to specify its content. The content of the Accordion will be the description of each post.
    8. In the Accordion you just added, create the content section by inserting a Text Block.

      WPBakery Page Builder and Toolset
      Inserting content in the Accordion

    9. Insert another field to display the description of the Tour. Follow the same steps and insert the shortcode “Post body”.

      WPBakery Page Builder and Toolset
      Inserting Post Body field in the Accordion.

    10.  See how your template for Tours looks below:

      WPBakery Page Builder and Toolset
      Content of my accordion with a Shortcode.

 

That’s it! Now, when we take a look at the front-end, the design is from the Accordion element but the title and content are generated by Toolset fields for “Post Title” and “Post Body”.

WPBakery Page Builder and Toolset
Design of the accordion with Toolset shortcodes.

 

What’s next?

Next Control access to your content built with WPBakery Page Builder

Need help?

If you need assistance with using Toolset in combination with WPBakery Page Builder, please visit our professional support forum dedicated to this topic.