Skip to main content

Create an Elementor Header and Footer Without Elementor Pro with AI

Build a site-wide header and footer in free Elementor with Ultimate Addons, checked as drafts before they go live.

Difficulty Beginner
Time ~15 min

Prerequisites

A site connected to WPVibe running Elementor (free is enough) and Ultimate Addons for Elementor 2.9.5 or newer (tested on 2.9.5, the free version) on WordPress 6.9 or newer with a classic theme, with UAE's AI tools on: in wp-admin, UAE > Settings > AI Tools, switch on Enable Abilities and Enable Edit Abilities. A menu for the header, under Appearance > Menus.

The prompt
My WordPress site uses Elementor and the free Ultimate Addons for Elementor plugin (UAE). Build a site-wide header and footer with it.

Header: [my logo or my site name] on the left, my [menu name] menu in the middle, [a search icon, or a button that says X and links to Y] on the right, background [color].
Footer: [copyright line, for example Copyright [hfe_current_year] [hfe_site_title]] and [my footer menu or nothing else], background [color].

1. Run discover_abilities with category hfe-templates. If no uae/ abilities come back, stop and tell me to turn them on in wp-admin: UAE > Settings > AI Tools, switch on Enable Abilities and Enable Edit Abilities. If an ability a later step needs is missing (run discover_abilities without a category to check), stop and tell me to switch on Enable Edit Abilities and that ability's own switch on the same screen.
2. Run uae/templates-list with status publish and again with status draft, and run uae/active-get. If I already have a published or draft UAE header or footer, tell me what is there and stop: this recipe builds new ones only, and when two published headers match a page UAE shows the newest. Point me to the recipe for changing a UAE header instead.
3. Run uae/design-system-get-tokens and use my site's colors and fonts unless I gave others. Find the menu's slug with GET /wp/v2/menus; if the menu is not there, stop and ask me. For a logo, check GET /wp/v2/settings: if site_logo is empty, use the Site Title widget (hfe-site-title) instead of Site Logo, which would show a placeholder image.
4. Create the header and the footer with uae/templates-create, status draft. For every widget you use, run uae/builder-get-schema (type widget, tab style for colors, tab content for text and links) and use only the setting keys it lists. UAE's own build examples name some keys that do nothing: the search icon color is toggle_color, the site title color is heading_color, the copyright text color is title_color. A key the widget doesn't have saves without an error and changes nothing. The Search widget's style schema is longer than one result can hold and gets cut off; use toggle_color for its icon color as given. Build each one with uae/builder-build (each section's columns add up to 100).
5. Run uae/shortcode-render on each and describe what it contains: every widget, its text, link and colors. Wait for my yes. Drafts do not show on the site.
6. On my yes, first fetch [a page on my site] with get_page_html and note the classes on its  tag and the  and  tags in its . Then for each template: uae/display-rules-update with include_locations {"rule": ["basic-global"], "specific": []}, then uae/templates-update with status publish, then uae/builder-regenerate-css.
7. Fetch the same page again with get_page_html and check two things. (a) The new header and footer are on it and my theme's own header and footer are gone; if not, run uae/theme-get-info and tell me whether my theme is one UAE supports natively. (b) Nothing you noted in step 6 is missing: UAE's default method replaces my theme's header.php, so anything the theme writes there directly is lost and the page can lose its font or background. If either fails, tell me what is missing or wrong. If that check fails, clear any page cache on my site and check again; if it still fails, set everything you published in this chat back to draft, undo any rule you changed, and tell me what you saw.
8. Give me each template's Elementor edit link, and tell me that setting a template back to draft takes it off the site.
Already connected?

Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:

Run the “Create an Elementor Header and Footer Without Elementor Pro with AI” recipe from the WPVibe cookbook on my connected site.

Free Elementor builds pages, but the header and footer around them belong to the Theme Builder, which is part of Elementor Pro. The free Ultimate Addons for Elementor plugin (it started out as Elementor Header & Footer Builder) covers that gap, and it still takes a template, the right widgets, a menu, display rules and a theme that cooperates.

The AI checks what your site already has, reads your Elementor colors and fonts, and builds the header and footer as drafts with UAE’s own abilities. It describes both for your yes before anything changes on your live site, then applies them site-wide and checks a real page to confirm they replaced your theme’s own header and footer.

Turn on UAE’s AI tools first (UAE > Settings > AI Tools, Enable Abilities and Enable Edit Abilities), and have the menu you want in the header ready under Appearance > Menus. Once they are published, every page shows them, so look at a couple of pages when it finishes. On Elementor Pro? This recipe uses the Theme Builder instead.

Outcome

A published header and footer that show on every page in place of your theme's, built from your colors and menu.