Joynal

Aura Header Footer for Elementor lets you design custom headers and footers with Elementor’s full drag-and-drop editor, then control exactly where they appear using flexible display conditions.
<h4>How It Works</h4>
<ol>
<li>Go to Aura HFE → Header Templates or Footer Templates.</li>
<li>Click Add New Header Template — a clean modal popup appears.</li>
<li>Set the template name, display condition, include/exclude pages, and sticky options.</li>
<li>Click Create — you land directly in the Elementor editor.</li>
<li>Design your template, publish, and it’s live.</li>
</ol>
<h4>Key Features</h4>
<ul>
<li>Modal creation flow — configure everything before opening Elementor.</li>
<li>Separate Header & Footer pages — clean dedicated admin pages for each type.</li>
<li>Display Conditions — Entire Site, Front Page, Blog, Archives, Search, 404, All Singular, or Specific Pages.</li>
<li>Page Exclusions — hide a template on selected pages regardless of include rule.</li>
<li>Sticky Header — make any header sticky on scroll with optional slide animation.</li>
<li>Inline Active Toggle — enable/disable templates without leaving the list.</li>
<li>AJAX Delete — remove templates without a page reload.</li>
<li>Performance First — one DB query per template type per page, per-request memory cache, assets only loaded when a template is active on the current page.</li>
</ul>
<h4>Theme Integration</h4>
Place these hooks in your theme to output templates:
<pre><code><?php do_action( 'aura_hfe_header' ); ?> — in `header.php`
<?php do_action( 'aura_hfe_footer' ); ?> — in `footer.php`
</code></pre>
<h4>For Developers</h4>
Action hooks: <code>aura_hfe_loaded</code>, <code>aura_hfe_activated</code>, <code>aura_hfe_deactivated</code>, <code>aura_hfe_meta_saved</code>, <code>aura_hfe_template_created</code>
Filter hooks: <code>aura_hfe_header_hook</code>, <code>aura_hfe_footer_hook</code>, <code>aura_hfe_resolved_template</code>, <code>aura_hfe_template_matches</code>, <code>aura_hfe_include_rule_options</code>, <code>aura_hfe_evaluate_include_rule</code>, <code>aura_hfe_sticky_offset</code>, <code>aura_hfe_render_post_id</code>, <code>aura_hfe_cpt_args</code>, <code>aura_hfe_active_templates_query</code>
Add a custom display condition:
<pre><code>add_filter( 'aura_hfe_include_rule_options', function( $opts ) {
 $opts['woo_shop'] = __( 'WooCommerce Shop', 'your-domain' );
 return $opts;
} );

add_filter( 'aura_hfe_evaluate_include_rule', function( $result, $rule, $pages ) {
 if ( 'woo_shop' === $rule ) {
 return function_exists( 'is_shop' ) && is_shop();
 }
 return $result;
}, 10, 3 );
</code></pre>

Aura Header Footer for Elementor

Create custom headers and footers with Elementor, including display conditions and sticky header support.

Theme-X

