Skip Navigation
Buy Now
Home » Course lessons » Using Toolset with Elementor Page Builder in WordPress

Using Toolset with Elementor Page Builder in WordPress

By combining the power of Elementor page builder with the Toolset's advanced query builder you can easily build great-looking custom sites.

Some examples of what you can do with Elementor and Toolset

Create Templates

Display Custom Lists of Posts

Single post displayed using Elementor's Single template
Display Custom List of Posts

Create Custom Searches

Display Content on Google or Azure Maps

Custom search for easy content finding
Gym posts listed on a map and a pop-up listing all related trainers

On this page

Getting Started

Elementor provides a free and Pro version. Both work with Toolset.

To use Elementor with the WordPress Block Editor, you must install the free Elementor Blocks for Gutenberg plugin.

To use Elementor with Toolset, you must install:

  • Toolset Types
  • Toolset Blocks

The Toolset plugin package provides more features. Choose the additional features you need and install the corresponding plugins:

  • Toolset Maps – display your content on Google or Azure Maps
  • Toolset Forms – allow users to submit and edit content via front-end forms

Limitations when using Elementor and Toolset templates together

If you are using Elementor to design templates for your custom post types, do not assign a Toolset Content Template and an Elementor Template to the same content.

Also, do not insert an Elementor Template into a View’s Loop Item or Content Template.

Adding Custom Types, Fields, and Taxonomies

Toolset allows you to customize your site in a way not possible in WordPress by default. This includes creating custom post types (like “Gyms” or “Events”), custom fields for these post types (like “Address” or “Event Date”), and custom taxonomies (like “Trainer Specialties” or “Event Type”) to categorize your content.

If you’re new to WordPress, check out our lesson about what custom types are and how they work.

Come back here when you are done so you can continue reading how to display new custom content with Elementor.

Creating Single-post Templates

A template defines how single posts and pages display on the front-end. When you update a template applied to a specific post type, the front-end display for all items of that post type updates immediately.

You can create templates using Toolset or using Elementor Pro (this function is not available with the free version of Elementor).

Using Toolset’s templates provides you with many features that are not available in templates you create using Elementor. This includes:

And more.

Adding Toolset Custom Fields to an Elementor Template

Through custom fields, Toolset enables you to add a wide variety of extra data to WordPress content.

If you prefer to use Elementor to build single-post templates, you can insert your Toolset custom field data into them. You can also style them however you wish, as you would with any other Elementor design.

Start by creating an Elementor template. Once you’ve created your template, use the following steps to add your Toolset custom fields.

  1. Click on the gear icon in Document Settings located at the bottom left of the panel.
  2. Click the Preview Settings tab.
  3. Under Preview Dynamic Content, select the post type you wish to preview.
Selecting a post type to preview
  1. Drag a widget that makes use of dynamic content (e.g. Text Editor widget).
  2. Click on the Dynamic icon.
  3. Choose Toolset Field.
Choosing Toolset Field within the Dynamic dropdown menu
  1. Once selected, click again on Toolset Field.
  2. In Settings → Key, select the custom field you want to display.
  3. The settings in the Advanced tab are optional.
Selecting the custom field you want to display

Style the custom field widget as you would normally, using the widget’s Style tab.

Creating Custom Lists of Posts

Toolset allows you to load posts from your database and display them in a custom, dynamic list. This is called a View.

After creating your View, you can easily add it to any Elementor page. In the Elements menu, find the Toolset View widget and drag-and-drop it onto the page. Then, use the View dropdown in the editing panel to select the one you want to display.

Choosing the View you want to display

You also have further design and functionality options, such as secondary sorting and ordering.

When creating a View, you can also add a custom search to your Views so users can filter the results by selecting simple options. When you display such a View, the custom search will appear automatically.

Toolset makes it easy to build custom searches for any type of content, enabling users to easily find exactly what they are looking for.

Selecting a View featuring Custom Search functionality

The Toolset View widget also allows you to display only the search box on the page and then take the user to another page which displays the search results.

Adding a Toolset Form to an Elementor Template

Toolset forms allow users to submit new posts from the front-end or edit existing ones. This allows you to deliver comprehensive front-end management so users can work on their content without the need to access WordPress admin. 

Forms allows you to create directories, classifieds, listings, memberships or any other type of website that requires front-end content creation and editing.

Toolset Form added to an Elementor template

After creating a Toolset Form, you can easily add it into any Elementor page. In the Elements menu, find the Toolset View widget and drag-and-drop it onto the page. Then, use the Form dropdown in the editing panel to select the form you want to display.

Selecting a Form to add to your Elementor template

Creating Custom Archives

WordPress generates content-listing pages that are called archives. You can design archive pages with Elementor or with Toolset.

The advantage of designing archives using Toolset is that you can fully customize the appearance and content of these archives. Also, you can use advanced features such as front-end sorting, custom search, and maps.

Front-end view of an Archive page

Toolset archives have default settings for pagination, ordering, and more, all of which you can change at any time.

Other Powerful Toolset Features

Toolset is packed with a lot of other powerful features. Although you cannot use these particular features with Elementor, you can easily add them into pages and elements you design with the WordPress block editor.

Post relationships 

Post Relationships allow for the connection between different posts and custom types in a website.

Post Relationships enable you to connect different post types to one another. You can then display the information from the related posts on the front-end. Using Post Relationships eliminates data duplication, so each element only needs to be edited once. In the “one to many” post relationship example below, the one agent is connected to his many related properties.

Single agent post displaying all related property posts managed by this agent

Control Access to Your Content

With Toolset Access, you can add custom roles for users and control their privileges. This includes the front-end and backend of your site – users can access content directly from the user interface and from within the WordPress admin screens.

Creating user roles with different privileges

Maps

Toolset Maps allows you to display Google or Azure maps. You can do anything from visually adding a single address to a Contact page, through displaying search results on a map, to creating a professional geo-location directory or listing site.

View with a custom search and results displayed on a map
Dario
Updated
June 4, 2021
Send feedback to our documentation team