Toolset allows you to create templates for custom post types using Beaver Builder. Instead of copying the Beaver Builder design for every item, design a template once, include in it custom fields and taxonomy and it will display for the entire custom post type.

Templates for entire custom post types

Until now, you needed to create a template, tweak it, and reapply it to each item. When you needed to update the design, you’d have to manually edit all items.

Using the integration between Toolset and Beaver Builder, you will design templates. You design a template only once and it displays all the items that belong to that custom post type. Templates will include custom fields and taxonomy, so that each item includes the right content, but doesn’t require its own design in Beaver Builder.

One Beaver Builder Design for the Entire Custom Type

This is how Beaver Builder and Toolset work together:

  1. You still design your pages using the same Beaver Builder interface.
  2. Instead of using “hard coded” contents for titles, text, or images, you use Toolset to insert fields into your Beaver Builder designs.
  3. Instead of tweaking and applying the same template all over again, you use Toolset to assign one template to multiple items.

Customize the Design of All Posts Simultaneously

Modifying the design of a website is something we all need to do eventually. It may be needed to improve your content’s usability, visual appeal, or simply to freshen things up a bit.

To adjust all the posts you are using the template for, you only need to edit the original design. The changes you make will be applied to all posts of that post type.

Insertion of a field into the Beaver Builder design is reflected on the front-end for all posts
Insertion of a field into the Beaver Builder design is reflected on the front-end for all posts

With a single account, you will be able to build as many sites as you need for yourself and for your clients. Our 30-days refunds give you the peace of mind, knowing that if you don’t like our approach to building sites, you get all your money back.

Buy Toolset – $149

Let’s Get Started

To design templates with Toolset and Beaver Builder, make sure you have the following plugins installed and activate in your website:

  • Beaver Builder
  • Toolset Views
  • Toolset Types

Note that you cannot use Beaver Builder and Layouts on the same page. Fully-integrated themes such as our own Toolset Starter Theme which require you to use Layouts on every page cannot be used with Beaver Builder if Layouts is active.

Designing Content Templates with Beaver Builder

To start creating your first template, go to the Toolset -> Dashboard menu. You will see an overview of custom post types in your site, their fields, taxonomy, and front-end display.

In the Toolset Dashboard table, click Create template for your post type.

Creating A Template For Your Post Type
Creating A Template For Your Post Type

The template editor is empty at first; you can now start adding elements to it.

Content Template Editing Page After Creating A Template
Content Template Editing Page After Creating A Template

Click the Beaver Builder button and then Launch.

With any new Beaver Builder design, you are first greeted with a dialog box that shows the starting layout templates. In our example, we used “Blank”.

Layout Templates Selection Dialog Box
Layout Templates Selection Dialog Box

Toolset Elements Inside the Beaver Builder Editor

Toolset adds several elements to the Beaver Builder editor that makes it possible to design templates.

Selecting which post to preview in the editor

At the top of the Beaver Builder bar, there is a drop-down menu that allows you to select which post to preview in the editor.

Selecting A Post To Preview
Selecting A Post To Preview

Inserting post fields into the Beaver Builder template

When you design a template using Beaver Builder, you need to use fields and not static values.

You can insert all of the Toolset fields using Beaver Builder’s Text Editor element. Drag and drop Beaver Builder’s Text Editor module into the design. Then, click the Fields and Views button in its editor.

Fields and Views Button In The Text Editor Module’s Dialog Box
Fields and Views Button In The Text Editor Module’s Dialog Box

Another dialog box appears with the list of all fields you can insert.

Dialog Box For Inserting Fields Into The Templates
Dialog Box For Inserting Fields Into The Templates

Select the field to insert and then choose the display options for that field. For example, you can select the date format when inserting the date field.

Additional Options When Inserting The Post Date Field
Additional Options When Inserting The Post Date Field

Initially, the field will appear as a shortcode. After you save the Beaver Builder design, you can see the field’s value in the preview.

You can use the text field’s formatting to add styling to these fields as you would add HTML styling to anything else when you design using Beaver Builder.

Step How it looks
Inserting Post Title field into the Text Editor module.

Field After Inserting
Field After Inserting
Selecting the field in the Text Editor and applying “Heading 1” styling to it.

  1. Expanding the editor dashboard.
  2. Selecting the field.
  3. Clicking Font Style drop-down menu.
  4. Selecting “Heading 1” option.

Applying Styling To The Field
Applying Styling To The Field
Post Title field in the Beaver Builder editor after insertion.

Results In The Front-end Editor
Results In The Front-end Editor

Using post fields inside other Beaver Builder modules

You can also insert post fields into any other Beaver Builder module that accepts text input.
In our example, we want to add a button that says “Hire” followed by the name of the consultant we are currently reading about, e.g., “Hire Agata Christian”.

Inserting Fields Into Other Beaver Builder Modules
Inserting Fields Into Other Beaver Builder Modules

To do this, insert Beaver Builder’s built-in Button module and click the “+” button next to the Text input field.

All Beaver Builder Modules With Text Inputs Feature An Additional “+” Icon To Insert Post Fields
All Beaver Builder Modules With Text Inputs Feature An Additional “+” Icon To Insert Post Fields

The same dialog box that lists all post fields will appear. Choose the field and select the display options. The text field will include the shortcode that displays the field that you have selected.

Post Title Field Inserted Into The Button’s Text Field
Post Title Field Inserted Into The Button’s Text Field

Now, the button displays static text “Hire” together with the Post Title field.

An Example Of The Button Module Featuring A Post Title Field
An Example Of The Button Module Featuring A Post Title Field

With a single account, you will be able to build as many sites as you need for yourself and for your clients. Our 30-days refunds give you the peace of mind, knowing that if you don’t like our approach to building sites, you get all your money back.

Buy Toolset – $149