Elementor Complete Guide 2026 — Performance, ACF, REST API, Conflicts & Fixes

Elementor + ACF Dynamic Tags

Elementor Pro's dynamic tags system connects Elementor widgets directly to ACF field values — text, images, URLs, dates, and more. This allows you to build templates that populate automatically from ACF data without writing PHP.

How to Use ACF Fields as Elementor Dynamic Tags

1. In the Elementor editor, click any widget that accepts dynamic content (Heading, Text Editor, Image, Button, etc.)
2. Click the dynamic tag icon (looks like a database symbol) next to the content field
3. Select ACF Field from the dynamic tag list
4. In the tag settings, select your field group and field from the dropdowns

If ACF fields don't appear in the picker, see our full ACF + Elementor troubleshooting guide — the most common causes are location rule mismatches and missing Elementor cache regeneration.

ACF Field Shows "--" in Elementor

The double dash placeholder means Elementor found the field but it has no saved value for the post being edited or previewed. Go to the post editor directly and confirm the ACF field has a value saved. If you're previewing a template, use Elementor's preview settings to select a specific post that has data.

Mastering Elementor's theme.json for Global Styles

WordPress's theme.json system defines global design tokens — colors, typography, spacing — that both the block editor and Elementor can reference. For Elementor, integrating with theme.json means your global kit settings stay consistent with your theme's design system.

What theme.json Controls in Elementor

When a block theme includes a theme.json file, Elementor reads its color palette and typography presets and makes them available in the Elementor editor. This means the colors defined in your theme are available in Elementor's color picker without manually re-entering them in the Global Kit.

Setting Up theme.json for Elementor Compatibility

Your theme.json should be placed in your theme root (or child theme root). A minimal structure that Elementor respects:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0b1f2a",
          "name": "Primary Navy"
        },
        {
          "slug": "accent",
          "color": "#ff6a3d",
          "name": "Accent Orange"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "inter",
          "name": "Inter"
        }
      ]
    }
  }
}

After adding or updating theme.json, go to Elementor → Tools → Regenerate Files & Data to force Elementor to re-read the theme configuration.

Elementor Global Kit vs theme.json

Elementor's Global Kit (Site Settings → Global Colors/Typography) takes precedence over theme.json for Elementor-rendered content. theme.json affects the block editor and provides fallback values. For Elementor-heavy sites, configure Global Kit as your primary design token source and keep theme.json in sync for block editor consistency.

Elementor Template JSON Structure

Elementor templates are stored as JSON in the WordPress database and can be exported as .json files for import on other sites. Understanding the JSON structure is useful for automation, bulk template creation, and debugging.

Template JSON Format

An exported Elementor template JSON file has this top-level structure:

{
  "version": "0.4",
  "title": "Template Name",
  "type": "page",
  "content": [
    {
      "id": "abc123",
      "elType": "section",
      "settings": { ... },
      "elements": [
        {
          "id": "def456",
          "elType": "column",
          "settings": { ... },
          "elements": [
            {
              "id": "ghi789",
              "elType": "widget",
              "widgetType": "heading",
              "settings": {
                "title": "My Heading",
                "header_size": "h2"
              },
              "elements": []
            }
          ]
        }
      ]
    }
  ],
  "page_settings": {}
}

Each element has an elType (section, column, widget, container) and a widgetType for widget elements. Settings keys vary by widget — refer to the widget's PHP class for available settings keys when building templates programmatically.

The _elementor_css Meta Key

Elementor stores generated CSS for each post in the wp_postmeta table under the key _elementor_css. When this meta gets stale (after updates or migrations), styles break. The fix: Elementor → Tools → Regenerate Files & Data regenerates all _elementor_css meta for every post.

Elementor REST API

Elementor exposes several REST API endpoints used internally by the editor. These are not public API endpoints by design — they require authentication (WordPress nonce or application password) and are intended for Elementor's own editor communication.

Media Import Endpoint

The most commonly searched Elementor REST endpoint is the media import endpoint: /elementor/v1/documents/{id}/media/import. This endpoint is used by Elementor's template import process to pull in images from template kits.

It requires authentication — a valid WordPress nonce from an authenticated session. Direct unauthenticated requests will return 401. If you're building an automation that uses this endpoint, you need to authenticate with a WordPress Application Password and include it as a Basic Auth header.

Elementor REST API Endpoints Reference

• GET /elementor/v1/documents — list Elementor documents
• GET /elementor/v1/documents/{id} — get a specific document
• POST /elementor/v1/documents/{id}/media/import — import media for a document
• GET /elementor/v1/globals — retrieve global kit settings

All endpoints require the user to have at least edit_posts capability. WordPress's visible REST API upload endpoints (wp/v2/media) are separate from Elementor's endpoints.

Reducing Elementor DOM Size

Elementor's legacy rendering wraps every section, column, and widget in multiple nested <div> elements, creating large DOM trees that hurt Core Web Vitals (particularly TBT and LCP). Two settings address this:

