Customization

How to configure Plumbit global colors and typography

Set theme-owned color and typography defaults, understand context settings, and keep Elementor global and widget styles in the correct layer.

Plumbit styling has more than one ownership layer. Use the Plumbit Customizer for theme-owned output, Elementor Theme Style for Elementor-owned content, and widget or page controls for deliberate exceptions.

Before you begin#

  • Record whether the affected area is theme-owned or Elementor-owned.
  • Decide whether you need a site-wide default or one component exception.
  • Use a staging copy or backup before making a broad visual change.

Understand the styling layers#

LayerSettings locationUse it for
Plumbit colorsAppearance > Customize > Styling > General StylingTheme-owned defaults such as Primary Color, Secondary Color, Tertiary Color, Body Background Color, Link Color, and button colors.
Plumbit context colorsAppearance > Customize > Styling > Page Header Styling, Archive Page Header Styling, Search Page Header Styling, 404 Page Header Styling, Blog Home Page Header Styling, or Shop Page Header StylingColors for the matching theme page-header context.
Plumbit typographyAppearance > Customize > TypographyTypography groups such as H1 through H6, Body, Paragraph, Main Navigation, Page Header Title, Page Header Breadcrumb, Page Header Caption, Sidebar Widget Title, Footer Widget Title, and Copyright Title.
Elementor Theme StyleElementor editor > Site Settings > Theme StyleElementor-owned Body, Links, Headings, Buttons, and Form Fields.
Plumbit ExtensionsThe extension widget or Stronghold effect settingsControls and presentation owned by extension widgets or Stronghold effects.

Set Plumbit global colors#

Open Appearance > Customize > Styling > General Styling. Set Primary Color, Secondary Color, Tertiary Color, Body Background Color, Link Color, Link Hover Color, Button Text Color, Button Background Color, Button Text Hover Color, or Button Background Hover Color when that theme-owned state is the one you need to change.

Plumbit provides these global button controls: Button Text Color, Button Background Color, Button Text Hover Color, and Button Background Hover Color. Plumbit does not provide global controls for button border, radius, padding, or typography. The component owner determines whether a button, form, or WooCommerce control follows the Plumbit Customizer, Elementor Theme Style, or its own widget or plugin settings.

For a page header, open the matching section under Appearance > Customize > Styling: Page Header Styling, Archive Page Header Styling, Search Page Header Styling, 404 Page Header Styling, Blog Home Page Header Styling, or Shop Page Header Styling. A context setting changes its matching theme context; it does not turn one archive color into a universal rule.

Set theme typography#

Open Appearance > Customize > Typography and choose the group that owns the visible text. Plumbit provides groups for H1, H2, H3, H4, H5, H6, Body, Paragraph, Header Top, Site Title, Main Navigation, Page Header Title, Page Header Breadcrumb, Page Header Caption, Sidebar Widget Title, Footer Widget Title, and Copyright Title. Each group uses an enable control plus its matching font, weight, size, line-height, and related controls.

For example, the Body group uses Body Google Font, and the Page Header Title group uses Page Header Title Google Font and Page Header Title Font Weight. Use the narrowest matching group instead of changing every heading to repair one menu or sidebar issue.

Choose fonts carefully#

Plumbit uses its static Google-font choice list for the Customizer font controls and loads selected families through its Google Fonts URLs. Choose a family from the relevant group, then set its font weight from the displayed weight choices and adjust the group size, line height, and responsive values where those controls are registered. Leaving the family empty keeps the existing CSS font stack.

For Elementor content, open Elementor editor > Site Settings > Theme Style and use the Elementor font controls. Elementor typography does not automatically replace non-Elementor theme containers.

Use Elementor Theme Style#

Open an Elementor page or template, open Site Settings, and choose Theme Style. Use Body, Links, Headings, Buttons, and Form Fields for Elementor-owned content. A widget Style control can override the Theme Style default for one widget.

Elementor Theme Style is for Elementor-owned content. Plumbit still owns non-Elementor headers, archives, sidebars, and other theme output.

Use overrides intentionally#

When a content-level control supports inheritance, leaving it unset allows the corresponding global setting to apply. Use a matching content-level override only for a deliberate exception.

Compare the preview and public page after changing a global value. If only one widget should change, restore the global value and edit the widget or page-level style instead.

Preview and publish#

  1. Change one owner#

    Choose the Plumbit Customizer group, Elementor Theme Style group, widget, or page control that owns the output.

  2. Check affected states#

    Review desktop, tablet, mobile, and any header or page context affected by the setting.

  3. Publish or save#

    Use the save control in the owner you changed, then check a private or logged-out view.

Common problems#

Expected result#

Theme-owned output follows Plumbit Customizer defaults, Elementor content follows Elementor Theme Style defaults, and deliberate widget or page exceptions remain understandable.

Support escalation#

Include the URL, affected component, provider, context, setting owner, before-and-after screenshots, and version details. Do not send passwords.

How to configure Plumbit logos and site identity

Choose the correct owner for Site Identity, theme header logos, mobile and sticky logos, footer identity, and Elementor template logos.

How to configure Plumbit global layout and spacing

Separate site layout, theme containers, content and sidebars, page headers, and Elementor widths before changing spacing.

How to find and add Plumbit Elementor widgets

Find Plumbit widgets in Elementor, add them to containers, arrange or duplicate them, and verify the saved frontend result, including dependency-based content requirements.