GeneratePress with Elementor: A Featherweight Frame for a Heavyweight Builder

Why anyone puts a 10kb theme under a page builder

GeneratePress is built on restraint: SVG icons, cached Customizer CSS, no jQuery in its front-end scripts and, by the vendor's own claim, less than 10kb gzipped on a fresh install. Elementor is built on freedom: drag anything anywhere, with the stylesheets, scripts and container markup that freedom requires. Putting one on the other looks like buying a bicycle to tow a trailer.

There are honest reasons to do it. Agencies like GP Premium's license, $59 a year for up to 500 sites as of October 2026, which makes it a cheap, predictable frame across dozens of client builds. Some teams know Elementor and refuse to learn anything else. And a quiet theme is easier to reason about when something breaks: if GeneratePress barely draws anything, it rarely draws the broken thing. What you should not expect is GeneratePress speed. On an Elementor page the theme is a small share of the bytes.

The wordpress.org description says GeneratePress is completely compatible with all major page builders, naming Beaver Builder and Elementor. The vendor's current docs at learn.generatepress.com mention page builders in exactly one useful place, the Content Container setting below, and say nothing else specific about Elementor. Most of the practical advice lives in GeneratePress's own support forum, and it still holds.

The Layout meta box, set for an Elementor page

Every page and post gets a Layout meta box with four tabs: Sidebar Layout, Footer Widgets, Content Container and Disable Elements, the last one needing GP Premium. In the block editor it sits in the meta box area below the content. If it is missing, open the editor's three-dot menu, then Preferences > General, and switch Layout on under Advanced. Set these before opening Elementor.

1. 1

   Sidebar Layout: no sidebar

   Elementor pages almost never want the theme sidebar. Choose the no-sidebar option so the content area gets the full container.

2. 2

   Content Container: Full Width

   The docs describe Full Width as spanning the screen with no padding, for full-width sections built with GenerateBlocks or a page builder. Contained keeps the width but drops the padding. GeneratePress 3.0 renamed this from Page Builder Container, so older tutorials use the old name.

3. 3

   Leave Elementor's Page Layout on Default

   GeneratePress staff have long advised against the Elementor Full Width template here: keep Elementor on Default and let the Content Container do the widening. Use Elementor Canvas only for true landing pages without a header.

4. 4

   Disable Elements: Content Title

   With GP Premium, tick Content Title so the theme does not print a second H1 above an Elementor hero. Header, Mobile Header, navigation, Featured Image and Footer are tickable too.

5. 5

   Footer Widgets: match the site

   Choose how many footer widget columns show, or none, if the page should end on an Elementor call to action.

Padding that refuses to appear is usually this setting doing its job. The docs say both Full Width and Contained remove content padding on purpose. If an Elementor page suddenly sits flush against the screen edge, check the Content Container tab before rewriting any CSS.

Layout Elements: decide once for every Elementor page

Setting four tabs on every new page is how mistakes happen. GP Premium's Elements module includes a Layout Element, which applies the same Layout meta box settings to every page its display rules match. Create one under Appearance > Elements > Add New, choose Layout, set the Sidebar, Footer, Disable Elements and Content tabs, then target the pages Elementor builds. The Content tab of a Layout Element is also the only place to override the site's Container Width for a group of pages.

Display rules have a Location, an Exclude list and a Users filter. Elements with no Location show nowhere. One long-standing bug deserves a warning: when a page named in an Element's Exclude rule is deleted or unpublished, the rule goes blank and the Element is excluded from every page, without warning. On a site where a Layout Element widens every Elementor page, that turns into a site-wide layout collapse the day someone deletes an old page. After any page cleanup, open your Elements and check the rules. GeneratePress Elements not displaying covers the repair.

768 and 767: two breakpoint systems that almost agree

Here is a rare piece of luck. GeneratePress's docs list its device widths as mobile up to 768 pixels, tablet from 769 to 1,024 and desktop from 1,025 up. Elementor's defaults, set under Site Settings > Layout > Breakpoints, are 767 for mobile and 1,024 for tablet. The tablet line matches exactly. The mobile line is one pixel apart, so at precisely 768 pixels the theme header is in mobile mode while Elementor's content is still in tablet mode.

