Getting Started with Elementor Site Settings and Global Styles as a Practical Site Identity Launch Baseline 123.0

Use Elementor Site Settings and Global Styles to lock in a clean, search-aware site identity baseline before you design any pages.

Why Site Identity Belongs in Elementor First

On modern Elementor builds, your real “site identity” baseline lives in Elementor Site Settings and Global Styles, not in scattered widget overrides or theme options. Elementor exposes a central panel for design system, theme style, and identity controls that act as the fallback for every template and page you create.Source

This article assumes you are already comfortable working in Elementor and want a fast, reliable workflow to lock in site name, logo, favicon alignment, and design system before you build anything else.

Step 1 – Establish Site Identity in WordPress Once

Even though Elementor is your primary control surface, WordPress Site Identity still feeds core signals like the site title, tagline, and site icon that many themes and plugins reference.Source

Minimal WordPress-side configuration

• Set a clean, human-readable Site Title (brand name only, no taglines or keywords stuffing).
• Use a short, descriptive Tagline or leave it blank if you plan to handle messaging via Elementor and Yoast.
• Upload a square Site Icon (at least 512×512) that will be used as your favicon across browsers and devices.Source

Once this is set, you rarely touch it again. Treat it as the low-level OS layer that Elementor and Yoast sit on top of.

Step 2 – Open Elementor Site Settings as Your Control Panel

From any page edited with Elementor:

• Click the hamburger / Elementor logo in the top-left of the editor.
• Choose Site Settings.

This panel is your design system control center: Global Colors, Global Fonts, Theme Style, Layout, and Identity live here and cascade across the entire site.Source

What you should see

The left panel should show sections like Design System, Theme Style, and Settings. If you don’t see them, verify that Elementor is active for this post type and that you’re not editing a non-Elementor template.

Step 3 – Lock in Global Colors and Typography as Identity Primitives

Before you touch any actual page layout, define the primitives that will express your brand identity everywhere.

Global Colors

1. In Site Settings, open Design System ? Global Colors.
2. Rename the four defaults to something semantic, e.g. Brand Primary, Brand Secondary, Body Text, Accent.
3. Assign your brand palette values (HEX/RGB) to each.

Every button, heading, and link you style later should reference these globals instead of hard-coded colors. Elementor’s controls expose a globe icon whenever a property can inherit a global style from the design system.Source

Global Typography

1. In Site Settings, open Design System ? Global Fonts.
2. Map the four defaults to your type system, e.g. Primary Heading, Secondary Heading, Body, Meta.
3. Set font family, weight, size, line-height, and letter-spacing for each breakpoint.

Later, when you style widgets or Theme Builder templates, always bind typography to these global sets. This keeps identity consistent and lets you rebrand from a single place.

Step 4 – Configure Theme Style as the HTML Baseline

Global Styles define design tokens; Theme Style defines how raw HTML elements render when no widget-level styling is applied. This is critical for content coming from the block editor, third-party plugins, or dynamic fields.

Recommended Theme Style passes

• Typography – Map H1–H6, body text, and links to your Global Fonts and Colors. Avoid setting arbitrary sizes; use a clear scale that matches your design system.
• Buttons – Define default padding, border radius, and colors using global tokens. Many native Elementor widgets inherit this.
• Images & Form Fields – Normalize border radius, shadows, and focus states so plugin-generated forms and media feel native.

Because Theme Style acts as a fallback, it prevents “ugly defaults” whenever someone drops in a new widget or plugin that doesn’t have per-element styling configured.Source

Step 5 – Align Site Name, Logo, and Favicon with Search

With design tokens in place, align your visible identity with how search engines interpret your site.

Site name and logo in Elementor

• In Site Settings ? Settings ? Site Identity, confirm the Site Name and Description match your brand and messaging strategy (usually mirroring or refining the WordPress Site Title and Tagline).Source
• Set the Logo and, if available, an Alternative Logo (for dark headers or sticky states) using SVG or high-resolution PNG.

Use the dedicated Site Logo and Site Title widgets in your Elementor header templates so changes in Site Settings propagate automatically.

Favicon and Google site names

Google now surfaces a site name and favicon prominently in search results and uses multiple signals (structured data, on-page text, and domain) to determine the label.Source

• Ensure your WordPress Site Icon is a clean, recognizable mark that still reads at 16–48px.
• Keep the Site Title / Site Name consistent between WordPress, Elementor Site Settings, and any schema or SEO plugin configuration.

If you’re implementing custom schema for site names, coordinate that with your Elementor header and Yoast configuration so the visible brand and structured data match.

Step 6 – Wire Site Identity into Yoast SEO Title Templates

Once your visual identity is stable, align your search-facing titles so they reflect the same naming logic.

Configure Yoast title templates

1. In WordPress admin, go to Yoast SEO ? Settings ? Content Types (and other sections as needed).
2. For each post type, define an SEO title template that uses variables like Title, Separator, and Site title in a consistent pattern, e.g. Title Separator Site title.Source
3. Use shorter patterns for posts and longer, more descriptive patterns for key landing pages.

Yoast’s title system ensures every page outputs a unique, descriptive <title> tag, while still inheriting your site name consistently across the site.Source

Practical alignment rules

• Use the same brand string in Yoast’s Site title variable as you use in Elementor’s Site Name.
• Avoid duplicating the brand name in the on-page H1; let the Yoast title carry the full pattern while the H1 focuses on the page topic.
• For the homepage, coordinate: Elementor hero H1, visible site title, Yoast homepage title template, and any site-name schema should all tell the same story.

Step 7 – Validate the Baseline Before Scaling Templates

Before you build out full Theme Builder coverage, validate that your baseline behaves correctly.

Checklist

• Create a quick test page with a mix of headings, paragraphs, buttons, and a form. Confirm everything inherits the expected global colors and fonts.
• Drop in a plugin-generated form or shortcode and verify Theme Style typography and colors keep it on-brand.
• View the homepage and a couple of inner pages in Google’s Rich Results / URL inspection tools to confirm the site name, favicon, and title tags look correct.
• Change a Global Color or Font and ensure the change cascades across your test content and header/footer templates.

When to Revisit This Baseline

After launch, treat Elementor Site Settings and Global Styles as the single source of truth for identity changes. When you rebrand or adjust typography, do it here first, then update Yoast templates and any custom schema to match.

If you find yourself restyling the same widget repeatedly, it’s usually a sign that the baseline is missing a token or Theme Style rule—fix it at the system level instead of at the page level.