A well-structured start makes every Elementor website faster to build and easier to maintain. This is the process we use for every new site. Elementor now has two editors, the classic editor (V3) and the atomic editor (V4), so the most important decision comes early: which one you build with. The rest of the setup follows from that choice.
1. Choose a lightweight theme
- Use a fast, lightweight theme as your base, such as Hello Elementor.
- Avoid bloated themes with features you won’t use. They slow the site down and can clash with Elementor’s own styles.
2. Install the plugins you need
- Elementor, plus Elementor Pro if you want Theme Builder for headers, footers and templates
- A caching plugin, such as WP Rocket or W3 Total Cache
- An image optimization plugin, such as Imagify, ShortPixel or Smush
- An SEO plugin, such as Yoast or Rank Math
3. Choose V3, V4 or both
V3 builds with containers and widgets, and styles each one in its own settings, with Global Colors and Global Fonts shared across the site. V4 builds with atomic elements (Div block, Flexbox, Grid, Heading, Paragraph, Button and more) and styles them with Variables and Classes. For a fuller comparison, see Elementor V4 and the atomic editor.
| Route | Atomic editor | What you set up | Element UI components |
|---|---|---|---|
| V3 only | Off | Global Colors, Global Fonts and Layout in Site Settings | V3 components |
| V4 only | On | Variables, Default Styles and Classes in the Design System panel | V4 components |
| Both | On | The V4 design system first, then its colors synced to V3 and its fonts added to V3 Global Fonts | Both, on the same page |
The atomic editor is on by default on new installs since Elementor 4.0. A site updated from an older version keeps it off until you switch it on. Either way, you’ll find the setting in Elementor > Editor > Settings > Atomic Editor.
Make this decision before you build any pages. You can switch the atomic editor off later, but pages built with atomic elements stop rendering while it’s off. The content isn’t lost and comes back when you switch it on again, but those pages look empty in the meantime. If you’re unsure, try it on a staging site first, and once a site has V4 content, leave the atomic editor on.
4. Configure Elementor settings
- In Elementor > Settings, set the CSS Print Method to External File.
- Turn off any Elementor features you don’t use, to reduce bloat.
5. Set up your styles
Follow the route you chose in step 3.
Route A: V3 global styles
Open the editor, then Site Settings:
- Global Colors: add your brand palette (primary, secondary, text and accent, plus any extras).
- Global Fonts: set the fonts, sizes and line heights for your headings and body text.
- Layout: set the default content width, container padding and gaps. We use a 1140px content width with 120px top and bottom padding on desktop. Understanding the Element UI V3 design system has the full set of values for each device.
Master global styles in Elementor walks through each of these.
Route B: V4 design system
Open the Design System panel in the editor’s top bar, and set it up in this order:
- Variables: your colors, fonts and sizes, each saved once as a named value.
- Default Styles: the base styles for HTML tags such as headings, paragraphs and links, across the whole site.
- Classes: reusable styles such as buttons, cards and section spacing, built on your Variables.
Keep one-off layout styles local to the element that needs them. Elementor V4 Classes and Variables: set up a design system covers each step, including naming and class order, and Understanding the Element UI V4 design system shows how our V4 sections are structured and spaced.
Route C: both
If you plan to use V3 widgets and V4 elements on the same site, set up the V4 design system first (route B), then bring it across to V3:
- Colors: in Design System > Variables, open the three dots on each color Variable and choose Sync to Global Colors. The synced colors appear in V3’s color pickers, and editing them in V4 updates the V3 side too. The sync only runs one way, so always change colors in V4.
- Fonts: typography doesn’t sync, so add the same fonts to V3 by hand. In Site Settings > Global Fonts, create a Global Font for each typography style in your V4 design system, with the same family, size, weight and line height.
- Body and headings: in Site Settings > Typography, set Body and H1 to H6 to use those Global Fonts. Blog posts and other content that isn’t built in Elementor take their text styles from these settings, so they stay in line with the rest of the site.
Then set the Layout values in Site Settings (route A) for your V3 containers. When you change a font later, update it in both places: the V4 design system and V3’s Global Fonts.
6. Set up your header and footer
Use Elementor’s Theme Builder to create a global header and footer. Try copying one of our Header components or Footer components.
7. Optimize for performance
- Turn on your caching plugin and configure its settings.
- Set up image optimization to reduce file sizes.
- Keep heavy scripts and plugins to a minimum.
Pasting Element UI components into your site
Element UI components come with their own colors, fonts and spacing, so they look right as soon as you paste them on either route. V4 components use local styles only, so pasting one doesn’t add any Classes or Variables to your site. Once a component is in place, you can switch its local values over to your own Global Colors, Variables or Classes so it follows your design system.
By following these steps, you’ll start every project on a solid foundation, with consistent styles, a clear structure and good performance from day one.