How to Edit a Page with Elementor & Manage Page Header Options

The SpaClub Theme is fully compatible with the Elementor Page Builder. You can easily edit any page layout visually with Elementor and customize header visibility or breadcrumb options directly from the page settings using the provided meta box options.

1. Edit a Page with Elementor

To edit a page layout or section using Elementor, follow the steps below:

  1. Log in to your WordPress Admin Dashboard.
  2. Go to Pages > All Pages.
  3. Hover over the page you want to edit (for example, Consult) and click Edit with Elementor.
  4. The page will open in the Elementor visual editor where you can make real-time design changes.
  5. Once you finish editing, click the Update button to save your changes.
Edit Page with Elementor

Tip: You can also click the “Edit with Elementor” button directly from the top admin toolbar while viewing your website for quicker access.

2. Page Meta Box Options

Each page in the SpaClub Theme comes with a dedicated set of Meta Box Options that allow you to control the page header, breadcrumb, and title display individually.

To access Meta Box options:

  1. Go to Pages > Edit Page.
  2. Scroll down below the main content area — you’ll find a section titled Header Style Option and Breadcrumb Option.
Page Meta Box Options

Header Style Option

  • Header Top Bar – Choose whether to show or hide the top bar on this specific page.
    • Show Top Bar on This Page – Displays the top bar as configured in Theme Options.
    • Hide Top Bar on This Page – Hides the top bar for a clean, distraction-free header.

Breadcrumb Option

  • Page Title – Option to show or hide the page title above the content.
  • Breadcrumb – Toggle visibility of the breadcrumb navigation for this page.
  • Breadcrumb Title – Enable or disable the title inside the breadcrumb area.
  • Description – Add a short descriptive text that appears in the breadcrumb area.
  • Page Breadcrumb Image – Upload a custom background image for the breadcrumb section.
  • Text Align – Adjust text alignment for the breadcrumb title and description (e.g., Left, Center, Right).
  • Text Transform – Choose how breadcrumb text should appear (e.g., Capitalize, Uppercase, Lowercase).
Breadcrumb and Title Settings

Note: These settings only affect the current page. If you want to apply global header or breadcrumb styles across all pages, use the options available under Theme Options > Header Area or Theme Options > Breadcrumb Area.

3. Recommended Workflow

  • Use Edit with Elementor to design your page layout and add content blocks.
  • Use the Meta Box Options to control how the header and breadcrumb display for that specific page.
  • After editing, always click Update to save all your changes.
  • View the page on the frontend to confirm your design and header visibility settings.
Page Header Preview

Example: In the “Consult” page, the top bar is visible, the breadcrumb is hidden, and the title section is disabled for a cleaner look. The rest of the layout is designed visually using Elementor widgets.