{"id":817861,"date":"2021-01-23T16:00:00","date_gmt":"2021-01-23T16:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/divi-plugin-highlight-toolset-divi-integration\/"},"modified":"2022-12-10T13:48:32","modified_gmt":"2022-12-10T13:48:32","slug":"divi-plugin-highlight-toolset-divi-integration-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/divi-plugin-highlight-toolset-divi-integration\/","title":{"rendered":"Divi Plugin Highlight: Toolset Divi Integration"},"content":{"rendered":"\n
\n

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\u2019ll look at how Toolset integrates with Divi and see what it can do.<\/p>\n

Toolset Views<\/h2>\n

\"Toolset<\/p>\n

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.<\/p>\n

\"Toolset<\/p>\n

You can then select to create a new View or use an existing View.<\/p>\n

\"Toolset<\/p>\n

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.<\/p>\n

\"Toolset<\/p>\n

Choose the content that will display in the View.<\/p>\n

\"Toolset<\/p>\n

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

edit to this point
__<\/p>\n

\"Toolset<\/p>\n

The Views are created and edited using the Toolset blocks.<\/p>\n

Toolset Divi Module<\/h2>\n

\"Toolset<\/p>\n

Toolset adds a module to the Divi Builder called Toolset View. This module displays any Toolset View you choose and it\u2019s customizable with the standard Divi module settings.<\/p>\n

Content Tab<\/h3>\n

\"Content<\/p>\n

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\u2019ve selected a View called 3 Instructors for the homepage<\/em>.<\/p>\n

The design of the View was created in the Toolset post type editor settings. I\u2019ve added color to the background using the module\u2019s Background settings to help it stand out. The View displays live in the Divi Visual Builder using the features you\u2019ve 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.<\/p>\n

\"Content<\/p>\n

Here\u2019s another Toolset View. I haven\u2019t changed the background settings, so the new View displays over the background that I\u2019ve already set up.<\/p>\n

Design Tab<\/h3>\n

\"Design<\/p>\n

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\u2019s look at those specific to this module.<\/p>\n

Text<\/h4>\n

\"Design<\/p>\n

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\u2019ve set the alignment to right and added a text shadow color in this example.<\/p>\n

Module Text<\/h4>\n

\"Module<\/p>\n

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.<\/p>\n

In this example, I\u2019ve 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\u2019t adjusted the border, box shadow, sizing, spacing, filters, etc., but those settings are available too.<\/p>\n

Toolset with Divi Examples<\/h2>\n

Here are a few examples of using the Toolset Views module within Divi layouts. I\u2019ll add the module to some layouts. For others, I\u2019ll replace current modules with a single Toolset Views module.<\/p>\n

Adding a Toolset Views Module to a Landing Page<\/h3>\n

\"Toolset<\/p>\n

Here\u2019s a look at the Instructor View placed within the Yoga Studio Landing Page layout. It\u2019s 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.<\/p>\n

\"Toolset<\/p>\n

Here\u2019s 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.<\/p>\n

\"Toolset<\/p>\n

Here\u2019s a zoomed out screenshot to show more of the layout so you can see how well it works with the design.<\/p>\n

Replacing Multiple Modules with a Single Toolset Views Module<\/h3>\n

\"Toolset<\/p>\n

This example uses the Yoga Studio Team page. The original page displayed team members using person modules. For this one, I\u2019ll replace the person modules with a single Toolset Views module. For comparison, this example shows the wireframe view for the original layout.<\/p>\n

\"Toolset<\/p>\n

Here\u2019s how the original layout looks on the frontend. I\u2019ll leave the header, partners, and footer intact, but I\u2019ll include them in the images so you can see how well it integrates with the Divi designs.<\/p>\n

\"Toolset<\/p>\n

I\u2019ve replaced the 6 person modules with a single Toolset Views module.<\/p>\n

\"Toolset<\/p>\n

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\u2019s look at a few more examples.<\/p>\n

\"Toolset<\/p>\n

This View shows the person\u2019s photo and name.<\/p>\n

\"Toolset<\/p>\n

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.<\/p>\n

Archives Page<\/h3>\n

\"Toolset<\/p>\n

I\u2019ve 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\u2019ve selected a different View.<\/p>\n

Where to Purchase<\/h2>\n

\"Where<\/p>\n

The Toolset Views Divi Module is included in the Toolset Blocks plugin<\/a>. This plugin is an extension that\u2019s 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.<\/p>\n

Toolset is available in three annual subscription options. Each includes 1 year of updates and support.<\/p>\n