OceanWP and Elementor: Custom Headers, Per-Page Switches and Who Styles the Shop

How the work splits between OceanWP, Ocean Extra and Elementor

An OceanWP and Elementor site runs at least three free pieces. As of October 2026 the theme is at version 4.2.7, updated on the day we checked. Its companion plugin, Ocean Extra, is at 2.6.2 with 500,000+ active installs, and it supplies the per-page settings box and the template library this guide leans on. Elementor is at 4.3.4 with more than 10,000,000 installs. Paid extensions from the OceanWP Pro Bundle and, often, Elementor Pro sit on top.

The sensible division is simple. OceanWP owns the frame: header type, footer, page title area, global typography and the WooCommerce styling it ships without a builder. Elementor owns what sits between header and footer. Ocean Extra connects the two by letting Elementor-built templates stand in for the theme's header and footer. Trouble usually starts when Elementor is asked to take over the frame as well, while OceanWP keeps drawing its own version underneath.

OceanWP will happily frame an Elementor page. It just needs to be told which parts of the frame to take down.

Flipping the OceanWP Settings switches on an Elementor page

Every page gets an OceanWP Settings panel from Ocean Extra. In current versions the docs place it in the block editor sidebar, opened from the O icon in the toolbar, and below the content in the Classic Editor. These are the settings that matter when Elementor is drawing the page, in the order we set them.

1. 1

   Content Layout: 100% Full Width

   Under General, OceanWP offers Default, Right Sidebar, Left Sidebar, Full Width, 100% Full Width and Both Sidebars. 100% Full Width runs content edge to edge with no sidebar, which lets Elementor containers control their own widths.

2. 2

   Padding: Disable

   The same tab can remove the theme's content padding on one page, so an Elementor hero sits flush against the header instead of floating below a gap.

3. 3

   Display Page Title: Disable

   On the Title tab, turn off OceanWP's title bar when the Elementor hero already carries the H1. Two H1s is a common and avoidable SEO mess.

4. 4

   Header and footer per page

   The Header tab has Display Header and a per-page Header Style. The Footer tab has Display Footer Widgets Area and Display Copyright Area. Each takes Default, Enable or Disable.

5. 5

   Save the pattern as a Layout decision

   Most Elementor pages on a site want the same four answers. Note them once so every new page gets the same treatment.

Elementor has its own Page Layout dropdown with Default, Elementor Canvas, Elementor Full Width and Theme. On OceanWP, keep pages on Default and let the OceanWP Settings box decide width and title. Choosing Elementor Canvas removes the theme header and footer, which is right for a landing page and wrong for a service page. If a header goes missing on one page only, check this panel before anything else, then read OceanWP header not showing.

A header built in Elementor, without an Elementor Pro license

This is OceanWP's best trick for Elementor users. Elementor's free version cannot replace a theme header; that is a Theme Builder job, and the Theme Builder is Pro. OceanWP gets around it with its own template system. You design the header as an ordinary Elementor template in OceanWP's library, then tell the Customizer to use it.

• Create the template under OceanWP > My Library (older versions called the location Theme Panel > My Library) and edit it with Elementor.
• Add the logo and menu. OceanWP's docs list three routes: the Logo and Navigation widgets from Ocean Elementor Widgets, the free Custom Header Logo, Custom Menu and Custom Header Nav widgets, or the [oceanwp_logo] and [oceanwp_nav] shortcodes.
• Assign it under Appearance > Customize > Header > General: choose Custom Header as the Header Type, then pick the template in Custom Header Settings, where an Add Container option also lives.
• Do the footer the same way. Under Customize > Footer Widgets, the Select Template field swaps the footer widgets for a library template. OceanWP's docs say to set Elementor templates meant for this to the Elementor Canvas format.
• Keep the phone version lean. OceanWP advises leaving only the logo and menu in the mobile version of a custom header, hiding the rest with Elementor's responsive visibility controls.

Sticky behavior is the one catch. The Ocean Sticky Header extension, part of the Pro Bundle, supports custom headers in two modes: Auto sticks the whole thing, while Manual sticks only elements carrying the owp-sticky class, which you add in Elementor under Advanced > CSS Classes. If the header jumps or covers content on scroll, that class is the first place to look. Header builders in general are compared in our OceanWP review.

Ocean Elementor Widgets, the Elementor Library and Elementor Pro: what you would pay for twice

OceanWP sells Elementor-specific extras, and Elementor sells Pro. They overlap less than the names suggest and more than buyers expect. OceanWP's own documentation is blunt that Ocean Elementor Widgets does not need Elementor Pro and is not a replacement for it, since Pro is a theme builder for archive templates, popups and the like.

