Divi Plugin Highlight: Toolset Divi Integration

Jan 23, 2021 | Everything Divi for WordPress

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. In this article, we’ll look at how Toolset integrates with Divi and see what it can do.

Toolset Views

divi-plugin-highlight-toolset-divi-integration Divi Plugin Highlight: Toolset Divi Integration

Toolset integrates with Divi by allowing Divi to easily display Toolset Views. The Toolset Views are created as normal with the Toolset editing tools in the WordPress dashboard. Divi will display them according to the selections you make while creating the Views. The Views can display all the results, with pagination, as a slider, using a custom search, or in a full custom mode.


divi-plugin-highlight-toolset-divi-integration-1 Divi Plugin Highlight: Toolset Divi Integration

Views can display content such as posts, taxonomies, and users, each with subsets of post types. This includes custom post types created with Toolset.

divi-plugin-highlight-toolset-divi-integration-2 Divi Plugin Highlight: Toolset Divi Integration

The Views are created and edited using the Toolset blocks. Here, you can style them and include the content you want the View to display.

divi-plugin-highlight-toolset-divi-integration-3 Divi Plugin Highlight: Toolset Divi Integration

Once you’ve created your Toolset View, you’ll see the available Views in your Toolset Views screen. The Views will be selectable within the Divi Toolset Views module.

Toolset Divi Module

divi-plugin-highlight-toolset-divi-integration-4 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-5 Divi Plugin Highlight: Toolset Divi Integration

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.

divi-plugin-highlight-toolset-divi-integration-6 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-7 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-8 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-9 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-10 Divi Plugin Highlight: Toolset Divi Integration

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.

divi-plugin-highlight-toolset-divi-integration-11 Divi Plugin Highlight: Toolset Divi Integration

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.

divi-plugin-highlight-toolset-divi-integration-12 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-13 Divi Plugin Highlight: Toolset Divi Integration

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.

divi-plugin-highlight-toolset-divi-integration-14 Divi Plugin Highlight: Toolset Divi Integration

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.

divi-plugin-highlight-toolset-divi-integration-15 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-16 Divi Plugin Highlight: Toolset Divi Integration

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.

divi-plugin-highlight-toolset-divi-integration-17 Divi Plugin Highlight: Toolset Divi Integration

This View shows the person’s photo and name.

divi-plugin-highlight-toolset-divi-integration-18 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-19 Divi Plugin Highlight: Toolset Divi Integration

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

divi-plugin-highlight-toolset-divi-integration-20 Divi Plugin Highlight: Toolset Divi Integration

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


Source

WordPress Development

SEO NEWS

seo news