Divi Plugin Highlight: Toolset Divi Integration

Toolset is a WordPress plugin that adds custom post types, fields, taxonomies, and post relationships that can be used anywhere on your website. These elements are usually placed within your content with shortcodes or Gutenberg blocks, but Toolset is now integrated natively with Divi with a Toolset Views module. Toolset is really helpful in creating custom-post-type-heavy websites and is a great plugin for creating directory websites.  In this article, we’ll look at how Toolset integrates with Divi and see what it can do.

Toolset Views

Toolset integrates with Divi by allowing Divi to easily display Toolset Views. The Toolset Views are created with a block in the Gutenberg editor, inside a page, post, or template. Open the list of blocks, scroll down to Toolset, and add a View Block from the list of blocks.

You can then select to create a new View or use an existing View.

Creating a new View lets you choose the View elements and the loop style (which is the layout, or how the results will display). The Views can display all the results, with pagination, with front-end sorting, as a slider, using a custom search, etc. You can make these selections here or you can change them later.

Choose the content that will display in the View.

This lets you create the loop that you can then use to display the post types. The documentation steps you through this in detail. Views can display content such as posts, taxonomies, and users, each with subsets of post types. This includes custom post types created with Toolset.

edit to this point
__

The Views are created and edited using the Toolset blocks.

Toolset Divi Module

Toolset adds a module to the Divi Builder called Toolset View. This module displays any Toolset View you choose and it’s customizable with the standard Divi module settings.

Content Tab

The Content tab includes a dropdown box where you can select the Toolset View you want to display. It also includes a link, background settings, and the admin label. I’ve selected a View called 3 Instructors for the homepage.

The design of the View was created in the Toolset post type editor settings. I’ve added color to the background using the module’s Background settings to help it stand out. The View displays live in the Divi Visual Builder using the features you’ve assigned it when creating it. This makes it easy to see how to style it with the Divi settings and see how it will look within your layout.

Here’s another Toolset View. I haven’t changed the background settings, so the new View displays over the background that I’ve already set up.

Design Tab

The Design tab includes settings for the text, module text, sizing, spacing, border, box shadow, filters, transform, and animation. There are enough settings to style the module to fit with any Divi design. Let’s look at those specific to this module.

Text

The Text options adjusts the alignment and shadow for the labels and descriptions. Text Shadow includes the standard settings such as length, blur strength, and color. I’ve set the alignment to right and added a text shadow color in this example.

Module Text

Module Text settings include font, weight, style, alignment, color, size, spacing, height, and text shadow adjustments. The text color affects the labels. The rest of the settings affect the labels, tags, description, button text, and star rating.

In this example, I’ve made the font semi-bold, set the font style to all-caps, set the text color to red, increased the font size to 16px, and decreased the line height to 1.7em. I haven’t adjusted the border, box shadow, sizing, spacing, filters, etc., but those settings are available too.

Toolset with Divi Examples

Here are a few examples of using the Toolset Views module within Divi layouts. I’ll add the module to some layouts. For others, I’ll replace current modules with a single Toolset Views module.

Adding a Toolset Views Module to a Landing Page

Here’s a look at the Instructor View placed within the Yoga Studio Landing Page layout. It’s placed within a section to introduce instructors and includes text modules, the Toolset View module, person modules, and a button. This is the wireframe view.

Here’s a look at the view from the frontend. The result is a clean section for instructors. The Toolset View module is styled to match the layout. The View includes search and sorting features.

Here’s a zoomed-out screenshot to show more of the layout so you can see how well it works with the design.

Replacing Multiple Modules with a Single Toolset Views Module

This example uses the Yoga Studio Team page. The original page displayed team members using person modules. For this one, I’ll replace the person modules with a single Toolset Views module. For comparison, this example shows the wireframe view for the original layout.

Here’s how the original layout looks on the frontend. I’ll leave the header, partners, and footer intact, but I’ll include them in the images so you can see how well it integrates with the Divi designs.

I’ve replaced the 6 person modules with a single Toolset Views module.

The page now displays more people (it shows the number assigned to it in the Toolset editor) and includes pagination to see a second page. Of course, the ability to choose a different Toolset View means we have more options of how they display. Let’s look at a few more examples.

This View shows the person’s photo and name.

This View removes the images and shows the name, title, and description. Each one includes a box shadow to stand out from the background. It also includes a search box.

Archives Page

I’ve created a page to show a list of articles using the Yoga Studio page elements. This layout is using the same Toolset Views module, but I’ve selected a different View.

Where to Purchase

The Toolset Views Divi Module is included in the Toolset Blocks plugin. This plugin is an extension that’s included with Toolset and adds lots of blocks to the Gutenberg editor and one module to the Divi Builder called Toolset View. When you purchase Toolset, you have free access to the Toolset Blocks plugin.

Toolset is available in three annual subscription options. Each includes 1 year of updates and support.

• $69 – 1 site
• $149 – 3 sites
• $299 – unlimited sites

Ending Thoughts

That’s our look at Toolset Divi integration. This is an interesting integration. Toolset is a powerful tool for WordPress, so integrating it with Divi was a smart move. The Toolset Views are still created within Toolset’s editors, but you can now display them within your Divi content without having to use shortcodes. This gives you access to Divi’s styling options.

Some of the features and styling are provided to the View with settings in Toolset, but the Divi module does have enough settings to customize the Views to fit within your page’s designs. I like that you can customize the module and select a different View without making changes to the module.

Toolset and Divi work well together. Toolset does have a learning curve, but if you can create it with Toolset Views, you can display it in your Divi layouts.

We want to hear from you. Have you tried Toolset’s Divi integration? Let us know about your experience in the comments.

Featured Image via Visual Generation / shutterstock.com