What to Set Up in Elementor Site Settings Before You Start Designing

Most people open Elementor and start dragging elements onto a page right away. It feels productive, but it often leads to the same problems a few weeks later: inconsistent button styles, three slightly different blues, content that is too wide on one page and too narrow on another, and a lot of manual fixing.

Ten to twenty minutes in Site Settings before you design anything prevents most of that. In this guide we will walk through every part of Site Settings that matters, in the order you should set it up, plus how it fits with the Atomic Editor's Variables and Classes.

Where to Find Site Settings

Open any page in the Elementor editor and click the menu or the site settings icon in the top bar. Site Settings opens in the panel and applies to your entire site, not just the page you are editing.

1. Site Identity

Start with the basics under Settings > Site Identity:

• Site name and description: used by templates, dynamic tags, and search engines.
• Site logo: the Site Logo widget in your header reads it from here.
• Site favicon: the small icon in browser tabs. Use a square image of at least 512 by 512 pixels.

2. Layout

The Layout settings define the structure every page inherits:

• Content width: the maximum width of boxed containers. Around 1200 to 1320 pixels suits most sites.
• Container padding and gaps: default spacing between and inside containers. Choosing sensible defaults here means less tweaking on every section.
• Default page layout: decide whether new pages use the theme's layout, Elementor Full Width, or Canvas.
• Breakpoints: confirm the tablet and mobile thresholds, and add Laptop or Widescreen only if you need them. Changing these later means rechecking every page, so settle them now.

3. Global Colors

Define your palette before you style anything. Elementor gives you four system colors, Primary, Secondary, Text, and Accent, and you can add custom ones. A practical set:

• Primary and secondary brand colors
• Text and muted text
• Background and surface
• Border
• Success and error, if you use forms

If you build mostly with the Atomic Editor, create the same palette as Color Variables in the Design System panel and sync them to Global Colors, so classic widgets and atomic elements share one source of truth.

4. Global Fonts

Set your Primary, Secondary, Text, and Accent fonts, including size, weight, and line height. Use a maximum of two font families. For atomic elements, create matching font variables and typography classes.

5. Theme Style

Theme Style defines default styles for basic HTML elements, so content looks right even when it is not styled individually. This is especially important for blog posts and pages written in the WordPress editor. Set:

• Typography: body text, links, and headings H1 to H6.
• Buttons: default colors, padding, radius, and hover state.
• Images: border radius, hover effects, and opacity.
• Form fields: label style, input background, border, and focus state.

Link your Theme Style settings to Global Colors and Global Fonts rather than typing values, so everything updates together.

6. Background

Set the default page background, usually white or a very light neutral. Avoid busy background images at the site level; add visual interest at the section level instead.

7. Lightbox

If your site shows images in a lightbox, set its background color, controls, and whether image titles and captions appear. You can also disable the lightbox globally if you prefer images to open normally.

8. Custom CSS and Page Transitions (Pro)

Elementor Pro adds a site-wide Custom CSS area, ideal for reusable classes and small global tweaks, and Page Transitions for animated transitions between pages. Use transitions sparingly; a subtle fade is usually enough.

Site Settings and the Atomic Editor

The Atomic Editor introduces its own design system tools: Variables, Classes, and Components, managed in the Design System panel. They do not replace Site Settings; they work alongside it. A practical split:

• Site Settings: identity, layout defaults, breakpoints, theme styles for plain content, lightbox.
• Design System panel: color, font, and size variables, and the classes you apply to atomic elements.

Keep values consistent between the two, and use the built-in sync where available.

A 20-Minute Setup Checklist

1. Upload logo and favicon, check site name.
2. Set content width, default spacing, and confirm breakpoints.
3. Define 8 to 12 global colors or color variables.
4. Choose two fonts and define their default sizes.
5. Style headings, links, buttons, and form fields in Theme Style.
6. Set the page background and lightbox preferences.
7. Save, then build one test page to check how everything looks together.

Wrapping Up

Site Settings is the foundation of a consistent Elementor site. Setting it up before designing means every new page starts with the right widths, colors, fonts, and styles, so you spend your time on layout and content instead of fixing the same details again and again.