Optimized DOM Output Experiment

Go to Elementor → Settings → Features (or Experiments in older versions) and enable Optimized DOM Output. This removes redundant wrapper divs from the output, reducing DOM node count significantly on complex pages. Test thoroughly after enabling — custom CSS targeting Elementor's wrapper classes may need updating.

Improved Asset Loading Experiment

Also in Elementor → Features, enable Improved Asset Loading. This loads Elementor's CSS and JS files only on pages that actually use Elementor widgets, rather than site-wide. Significant improvement on pages like the homepage that may not use all widget types.

Container vs Section/Column Layout

Elementor's Flexbox Container replaces the Section/Column structure with a single container element using CSS Flexbox. This further reduces DOM depth. Enable Flexbox Container in Elementor → Features and migrate existing layouts using Elementor's conversion tool. New builds should use Containers — they produce less DOM markup and are more performant.

Elementor Performance and Core Web Vitals

Elementor sites commonly struggle with LCP (Largest Contentful Paint) and TBT (Total Blocking Time). The causes and fixes:

Render-Blocking CSS

Elementor generates inline CSS for each page's widgets. On pages with many widgets, this inline CSS is large and blocks rendering. Enabling Improved Asset Loading reduces this significantly. Additionally, combining Elementor with a caching plugin that handles CSS minification (WP Rocket, LiteSpeed Cache) reduces payload size.

Large Hero Images (LCP)

The LCP element on most Elementor pages is a hero image in a Section or Container background. Set this image to load eagerly (not lazy-loaded) and ensure it's properly sized. Elementor's background images don't support native loading="eager" attributes — use a Cloudflare Image Optimization or server-side image optimization to reduce file size instead.

Font Loading

Elementor loads Google Fonts by default. Switch to a locally hosted font (via the Elementor Custom Fonts feature in Pro) or configure Elementor to use System Fonts to eliminate the Google Fonts third-party connection request, which adds latency.

Elementor Backup and Restore

Elementor does not have a standalone backup system — backups are handled at the hosting or plugin level. What needs to be backed up for a complete Elementor restore:

• Database — all Elementor data lives in wp_postmeta (_elementor_data, _elementor_css) and wp_options (Global Kit, settings)
• Uploads folder — all media files
• Theme files — your active theme and child theme
• Plugins folder — Elementor and Elementor Pro plugin files

A full site backup from your host or a plugin like UpdraftPlus covers all of the above. Elementor's own export (Templates → Export Kit) only exports templates and Global Kit settings — it does not back up page content.

On CriticalWP's managed platform, daily automatic backups with one-click restore are included — no separate backup plugin required.

Fixing Elementor Conflicts After Updates

Elementor updates occasionally break things — particularly with third-party Elementor addons (Royal Elementor Addons, Essential Addons, etc.) that extend Elementor's widget library.

Isolating the Conflict

1. Enable Elementor's Safe Mode: Elementor → Tools → Safe Mode. This loads Elementor without any other plugins or your theme, isolating whether the issue is Elementor itself or an addon
2. If Safe Mode resolves the issue, the conflict is in a plugin or theme. Re-enable plugins one at a time to find the conflicting one
3. Check browser console for JavaScript errors — they'll name the conflicting script
4. After identifying the conflict, check the conflicting plugin's changelog for a compatibility update before contacting support

Layout Broken After Update

If layouts look correct in the editor but broken on the frontend after an update, regenerate Elementor's CSS: Elementor → Tools → Regenerate Files & Data. Also clear any server-side cache (hosting cache, Cloudflare cache) after regenerating.

Elementor Security

Elementor has had several security vulnerabilities in its history — primarily stored XSS in the HTML widget and widget settings that allow arbitrary HTML/JS. Current best practices:

• Restrict Elementor editor access — only users who need to edit pages should have Editor or Administrator roles. Contributor-level users should not have Elementor access
• Keep Elementor and addons updated — most Elementor vulnerabilities are patched quickly. Running outdated versions is the primary risk
• Disable HTML widget for untrusted editors — the HTML widget allows arbitrary JavaScript. Restrict it to Administrators only via Elementor → Settings → Advanced → Editor Loader Method
• Cloudflare WAF — a WAF (Web Application Firewall) at the CDN level provides an additional layer of protection. CriticalWP's Cloudflare Enterprise plan includes WAF rules

Elementor and Full Site Editing (FSE)

WordPress's Full Site Editing (block themes + Site Editor) and Elementor are complementary rather than competing on a well-configured site. Elementor's Theme Builder handles page content. A block theme's theme.json provides design tokens. The Site Editor handles parts of the site Elementor doesn't cover (search results template, 404 in some configurations).

For new sites in 2026, use a lightweight block theme (Hello Elementor theme, or a custom child theme) as the base — it provides FSE compatibility, a clean theme.json, and minimal CSS overhead. Let Elementor Pro's Theme Builder handle headers, footers, and page templates.

Frequently Asked Questions