Astra and Elementor: Who Owns the Header, the Colors and the Breakpoints

Three companies, one page: what actually runs on an Astra and Elementor site

Most people describe their site as "Astra with Elementor" and stop there. Count the plugins and the picture gets busier. As of October 2026 Elementor itself is at version 4.3.4 with more than 10,000,000 active installs, updated on October 5. Brainstorm Force, which makes Astra, also ships a free Elementor add-on called Ultimate Addons for Elementor, listed on wordpress.org as a widgets, templates, WooCommerce and Header Footer Builder plugin with 2,000,000+ active installs. Add Astra Pro and Elementor Pro and a modest brochure site is running five products from two vendors, each with its own update button.

That matters because the first question on any broken page is which product drew the broken part. Astra draws the frame: header, footer, page title, container width and the default typography. Elementor draws the content area, and with Pro it can also draw the header, footer and templates. Ultimate Addons can draw a header too. Astra registers Elementor Pro's theme locations, so a Theme Builder header whose display conditions match will quietly replace the header you are editing in the Customizer. Owners then spend an hour changing settings that no longer control anything.

• Astra (free): the Customizer, the header and footer builder, global colors and typography, per-page Astra Settings.
• Astra Pro: the Site Builder for hooks, headers, footers and 404 layouts, plus a mega menu that can pull Elementor templates into dropdowns.
• Elementor (free): page layouts, Site Settings for global colors, fonts and breakpoints, and the Page Layout choice on each page.
• Elementor Pro: the Theme Builder for headers, footers, single and archive templates, each with display conditions.
• Ultimate Addons for Elementor: extra widgets and a free header and footer builder from Astra's own vendor.

The Astra switches to flip before Elementor draws a single section

Astra puts its page-level controls inside Elementor itself. Open a page in the Elementor editor and click the Astra icon at the top left of the panel, and the Astra meta settings appear inside Page Settings. Brainstorm Force's docs recommend the Full Width / Stretched container for pages built in Elementor, because it hands the whole width to Elementor and stops Astra's container padding from squeezing every section.

1. 1

   Pick the container first

   Astra already applies a full-width layout with no title or sidebar when you open a brand-new, empty page in Elementor (posts are skipped). Older pages keep whatever they had, so check them and set Full Width / Stretched where Elementor lays out edge to edge.

2. 2

   Hide what Elementor will replace

   Use Astra's Disable Elements options, or the eye icon next to the title, to turn off the theme title on pages whose hero already carries an H1. One H1 per page, not two.

3. 3

   Choose Elementor's Page Layout on purpose

   Elementor offers Default, Elementor Canvas, Elementor Full Width and Theme. Canvas drops Astra's header and footer entirely, which suits a landing page and nothing else.

4. 4

   Decide who sets fonts and colors

   The General tab of Elementor > Editor > Settings includes Disable Default Colors and Disable Default Fonts. Ticking both lets Astra's Customizer choices act as the defaults instead of Elementor's built-in ones.

5. 5

   Write the decisions down

   A one-page note of which tool owns which job saves the next developer an afternoon of guessing.

The trap here is mixing methods. A page set to Elementor Full Width inside a Full Width / Stretched Astra container works. The same page set to Elementor Canvas loses the header, and owners then rebuild a header inside the page, which is how one site ends up with forty slightly different headers. If a header vanished after a layout change, check the Page Layout dropdown before anything else, then WordPress header not showing.

Three candidates for the header job, and why only one gets it

An Astra and Elementor site can build its header three ways, and all three come from vendors you may already pay. Astra's documentation is relaxed about the choice: build the header in Astra and the content in Elementor, or build everything in Elementor. Its docs also say Astra is compatible with Elementor Pro's Theme Builder and with Elementor's version 4 Atomic Editor. The problem is never the choice. It is making two choices at once.

Our default is Astra's own builder. It is free, it carries no builder wrappers into every page view, and the mobile menu is part of the theme rather than a widget someone dragged in. Choose the Theme Builder only when the header genuinely needs Elementor, such as different headers by display condition. To retire a Theme Builder header, Astra's docs say to remove its display conditions under Templates > Theme Builder. If Customizer header edits stop appearing, the Astra header builder repair guide walks through the checks.

One palette, two color pickers: keeping Astra's colors in charge

Astra's Global Color Palette lives under Appearance > Customize > Global > Colors, and Astra's docs say the same colors appear in Elementor's color settings. Since Astra 4.14.0 you can add up to nine custom colors, and those show up in Elementor's global colors as well. That is the right direction for the sync: the theme holds the brand, the builder borrows it. Astra's docs also describe a filter for removing its colors from Elementor, for sites that would rather keep the two apart.

