Toolset plugins and Divi Theme work nicely together. In this tutorial, you’ll see how to configure Divi to use it conveniently with Toolset.

What you need to install

The initial setup includes:

 

What we want to get from Divi and what we want to get from Toolset

Fast and intuitive, Divi is a powerful theme including the visual drag & drop page builder. You will want to use Divi for all the options found in the Theme Customizer:

  • The look and feel: real-time design, custom fonts, colors, and sizing.
  • Header settings: the structure, the format and the style of the header
  • Header elements: the social icons, the email, the phone number and the search
  • Navigation Options: Primary and Secondary Menu Bar
  • Footer Options

Toolset is only covering the content area of the page.

Setting up the page with Divi Settings

By default, Divi displays the header, the menu and the footer, as shown in the example below:

 

This is the Sample Page from Divi

 

 

1. Go to  Divi -> Theme Customizer and customize your header and footer the way you want. Toolset Divi Integration
2. Create a new page and we recommend to select Full Width in Divi Page Settings box.

Note that the sidebar can be added via Layouts later on if you need it.

3. Select A static page and define the ‘New Page’ as the front page:  Toolset Divi Integration
4. This is what you get on the frontend:  Divi Toolset Integration

You are ready to start designing the content with Toolset. Note that the title of the page automatically vanishes once you start creating something.

Designing the interior with Toolset

Now that we have setup the header and the footer, we are ready to create a part of the content with Toolset. You can display your custom types and fields, create custom searches, create forms for front-end content submission and much more.
You can learn more if you follow the getting started guide.

1. From this new page, open the Content Layout Editor  Toolset Divi Integration
2. When the Layouts editor opens, you can add any custom content or template created with Toolset.  Toolset Divi Integration
3. All the custom content you add is shown in the body of the page without disrupting the settings of the Divi theme options.  Toolset Divi Integration

Designing the interior with Toolset and Divi

If you design the content using Toolset, you cannot use the Divi Builder ‘around’ this content. If you enable Divi Builder, you will lose what you just built with Toolset.

To insert Custom Fields, Views or a CRED form in the part of your page using the Divi Builder, open a Divi Text Module (accessible from the backend Divi Builder only):

 

Divi integration with Toolset
Integration via the Divi Text Module