Global Styles and Live Preview

Palette and global style controls preview live in the Customizer.
Palette and global style controls preview live in the Customizer.

What it helps you do

Define your brand once — colors, fonts, spacing, buttons, links, and heading styles — and see changes on a live preview before you publish. Every page inherits the same foundation so blocks look consistent without per-page CSS.

Where to find it

  • Appearance → Customize — the Dirigible panels group global design controls.
  • Styles — Palette, Fonts, Widths, Header 1 through Header 6, Paragraphs, Links, Inline Links, Buttons, Navigation, Tags, Forms, and Utility Nav.
  • Header & Menus, Footer & Contact, Blog & Posts, Pop-up, and Scripts & Embeds — site-wide settings that also preview in the Customizer.
  • Additional CSS — at the bottom of the Customizer for custom rules (also reflected in the block editor when possible).

How to use it

  1. Open Appearance → Customize.
  2. Start with Styles → Palette and Styles → Fonts for the biggest visual impact.
  3. Adjust Widths if your content should be narrower or wider than the default.
  4. Tune Buttons, Links, and heading levels to match your brand voice.
  5. Click Publish when the preview looks right.

Use the device icons in the Customizer toolbar to check mobile and tablet previews.

What happens automatically

  • Saved styles compile into site CSS so the front end and block editor share the same colors, fonts, and type scale.
  • Font choices from Dirigible Fonts load with proper @font-face rules.
  • Google Fonts and other embed fonts configured under Scripts & Embeds → Embed Fonts are pulled into the editor preview.
  • Additional CSS from the Customizer is cached for faster editor loading and prefixed so it targets the editing canvas safely.

Things to know

  • The Customizer preview is the fastest way to judge global changes; individual blocks may still have their own sidebar options.
  • Some Additional CSS selectors work on the front end but not in the editor when block markup differs — test both when you rely on custom CSS.
  • Palette and typography changes can affect many blocks at once. Publish during a quiet moment if you are mid-edit on important pages.
  • Child theme switches no longer wipe Dirigible settings — values live in theme settings, not the child theme record alone.

Related settings and guides