In the last few weeks, we have worked hand-in-hand with the Elementor team. Today, we are happy to announce the first 2 features of our integration.

Building powerful and beautiful websites in minutes

Elementor is a visual design control tool for everything inside of your WordPress website: posts, pages, archives, header, footer and (since Today) WooCommerce elements. Combined with the power of Types and Views, the integration offers almost endless possibilities for your development projects.

Toolset View Widget for ElementorView Widget

Dedicated Elementor widget for inserting and styling a View.

Toolset custom fields and ElementorTypes custom fields in templates.

Compatibility for using Types custom fields within Elementor templates (Dynamic content).

1. Meet our Toolset Views Elementor Widget

The free version of Elementor 2.1.3 allows you to use the Toolset View Widget and easily insert any Views into designs you create with Elementor.
Toolset View Widget
Views is one of Toolset’s most powerful features as it allows you to build custom queries. You can create custom lists of posts, advanced search, Maps and display your post relationships.

Toolset views example
Example of Views you can build with Toolset

The workflow of the integration is pretty straightforward and you can even style your View on the front-end using Elementor CSS toolbox (on Elementor Pro). There are 5 steps for creating and displaying a View with Elementor and Toolset:

Insert a view with Elementor
  1. Create a View using Toolset.
  2. Add a new section in your Elementor page.
  3. Look for the “Views” widget and drag-and-drop it to your dedicated section.
  4. Choose which Views you need to insert.
  5. Style it using Elementor visual design power.

We also recorded a short video showing how to insert a View in your page built with Elementor:

2. Dynamic content: Types is integrated with Elementor templates.

Elementor Pro Theme Builder allows you to use Elementor Templates and dynamic custom fields created with Toolset Types plugin. The workflow is different from what you are used to with Toolset, here are the main changes:

You still create your custom post types and custom fields with Toolset, but you design your template, for custom post types using Elementor.

Then, you can then easily insert custom fields created with Toolset, into these templates.

Designing a template for our custom post types called “trainers” using Elementor and Types
Designing a template for our custom post types called “trainers” using Elementor and Types

You can also learn how to build a template with dynamic fields in this short video:

Documentation and Feedback

We have fully documented this integration and we hope that it will make your work a lot easier. These are the first steps of a long-term cooperation, let us know your thoughts in the comments below.