Get a quote

Elementor Website Building Guide

Table of Contents

Getting Started

Getting Started

Setting Up Your WordPress Site

Designing with Elementor

Building Your Pages

Making Your Website Ready for the World

Keeping Your Website Healthy

Styling Your Site (Fonts, Colours, Backgrounds)

With text, images, and buttons added to your page, the next step is making them look polished and consistent. Elementor gives you powerful styling controls, allowing you to customise fonts, colours, spacing, and more — without writing any code.

Step 1: Understanding the Style Tab

Whenever you click a widget, you’ll see three main tabs in the sidebar:

  • Content → Controls the actual text, image, or button content.
  • Style → Where you adjust the look (fonts, colours, backgrounds).
  • Advanced → Spacing, motion effects, custom CSS.

👉 For most design changes, you’ll use the Style tab.

Step 2: Typography (Fonts & Text Styling)

  1. Select a widget with text (Heading or Text Editor).
  2. Go to the Style tab → Typography.
  3. Adjust:
    • Font family (e.g., Arial, Roboto, Open Sans).
    • Size (use px, em, or %).
    • Weight (boldness).
    • Transform (uppercase, lowercase, capitalise).
    • Line height & letter spacing (for readability).

👉 Tip: Use no more than 2–3 fonts across your entire site (usually one for headings, one for body text).

Step 3: Colours

  1. Under the Style tab, choose text colour, background colour, or border colour (depending on the widget).
  2. For buttons, you can set both Normal and Hover colours (so they change when a user hovers over them).
  3. Use Elementor’s Global Colours (explained below) to ensure your design stays consistent.

👉 Tip: Stick to your brand palette. Usually 1–2 main colours + neutral shades (black, white, grey).

Step 4: Spacing (Margins & Padding)

  • Margin = space outside an element (pushes it away from other items).
  • Padding = space inside an element (controls breathing room around text/images).
  1. Select any widget, section, or container.
  2. Open the Advanced tab.
  3. Adjust margins and padding until your layout looks balanced.

👉 Tip: Break up content with generous spacing — whitespace makes designs easier to read.

Step 5: Using Global Styles (The Professional Way)

Instead of styling each element one by one, Elementor allows you to define Global Styles that apply site-wide.

  1. From the Elementor sidebar, click the hamburger menu (☰) in the top left.
  2. Select Site Settings.
  3. Adjust:
    • Global Colours → set brand colours (e.g., Primary, Secondary, Accent, Text).
    • Global Fonts → set typography rules for headings, body text, and buttons.
    • Theme Style → tweak defaults for links, images, and backgrounds.

👉 Why use Global Styles?
 If you ever change a brand colour or font, updating it once here will apply across your entire site. Huge time saver.

Step 6: Quick Tricks for Consistency

  • Duplicate widgets/containers instead of restyling each one.
  • Use “Copy” → “Paste Style” (right-click a widget) to reuse styles quickly.
  • Save styled buttons or text blocks as Global Widgets if you want to reuse them on multiple pages.

Quick Recap

  • Use the Style tab for fonts, colours, and widget-specific options.
  • Use the Advanced tab for margins, padding, and extra spacing.
  • Rely on Global Styles for site-wide consistency.
  • Consistency in typography, colours, and spacing creates a professional, cohesive website.

Next Tutorial

Now that your content is styled, the next step is learning how to Work with Images & Backgrounds. In the following guide, we’ll cover background images, gradients, overlays, and how to make visuals responsive across devices.