You customise the Reign theme in two places. Reign’s own settings and the WordPress Customizer control the header, footer, colours, typography and layout for the whole site. Elementor is the page-builder option for the pages themselves, such as landing pages, sales pages and a custom homepage. Reign detects Elementor automatically, so you install the plugin and start building. This guide shows which job belongs where and how to set each one up.
Which tool does which job
Mixing the two up is the most common reason a Reign and Elementor site feels messy. A quick rule helps.
| You want to change | Use |
|---|---|
| Header style, icons and menu behaviour | Reign Customizer, Header panels |
| Footer widgets, copyright line and spacing | Reign Customizer and Appearance > Widgets |
| Colours, fonts and dark mode | Reign Customizer |
| Site width, sidebars and page layouts | Reign Customizer, Global Layout and Content Layouts |
| A landing page, sales page or custom homepage | Elementor |
| Member profiles, directories and activity streams | The community plugin and the theme, not Elementor |
The theme owns the frame of the site. Elementor owns the content inside a page. When you keep that line clear, updates to either side are less likely to break the other.
How Reign works with Elementor
The Reign docs describe the compatibility Reign adds when Elementor is active:
- Canvas template. On a page that uses Elementor’s blank Canvas template, Reign removes its own header, footer and page title so Elementor’s layout fills the page edge to edge.
- Full Width template. Reign recognises this one separately, for pages where you want Elementor’s own header and footer handling instead of Reign’s.
- Hide title. If you turn on Hide Title in Elementor’s page settings, Reign respects it and does not show its own page heading underneath.
- Container width. Reign reads Elementor’s container width and spacing settings and keeps its own CSS in step, so boxed sections line up with what you set in Elementor.
- Product galleries. When WooCommerce is also active, Reign adds WordPress’s zoom, lightbox and slider support so Elementor’s product widgets get the same gallery behaviour as the default WooCommerce templates.
- Preview mode. A page opened in the Elementor editor gets its own body class, which a child theme or custom CSS can target.
Reign’s compatibility layer also recognises Beaver Builder, Divi, WPBakery and Thrive Architect. This guide covers Elementor because it is the one most Reign sites run. Full detail is on the page builders documentation page.
Step 1: Install Elementor
- In your WordPress dashboard, go to Plugins > Add New.
- Search for Elementor, then select Install Now and Activate.
- Go to Reign Settings > Integrations. Elementor is listed there, with a note on whether the site currently detects it.
You can start with the free Elementor plugin. Elementor Pro adds more features, but you do not need it for Reign to work with it. You can install Elementor on its own without any other setup on the Reign side.
Step 2: Set the header and footer with Reign
Reign supplies the header and footer, so set them up in the Customizer before you build pages. This keeps one header and one footer across the whole site, including the community pages Elementor cannot control.
Header
Go to Appearance > Customize > Header > Layout. Reign offers four header layouts, picked with a visual chooser, and a sortable list of header icons you can drag into order. Which icons are available depends on what is active. Search and the user menu are always there. The cart appears once WooCommerce or Easy Digital Downloads is active, and messages, notifications and friend requests appear once a community plugin is active. The header layout page explains each control.
For the menu itself, go to Appearance > Menus and assign your menu to Reign’s locations. Reign has separate locations for logged-in and logged-out visitors, for the mobile menu and for the profile dropdown. The set up your menus guide lists them.
Footer
Footer links and content go in a widget area. Go to Appearance > Widgets, open the Footer Widget Area and add blocks such as Paragraph, Navigation or Search. Then go to Appearance > Customize > Footer > Copyright to edit the copyright line, which accepts HTML. Reign has no footer menu location, so use a widget for footer links. See change the footer.
If you plan to design the header or footer inside Elementor instead, Reign’s docs do not cover that path. Check it carefully on a staging copy first, and confirm you do not end up with two headers or two footers on the same page.
Step 3: Set your colours and fonts once
Set your brand colours in the Customizer before building pages. In Reign, the colour palette lives under Color Options > Color Palette, and typography has its own panel. Reign also has dark mode. Setting these first means the pages you build in Elementor start from the same colours and fonts as the rest of the site.
When you open the colour picker inside Elementor, check that your Reign palette appears there. If it does not, enter the same values by hand in Elementor’s global colours so the two stay in step. Whenever you change the palette later, check your Elementor pages again.
Step 4: Build a page with Elementor
- Go to Pages > Add New, give the page a title and select Edit with Elementor.
- Open the page settings in Elementor and choose a page layout. For a landing page that fills the screen, pick Canvas. If you want Reign’s header and footer around your content, use the Reign page layout with no sidebar instead, or Elementor’s Full Width template.
- Add sections and widgets, then set the content width. Reign reads the container width from Elementor, so boxed sections line up with your settings.
- Check the page on a phone-sized preview before publishing. Desktop-first layouts are easy to produce by accident in any page builder.
- Publish, then set the page as your homepage under Settings > Reading if that is the goal.
Reign also offers its own width and title banner controls per page. On the page edit screen, the Reign Custom Settings box has a Layout tab with a Content Layout choice, including Full Width (No Subheader) for a page with no sidebar and no title banner. The build your homepage guide walks through that, along with Reign’s block patterns for sites that do not use Elementor.
Which template to choose
- Canvas when the page should have no Reign header, footer or title, such as a standalone sales page.
- Full Width when you want Elementor’s own header and footer handling.
- Reign’s full-width, no-sidebar layout when you want Reign’s header and footer around a page Elementor controls.
Step 5: Add Reign’s Elementor widgets
Reign includes Wbcom Essential, a set of building pieces for pages. It adds blocks for the block editor and widgets for Elementor. Install it from Reign Settings > Extend and select Install free. No licence is needed.
Once it is connected, open the Elementor panel and look for the Wbcom Essential category. The docs list widgets such as Slider, Accordion, Tabs, Timeline, Countdown, Pricing Table, Testimonial and Testimonial Carousel, Team Carousel and Portfolio Grid, plus post sliders and carousels. WooCommerce widgets appear for product displays, and BuddyPress widgets such as member and group grids appear in Elementor only while BuddyPress is active. The Wbcom Essential page has the full list.
What to keep out of Elementor
Community pages such as profiles, member directories and activity streams are rendered by the community plugin, not by a page template, so Elementor does not control them. Build your marketing pages in Elementor and let the theme handle community templates. If you run BuddyNext, spaces, the activity feed and member pages stay on the theme’s templates.
That split also helps speed. Elementor adds its own markup, CSS and scripts, so a page full of widgets is heavier than a plain template. Use Elementor where a page needs design freedom, and measure your real pages with a speed test rather than assuming. If you are choosing between builders, the page builders guide and Gutenberg blocks vs Elementor compare the options.
A sensible build order
Working in the same order each time saves rework. Start with the frame, then the content, then the checks.
- Install Reign and your community or learning plugins, and set the colours and fonts in the Customizer.
- Choose the header layout, assign your menus and fill the footer widget area.
- Install Elementor and Wbcom Essential.
- Build one landing page first and look at it next to a normal Reign page. If the spacing, fonts or colours differ, fix the Customizer settings, not the single page.
- Build the rest of your marketing pages from that first one, saving sections you reuse as Elementor templates.
- Test the pages on a phone, a tablet and a desktop, logged in and logged out, then clear your caches.
If you plan to hand the site to a client or a teammate, write down which pages use which template. A short note saves a lot of guessing six months later, when someone wonders why one page has no header.
Common problems
- A title banner shows above my Elementor page. Turn on Hide Title in Elementor’s page settings, or use the Canvas template. Reign also has a global Hide Sub Header setting under Appearance > Customize > Sub Header.
- The page looks narrower than my Elementor settings. Check the content width in Elementor and the site width under Appearance > Customize > General > Global Layout, and clear any cache plugin.
- The homepage still shows latest posts. Under Settings > Reading, select A static page and pick your page as Homepage.
- Styles do not seem to apply. Clear your site cache and browser cache, then check the styles not applying troubleshooting page.
- Two headers or footers appear. One of them comes from Elementor and one from Reign. Pick a single source for each.
Frequently asked questions
Does Reign work with Elementor?
Yes. Reign detects Elementor automatically and adjusts around it, including the Canvas and Full Width templates, Hide Title, and container width. You install Elementor and start building with no extra setup on the Reign side.
Do I need Elementor Pro to customise Reign?
No. Reign’s own Customizer handles the header, footer, colours and layout without any page builder. The free Elementor plugin is enough for building landing pages and custom homepages, and Pro is optional.
Can I build community pages like profiles in Elementor?
No, not the dynamic ones. Profiles, directories and activity streams come from the community plugin and the theme’s templates. Use Elementor for marketing pages around them.
Where do I change the Reign header?
Go to Appearance > Customize > Header > Layout. You can pick one of four layouts, reorder the header icons and set how the main menu reacts on hover. Menus are assigned under Appearance > Menus.
Does Reign include Elementor widgets?
Yes, through Wbcom Essential, which is part of Reign. Install it from Reign Settings > Extend, then find the Wbcom Essential category in the Elementor panel.
Will Elementor slow my Reign site down?
Elementor adds its own scripts and styles, so pages built with many widgets are heavier than template pages. Use it on the pages that need it and test your own site with a speed tool. Community pages stay on the theme’s templates.
See it on a real site
Browse the Reign demos to see how pages sit inside the theme’s header and footer. If you are starting a full community build, the community build guide takes you from install to a working site.