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
Click the Builder tab
Toggle the Content Groups option so that it is enabled
Click on the Advanced sub tab:
Toggle the Enable Classic Editor option
Click Save Changes
Navigate to Settings > Permalinks in the WordPress Administration menu
Click Save Changes

Backend / Frontend Editing

Divi provides options to edit content in the backend (WordPress Administration interface) or the frontend (visitor facing) web site.

Due to continued breaking changes from Divi:

Page Generator Pro only supports Divi when editing a Content Group in the backend (WordPress Administration) interface,
The Related Links Dynamic Element is no longer registered as a Divi Module outside of Content Groups e.g. when editing a Page.
- You may continue to use the Related Links Dynamic Element as a Divi Module when editing a Content Group in the backend (WordPress Administration) interface,
- For Related Links to be output on a non-generated Page, refer to the shortcode syntax.

For the avoidance of doubt, we don’t take the decision to remove functionality lightly. Sadly, Divi’s own developer documentation for registering modules will throw Divi errors, so this is not a Page Generator Pro fault or issue that we can control.

Add a Content Group

When using Divi for a new or existing Content Group, you must use the backend editor i.e. the Divi Builder within the WordPress Administration interface. Compatibility with Divi’s Build on the Front End is not provided, due to continued breaking changes from Divi.

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)
Choose the correct Template under Attributes > Template
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)
Choose the correct Template under Attributes > Template
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)
Choose the correct Template under Attributes > Template
Click the Use The Divi Builder button to be taken to Divi’s editor
Select Choose a Premade Layout
Click Your Saved Layouts
Click the Layout to use

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
Either:
- Add New Template, defining the Header and Footer as required
- Click the settings / cog icon on the existing Template
Choose both of:
- Content Groups: Either All Content Groups or the specific Content Group(s) you wish to apply this Template to
- 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.

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
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

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 Frontend Builder Errors

Due to continued breaking changes from Divi, Page Generator Pro only supports Divi when editing a Content Group in the backend (WordPress Administration) interface.

Refer to the above Setup steps, ensuring that you enable Divi’s Enable Classic Editor option. This will ensure that Divi’s editor loads within the WordPress Administration / backend interface.

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

Divi Builder returns “Not Found” on Frontend Editor

Ensure that the Content Group itself is set to Published, not Draft.
- Click Quick Edit for the Content Group in question
- Set the Status to Published
- Click Update
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)
Choose the correct Template under Attributes > Template

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.

Divi Builder Timeout Message

Use the backend editor within the Content Group i.e. the Divi Builder within the WordPress Administration interface. Compatibility with Divi’s Build on the Front End is provided as-is. with. no guarantee of working functionality.