Generate: Page Builders Integration: Divi

This guide refers to basic usage of Page Generator Pro with Divi.  It is not a substitute for referring to the Generate: Content Documentation, which must be read first to understand all Content Group configuration options.

Prerequisites

Older versions may work, however the steps below may not reflect the available functionality.
  • Divi Theme 3.0 or higher

Setup

Failure to follow all steps in this section may result in incorrect working functionality.

Before using Divi in your Content Group, you’ll need to:

  • Navigate to Divi > Theme Options
    Page Generator Pro: Page Builders: Divi Theme: Theme Options
  • Click the Builder tab
    Page Generator Pro: Page Builders: Divi Theme: Builder Tab
  • Toggle the Content Groups option so that it is enabled
    Page Generator Pro: Page Builders: Divi Theme: Enable Content Groups
  • Click Save Changes
    Page Generator Pro: Page Builders: Divi Theme: Save Changes

Add a Content Group

To add a new Content Group to Page Generator Pro, click the Add New button below the Content Groups title, which can be found towards the top of the screen:
Page Generator Pro: Generate Content:

You will then be presented with a screen similar to the one used to edit your WordPress Posts and Pages:
Page Generator Pro: Generate: Content: Divi: Add Content Group

It’s recommended that you first:

Once saved, click the Use The Divi Builder button:
Page Generator Pro: Page Builders: Divi Theme

Three options are available:
Page Generator Pro: Generate: Content: Divi: Options

  • Build from Scratch: Use this option if you want to start with a blank template
  • Choose a Premade Layout: Use this option if you want to use a premade layout, or a layout that you’ve already created
  • Clone Existing Page: Use this option if you want to copy a Divi layout with modules from an existing Page built with Divi

Edit a Content Group

To edit an existing Content Group in Page Generator Pro, click the Title of the Group that you want to edit:
Page Generator Pro: Generate: Group Actions

Click the Use The Divi Builder button:
Page Generator Pro: Page Builders: Divi Theme

Using Divi Layouts

If you have already designed your Page as a Divi Layout, you can import this layout into a Content Group:

  • Edit the Content Group, clicking the Use The Divi Builder button to be taken to Divi’s editor
    Page Generator Pro: Page Builders: Divi Theme
  • Select Choose a Premade Layout
  • Click Your Saved Layouts
    Page Generator Pro: Generate: Content: Divi: Your Saved Layouts
  • Click the Layout to use
    Page Generator Pro: Generate: Content: Divi: Example Layout

The Layout, with its modules, will then be loaded into the Content Group’s Divi Builder
Page Generator Pro: Generate: Content: Divi: Layout Loaded

Add new modules and edit existing modules as necessary to include your Keywords, Dynamic Elements, Spintax etc.

Because a Content Group is, in itself, a layout from which your generated Pages are produced by Page Generator Pro, most users find it easier to edit the Content Group in Divi, rather than edit the underlying Divi Layout.

Global Modules

A Divi Global Module gives you full control over a specific module that is displayed in multiple places on your site. Editing it in one place will instantly update the rest.

With this in mind, you can’t edit Global Modules in a Content Group, without those edits affecting other places that use the Global Module.  Therefore, Global Modules don’t support Keywords, Spintax, Dynamic Elements etc.

If you need to edit the Content Group’s Global Module instance only:

  • Insert the Global Module into Divi’s Builder
  • Click the three vertical dots, and select Disable Global
    Page Generator Pro: Generate: Content: Divi: Convert Global Module to Local Module
  • The module can then be edited to include Keywords, Spintax etc. Edits will only affect the module in this Content Group, and not the original Global Module.
Refer to Divi’s Documentation to better understand Global Modules.

Dynamic Elements

Divi’s Text Module uses the Classic Editor / TinyMCE, therefore allowing you to build each Dynamic Element’s shortcode using the UI in Divi’s backend editor:
Page Generator Pro: Generate: Content: Divi: Text Module

Divi’s frontend editor’s Text Module prevents third party Plugins from controlling the TinyMCE interface.  Therefore, it’s recommended to use the backend editor for Dynamic Elements.  You could then switch to the Frontend Editor for the rest of your content, if you prefer.

How to do this can be found in the Adding: Classic Editor / TinyMCE section of each of the Documentation links below:

For other Divi modules, you’ll need to manually build each Dynamic Element’s shortcode using the documented parameters.  These can be found in the Adding: Page Builders section of each of the Documentation links below:

Common Issues

Divi Builder Button Missing

Follow the Setup section of this document.