Kadence with Elementor: Making a Block-First Theme Host a Page Builder

The pairing Kadence never wrote a manual for

Kadence's documentation now lives on docs.nexcess.com, in a section of more than 300 articles. We read the index looking for Elementor and found no article about it. The theme itself tells a different story. Its 1.5.2 package ships stylesheets named elementor.min.css, elementor-cart.min.css and elementor-checkout.min.css, and its code includes an Elementor component and an Elementor Pro component that do real work, described below. Kadence supports Elementor. It just never wrote the manual.

That silence is a statement of priorities. Kadence was built for the block editor, with Kadence Blocks (600,000+ installs, version 3.7.12.1 on October 6, 2026) as its content tool. Elementor arrives anyway, for ordinary reasons. A designer on the team knows Elementor and nothing else. The site was built on Elementor before someone switched themes for speed. Or the hosting account came with Kadence and the agency brought its own builder.

None of those is wrong. Each means you are running a theme slightly against its grain, and the settings below are about smoothing that grain so the two products stop surprising each other. If you are still choosing a theme for an Elementor build, read Kadence vs Bricks and Astra vs Kadence first.

What Kadence sets for you on a new Elementor page, and what it leaves alone

Reading the 1.5.2 theme code, Kadence watches for a page that is empty and opened in Elementor for the first time. On any post type except blog posts, it then hides the page title, sets the content style to unboxed, removes the content vertical spacing, hides the featured image and, if the layout was still on default, switches it to fullwidth. It does this once per page. A filter called kadence_theme_elementor_default turns the behavior off for developers who want control.

1. 1

   Audit the pages that existed before Elementor

   The automatic defaults apply only to empty pages. Pages converted from the block editor keep their old settings, which is why one Elementor page sits boxed and the next runs edge to edge.

2. 2

   Open the page's Settings panel

   The Page Settings icon at the top right of the editor holds Transparent Header, Page Title, Page Layout, Content Style, Content Vertical Spacing, Show Featured Image, and Disable Header and Disable Footer toggles.

3. 3

   Match the new-page defaults by hand

   Set Page Title to Disable, Page Layout to Fullwidth, Content Style to Unboxed and Content Vertical Spacing to Disable, the same answers Kadence gives a fresh Elementor page.

4. 4

   Keep an H1 on every page

   Kadence's own doc warns that hiding the title removes the H1 tag. Make sure the Elementor hero carries one.

5. 5

   Set site-wide fallbacks

   Under Appearance > Customize > Posts/Pages Layout > Page Layout, the defaults for pages are separate from those for posts, so the blog can keep a Normal or Narrow reading width.

Keep Elementor's own Page Layout dropdown on Default on these pages, so Kadence's header and footer still render around the Elementor content. Elementor Canvas removes both and suits only landing pages.

Kadence Blocks and Elementor on one site: pick one content tool

Many Kadence sites already run Kadence Blocks, the vendor's own block plugin, often installed on day one. Add Elementor and the site has two page-building systems, each with its own row layouts, buttons, tabs, accordions and forms. Editors then build one page in each, and a year later nobody knows which tool a given page uses until they open it.

The weight argument is weaker than you might think. Kadence says Kadence Blocks loads its CSS and JavaScript only for the blocks used on a specific page, so an Elementor page without Kadence blocks should not pay for them. The real cost is human: two sets of controls, two update streams, and two places where a page can break. One owner reported a Kadence Blocks update removing internal links from posts; on a site that barely uses the plugin, that is risk without reward.

• Elementor-first sites: keep Kadence Blocks only if blog posts use its blocks; otherwise deactivate it on staging, check the posts, then remove it.
• Mixed sites: write a rule, such as Elementor for marketing pages and blocks for articles, and stick to it.
• Block-first sites with one Elementor holdout: rebuild that page in blocks and retire Elementor; Kadence with Gutenberg shows the native path.

One header system, and a breakpoint that already lines up

Kadence's header is one of its best features: a visual builder in Customizer > Header with two separate headers, Desktop and Tablet/Mobile, and an off-canvas drawer for the mobile navigation. Theme Kit Pro adds Conditional Headers and an Ultimate Menu with mega menus. The theme code also registers Elementor Pro's header, footer and single locations, so an Elementor Pro Theme Builder header replaces Kadence's own markup where its display conditions apply. Choose one system on purpose, because the replacement happens silently.