On most sites that single pixel never matters. It matters when an Elementor section hides an element on mobile and the theme's mobile header expects it, or when a QA tester's device happens to sit at 768. If it bothers you, set Elementor's mobile breakpoint to 768 so the two switch together. Moving GeneratePress's menu switch instead means GP Premium's Menu Plus slider or the generate_mobile_menu_media_query filter.

Compare that with themes whose menus switch at 921 or 1,000 pixels, where a whole band of tablet widths shows one tool's desktop layout and the other's tablet layout. For menu trouble on phones, GeneratePress mobile menu not working lists the usual causes.

Who draws the header: four options, one recommendation

For most GeneratePress and Elementor sites we keep the Customizer header and let Elementor stick to page content. It costs nothing, ships no builder markup on every page and keeps the mobile menu in the theme's hands. Note what the Block Elements doc says about outside blocks: GenerateBlocks is recommended, core blocks work, and blocks from other plugins may not be styled correctly. If a custom header disappears on certain templates, GeneratePress header not showing walks through display rules and Disable Elements in order.

Colors and fonts across the fence

GeneratePress's Global Colors live under Appearance > Customize > Colors. New sites start with seven named swatches (Contrast, Contrast 2 and 3, Base, Base 2 and 3, and Accent), and each becomes a CSS variable such as var(--accent). The docs say those variables appear in the block editor's color pickers. They say nothing about Elementor's pickers, so do not count on a sync.

The practical setup is to keep both lists identical by hand. Enter the brand palette in GeneratePress, enter the same values as Elementor Global Colors in Site Settings, and stop there. GeneratePress forum staff have long recommended ticking Disable Default Colors and Disable Default Fonts in Elementor, which in current Elementor sits on the General tab of Elementor > Editor > Settings. That lets Elementor widgets inherit the theme's typography instead of Elementor's built-in defaults.

The speed bill when Elementor moves in

GeneratePress's own levers still matter, they just move smaller numbers. 'Cache dynamic CSS' is on by default. 'Dynamic CSS Print Method' prints inline or, with GP Premium, writes an external file; vendor staff call the file option arguably better but not by a lot when an optimization plugin is in use. Neither setting touches Elementor's CSS, which follows Elementor's own CSS Print Method, External File by default.

The bigger savings sit on the Elementor side: containers instead of old sections and columns, fewer add-on packs, Element Caching for complex widgets and Optimized Image Loading for the hero. The GeneratePress speed guide covers the theme settings in order, and Elementor slow website covers the builder. Measure a real service page, not the home page alone.

On an Elementor page, GeneratePress is the lightest thing in the room, which is why speeding up the theme rarely helps.

GeneratePress is heading toward blocks, and Elementor is not on that road

Direction matters for a site you plan to keep for years. GeneratePress's August 7, 2026 blog post describes GP Premium 3.0 bringing a Template Engine that replaces Elements for fully block-built sites, and the GenerateBlocks Pro 2.8 Design Systems update was still a release candidate on September 22. GP Premium 3.0 had not shipped when we checked. None of that breaks an Elementor site today. It does mean the vendor's new tools assume blocks, and an Elementor site will use less and less of what it pays for.

That leaves three sensible paths. Stay as you are and keep the stack lean. Move page content into GenerateBlocks, the theme's native partner, as described in GeneratePress with Gutenberg. Or leave WordPress when the site needs things neither tool does well.

For the third column, GeneratePress vs Next.js gives the theme every benefit of the doubt, and page builders vs Next.js explains what Elementor's markup costs. A move means pulling content out of Elementor's JSON, described in Elementor to Next.js, with the theme side in GeneratePress to Next.js. When the editor itself refuses to load, start with Elementor theme conflicts and the GeneratePress repair hub. Our Elementor developers handle either route, and the full roster of reviews is in the WordPress themes section.