Getting Started with Elementor Site Settings, Global Styles, and Search-Facing Site Names as a Unified Launch Baseline

Use Elementor Site Settings and Global Styles to define a single design system, then align it with search-facing site names for a clean, launch-ready baseline.

Why Treat Site Settings, Global Styles, and Site Names as One System

On a real Elementor build, Site Settings, Global Styles, and search-facing site names are not separate checkboxes. They are a single baseline system that controls how your brand, layout, and titles appear to users and search engines from day one.

This article outlines a practical, repeatable launch baseline that connects:

• Elementor Site Settings (identity, layout, lightbox, custom CSS)
• Elementor Global Styles (colors, typography, theme style)
• Search-facing site names (WordPress Site Identity, Google site name signals, and Yoast SEO titles if installed)

Step 1 – Establish a Canonical Site Identity in Elementor Site Settings

Work from Elementor outward. Your design system and identity should live in Elementor’s Site Settings, then be mirrored in WordPress and SEO tools.

1.1 Access Elementor Site Settings

From any Elementor-edited page:

• Click the Elementor icon (top-left of the editor toolbar).
• Choose Site Settings.

This panel centralizes design system, theme style, and identity controls for the entire site.Source

1.2 Lock in Site Identity Fields

In Site Settings ? Settings ? Site Identity (names may vary slightly by version), define:

• Site Name – Your primary brand name, concise and human-readable.
• Site Description/Tagline – A short phrase that supports the brand and primary topic.
• Logo – SVG or high-resolution PNG, optimized for light/dark contexts.
• Favicon / Site Icon – At least 512×512px, exported as PNG for clarity.Source

Decide a single canonical spelling and casing for the brand (for example, “Compass Production” vs “Compass Productions”). Use that exact string everywhere else in this workflow.

1.3 Baseline Layout and Behavior

Still in Site Settings, configure:

• Layout – Default content width, widget spacing, and page layout template. These defaults should match your primary template (e.g., Theme Builder header/footer).
• Lightbox – Global behavior for media lightboxes, so galleries and videos behave consistently.
• Custom CSS – Site-wide utility classes (e.g., .u-max-width, .u-section-padding) that your team will reuse across templates.

This gives you a predictable canvas before you touch individual pages or templates.Source

Step 2 – Build a Minimal but Rigid Global Styles Design System

Next, define a lean design system in Elementor that everything else must inherit from. Avoid over-creating tokens; aim for a small, enforced set.

2.1 Global Colors

In Site Settings ? Design System ? Global Colors:

• Map the four core slots to real brand roles: Primary (main accent), Secondary (support accent), Text (body text), Accent (alerts/CTAs).
• Add only a handful of additional tokens for edge cases (e.g., Muted Background, Border Subtle).
• Document in your internal notes where each token should be used (buttons, links, badges, etc.).

2.2 Global Typography

In Global Fonts (still under Design System):

• Primary – Main heading font (H1–H3).
• Secondary – Subheadings, UI labels.
• Text – Body copy, lists, long-form content.
• Accent – Overlines, small caps, or special labels.

Then, in Theme Style ? Typography, bind HTML elements (H1–H6, body, links) to these global tokens. This ensures widgets can inherit the design system instead of hard-coded values.Source

2.3 Enforce Global Inheritance in Templates

When building Elementor templates (headers, footers, single, archive):

• Use global colors and fonts wherever possible instead of manual color/size overrides.
• Reserve custom per-widget styling for deliberate exceptions (e.g., hero headline, campaign CTA).
• Periodically use the Global Style indicator (globe icon) to confirm widgets are inheriting correctly.

This keeps the site maintainable: a brand refresh later becomes a Site Settings task, not a page-by-page rebuild.

Step 3 – Align WordPress Site Identity with Elementor

Elementor’s Site Settings don’t replace WordPress Site Identity; they sit on top of it. Search engines and browsers still read WordPress-level identity signals.

3.1 Mirror Identity in WordPress

In Settings ? General (or the Customizer’s Site Identity panel, depending on your stack), align:

• Site Title – Exactly match the Elementor Site Name.
• Tagline – Either mirror the Elementor description or leave blank if you don’t want it exposed.
• Site Icon – Use the same favicon asset you defined earlier.Source

