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 or Content 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, it is strongly recommended to import the Elementor Template into a Content Group, to ensure that Page Generator Pro functionality (Keywords, Spintax, Dynamic Elements) can be used in all sections of your Page.

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

A Content Group is, in itself, a template from which your generated Pages are produced by Page Generator Pro.  Therefore you don’t lose functionality by importing an Elementor Template.
If you choose to assign an Elementor Template to Content Groups, it must have a Post Content Widget.  Any Keywords, spintax or other items stored in the Elementor Template will not be processed, which is why it is strongly recommended that an Elementor Template be imported to a Content Group as above.

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

Support for Keywords in Elementor Global Widgets is available in Page Generator Pro 4.3.2 and higher, available Thursday 17th August 2023 23:59 UTC.

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 (whether that be a Page, Content Group or other) will update that specific widget anywhere it is used on your WordPress web site.

Keywords

To use Keywords in a Global Widget:

  • Ensure that you are using Page Generator Pro 4.3.2 or higher,
  • Confirm that the Content Group’s Store Keywords option is enabled
    • If this was disabled, you will need to enable it and then (re)generate all Pages

Spintax

Whilst spintax is supported, its result is not cached.  Therefore, spintax will run every time a Global Widget is viewed (i.e. every time a generated Page is viewed), resulting in performance issues and different content displayed every time.  It’s therefore not recommended.

Dynamic Elements

The Related Links Dynamic Element is supported in a Global Widget.

Other Dynamic Elements will not function.

4.3.1 and lower

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

Page Generator Pro registers each of its Dynamic Elements as a Widget in Elementor within the Page Generator Pro section:
Page Generator Pro: Elementor: Dynamic Elements

Page Generator Pro Dynamic Elements registered as Elementor widgets do not support advanced properties, such as layout.  This is deliberate and by design, as these widgets will be converted to HTML output (e.g. an image, video etc) upon generation.  Use Elementor’s Text Editor Widget below if you require advanced properties to be honored and copied through to generated pages.

Alternatively, you can use Elementor’s Text Editor Widget:
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 or Content Groups
    Page Generator Pro: Page Builders: Elementor: Settings
  3. Click the Save Changes button
  4. Navigate to Settings > Permalinks
  5. Click Save Changes

Keywords not replaced on Generation

Keywords specified in an Elementor Template or Global Widgets will not be processed.  This is because there is one instance of an Elementor Template or Global Widget, and replacing a Keyword in either would incorrectly apply to all Pages using said Template.

Either:

The Post Content Widget was not found in your Template

You incorrectly assigned an Elementor Template instance to Content Group(s).  Either:

If you choose to assign an Elementor Template to Content Groups, it must have a Post Content Widget.  Any Keywords, spintax or other items stored in the Elementor Template will not be processed, which is why it is strongly recommended that an Elementor Template be imported to a Content Group as above.

The preview could not be loaded

404 Error

In the WordPress Administration interface:

  1. Ensure the Prerequisites section is met
  2. Follow the Setup section of this document

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, and click Regenerate Files & Data
    Page Generator Pro: Elementor: Regenerate CSS
  2. If the issue persists after following (1), clear all caches of any optimization and minification Plugins (for example but not limited to Autoptimize, WP Minify)
  3. If the issue persists after following (1) and (2), and the Performance Addon is enabled, either:
    1. Elementor must also be selected under Performance Addon: Load Plugins, or
    2. Use Performance Addon must be disabled.
  4. If generating a Page in Test mode, you may need to instead generate a draft Page using Generate via Browser or CLI, making sure to follow steps 1 & 2 above, to get an accurate test result.