🚀 NEW: Elementor Theme Builder (Header & Footer) 
Elematic now includes a built-in Elementor Theme Builder, allowing you to create custom headers and footers visually using Elementor, without editing theme files or writing code.
You can: 
– Design global or conditional headers and footers 
– Edit header, content, and footer layouts seamlessly 
– Use Elementor widgets and Elematic widgets inside headers and footers 
– Replace theme headers and footers safely, even on block themes
This makes Elematic a complete layout solution, not just a widget pack.
Elematic is a fast, lightweight addon for the Elementor page builder, designed for modern WordPress websites. It includes beautifully animated widgets inspired by Webflow and Framer, giving you motion-design freedom directly inside Elementor.
Whether you’re building a landing page, business website, portfolio, SaaS layout, blog, or WooCommerce store, Elematic gives you everything you need to design clean, interactive, and high-converting layouts.
The plugin is built with performance first in mind. Assets load only when widgets are used, ensuring fast page loads, strong Core Web Vitals, and excellent Google PageSpeed scores.
🚀 With Elematic, you can build: 
– Custom Elementor headers and footers 
– High-engagement landing pages 
– Animated portfolios and creative layouts 
– Modern SaaS and agency websites 
– Interactive product and marketing pages
👉 Perfect for: 
✔ Designers 
✔ Agencies 
✔ Developers 
✔ Bloggers 
✔ WooCommerce stores 
✔ Elementor users who want more control and better animations
<h3>Key Highlights</h3>
<ul>
<li>Elementor Theme Builder (Header & Footer)</li>
<li>Webflow & Framer-style animations</li>
<li>Performance-optimized architecture</li>
<li>Clean HTML and minimal CSS output</li>
<li>Works with Elementor Free & Pro</li>
<li>Fully responsive and SEO friendly</li>
</ul>
<h3>Elementor Theme Builder (Header & Footer)</h3>
Elematic includes a visual Theme Builder that lets you design headers and footers using Elementor.
Features: 
– Create unlimited headers and footers 
– Assign display conditions (global, pages, posts, archives) 
– Edit headers/footers directly from the frontend 
– Compatible with classic and block themes 
– No theme file overrides 
– Safe, lightweight, and cache-friendly
This brings Elementor Pro-style header/footer editing into a lightweight, developer-friendly plugin.
<h3>Included Widgets</h3>
<ul>
<li>
<a href="https://themes.network/elematic/3d-carousel/" rel="nofollow ugc">3D Carousel</a> 
Bring your images to life with realistic depth and perspective. This new widget creates a striking 3D rotating stage with dynamic scaling, custom slide labels, and elegant shadow details.
</li>
<li>
<a href="https://themes.network/elematic/accordion/" rel="nofollow ugc">Accordion</a> 
Clean collapsible FAQ sections with icons and smooth animation.
</li>
<li>
<a href="https://themes.network/elematic/animated-heading/" rel="nofollow ugc">Animated Heading</a> 
Dynamic title animations (typed, sliding, or looping) to highlight key headlines.
</li>
<li>
<a href="https://themes.network/elematic/animated-shape/" rel="nofollow ugc">Animated Shape</a> 
Modern motion shapes and blobs to add subtle, looping background animation to sections and hero areas.
</li>
<li>
<a href="https://themes.network/elematic/banner/" rel="nofollow ugc">Banner</a> 
Create modern hero banners with image, title, subtitle, and CTA buttons with animations, perfect for landing pages and marketing sections.
</li>
<li>
<a href="https://themes.network/elematic/breadcrumbs/" rel="nofollow ugc">Breadcrumbs</a> 
SEO-friendly dynamic breadcrumbs for pages, posts, archives, and WooCommerce.
</li>
<li>
<a href="https://themes.network/elematic/button/" rel="nofollow ugc">Button</a> 
Customizable button with icons, hover effects, and full control over typography, spacing, and borders.
</li>
<li>
<a href="https://themes.network/elematic/chart/" rel="nofollow ugc">Chart</a> 
Responsive, animated charts (bar, line, pie, radar, horizontal, vertical, etc.) powered by your data, with full color and typography control for dashboards and stats sections.
</li>
<li>
<a href="https://themes.network/elematic/circle-info/" rel="nofollow ugc">Circle Info</a> 
Interactive circular feature widget with auto/manual rotation and clickable icons revealing detailed content in the center.
</li>
<li>
<a href="https://themes.network/elematic/circle-progress-bar/" rel="nofollow ugc">Circle Progress Bar</a> 
Animated circular progress indicator with percentage display and full styling control for dashboards, skills, and achievement counters.
</li>
<li>
<a href="https://themes.network/elematic/circle-text/" rel="nofollow ugc">Circle Text</a> (Webflow + Framer style) 
Create rotating circular text around logos or icons with smooth Webflow/Framer-style animation for badges, seals, and hero sections.
</li>
<li>
<a href="https://themes.network/elematic/contact-form-7/" rel="nofollow ugc">Contact Form 7</a> 
Style Contact Form 7 forms inside Elementor with custom spacing, colors, and typography without touching CSS.
</li>
<li>
<a href="https://themes.network/elematic/countdown/" rel="nofollow ugc">Countdown</a> 
Create animated countdown timers for launches, sales, or events with full control over layout, labels, and expiry actions.
</li>
<li>
<a href="https://themes.network/elematic/counter/" rel="nofollow ugc">Counter</a> 
Animate numbers from any start/end value with icons, prefixes, and suffixes to highlight key stats or milestones.
</li>
<li>
<a href="https://themes.network/elematic/dual-button/" rel="nofollow ugc">Dual Button</a> 
Create side-by-side CTA buttons with separate links and icons, featuring 50 built-in gradient presets for instant modern styling.
</li>
<li>
<a href="https://themes.network/elematic/features/" rel="nofollow ugc">Features</a> 
Create flexible feature sections with custom items or fully dynamic content pulled from any post type. Supports images, titles, descriptions, meta info, and multi-column layouts for building service lists, feature highlights, or dynamic content showcases.
</li>
<li>
<a href="https://themes.network/elematic/flip-box/" rel="nofollow ugc">Flip Box</a> 
Create interactive cards that flip on hover with zoom, up/down, left/right and other 3D flip effects to reveal extra info or CTAs.
</li>
<li>
<a href="https://themes.network/elematic/gallery/" rel="nofollow ugc">Gallery</a> 
Responsive, filterable image gallery with hover effects, spacing control, and built-in lightbox/popup modal for clean portfolio and showcase layouts.
</li>
<li>
<a href="https://themes.network/elematic/grid/" rel="nofollow ugc">Grid</a> 
Flexible multi-column content grid with image, icon, title, description, read-more link, and optional image lightbox for services, features, or portfolio cards.
</li>
<li>
<a href="https://themes.network/elematic/highlight-text/" rel="nofollow ugc">Highlight Text</a> (Webflow + Framer style) 
Scroll-triggered highlight text effect inspired by Webflow and Framer, animating your headings or paragraphs as they enter the viewport.
</li>
<li>
<a href="https://themes.network/elematic/horizontal-timeline/" rel="nofollow ugc">Horizontal Timeline</a> 
Display milestones and events in a scrollable horizontal timeline with 4 layout styles, custom icons, images, dates, and an animated progress line — perfect for history sections, roadmaps, and process flows.
</li>
<li>
<a href="https://themes.network/elematic/hotspot/" rel="nofollow ugc">Hotspot</a> 
Lets you add clickable markers over images with tooltips or popups, perfect for product highlights, maps, and interactive storytelling.
</li>
<li>
<a href="https://themes.network/elematic/icon-box/" rel="nofollow ugc">Icon Box</a> 
Lets you showcase features in 3 layouts using icon or image, with full-box hover effects for highly interactive service or feature blocks.
</li>
<li>
<a href="https://themes.network/elematic/image-animate/" rel="nofollow ugc">Image Animate</a> 
Adds smooth left-right and up-down reveal animations to your images for simple, lightweight scroll-based motion effects.
</li>
<li>
<a href="https://themes.network/elematic/image-box/" rel="nofollow ugc">Image Box</a> 
Displays an image with title, description, and optional button in multiple layouts, ideal for feature/service cards and promo blocks.
</li>
<li>
<a href="https://themes.network/elematic/image-comparison/" rel="nofollow ugc">Image Comparison</a> 
Add an interactive draggable before/after slider with hover, smoothing, and label controls for showcasing transformations or visual changes in horizontal and vertical orientation.
</li>
<li>
<a href="https://themes.network/elematic/image-hover/" rel="nofollow ugc">Image Hover</a> 
Add 30+ modern hover effects to images with title, description, and overlay controls for eye-catching rollovers.
</li>
<li>
<a href="https://themes.network/elematic/image-mask/" rel="nofollow ugc">Image Mask</a> 
Clip images into 80+ ready-made artistic shapes (ink, blobs, badges, etc.) for instant Webflow-style image frames.
</li>
<li>
<a href="https://themes.network/elematic/image-scrolling/" rel="nofollow ugc">Image Scrolling</a> 
Create smooth horizontal or vertical image scrolling effects for product shots, long screenshots, or parallax-style image reveals.
</li>
<li>
<a href="https://themes.network/elematic/image-slide/" rel="nofollow ugc">Image Slide</a> (Webflow + Framer style) 
Create smooth looping image strips that slide left, right, up, or down for modern Webflow/Framer-style hero and gallery sections.
</li>
<li>
<a href="https://themes.network/elematic/info-link/" rel="nofollow ugc">Info Link</a> 
Create an interactive tab-style content switcher with icons where text changes dynamically on click for cleaner layouts and better UX.
</li>
<li>
<a href="https://themes.network/elematic/logo/" rel="nofollow ugc">Logo</a> 
Dynamic site logo widget with responsive images and title/tagline support.
</li>
<li>
<a href="https://themes.network/elematic/lottie/" rel="nofollow ugc">Lottie</a> 
Add lightweight JSON animations with full playback controls, autoplay, loop, speed adjustment, and scroll-based animation support.
</li>
<li>
<a href="https://themes.network/elematic/marquee/" rel="nofollow ugc">Marquee</a> (Webflow + Framer style) 
Create smooth, looping marquee rows for text or logos with controllable speed, direction, and hover pause, inspired by Webflow and Framer motion rails.
</li>
<li>
<a href="https://themes.network/elematic/menu/" rel="nofollow ugc">Menu</a> 
Advanced Elementor navigation menu for headers and layouts.
</li>
<li>
<a href="https://themes.network/elematic/page-title/" rel="nofollow ugc">Page Title</a> 
Dynamic page, archive, author, and WooCommerce titles.
</li>
<li>
<a href="https://themes.network/elematic/post-alter/" rel="nofollow ugc">Post Alter</a>. Display blog posts in an alternating left-right layout with featured images, meta info, excerpt. Perfect for storytelling-style blog layouts.
</li>
<li>
<a href="https://themes.network/elematic/post-grid/" rel="nofollow ugc">Post Grid</a>. Display posts in a customizable grid with category filters, numbered pagination and AJAX “Load More” button without page reload.
</li>
<li>
<a href="https://themes.network/elematic/post-tab/" rel="nofollow ugc">Post Tab</a> 
Display posts in a tabbed layout organized by any taxonomy, with left/top/right tab positions, click or hover trigger, and a responsive multi-column grid — ideal for browsing blog content by category on a single page.
</li>
<li>
<a href="https://themes.network/elematic/post-tiled/" rel="nofollow ugc">Post Tiled</a> 
Modern tiled post layouts with 13 styles layout.
</li>
<li>
<a href="https://themes.network/elematic/progress-bar/" rel="nofollow ugc">Progress Bar</a> 
Show elegant vertical or horizontal progress indicators for skills, stats, or milestones with full color and animation controls.
</li>
<li>
<a href="https://themes.network/elematic/service-list/" rel="nofollow ugc">Service List</a> (Webflow + Framer style) 
Display modern, animated service rows with icons, descriptions, title, subtle and hover image inspired by Webflow and Framer layouts.
</li>
<li>
<a href="https://themes.network/elematic/table/" rel="nofollow ugc">Table</a> 
Create responsive, styled data tables with headings, rows, and typography controls for pricing, feature comparison, or structured content layouts.
</li>
<li>
<a href="https://themes.network/elematic/team/" rel="nofollow ugc">Team</a> 
Team member profiles in 4 styles with social links and hover effects.
</li>
<li>
<a href="https://themes.network/elematic/timeline/" rel="nofollow ugc">Timeline</a> 
Visual timeline with custom or dynamic posts, alternating layouts, dates, images, and smooth milestone animations.
</li>
</ul>
<h3>Global Module</h3>
<ul>
<li>Wrapper Link (Module) 
Add a clickable link to entire widgets, columns, or containers, enabling full-area linking without custom code.</li>
</ul>
<h3>Features</h3>
<ul>
<li>Elementor Theme Builder (Header & Footer)</li>
<li>Works with Elementor Free and Pro</li>
<li>Loads assets only when needed</li>
<li>Translation ready (.pot included)</li>
<li>Compatible with caching and optimization plugins</li>
<li>Optimized for Core Web Vitals and Lighthouse scores</li>
</ul>
<h3>Support</h3>
For support, please visit the <a href="https://wordpress.org/support/plugin/elematic-addons-for-elementor/" rel="ugc">plugin support forum</a>.
<h3>Credits</h3>
Developed by <a href="https://theme-x.org/" rel="nofollow ugc">theme-x</a>

Elematic — Elementor Addons, Header Footer Builder & Animations

Modern Elementor addons with Webflow-style animations, advanced widgets, and a powerful Elementor Theme Builder to create custom headers and footers.

Aura Header Footer for Elementor vs Elematic — Elementor Addons, Header Footer Builder & Animations