The goal is zero contradictions between Elementor, WordPress, and what search engines see.

Step 4 – Make Your Site Name Search-Ready for Google

Google now treats site names as a distinct element in search results, separate from per-page titles. You want your Elementor/WordPress identity to line up with what Google surfaces.

4.1 Choose a Primary and Alternate Site Name

Based on Google’s guidance:

• Use a concise, commonly recognized name (e.g., “Compass Production”).
• Avoid generic keyword-stuffed names (“Best Web Design Agency in USA”).
• Define an alternateName if you have a strong acronym or short form (e.g., “CP Studio”).Source

Ensure both names are compatible with your brand and legal usage.

4.2 Implement WebSite Structured Data

Whether via your theme, a custom plugin, or an SEO plugin, ensure your homepage outputs WebSite schema with:

• name – Your primary site name (exact match to Elementor/WordPress).
• alternateName – Optional acronym or short brand.
• url – Canonical homepage URL.

If you’re using Yoast SEO, it will typically handle WebSite schema for you; your job is to keep the brand name consistent across all layers.

Step 5 – Align Yoast SEO Title Templates with the Design System

If Yoast SEO is installed, your title architecture must respect both the design system and Google’s site name logic.

5.1 Define Global Title Templates

In Yoast SEO ? Settings ? Content Types (and other sections like Categories & Tags, Archives):

• Set SEO title templates using variables (e.g., %%title%% %%sep%% %%sitename%%).
• Keep patterns short and readable; avoid repeating the brand multiple times.
• Use different patterns for posts, pages, and custom post types if their roles differ.

Yoast lets you define these templates once so every new page inherits a sensible, search-friendly title structure.Source

5.2 Match Yoast’s %%sitename%% to Your Canonical Name

Yoast’s %%sitename%% variable pulls from your WordPress Site Title. Because you already aligned that with Elementor’s Site Name, your SEO titles now reinforce the same brand string that Google’s site name system is evaluating.Source

Result: Elementor Site Settings, WordPress Site Identity, Yoast title templates, and Google’s site name system are all speaking the same language.

Step 6 – Page-Level Overrides Without Breaking the Baseline

With the global baseline in place, you can safely override at the page/template level when needed.

6.1 Elementor Page Settings

On any Elementor page, use Page Settings (gear icon in the editor toolbar) to control:

• Page Layout – Switch between Default, Elementor Full Width, or Elementor Canvas for special layouts.
• Background – Set a unique background for landing pages while still inheriting global typography and colors.
• Custom CSS – Add page-specific tweaks without polluting the global CSS layer.Source

Use these overrides sparingly; if you find yourself repeating the same override on multiple pages, promote it back into Site Settings or Global Styles.

6.2 Yoast Per-Page SEO Titles

On key pages (home, high-value landing pages, cornerstone content):

• Open the Yoast meta box or sidebar in the WordPress editor.
• Override the SEO title and meta description to emphasize primary keywords and user intent.
• Keep the brand suffix consistent with your global template to avoid confusing Google’s site name logic.

What You Should See Once the Baseline Is in Place

After completing this workflow, you should observe:

• New Elementor pages automatically inherit correct fonts, colors, and layout without manual styling.
• Header, footer, and archive templates visually align because they all draw from the same Global Styles.
• The browser tab shows the correct favicon and a clean, consistent title pattern.
• Yoast’s SEO previews show titles that match your brand and page intent, without duplicated or conflicting site names.
• Over time, Google Search results begin to display a stable site name that matches your brand and Elementor identity.

Operational Checklist for New Elementor Projects

• Decide canonical site name and alternate name.
• Configure Elementor Site Settings: identity, layout, lightbox, custom CSS.
• Define Global Colors and Global Fonts; bind them via Theme Style.
• Mirror Site Title, Tagline, and Site Icon in WordPress settings.
• Ensure WebSite structured data is present with matching name/alternateName.
• Set Yoast global title templates and confirm %%sitename%% matches the canonical brand.
• Use Elementor Page Settings and Yoast per-page fields only for deliberate, documented exceptions.

Run this checklist at the start of every serious Elementor build and you’ll avoid the most common identity, design, and title conflicts that surface months after launch.