Generate: Page Builders Integration: Elementor

This guide refers to basic usage of Page Generator Pro with Elementor.  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.

Setup

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

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

  • Navigate to Elementor > Settings
  • Under the General tab > Post Types, tick / select Groups
    Page Generator Pro: Page Builders: Elementor: Settings
  • Click the Save Changes button
  • Navigate to Settings > Permalinks
  • 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: Elementor Page Builder: Add New Content Group

It’s recommended that you first:

Once saved, click the Edit with Elementor button:
Page Generator Pro: Generate: Content: Elementor Page Builder: Edit with Elementor (Blue Button)

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 Edit with Elementor button:
Page Generator Pro: Generate: Content: Elementor Page Builder: Edit with Elementor (Blue Button)

Using Elementor Templates

If you have already designed your Page as an Elementor Template, you can import this template into a Content Group:

  • Edit the Content Group, clicking the Edit with Elementor button to be taken to Elementor’s editor
    Page Generator Pro: Generate: Content: Elementor Page Builder: Edit with Elementor (Blue Button)
  • Click the folder icon in the Editor
    Page Generator Pro: Generate: Content: Elementor Page Builder: Insert Template
  • Either select the template from the Pages or My Templates section
    Page Generator Pro: Generate: Content: Elementor Page Builder: My Templates
  • Click Insert beside the Template you want to use
    Page Generator Pro: Generate: Content: Elementor Page Builder: Insert Template
  • If you want to also import the Template’s settings, click Yes
    Page Generator Pro: Generate: Content: Elementor Page Builder: Import Document Settings

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

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

Using a Page Layout

To use an Elementor Page Layout, such as Elementor Full Width or Elementor Canvas, it must be set in both the Content Group and Elementor.

  • Set the Page Layout at Page Generator Pro > Content Groups > Edit > Attributes > Template
    Page Generator Pro: Generate: Page Builders: Elementor: Attributes: Page Layout
  • Save the Content Group
  • Click the Edit with Elementor button to be taken to Elementor’s editor
    Page Generator Pro: Generate: Content: Elementor Page Builder: Edit with Elementor (Blue Button)
  • Click on the Settings icon (bottom left corner)
    Page Generator Pro: Generate: Page Builders: Elementor: Settings Icon
  • Set the Page Layout
    Page Generator Pro: Generate: Page Builders: Elementor: Page Layout
  • Click the green Update button
    Page Generator Pro: Generate: Page Builders: Elementor: Update Button
It is not enough to set the Page Layout in just Elementor or just the Content Group. It must be set in both.

Global Widgets

An Elementor Global Widget gives you full control over a specific widget 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 Widgets in a Content Group, without those edits affecting other places that use the Global Widget.  Therefore, Global Widgets don’t support Keywords, Spintax, Dynamic Elements etc.

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

  • Insert the Global Widget into your Content Group’s Elementor editor
    Page Generator Pro: Generate: Content: Elementor Page Builder: Insert Global Widget
  • Click the Unlink button
    Page Generator Pro: Generate: Content: Elementor Page Builder: Unlink Global Widget
  • The widget can then be edited to include Keywords, Spintax etc. Edits will only affect the widget in this Content Group, and not the original Global Widget.
    Page Generator Pro: Generate: Content: Elementor Page Builder: Edit Global Widget
Refer to Elementor’s Documentation to better understand Global Widgets.

Dynamic Elements

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

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

For other Elementor widgets, 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

Edit with Elementor button missing

Follow the Setup section of this document.

The Content Area Was Not Found in Your Page

In the WordPress Administration interface:

  1. Navigate to Elementor > Settings
  2. Under the General tab > Post Types, tick / select Groups
    Page Generator Pro: Page Builders: Elementor: Settings
  3. Click the Save Changes button
  4. Navigate to Settings > Permalinks
  5. Click Save Changes

The preview could not be loaded

In the WordPress Administration interface:

  1. Navigate to Elementor > Settings
  2. Under the General tab > Post Types, tick / select Groups
    Page Generator Pro: Page Builders: Elementor: Settings
  3. Click the Save Changes button
  4. Navigate to Settings > Permalinks
  5. Click Save Changes
  6. Navigate to Settings > Permalinks
  7. Click Save Changes

Editor infinitely loads

  1. Ensure the Prerequisites section is met
  2. Follow the Setup section of this document
  3. Disable third party Plugins
  4. Clear any browser and server caches
  5. Attempt to load Elementor on a standard WordPress Page
  6. Follow Elementor’s Documentation

CSS / Styles missing

  1. Navigate to Elementor > Tools > Regenerate CSS