Elementor allows you to design templates for your custom post types. You can then easily insert custom fields created with Toolset into these templates.

Here is an example of an Elementor Single template used to display a single post belonging to a custom “Trainer” post type.

Single post displayed using Elementor's Single template
Single post displayed using Elementor’s Single template

How to create an Elementor template

When using Toolset with Elementor, you will be using Elementor’s own templating workflow, which is different than the Toolset’s one.

You can use Toolset fields inside any type of an Elementor template, including Footer and Header ones.

After creating your custom post type and custom fields using Toolset, go to the Elementor -> My Templates page and click the Add New button.

Creating a new Elementor template
Creating a new Elementor template

In the pop-up dialog that appears, select the options for the template:

  1. Select the type of the template. In this case, we select Single.
  2. Select the post type.
  3. Give a name to your template.
  4. When done, click Create Template.

Dialog for creating an Elementor template
Dialog for creating an Elementor template

How to use Toolset fields in Elementor templates

Now, you can start designing your template. Use the following widgets to insert Toolset fields into the template:

  • Post Title
  • Page Title
  • Heading
  • Text Editor
  • Video
  • Button
  • Map
  • Icon
  • Icon Box
  • Image

After inserting one of these widgets, click on the Dynamic icon and select the Toolset field in a dialog that appears.

Inserting a Toolset field into the template
Inserting a Toolset field into the template

Click on the Toolset field that you just added. The Settings dialog will appear. Use the Key drop-down option to select the custom Toolset field you want to use.

Selecting the Toolset custom field to use for the widget
Selecting the Toolset custom field to use for the widget

Use the widget controls to customize other properties like size or alignment.

When you are done designing the template, click the Publish button. A Display Conditions dialog will appear and you can select for which posts your Single template will be used. Click Publish.

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 Content Template and an Elementor Template to the same content. If both templates are assigned to the same content nothing will be displayed.

Also, do not insert an Elementor Template into a View’s Loop Item or Content Template. This can also lead to nothing being displayed. If you need to use an Elementor Template in the Loop, insert it directly within the wpv-loop tags.

What’s next?

Next Build custom queries to list posts with Elementor and Toolset