Our default is Kadence's builder. It is free, it ships no Elementor container markup into every page view, and its mobile drawer is maintained by the theme vendor. Kadence's own guidance for custom block headers on classic sites is to place its Header block inside a Kadence Element, which tells you the vendor expects headers to be built from Kadence parts. Elementor Pro headers make sense when the team designs every layout in Elementor and needs its display conditions. If Customizer header edits stop showing up, look for a published Theme Builder header before anything else.

The breakpoints are a pleasant surprise. Kadence's CSS shows the desktop header from 1,025 pixels and the Tablet/Mobile header at 1,024 and below. Elementor's default tablet breakpoint is 1,024. So the header and the content change shape at the same width, which is not true of every theme. Elementor's 767-pixel mobile breakpoint has no Kadence header equivalent, so check phone layouts in both tools. When the drawer opens empty, Kadence header builder mobile issues lists the checks.

A palette that syncs both ways, and the six colors that stay behind

Kadence's Color Palette sits under Customizer > Colors & Fonts > Colors, in four groups: Accent, Contrast, Base and Notices. The docs describe it in Kadence Blocks and core blocks. The code goes further: Kadence adds a Theme Global Colors section to Elementor's Site Settings > Global Colors with nine entries, from Theme Accent through White or offwhite, and when an Elementor document is saved those values are written back to the Kadence palette.

That two-way link is convenient and slightly dangerous. A designer who nudges Theme Accent inside Elementor has just changed the brand color site-wide, header and buttons included. Decide where palette edits happen, ideally the Customizer, and tell the team. Note also that the palette now holds fifteen colors; the Accent Complement and the Notices colors (success, info, alert, warning and rating) are not in Elementor's list. Ticking Disable Default Colors and Disable Default Fonts on the General tab of Elementor > Editor > Settings lets widgets inherit the theme's typography as well.

Which Performance toggles still matter under Elementor

Kadence's free Performance panel, at Customizer > General > Performance, is one of its selling points. On an Elementor site some of its switches stop mattering and one or two start mattering more. Here is how we set them.

Kadence's component CSS keeps the theme light, so the bytes on an Elementor page come mostly from Elementor: container markup, widget styles, and any add-on pack. Elementor's CSS Print Method (External File by default), Element Caching and Optimized Image Loading are the levers there. Work through the theme side with the Kadence speed guide, and if a release made things worse, Kadence slow after an update covers the rollback test.

Stores, support queues and who to call when it breaks

For WooCommerce, three systems can claim the product page: Kadence's free Customizer > WooCommerce layouts, Shop Kit on the Pro and Elite plans (galleries, swatches, quickview and a multi-step checkout), and Elementor Pro's product templates. Kadence ships stylesheets for Elementor's cart and checkout output, which helps, but layering Shop Kit features under an Elementor product template invites confusion about which setting controls what. Pick one owner per page type. Grids that collapse after updates are covered in Kadence WooCommerce layout broken.

Support deserves a word. Kadence's community forum was retired in favor of tickets through Liquid Web, and Elementor sends Pro users to its own ticket system. On a broken Kadence and Elementor page, each vendor can reasonably point at the other. Do the isolation yourself first: Elementor's Safe Mode, under Elementor > Editor > Tools, loads the editor without the theme, and the Clear Files & Data button on the same screen rebuilds Elementor's CSS. The full routine is in Elementor theme conflicts, and Kadence-specific repairs sit in the Kadence repair hub.

When Kadence plus Elementor is a sign to rebuild

A Kadence site that leans on Elementor pays for two design systems, two sets of global colors and two vendors' update schedules. For a team that loves Elementor, a builder-native theme may be the cleaner WordPress answer. For a team that is comfortable in blocks, dropping Elementor is the cheaper fix. Our Kadence developers and Elementor developers do both.

Look past WordPress when the problem is the job, not the tools: memberships that carry revenue, quote calculators, many location pages built by cloning Elementor layouts, or phone visitors who leave before a hero loads. Kadence vs Next.js and page builders vs Next.js set out the trade. A migration extracts Elementor content from its stored JSON, per Elementor to Next.js, and handles any Kadence Blocks content separately, per Kadence to Next.js. The result is edited in Athena CMS, with member areas and Stripe billing built in. The full theme field is in the WordPress themes section, with the Kadence review as the place to start.