Mastering the Elementor Ecosystem: From Core Architecture to Dynamic Theme Building
Navigate the complete Elementor landscape with precision. This technical guide deconstructs the editor's core architecture—from basic widgets and Flexbox containers to complex Pro features like the Theme Builder and dynamic data integration. Whether you are manipulating layout structures or building custom post type templates, this reference establishes the foundational knowledge required for professional Elementor development.
Elementor Basics
Elementor Installation
Elementor is installed like any WordPress plugin: navigate to Plugins → Add New, search for "Elementor", click Install and Activate. Alternatively, upload the ZIP file manually or use WP-CLI for automated deployments.
# WP-CLI Installation wp plugin install elementor --activate wp plugin install elementor-pro --activate # Pro version (requires license)
Elementor Interface Overview
The Elementor interface consists of three main areas: the Editor Panel (left sidebar with widgets/settings), the Canvas (center preview area), and the Toolbar (top bar with save/preview options).
┌─────────────────────────────────────────────────────┐ │ ☰ Logo Responsive │ History │ Preview │ Publish│ ← Toolbar ├──────────┬──────────────────────────────────────────┤ │ │ │ │ Editor │ │ │ Panel │ Canvas │ │ │ (Live Preview) │ │ [Widgets]│ │ │ [Style] │ │ │ [Adv] │ │ │ │ │ └──────────┴──────────────────────────────────────────┘
Elementor Editor Panel
The Editor Panel is the left sidebar containing three tabs: Content (widget settings), Style (visual customization), and Advanced (positioning, motion effects, custom CSS). It dynamically changes based on the selected element.
┌───────────────────────────┐ │ ← Back to WP │ ├───────────────────────────┤ │ [Content][Style][Advanced]│ ├───────────────────────────┤ │ │ │ Widget/Section │ │ Controls │ │ │ │ ┌───────────┐ │ │ │ Title │ │ │ └───────────┘ │ │ ┌───────────┐ │ │ │ Size ▼ │ │ │ └───────────┘ │ └───────────────────────────┘
Elementor Canvas
The Canvas is the central live-editing area where you drag-and-drop widgets, see real-time changes, and interact with your page structure. Right-click on elements to access context menus for copy, paste, duplicate, and delete operations.
Elementor Navigator
Navigator (shortcut: Cmd/Ctrl + I) provides a hierarchical tree view of all page elements, making it easy to select nested elements, reorder items via drag-and-drop, and toggle visibility. Essential for complex layouts with many layers.
┌─ Navigator ─────────────┐ │ 📁 Section │ │ ├─ 📁 Column │ │ │ ├─ 🔤 Heading │ │ │ └─ 📝 Text Editor │ │ └─ 📁 Column │ │ └─ 🖼️ Image │ │ 📁 Section │ │ └─ 📁 Inner Section │ └─────────────────────────┘
Elementor Finder
Finder (shortcut: Cmd/Ctrl + E) is a quick-access search tool that lets you instantly navigate to pages, templates, theme builder parts, settings, or perform actions like creating new pages—similar to Spotlight on macOS or Alfred.
Elementor Settings
Found under Elementor → Settings in WP Admin, this area controls global configurations: default colors/fonts, content types enabled for Elementor, CSS print method (external file vs inline), and integration settings like Google Maps API and reCAPTCHA.
WordPress Admin → Elementor → Settings ├── General (post types, default colors) ├── Integrations (API keys) ├── Advanced (CSS print method, assets loading) ├── Features (experiments, stable features) └── Performance (optimizations)
Elementor Role Manager
Role Manager (Pro feature) controls which WordPress user roles can access Elementor's editor and specific features. You can restrict roles to only use certain widgets or prevent access to theme builder elements entirely.
┌─ Role Manager ──────────────────────────────┐ │ Administrator │ Full Access ✓ │ │ Editor │ No Theme Builder ✓ │ │ Author │ Content Only ✓ │ │ Contributor │ No Access ✗ │ └─────────────────────────────────────────────┘
Elementor Structure
Sections
Sections are the largest building blocks—full-width horizontal containers that hold columns. Each section can have its own layout settings (boxed/full-width), background, and structure settings defining column count.
┌─────────────────────────────────────────────────────┐ │ SECTION │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ Column │ │ Column │ │ Column │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ └─────────────────────────────────────────────────────┘
Columns
Columns are vertical divisions within sections, defined by percentage widths. Each column can contain multiple widgets stacked vertically and has independent styling (background, padding, alignment).
Section (100%) ├── Column (33.33%) │ Column (33.33%) │ Column (33.33%) ├── Column (25%) │ Column (50%) │ Column (25%) └── Column (70%) │ Column (30%)
Widgets
Widgets are the individual content elements (heading, image, button, video, etc.) that you drag into columns. Elementor Free includes 40+ widgets; Pro adds 50+ more advanced widgets like forms, sliders, and dynamic content.
// Custom Widget Registration (Developer) class My_Widget extends \Elementor\Widget_Base { public function get_name() { return 'my_widget'; } public function get_title() { return 'My Widget'; } protected function render() { echo '<div class="my-widget">Custom Content</div>'; } }
Inner Sections
Inner Sections (deprecated in favor of Containers) allow nesting a section inside a column, creating complex multi-column layouts within a single column. Useful for advanced grid structures.
┌─────────────────────────────────────────────────────┐ │ Section │ │ ┌─────────────────────────┐ ┌──────────────────┐ │ │ │ Column │ │ Column │ │ │ │ ┌────────┬───────────┐ │ │ │ │ │ │ │ Inner │ Inner │ │ │ Widget │ │ │ │ │ Col 1 │ Col 2 │ │ │ │ │ │ │ └────────┴───────────┘ │ │ │ │ │ └─────────────────────────┘ └──────────────────┘ │ └─────────────────────────────────────────────────────┘
Containers (Flexbox)
Containers are the modern replacement for Sections/Columns, utilizing CSS Flexbox for more flexible and performant layouts. They support both row/column directions, wrapping, and can be infinitely nested.
┌─ Container (direction: row) ────────────────────────┐ │ ┌─────────┐ ┌─────────┐ ┌─────────────────────┐ │ │ │Container│ │Container│ │ Container (column) │ │ │ │ (item) │ │ (item) │ │ ┌────────────────┐ │ │ │ │ │ │ │ │ │ Nested Item │ │ │ │ └─────────┘ └─────────┘ │ └────────────────┘ │ │ │ └─────────────────────┘ │ └─────────────────────────────────────────────────────┘
Elementor Grid
The Elementor Grid is a visual layout system that lets you create responsive, column‑based designs without writing CSS. It works inside Containers (or Sections) and provides:
- Automatic column calculation – set the number of columns and Elementor distributes items evenly.
- Responsive breakpoints – define different column counts for desktop, tablet, and mobile.
- Gap control – adjust horizontal and vertical spacing (gutter) between grid items.
- Alignment options – align items to start, center, end, or stretch within each cell.
Typical markup (generated by Elementor):
<div class="elementor-container elementor-grid elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1"> <div class="elementor-grid-item">…</div> <div class="elementor-grid-item">…</div> <div class="elementor-grid-item">…</div> <!-- more items --> </div>
elementor-grid-3→ 3 columns on desktop.elementor-grid-tablet-2→ 2 columns on tablets.elementor-grid-mobile-1→ 1 column on mobile.
Why use the Grid?
- Speed: No custom CSS needed for most common layouts.
- Consistency: Grid settings are stored in the widget/section, ensuring the same layout across the site.
- Flexibility: Combine with Containers for nested grids, or switch to Flexbox direction for more complex arrangements.
You can enable the Grid in the Layout panel of any Container/Section by selecting Grid as the layout type and configuring the column count and gaps.
Global Widgets
Global Widgets are reusable widget instances linked across multiple pages, edit once, update everywhere. Right-click any widget and select "Save as Global" to create one; they appear with an orange border.
Page A Page B Page C ┌──────────┐ ┌──────────┐ ┌──────────┐ │🔶 CTA │ ←──────────→│🔶 CTA │←───────────→│🔶 CTA │ │ Button │ Linked │ Button │ Linked │ Button │ └──────────┘ └──────────┘ └──────────┘ ↓ Edit once → Updates all instances
Saved Templates
Saved Templates are reusable page sections or full layouts stored in the Template Library. They can be sections, pages, or entire theme parts, exportable as JSON for migration between sites.
// Programmatically insert template echo \Elementor\Plugin::instance()->frontend->get_builder_content( $template_id ); // Export/Import via WP-CLI wp elementor library export <template-id> --output=/path/to/file.json wp elementor library import /path/to/file.json
Elementor Styling
Style Tab Controls
The Style tab in the Editor Panel provides visual controls for appearance: colors, typography, spacing, backgrounds, and borders. Every widget has widget-specific style options organized into collapsible sections.
┌─ Style Tab ─────────────┐ │ ▼ Typography │ │ Font: Roboto │ │ Size: 16px │ │ ▼ Text Color │ │ [■ #333333] │ │ ▼ Text Shadow │ │ Blur: 10px │ └─────────────────────────┘
Typography Controls
Typography controls manage font family, size, weight, transform, style, decoration, line-height, and letter-spacing. Pro users can set Global Fonts for consistent typography across the entire site.
/* Generated CSS Example */ .elementor-heading-title { font-family: "Poppins", sans-serif; font-size: 32px; font-weight: 600; text-transform: uppercase; line-height: 1.4; letter-spacing: 2px; }
Background Controls
Background controls offer five types: Classic (solid/image), Gradient, Video, Slideshow (Pro), and none. Each supports overlay colors, position, size (cover/contain), and attachment (scroll/fixed for parallax effects).
Background Types: ┌──────────┬──────────┬──────────┬──────────┐ │ 🎨 │ 🌈 │ 🎬 │ 🖼️ │ │ Classic │ Gradient │ Video │ Slideshow│ │ (Solid/ │ (Linear/ │ (MP4/ │ (Image │ │ Image) │ Radial) │ YouTube)│ Rotate) │ └──────────┴──────────┴──────────┴──────────┘
Border Controls
Border controls allow setting border type (solid, dashed, dotted, double, groove), width per side, color, and border-radius for rounded corners. Radius can be set uniformly or individually per corner.
/* Border Example */ .element { border-style: solid; border-width: 2px 2px 2px 2px; border-color: #3498db; border-radius: 10px 10px 0px 0px; /* TL TR BR BL */ }
Box Shadow
Box Shadow adds depth with customizable horizontal/vertical offset, blur, spread, color, and position (outline/inset). Multiple shadow values can achieve complex effects like layered shadows.
Box Shadow Parameters: ↑ Vertical (-20 to 20) │ ←───────────────┼───────────────→ Horizontal │ ↓ ┌───────────────────────┐ │ Element │░░░ ← Blur + Spread │ │░░░ └───────────────────────┘░░░ ░░░░░░░░░░░░░░░░░░░░░░░░░ Shadow
CSS Filters
CSS Filters apply visual effects to images and elements: blur, brightness, contrast, saturation, and hue-rotate. Commonly used for hover effects (grayscale to color transitions).
/* Filter Examples */ .normal { filter: none; } .blur { filter: blur(5px); } .grayscale { filter: grayscale(100%); } .bright { filter: brightness(150%); } .combined { filter: contrast(120%) saturate(130%) hue-rotate(10deg); }
CSS Transform
CSS Transform modifies element geometry: rotate (degrees), scale (size), skew (distortion), and translate (position offset). Supports both 2D and 3D transforms with perspective settings.
/* Transform Properties */ .element { transform: rotate(15deg); transform: scale(1.2); transform: skew(10deg, 5deg); transform: translate(50px, -20px); /* Combined */ transform: rotate(5deg) scale(1.1) translateY(-10px); }
Responsive Controls
Responsive controls (desktop/tablet/mobile icons) allow setting different values per breakpoint. Custom breakpoints can be configured in Settings. The eyeball icon lets you hide elements on specific devices.
Breakpoints: ┌──────────────────────────────────────────────────┐ │ 🖥️ Desktop │ 📱 Tablet │ 📱 Mobile │ │ > 1024px │ 768-1024px │ < 768px │ ├──────────────────────────────────────────────────┤ │ Font: 48px │ Font: 36px │ Font: 24px │ │ Cols: 4 │ Cols: 2 │ Cols: 1 │ │ Padding: 50px │ Padding: 30px│ Padding: 20px │ └──────────────────────────────────────────────────┘
Custom CSS (Pro)
Custom CSS (Pro feature) in the Advanced tab allows adding element-specific CSS using the selector keyword that automatically targets the current element. Site-wide CSS goes in Site Settings → Custom CSS.
/* Element-specific Custom CSS */ selector { position: relative; overflow: hidden; } selector::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } selector:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
Elementor Advanced Tab
Motion Effects
Motion Effects enable scroll-based animations and mouse-tracking interactions for any element. You can create parallax scrolling, horizontal/vertical movements, rotation, scale, and transparency changes as users scroll or move their mouse, adding depth and interactivity to your pages.
┌─────────────────────────────────┐ │ Scrolling Effects: │ │ ├── Vertical Scroll (-50,+50) │ │ ├── Horizontal Scroll │ │ ├── Transparency (fade) │ │ ├── Blur │ │ ├── Rotate │ │ └── Scale │ │ │ │ Mouse Effects: │ │ ├── Mouse Track (element) │ │ └── 3D Tilt │ └─────────────────────────────────┘
Background Effects
Background Effects allow you to add dynamic backgrounds including Ken Burns slideshow effects, parallax scrolling backgrounds, and video backgrounds with fallback images. These create visually engaging sections without affecting page performance significantly when configured properly.
┌─────────────────────────────────────┐ │ Background Type: │ │ ├── Classic (Image/Color) │ │ ├── Gradient │ │ └── Video (MP4/YouTube/Vimeo) │ │ │ │ Effects: │ │ ├── Parallax (Scroll/Mouse) │ │ └── Ken Burns (Zoom In/Out/Loop) │ └─────────────────────────────────────┘
Positioning
Positioning controls let you override the default document flow by setting elements to absolute, fixed, or relative positions with custom width and offsets. This is essential for creating overlapping elements, sticky headers, floating buttons, or custom layouts that break traditional grid constraints.
Position Types: ┌──────────────────────────────────────────────┐ │ Default → Normal document flow │ │ Relative → Offset from normal position │ │ Absolute → Relative to parent container │ │ Fixed → Fixed to viewport │ └──────────────────────────────────────────────┘ Width Options: Inline(Auto) | Full Width | Custom(px/%) Z-Index: Controls stacking order (higher = front)
Responsive Visibility
Responsive Visibility allows you to show or hide any element (section, column, or widget) on specific devices—desktop, tablet, or mobile. This is crucial for creating optimized experiences where certain content only appears on appropriate screen sizes.
┌─────────────────────────────────────┐ │ Hide on Desktop [ ] │ │ Hide on Tablet [✓] │ │ Hide on Mobile [✓] │ └─────────────────────────────────────┘ Result: Element visible ONLY on Desktop
CSS Classes
CSS Classes field allows you to add custom class names to any Elementor element, enabling you to target them with custom CSS from your theme, child theme, or Elementor's custom CSS panel. Multiple classes are space-separated, following standard HTML conventions.
<!-- Advanced Tab → CSS Classes field --> my-custom-button highlight-effect animate-on-scroll <!-- Then in Custom CSS or theme --> <style> .my-custom-button { box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .my-custom-button:hover { transform: translateY(-3px); } </style>
CSS ID
CSS ID assigns a unique identifier to an element, essential for creating anchor links (one-page navigation), JavaScript targeting, or highly specific CSS styling. Each ID must be unique on the page and follows standard HTML ID naming conventions.
┌────────────────────────────────────────────────┐ │ CSS ID Field: services-section │ └────────────────────────────────────────────────┘ Anchor Link Usage: <a href="#services-section">Jump to Services</a> Menu URL: https://yoursite.com/page/#services-section
Custom Attributes
Custom Attributes let you add any HTML attribute to elements, such as data-* attributes for JavaScript, ARIA attributes for accessibility, or tracking attributes for analytics. Format is key|value with each attribute on a new line.
┌──────────────────────────────────────┐ │ Custom Attributes Field: │ │ ────────────────────────── │ │ data-aos|fade-up │ │ data-delay|300 │ │ aria-label|Contact Form │ │ data-analytics|hero-cta │ └──────────────────────────────────────┘ Output HTML: <div data-aos="fade-up" data-delay="300" aria-label="Contact Form" data-analytics="hero-cta">
Elementor Templates
Page Templates
Page Templates are complete, full-page layouts saved for reuse across your site or other projects. They include all sections, columns, and widgets of an entire page, making them ideal for landing pages, sales pages, or any standardized page structure you need to replicate.
┌─────────────────────────────────────┐ │ FULL PAGE TEMPLATE │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ HERO SECTION │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ ABOUT SECTION │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ SERVICES SECTION │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ CONTACT SECTION │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘
Section Templates
Section Templates are reusable blocks containing just one section (with its columns and widgets), perfect for commonly used components like testimonial blocks, pricing tables, CTAs, or feature grids that you want to insert into multiple pages without rebuilding.
Save Section → Right-click section → Save as Template ┌─────────────────────────────────────────────┐ │ TESTIMONIALS SECTION │ │ ┌───────┐ ┌───────┐ ┌───────┐ │ │ │ Quote │ │ Quote │ │ Quote │ │ │ │ ★★★★★ │ │ ★★★★★ │ │ ★★★★☆ │ │ │ │ Name │ │ Name │ │ Name │ │ │ └───────┘ └───────┘ └───────┘ │ └─────────────────────────────────────────────┘ ↓ Save as Template ↓ "Testimonials-3-Column-Grid"
Template Library
Template Library is Elementor's built-in repository containing hundreds of pre-designed templates (pages, blocks, and popups) plus your saved custom templates. Access it via the folder icon, browse by category, preview templates, and insert them directly into your editor.
┌─────────────────────────────────────────────────┐ │ TEMPLATE LIBRARY │ ├──────────────┬──────────────────────────────────┤ │ BLOCKS │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ PAGES │ │ TPL │ │ TPL │ │ TPL │ │ │ MY TEMPL. │ └─────┘ └─────┘ └─────┘ │ │ ───────── │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ Categories │ │ TPL │ │ TPL │ │ TPL │ │ │ • About │ └─────┘ └─────┘ └─────┘ │ │ • Contact │ │ │ • Services │ [Insert] [Preview] │ └──────────────┴──────────────────────────────────┘
Template Export/Import
Templates can be exported as JSON files and imported on any WordPress site running Elementor, enabling template sharing between projects, clients, or team members. Export includes all design settings but not media files (images reference URLs).
EXPORT: Templates → My Templates → [...] → Export Template ↓ template-name.json IMPORT: Templates → My Templates → Import Templates ↓ [Choose .json file] ↓ Template available in library Note: Images must exist at same URLs or be re-uploaded
Template Conditions (Pro)
Template Conditions determine WHERE a Theme Builder template applies—entire site, specific post types, taxonomies, individual pages, or by author. This powerful system lets you create different headers for blog vs shop, or unique single templates per category.
┌─────────────────────────────────────────────────┐ │ DISPLAY CONDITIONS │ ├─────────────────────────────────────────────────┤ │ INCLUDE: │ │ ┌─────────────────────────────────────────┐ │ │ │ [Entire Site ▼] │ │ │ │ [Singular > Posts ▼] │ │ │ │ [Archive > Category > News▼] │ │ │ └─────────────────────────────────────────┘ │ │ │ │ EXCLUDE: │ │ ┌─────────────────────────────────────────┐ │ │ │ [Singular > Pages > Contact▼] │ │ │ └─────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘
Display Conditions (Pro)
Display Conditions control WHEN elements/sections appear based on dynamic rules like user login status, user roles, date/time, browser type, or URL parameters. Unlike visibility (device-based), these are logic-based conditions for personalized content delivery.
┌─────────────────────────────────────────────────┐ │ DISPLAY CONDITIONS │ ├─────────────────────────────────────────────────┤ │ Show element when: │ │ ├── User is Logged In │ │ ├── User Role = Administrator │ │ ├── Date/Time = Before Dec 25 │ │ ├── URL Parameter contains "promo" │ │ └── Browser = Chrome │ │ │ │ Logic: [AND ▼] / [OR ▼] │ └─────────────────────────────────────────────────┘
Elementor Theme Builder (Pro)
Header Builder
Header Builder lets you design fully custom site headers replacing your theme's default header. You can create sticky headers, shrinking headers on scroll, transparent headers, different headers for mobile, and use any Elementor widget within your header design.
┌─────────────────────────────────────────────────────────┐ │ LOGO NAV MENU SEARCH CART BUTTON │ ├─────────────────────────────────────────────────────────┤ │ Settings: │ │ • Sticky: Yes/No │ │ • Shrink on Scroll │ │ • Transparent (overlay content) │ │ • Motion Effects on scroll │ │ │ │ Conditions: Entire Site / Exclude: Landing Pages │ └─────────────────────────────────────────────────────────┘
Footer Builder
Footer Builder enables complete control over your site's footer design using Elementor's drag-and-drop interface instead of limited theme options. Build multi-column footers with widgets, navigation, social icons, forms, copyright text, and back-to-top buttons with full styling control.
┌─────────────────────────────────────────────────────────┐ │ ABOUT US │ QUICK LINKS │ CONTACT │ SOCIAL │ │ ────────── │ ─────────── │ ──────── │ ──────── │ │ Company │ Home │ Address │ [f][t][i] │ │ description │ Services │ Phone │ │ │ here... │ Blog │ Email │ NEWSLETTER│ │ │ Contact │ │ [ ] │ ├─────────────────────────────────────────────────────────┤ │ © 2025 Company Name. All rights reserved. │ └─────────────────────────────────────────────────────────┘
Single Post Templates
Single Post Templates define the layout for individual post/page/CPT content, using dynamic widgets (Post Title, Post Content, Featured Image, Author Box, Post Navigation, Comments) that automatically pull content from each post. One template serves unlimited posts dynamically.
┌─────────────────────────────────────────────┐ │ [Featured Image - Dynamic] │ ├─────────────────────────────────────────────┤ │ Category: {post_terms} Date: {post_date}│ ├─────────────────────────────────────────────┤ │ {Post Title - Dynamic} │ │ │ │ {Post Content - Dynamic} │ │ Lorem ipsum dolor sit amet... │ │ │ ├─────────────────────────────────────────────┤ │ AUTHOR BOX │ │ ┌─────┐ Author Name │ │ │ IMG │ Author Bio dynamic content │ │ └─────┘ │ ├─────────────────────────────────────────────┤ │ ← Previous Post Next Post → │ ├─────────────────────────────────────────────┤ │ COMMENTS SECTION (dynamic) │ └─────────────────────────────────────────────┘
Archive Templates
Archive Templates design the layout for post listings on category, tag, author, date, and custom taxonomy archive pages. Use the Posts/Archive Posts widget with dynamic querying, and the Archive Title widget automatically displays the relevant archive name.
┌─────────────────────────────────────────────────────┐ │ {Archive Title: "Category: News"} │ │ {Archive Description} │ ├─────────────────────────────────────────────────────┤ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ IMAGE │ │ IMAGE │ │ IMAGE │ │ │ ├─────────┤ ├─────────┤ ├─────────┤ │ │ │ Title │ │ Title │ │ Title │ │ │ │ Excerpt │ │ Excerpt │ │ Excerpt │ │ │ │ Meta │ │ Meta │ │ Meta │ │ │ └─────────┘ └─────────┘ └─────────┘ │ │ │ │ [1] [2] [3] [→] │ └─────────────────────────────────────────────────────┘ ↑ Archive Posts Widget (Query: Current) ↑
Search Results Template
Search Results Template customizes the search results page layout, displaying posts matching the search query with the Archive Posts widget set to "Query: Search Results." Add search forms, filter options, and handle no-results scenarios with conditional visibility.
┌─────────────────────────────────────────────────────┐ │ Search Results for: "{search_term}" │ │ [_________________] [Search] │ ├─────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ [IMG] Post Title │ │ │ │ Excerpt with highlighted search term... │ │ │ │ Read More → │ │ │ └──────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────┐ │ │ │ [IMG] Post Title │ │ │ │ Excerpt text here... │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ Query Source: Search Results │ └─────────────────────────────────────────────────────┘
404 Template
404 Template creates a custom "page not found" error page that matches your brand, providing helpful navigation options, search functionality, or creative messaging instead of a generic error. Apply condition to "404 Page" for site-wide coverage.
┌─────────────────────────────────────────────────────┐ │ │ │ 404 │ │ │ │ ┌───────────────────┐ │ │ │ LOST IMAGE │ │ │ │ or ICON │ │ │ └───────────────────┘ │ │ │ │ Oops! Page Not Found │ │ │ │ The page you're looking for doesn't exist. │ │ │ │ [___Search the site___] [🔍] │ │ │ │ [Go Home] [Contact Us] │ │ │ └─────────────────────────────────────────────────────┘ Condition: 404 Page
WooCommerce Templates
WooCommerce Templates (Pro) let you design custom Shop page, Product Archive, Single Product, Cart, Checkout, My Account, and Empty Cart pages using Elementor with WooCommerce-specific widgets. Full control over product galleries, add-to-cart buttons, related products, and checkout flows.
AVAILABLE WOOCOMMERCE TEMPLATES: ┌────────────────────┬────────────────────────────────┐ │ Template Type │ Key Widgets Available │ ├────────────────────┼────────────────────────────────┤ │ Product Archive │ Products, Archive Desc. │ │ Single Product │ Product Images, Title, Price, │ │ │ Add to Cart, Tabs, Related │ │ Product Cart │ Cart, Cross-sells │ │ Checkout │ Checkout, Order Summary │ │ My Account │ My Account │ │ Empty Cart │ Custom message + products │ │ Thank You Page │ Purchase Summary │ └────────────────────┴────────────────────────────────┘
Elementor Dynamic Content (Pro)
Dynamic Tags
Dynamic Tags pull live data from your WordPress database into any widget field (text, URLs, images). Instead of static content, reference post titles, featured images, author names, site info, or custom fields that automatically update based on the current context.
Static Text: "Welcome to My Blog" Dynamic Tag: {site:title} → "Your Site Name" (auto-updates) ┌─────────────────────────────────────────────────────┐ │ DYNAMIC TAG ICON: [🔄] │ │ │ │ Categories: │ │ ├── Post → Title, Excerpt, Date, Author │ │ ├── Archive → Title, Description │ │ ├── Site → Title, Tagline, Logo, URL │ │ ├── Media → Featured Image, Author Avatar │ │ ├── Author → Name, Bio, Profile Picture │ │ ├── ACF → All ACF field types │ │ └── WooComm → Price, SKU, Stock │ └─────────────────────────────────────────────────────┘
ACF Integration
Elementor Pro natively integrates with Advanced Custom Fields, allowing you to display ACF field data (text, image, gallery, repeater, flexible content, relationship) via dynamic tags. This enables building complex, data-driven layouts without coding, perfect for real estate, directories, or portfolios.
ACF Field Group: "Property Details" ├── price (Number) ├── bedrooms (Number) ├── property_gallery (Gallery) └── agent (Relationship) In Elementor: ┌─────────────────────────────────────┐ │ Price: ${acf:price} │ │ Bedrooms: {acf:bedrooms} │ │ ┌─────┐┌─────┐┌─────┐ │ │ │ IMG ││ IMG ││ IMG │ ← Gallery │ │ └─────┘└─────┘└─────┘ │ │ Agent: {acf:agent → post_title} │ └─────────────────────────────────────┘
Toolset Integration
Elementor integrates with Toolset Types for custom post types and custom fields, making Toolset-created fields accessible through Elementor's dynamic tags. This combination enables complex relational databases and Views-style templates built visually in Elementor.
Toolset → Elementor Workflow: ┌──────────────────────────────────────────────────────┐ │ 1. Create CPT in Toolset (e.g., "Listings") │ │ 2. Define Custom Fields in Toolset │ │ 3. In Elementor: Dynamic Tag → Toolset → Field │ └──────────────────────────────────────────────────────┘ Dynamic Tag Path: [🔄] → Toolset → [Field Group] → [Field Name]
Pods Integration
Elementor Pro supports Pods Framework fields through dynamic tags, allowing Pods-created custom fields (text, file, relationship, etc.) to populate Elementor widgets dynamically. Pods offers a developer-friendly alternative to ACF with similar Elementor integration capabilities.
┌─────────────────────────────────────────────────────┐ │ PODS FRAMEWORK → ELEMENTOR │ ├─────────────────────────────────────────────────────┤ │ Pod: "Events" │ │ ├── event_date → {pods:event_date} │ │ ├── venue_address → {pods:venue_address} │ │ ├── ticket_price → {pods:ticket_price} │ │ └── event_image → {pods:event_image} │ │ │ │ Access: Dynamic Tags → Pods → [Select Field] │ └─────────────────────────────────────────────────────┘
Custom Fields Integration
Beyond specific plugins, Elementor Pro can access any WordPress custom field via the Post Meta dynamic tag, supporting native custom fields or any plugin that stores data in post_meta. Use the meta key to pull values into text, links, or image widgets dynamically.
Any Custom Field (wp_postmeta): ┌───────────────────────────────────────────────┐ │ meta_key: "property_sqft" │ │ meta_value: "2500" │ └───────────────────────────────────────────────┘ In Elementor: Dynamic Tags → Post → Post Custom Field ↓ ┌───────────────────────────────────────────────┐ │ Key: property_sqft │ │ Output: 2500 │ └───────────────────────────────────────────────┘ Works with: Native WP, CMB2, Meta Box, Carbon Fields