Getting Started with Elementor Site Settings as a Practical Site Identity and Layout Baseline

Use Elementor’s Site Settings as the control center for site identity and layout so every new page starts aligned, branded, and structurally consistent.

Why Start Every Build in Elementor Site Settings

For serious Elementor projects, Site Settings is the control surface where you lock in identity, layout, and design system rules before touching individual pages. It centralizes site name, logo, global layout, and design tokens so your Theme Builder templates and content editors inherit a predictable baseline instead of improvising per page.Source

This article focuses on using Elementor Site Settings ? Settings ? Site Identity & Layout as a practical baseline for new builds, not as a one-off cosmetic tweak.

Accessing Site Settings the Right Way

From within the Elementor editor

For most workflows you’ll enter Site Settings from a real page or template so you can see changes in context:

1. Open any page or template with Edit with Elementor.
2. In the top-left of the Elementor panel, click the hamburger / Elementor icon.
3. Choose Site Settings.

This opens the Site Settings panel, where Design System, Theme Style, and Settings (identity, layout, etc.) live in one place.Source

When to use WP-level identity vs Elementor Site Identity

WordPress exposes site identity (title, tagline, logo, icon) in the Customizer / Site Editor, and many themes still read from there.Source For Elementor-centric builds, you typically:

• Set canonical identity in WordPress once (title, tagline, site icon).
• Mirror and control the front-end expression of that identity via Elementor’s Site Settings ? Settings ? Site Identity.

This keeps core data in WordPress but lets Elementor own how it’s rendered in headers, footers, and templates.

Defining a Site Identity Baseline in Elementor

Step 1: Lock in site name and tagline

Inside Site Settings ? Settings ? Site Identity:

• Site Name: Use the brand’s primary name, not a keyword-stuffed phrase. This should match how you want the brand referenced in navigation, header, and structured data.
• Tagline: Short, descriptive support line. Use it sparingly on the front-end (often only in metadata or a single header location).

Keep this consistent with your WordPress Site Identity and any structured data you add later so search engines see a coherent brand signal.Source

Step 2: Configure logo and favicon once

Still in Site Identity:

• Logo: Upload an SVG (preferred) or high-resolution PNG. This is the asset you’ll reuse in Theme Builder headers via the Site Logo widget.
• Favicon / Site Icon: Use a square image at least 512×512px so it works well as a browser tab icon and in some search contexts.Source

Once set, you should never hard-code logos in individual headers. Always pull from the Site Logo widget so identity changes propagate globally.

Step 3: Align with search-facing site names

If you’re planning to implement WebSite structured data or rely on Google’s site name feature, your Elementor Site Name should match the preferred brand label you’ll expose in schema and on-page headings.Source

Practical rules:

• Use a concise brand name (e.g., “Compass Production”) rather than “Compass Production – High-Performance Elementor Websites”.
• Use the same name in Site Identity, header logo alt text, and primary H1 on the homepage.
• If you use an acronym publicly, consider reflecting that in logo alt text and schema, not by changing the Site Name every other week.

Using Site Settings for a Layout Baseline

Why layout belongs in Site Settings

Elementor’s Site Settings ? Settings ? Layout defines defaults like content width, section gaps, and page layout template. These become the fallback for every new page and for Theme Builder templates unless overridden.Source

Instead of adjusting width and spacing per page, you set a global baseline and only deviate for special layouts (landing pages, full-bleed hero sections, etc.).

Step 4: Set content width and breakpoints

In Site Settings ? Settings ? Layout:

• Content Width: Choose a max width that matches your design system (e.g., 1200px for marketing sites, 960px for content-heavy blogs). This should align with your grid system in Figma or your design spec.
• Default Layout: Decide whether most pages should load as Default (theme-controlled), Elementor Full Width, or Elementor Canvas. Use the theme’s header/footer only if you’re not using Elementor Theme Builder.Source

Once set, you can still override layout per page via Page Settings ? Layout, but the baseline keeps 90% of pages consistent.

Step 5: Establish global spacing logic

Still in Layout settings, define:

• Default Widget Spacing: Controls the vertical gap between widgets. Set this to match your vertical rhythm (e.g., 20–32px) so editors can stack widgets without manually adding margins.
• Default Section / Column Gaps: Use these to enforce consistent gutters and breathing room between content blocks.

Pair this with a small set of reusable spacing utilities (e.g., global padding classes or presets) rather than ad-hoc margins on every widget.

Connecting Layout Baseline to Global Styles

Design system vs layout: keep them coordinated

Elementor treats Design System (Global Colors & Fonts) and Layout as separate panels, but they’re part of the same baseline. Global Styles define how things look; Layout defines where and how big they are. Elementor’s global style system is designed so widgets can inherit typography and color tokens defined in Site Settings.Source

Workflow recommendation:

1. Set Site Identity and Layout first (width, gaps, default template).
2. Then define Global Colors and Global Fonts that work within that layout.
3. Finally, build Theme Builder templates that only use global tokens, not custom per-widget styles.

Using global inheritance instead of per-widget overrides

When styling widgets, always start by selecting a Global Color or Global Font token (the globe icon) instead of custom values. Elementor’s control system is built so these tokens can be updated once in Site Settings and cascade through the site.Source

This keeps your Site Settings baseline meaningful—if everything is overridden locally, the baseline becomes theoretical and refactors become expensive.

Aligning Site Identity with SEO Titles

Why Yoast title templates must respect your baseline

If you’re using Yoast SEO, its title templates generate the <title> tag for each post type and taxonomy. These templates should reflect the same brand name and hierarchy you defined in Elementor Site Identity.Source

Example pattern for pages:

• %%title%% | %%sitename%% – where %%sitename%% matches your Elementor Site Name.

Adjust Yoast’s templates under SEO ? Search Appearance so editors don’t have to think about branding on every page. The Site Settings baseline defines the brand; Yoast templates echo it into search-facing titles.

Practical alignment checklist

• Elementor Site Name = WordPress Site Title = Yoast %%sitename%% output.
• Homepage H1 uses the same brand name or a very close variant.
• Yoast title templates never contradict the brand order you use in headers (e.g., “Page | Brand”, not “Brand | Page” on some types and reversed on others unless intentional).

What You Should See After Baseline Setup

Once you’ve configured Site Settings for identity and layout and aligned Yoast templates, you should observe:

• New pages open in Elementor with the correct content width, spacing, and default layout—no manual adjustments needed.
• Global header/footer templates automatically pull the correct logo and site name from Site Identity.
• Changing the logo or tweaking content width in Site Settings updates all Theme Builder templates consistently.
• Browser tabs and search snippets show a consistent brand name and title structure across the site.

Recommended Project Workflow

Baseline-first sequence for new Elementor builds

1. Set WordPress Site Identity once (title, tagline, icon) for core consistency.
2. Open Elementor Site Settings from a blank page or starter template.
3. Configure Site Identity (name, tagline, logo, favicon) to mirror and control the brand expression.
4. Define Layout (content width, default layout, widget spacing) to match your design system.
5. Build Global Styles (colors, fonts) that work within that layout.
6. Create Theme Builder templates (header, footer, single, archive) that rely only on Site Settings and global tokens.
7. Align Yoast SEO title templates with the same brand naming and hierarchy.

Once this baseline is in place, every new page or template you build in Elementor will inherit a coherent identity and layout, drastically reducing per-page configuration and avoiding long-term refactor pain.