Setting up Elementor global styles

Elementor’s global styles system (called Site Settings) lets you define your brand colors and typography once, then reference those global values throughout every page. When you change a global color, every element using it updates automatically.

Opening Site Settings

In the Elementor editor, click the Site Settings icon (the hamburger/lines icon at the top-left of the panel), then select Site Settings. Alternatively, go to Elementor → Site Settings from the WordPress admin.

Setting up global colors

In Site Settings, click Global Colors.
You’ll see four default roles: Primary, Secondary, Text, and Accent.
Click the color swatch next to each role and set your brand values. For Themezinho’s default palette: Primary #5444B4, Text #111111.
Click + Add Color to add extra brand colors (background, success green, warning amber, etc.).
Click Apply then Save.

Name your colors clearly. Instead of “Color 1”, name them “Brand Purple”, “Text Dark”, “Surface Light” — this makes building pages much faster.

Setting up global fonts

In Site Settings, click Global Fonts.
Set the Primary Font (used for body text) — DM Sans, 15px, weight 400.
Set the Secondary Font (used for headings) — DM Sans, weight 700.
Additional font roles (Text, Accent) can be used for special elements like captions or labels.
Click Apply & Save.

Using global values in your designs

Whenever you set a color or font property on an element in Elementor, click the globe icon 🌐 next to the color picker or font selector to choose a global value instead of a hardcoded one. Elements linked to global values update automatically when the global changes.

Global styles vs Theme Style

Site Settings also has a Theme Style section where you can set default styles for HTML elements (H1–H6 headings, body text, links, buttons). These apply to any content not explicitly styled by Elementor — useful for the block editor, WooCommerce pages, and plain text pages.

Exporting and reusing across sites

Go to Elementor → Tools → Export Kit to export your Site Settings (colors, fonts, theme style) as a shareable file. Import this on any other Elementor site to apply the same brand settings instantly — very useful for agency workflows.