Learn it · Free course

Elementor 101

Learn Elementor the way it works today. This course is rewritten from scratch for the Atomic Editor in version 4: Flexbox and Grid layouts, Classes and Variables, Components, Theme Builder and popups. It's all text and diagrams, so you can work through it at your own pace.

Lessons
11
Reading time
~3h
Price
Free
Version
4.3

Curriculum

From blank install to launch-ready site.

Lessons build on each other, so go in order the first time. Your progress is saved in this browser only, with no account and no tracking.

  1. 01

    Elementor in 2026: what you are actually installing

    ~10 min · Beginner

    Free, Pro and One explained, the new Atomic Editor, and which plan fits your project.

  2. 02

    Install and set up Elementor the right way

    ~15 min · Beginner

    Hello theme, the free plugin, Pro activation and the handful of settings worth changing on day one.

  3. 03

    A tour of the Elementor editor

    ~12 min · Beginner

    Top bar, Elements panel, canvas, Structure and responsive modes — and the shortcuts that save hours.

  4. 04

    Layouts with Div block, Flexbox and Grid

    ~18 min · Beginner

    How Atomic layout elements nest, when to pick Flexbox or Grid, and a hero section built step by step.

  5. 05

    Atomic Elements and when to use classic widgets

    ~15 min · Beginner

    Heading, Paragraph, Button, Image, SVG and friends — plus where the classic v3 widgets still win.

  6. 06

    Styling: the Style tab, States and responsive design

    ~18 min · Beginner–Intermediate

    One Style tab for every element, hover and focus States, and per-device values for any property.

  7. 07

    Build a design system with Variables and Classes

    ~20 min · Intermediate

    Colour, font and size Variables, reusable Classes, the Design System panel and Default Styles.

  8. 08

    Components, templates and template kits

    ~15 min · Intermediate

    Reusable Components with overrides, saved templates, Cloud Templates and importing a kit safely.

  9. 09

    Theme Builder: headers, footers and dynamic templates

    ~20 min · Intermediate · Pro

    Site parts, display conditions, single and archive templates fed by dynamic content.

  10. 10

    Popups, forms and interactions

    ~20 min · Intermediate · Pro

    Popup triggers and conditions, the new Atomic Forms, and motion that respects your visitors.

  11. 11

    Before you launch: performance, accessibility and upkeep

    ~12 min · Beginner

    A practical pre-launch checklist and the habits that keep an Elementor site fast after go-live.

Your teacher

Hi, I'm Barna.

I made the Katka template pack and I build sites with Elementor every day. The first version of this course was recorded when Elementor still used sections and columns. Version 4 changed how you lay out and style a page, so I rewrote every lesson. You get the steps I actually use, the reasons behind them, and the mistakes I see most often.

Before you start

  • A WordPress site you can experiment on. A staging copy or local install is ideal.
  • The free Elementor plugin. Lessons 09 and 10 need Elementor Pro.
  • About 15 minutes per lesson. Steps are short, so you can stop at any point.
See Elementor Pro plans ↗

This is an affiliate link. If you buy through it, I earn a commission at no extra cost to you. It helps keep this course free.