Trouble starts when someone also fills in Elementor's own Global Colors in Site Settings with slightly different values. Now there are two primary blues. Designers pick whichever swatch is nearer the mouse, and a year later the site has both. The fix is boring and permanent: keep the brand in Astra's palette, leave Elementor's system colors matching it or unused, and never type a hex code into a widget when a palette swatch exists.

921 against 1024: the band where Astra and Elementor disagree about tablets

Here is the conflict almost nobody notices until a client holds an iPad sideways. Astra switches to its toggle menu at 921 pixels and treats 544 pixels as mobile. Elementor, by default, uses 1024 pixels for tablet and 767 for mobile, set under Site Settings > Layout > Breakpoints. Between 922 and 1024 pixels, Astra still shows the desktop header while Elementor already shows its tablet layout. Between 545 and 767 pixels, the reverse happens with the mobile styles.

Neither number is wrong. They just belong to different products. You have two clean options. Move Elementor's tablet breakpoint to 921 in Site Settings so both tools change shape together, or move Astra's breakpoint to match Elementor using the astra_tablet_breakpoint filter in a child theme, since Astra documents no Customizer slider for it. Elementor can also switch on optional extra breakpoints for wider phones, wider tablets, laptops and very large screens, which help only if someone designs for each one.

Whichever you choose, test on a real tablet in both orientations, not just browser emulation. A desktop menu with eight items that wraps at 980 pixels is the classic symptom. When the menu misbehaves on phones instead, Astra mobile menu not working lists the causes in order, and the cross-builder version is on Elementor mobile layout problems.

When the pair stops cooperating: the 4.13 errors and the Loop Grid leak

The 2026 support threads show exactly where Astra and Elementor rub. None of them is a reason to avoid the pairing. Each is a reason to update on a staging copy and click through a few Elementor pages before the live site gets the same treatment.

• The editor that will not open. Astra 4.13.7 with Elementor 4.2.1 threw a fatal error in class-astra-elementor.php, which broke the Elementor editor. Match versions on staging first and roll back the one that changed.
• Cards that shrink. Astra adds its ast-article-single class to Elementor Loop Grid items, which changes their width and spacing on the front end. A child theme CSS rule that resets the class inside the loop container is the usual fix.
• A Customizer that never finishes. One user measured about 127 seconds for customize.php under WordPress 7.0 with Astra 4.13.x, WooCommerce and Elementor Pro active.
• Styles that refuse to change. Astra's inline CSS, Elementor's generated files and a page cache can all hold old styles. Clear them in that order, using the Clear Files & Data button under Elementor > Editor > Tools for the builder's share.

For a clean diagnosis, Elementor's Safe Mode, under Elementor > Editor > Tools, loads the editor without the theme and other plugins. If the editor works in Safe Mode, the theme or a plugin is the culprit. The full procedure is in Elementor theme conflicts, and Astra-specific breakage after an update is on Astra layout broken after update. Everything else Astra-shaped sits in the Astra repair hub.

Where the weight comes from when Astra hosts Elementor

Astra is not the heavy part of this pairing. The vendor says the theme needs less than 50 KB, and its own front-end scripts avoid jQuery apart from one WooCommerce script. Elementor brings its own stylesheets, its own scripts, container markup for every section and whatever widget packs ride along. Ultimate Addons adds more widgets, each with assets of its own.

Two delivery settings decide a lot. Astra prints its Customizer CSS inline in each page by default. Elementor's CSS Print Method chooses between an external stylesheet, which Elementor recommends, and CSS embedded in each page. Elementor can also load Google Fonts locally, storing them in /wp-content/uploads/elementor/fonts/, while Astra has its own Load Google Fonts Locally switch under Astra > Settings > Performance. Turn on one font system, not both, and check the network panel for duplicate font files. Note that the vendors disagree on CSS: Elementor recommends an external file, while Astra's own Elementor speed doc suggests Internal Embedding plus Astra's File Generation. Test both on your own pages rather than trusting either. Element Caching, added in Elementor 3.22, stores rendered widget output so complex widgets do not rebuild on every request.

The full sequence for tuning is in the Astra speed guide, and Elementor slow website covers the builder side. If you would rather hand it off, our theme speed optimization work starts with a measured baseline, not a plugin.

When Astra plus Elementor becomes the reason to rebuild

For a brochure site that a marketing person edits weekly, Astra and Elementor remain a sensible pair, and our Elementor developers keep plenty of them healthy. The calculation changes when the site earns its money through speed, many similar pages or custom features, and the stack has become five products that must agree on every update.

The wider argument is in page builders vs Next.js, and Astra vs Next.js compares the whole Astra stack row by row. Elementor content is stored as JSON in the page's metadata, so leaving means extracting the words from it; Elementor to Next.js and Astra to Next.js explain how, with every URL kept or redirected. Afterward, editors work in Athena CMS, where Argus watches for broken forms and slow pages.