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 4.0 or higher
  • Divi Builder 4.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
  • Navigate to Settings > Permalinks in the WordPress Administration menu
  • Click 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:

  • Define the Title,
  • Setup the Content Group settings, by referring to the Generate: Content Documentation,
  • Choose the correct Page Layout under Divi Settings (Divi Theme only)
    Page Generator Pro: Divi: Settings
  • Choose the correct Template under Attributes > Template
    Page Generator Pro: Divi: Attributes
  • Click Save

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

It’s recommended that you first:

  • Define the Title,
  • Setup the Content Group settings, by referring to the Generate: Content Documentation,
  • Choose the correct Page Layout under Divi Settings (Divi Theme only)
    Page Generator Pro: Divi: Settings
  • Choose the correct Template under Attributes > Template
    Page Generator Pro: Divi: Attributes
  • Click Save

Once saved, click the Use The Divi Builder button.

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
  • Define the Title,
  • Setup the Content Group settings, by referring to the Generate: Content Documentation,
  • Choose the correct Page Layout under Divi Settings (Divi Theme only)
    Page Generator Pro: Divi: Settings
  • Choose the correct Template under Attributes > Template
    Page Generator Pro: Divi: Attributes
  • Click the Use The Divi Builder button to be taken to Divi’s editor
  • 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.

Using Divi Theme Builder Templates

If you have already designed your Page as a Divi Template through Divi’s Theme Builder, you can apply said Template to the Content Group:

  • Navigate to Divi > Theme Builder
    Page Generator Pro: Divi: Theme Builder: Menu
  • Either:
    • Add New Template, defining the Header and Footer as required
      Page Generator Pro: Divi: Theme Builder: Add Template
    • Click the settings / cog icon on the existing Template
      Page Generator Pro: Divi: Theme Builder: Edit Template
  • Choose both of:
    • Content Groups: Either All Content Groups or the specific Content Group(s) you wish to apply this Template to
      Page Generator Pro: Divi: Theme Builder: Content Groups
    • Post Type: The target Post Type that is generated with the Content Group.  For example, if our Content Group is going to generate WordPress Pages, we’ll select All Pages.
      Page Generator Pro: Divi: Theme Builder: Pages

Click Save when done.

It’s strongly recommended that the Body not be defined in the Template.  As Divi is also enabled on the Content Group, you’ll be able to build the body content in Divi through the Content Group.  Remember: a Content Group in itself is a template for the generated Pages / Posts / Custom Post Types

Create or edit your Content Group, defining the content as necessary for the body:
Page Generator Pro: Divi: Theme Builder: Content Group

Generated Pages / Posts / Custom Post Types will then use the Theme Builder Template specified, with the Body of the content per the Content Group (in this case, the Theme Builder Template comprises of a Header with text Web Site Name Header and Footer with text Footer):
Page Generator Pro: Divi: Theme Builder: Generated Page

Changes made to the Theme Builder Template’s Header or Footer will be automatically reflected on the generated Pages.

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

Page Generator Pro registers each of its Dynamic Elements as a Module in the Divi Builder:
Page Generator Pro: Page Builders: Divi: Dynamic Elements: Modules

Alternatively, you can use Divi’s Text Module in the 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.

Divi Builder Loads Front Page

If the Divi Builder loads the front page of the web site instead of the Content Group / Divi Builder Elements:

Page Generator Pro: Divi Builder: Error

  • Navigate to Settings > Permalinks in the WordPress Administration menu
  • Click Save Changes

Divi Builder Loads Blank Page

  • Navigate to Settings > Permalinks in the WordPress Administration menu
  • Click Save Changes

Incorrect Page Layout

  • Edit the Content Group
  • Choose the correct Page Layout under Divi Settings (Divi Theme only)
    Page Generator Pro: Divi: Settings
  • Choose the correct Template under Attributes > Template
    Page Generator Pro: Divi: Attributes

Content Group Changes Not Saved

If editing using Divi’s backend editor with Gutenberg disabled, using the top Save button on the Content Group’s Actions meta box will correctly save changes made to the Divi content.