The Library needs Ocean Pro Demos, and OceanWP's docs give Personal buyers limited access while Business and Agency plans get the full set. As of October 2026, Business costs $95 a year (listed at $105) and covers ten sites; the full plan list is on the OceanWP pricing page. Our rule: if you already own Elementor Pro, skip Ocean Elementor Widgets unless a specific widget is missing, and switch off unused widgets under OceanWP Panel > Elementor Widgets so their assets stay home.

Let the Customizer hold the typography, as OceanWP's docs suggest

OceanWP has a short help article titled "Use OceanWP Typography with Elementor", and its advice is to tick Disable Default Colors and Disable Default Fonts in Elementor's General settings. In current Elementor those checkboxes sit on the General tab of Elementor > Editor > Settings. With both ticked, Elementor widgets inherit the fonts and colors set in OceanWP's Customizer instead of applying Elementor's own defaults.

What we could not find is any OceanWP document describing a sync between its Customizer colors and Elementor's Global Colors in Site Settings. So treat the two as separate lists that you keep identical by hand. Enter the brand colors in the Customizer, enter the same values as Elementor Global Colors, and tell designers to pick swatches rather than typing hex codes. It is dull. It is also the difference between one brand blue and five.

Fonts deserve one more check. OceanWP's Typography panel can load Google Fonts locally, and Elementor has its own Load Google Fonts Locally setting, which has defaulted to off since Elementor 3.32.1. If both systems request the same family from different places, the browser downloads it twice. Pick one, then confirm in the network panel. Text in the wrong typeface is covered in OceanWP fonts not loading.

Shop pages: OceanWP's builder-free store or Elementor's templates, not both

OceanWP's strongest feature is WooCommerce styling that needs no builder: archive styles, an off-canvas filter, quick view, a multi-step checkout, a Floating Bar for add to cart and drag-and-drop ordering of product page elements. Elementor Pro can also design product and product archive pages through its Theme Builder. Both are capable. Running both is where shops break.

When an Elementor Pro product template is active, OceanWP's product page ordering and Floating Bar may not apply the way the Customizer preview suggests, because the template is drawing the page. Owners then adjust Customizer settings that no longer control anything. Decide once: either OceanWP styles the shop and Elementor stays out of product pages, or Elementor templates own them and the OceanWP shop options are left alone and documented as unused.

If grids lose their columns after an update, start at OceanWP WooCommerce layout broken. For checkout failures that are not about styling, WooCommerce checkout not working covers the payment side.

Known conflicts, and what the pairing costs in speed

• Menus that die after script combining. OceanWP staff acknowledged in August 2026 that the mobile menu fails with SiteGround Speed Optimizer's Combine JS turned on, with a fix promised. Exclude theme scripts from combining until then. Steps are in OceanWP mobile menu not working.
• A Customizer that shows a critical error. One recent thread remains open; staff asked for debug output. See OceanWP Customizer not loading.
• An editor that will not load. Elementor's Safe Mode, under Elementor > Editor > Tools, loads the editor without the theme or other plugins, which separates theme trouble from plugin trouble. The full routine is in Elementor theme conflicts.
• Styles that will not update. OceanWP's Styling Options Location can write CSS to a file in uploads, and Elementor's CSS Print Method defaults to an external file too. Clear both, then the page cache. See OceanWP CSS not updating.

On weight, OceanWP's Performance panel is the friend of an Elementor site. It can stop loading Font Awesome, Simple Line Icons and Ocean SVG icons, the lightbox, custom select styling, the widgets stylesheet, the scroll effect and the emoji script. If Elementor already supplies the icons your pages use, the theme's icon sets are dead weight. Elementor brings its own cost: container markup, widget stylesheets and any add-on packs. Measure a typical service page before and after each change, using the order in the OceanWP speed guide, and see Elementor slow website for the builder side.

When the OceanWP and Elementor stack stops paying for itself

Count the products on a fully kitted site: OceanWP, Ocean Extra, several Ocean extensions, Elementor, often Elementor Pro and a widget pack, then the caching and SEO plugins. That is a lot of independent update schedules for a site whose job may be to make the phone ring. For a modest brochure site or small shop that works, keep it and keep it tidy. Our Elementor developers and theme customization team do exactly that.

Look at a rebuild when the mobile menu is the thing that keeps breaking and phones are where your customers are, when product pages need logic the shop features cannot express, or when every new service page is a cloned Elementor layout. OceanWP vs Next.js and the broader page builder vs Next.js comparison lay out the trade honestly. Leaving is a two-part job: the theme stores little in your pages, but Elementor content must be pulled out of its JSON, as Elementor to Next.js explains, alongside the OceanWP to Next.js plan. Every OceanWP-specific fix we have written lives in the OceanWP repair hub, and the other themes are in the WordPress themes section.