Understanding the Elementor Editor
With Elementor installed, it’s time to open the editor and see how it works. This is where you’ll build your pages with a simple drag-and-drop interface — no coding required.
At first glance, the editor might look a little overwhelming, but once you understand its building blocks (Sections, Columns, and Widgets), everything starts to click. And with Elementor’s new Editor V4 layout, things are even more streamlined.
Step 1: Opening the Editor
- In your WordPress Dashboard, go to Pages > Add New.
- Give your page a name (e.g., “Home”).
- Click Edit with Elementor.
You’ll now see the refreshed Elementor Editor V4 interface.
Step 2: Getting to Know the Layout
The editor is divided into two main areas:
- Canvas (middle area) – This is your live preview. You design here by dragging in widgets and arranging sections.
- Sidebar (left panel) – This contains all your widgets and styling tools. In V4, it’s cleaner, with improved grouping and easier-to-use style controls.
What’s new in Editor V4
- Multi-select editing – Select and move multiple elements at once.
- Inline editing – Click text directly on the canvas to edit it.
- Cleaner style panel – More logical grouping of options.
- Responsive controls – Easier switching between desktop, tablet, and mobile.
- CSS classes & variables – Advanced option to keep your design consistent across your site.
Step 3: The Building Blocks
Elementor pages are built in a hierarchy:
- Sections – These are the largest containers (like rows). Each major part of your page usually starts with a new section.
- Columns – Sections can be split into columns (e.g., one section with 3 columns for services).
- Widgets – The actual content: headings, text, images, buttons, videos, forms, etc.
👉 Tip: Always think Section > Column > Widget.
Step 4: Adding Your First Section
- Click the + icon in the canvas.
- Choose a structure (one column, two columns, three columns, etc.).
- Drag a Heading widget from the sidebar into a column.
- Type directly on the page (thanks to inline editing) or use the sidebar to adjust the font, size, and style.
Step 5: Customising Sections and Columns
- Sections: Click the blue section handle at the top to change background colours, add images, or adjust spacing.
- Columns: Click the grey column handle to change column width or alignment.
Step 6: Responsive Editing
At the bottom of the sidebar, click the Responsive Mode icon. Switch between desktop, tablet, and mobile views.
You can adjust sizes, margins, and even hide/show elements for different devices. This ensures your site looks great everywhere.
Step 7: Saving and Publishing
- Click the green Publish button when you’re ready.
- Elementor will save your design and make it live on your site.
- You can always come back and edit again.
Quick Recap
- Sections = page rows
- Columns = divide sections into vertical parts
- Widgets = drag-and-drop content elements
- Editor V4 makes editing smoother with inline text, multi-select, and cleaner style controls
Next Tutorial
Now that you know how the editor works, the next step is understanding Elementor’s building blocks. In the following tutorial — Sections, Columns & Containers Explained — we’ll break down how page layouts are structured, and how Containers make modern designs more flexible and powerful.