Site Structure

How to choose a Plumbit page-header design

Compare Plumbit's five theme page-header designs and identify which layouts support a separate content background.

Plumbit's five theme page-header designs change the visual composition of the same title, breadcrumb, caption, and background content. They do not create different WordPress pages or change the content editor.

Design comparison#

DesignContent arrangementBest suited forDesign-specific controls
Design 1Original theme page-header compositionExisting sites and conventional title bannersShared title, breadcrumb, background, position, and width controls
Design 2Content is presented above optional mediaClear title-first page introductionsShared controls; content-panel background controls do not apply
Design 3Media with an overlapping content panelFeature pages and image-led introductionsContent background color and image
Design 4Media canvas with a floating content cardProminent service or campaign introductionsContent background color and image
Design 5Media and content form a split compositionBalanced image-and-copy layoutsContent background color and image

All five designs share the page-header title, caption, breadcrumb, alignment, primary background, position, and width concepts where the selected context exposes those controls. Use How to configure Plumbit page headers for the shared workflow.

Plumbit Page Header Design control with the current Design 1 selection visible.

Design 1#

Design 1 is Plumbit's original/default page-header layout. It keeps the established title/banner composition and is the safest choice when preserving an existing site's page-header appearance is the priority. Use it as the baseline when comparing a new design, and verify the original site-header relationship, overlay, title, caption, breadcrumb, and background behavior after any change.

Design 2#

Design 2 places the page-header content before optional primary media. When a primary image is not available, the media region is omitted rather than leaving an empty image area. Full Width and Boxed change the layout's container relationship, while the content remains readable within the normal content width.

Design 2 does not use the separate content-panel background controls. If the saved position is Under Menu, this design uses the normal after-menu presentation rather than the overlapping behavior used by the other new compositions.

Design 3#

Design 3 uses a rounded media region with a content panel that overlaps the lower-left portion of the media when space allows. The content panel supports its own background color, including transparency, and its own background image. The primary media can use the selected scroll effect while the content-panel background remains separate.

At narrow widths the overlap becomes a stacked layout. Check long titles, captions, and breadcrumbs at the mobile width you support before publishing.

Design 4#

Design 4 presents a rounded media canvas with a floating content card. The card supports a separate content background color and image, while the primary media remains the page-header image. The card returns to normal document flow at the responsive stacking breakpoint, so it remains usable on narrow screens.

Choose this design when the title and caption should sit visibly on a panel over the image. Check card contrast and long text before publishing.

Design 5#

Design 5 places primary media and the content panel side by side in one rounded split composition on wider screens. The content panel supports its own color and image, while the primary media remains the region affected by the page-header scroll effect. The composition stacks on narrow screens and the content expands when no primary media is available.

Designs 3–5 content backgrounds#

Designs 3, 4, and 5 expose Page Header Content Background Color and Page Header Content Background Image. Use the color for a solid or translucent panel base and the image for a separate content-panel texture or photo. The primary page-header background and the content-panel background are different settings.

These controls are hidden or have no effect for Designs 1 and 2 because those designs do not use the same separate content-panel composition. If you switch away from Designs 3–5, the saved values can remain available for a later return; do not assume that hiding the controls means the values were deleted.

Choose a design safely#

  1. Start with the content shape#

    Choose Design 1 for the original banner, Design 2 for content-first output, Design 3 for an overlap, Design 4 for a floating card, or Design 5 for a split composition.

  2. Check media availability#

    Preview with and without a primary background image. Designs 2–5 intentionally remove the media region when there is no valid primary image.

  3. Check the context#

    Review a page, post, Service, and any archive, search, shop, or 404 context that uses separate settings.

  4. Check the narrow layout#

    Verify title wrapping, breadcrumb wrapping, content-panel spacing, and the site-header relationship before publishing.

Why controls may be missing#

Content-background controls are design-specific. The selected context may also be using an Elementor page-header template, in which case the theme design controls do not own the visible output. Check the provider, the context-specific section, and any page-level override before treating a hidden control as a defect.

Expected result#

The selected theme design presents the same page-header content in the intended composition, with the correct media, content background behavior, width, position, alignment, and responsive fallback.

Support escalation#

Send the affected URL, selected design, context, primary image state, content background state, position, size, provider, viewport, and a screenshot of the result. Do not send passwords. For one-page exceptions, also include the page-level override state. See Getting support for Plumbit.

How to configure Plumbit page headers

Configure the page title banner, breadcrumbs, background, position, width, and scroll effect without confusing it with the site header or Elementor page content.

Global page-header settings and page-level overrides

Understand how Plumbit global context settings, page-level Page Options, and Elementor page-header templates determine the visible page header.

Troubleshooting Plumbit page headers

Diagnose missing, wrong, duplicated, overlapping, stale, or non-moving Plumbit page headers by checking ownership and context before changing settings.