To open the Elementor editor for any page or post, go to Pages (or Posts) in your WordPress dashboard, hover over the item you want to edit, and click Edit with Elementor. The page will open in the full-screen visual editor.
Editor Layout
| Area | Description |
|---|---|
| Left Panel | The main control area. Shows the widget library when nothing is selected, and the settings/style/advanced tabs when a widget, column, or section is selected. |
| Canvas | The live preview of your page. Click any element directly to select and edit it. |
| Top Bar | Contains the navigator, responsive preview buttons, undo/redo, and the Publish/Update button. |
| Right-click Menu | Right-click any element on the canvas for quick access to copy, paste, duplicate, save as template, and more. |
The Three-Layer Structure
Every Elementor page is built in three nested layers:
| Layer | Description |
|---|---|
| Section | The outermost container. Controls the full-width background, padding, and column layout. Click the blue handle at the top of any row to select the section. |
| Column | Lives inside a section. Controls the width, background, and padding of a vertical column. Click the grey handle at the top of a column to select it. |
| Widget | The actual content element (text, image, button, form, etc.) placed inside a column. Click directly on the element to select it. |
Sections can also be converted to Flexbox Containers in newer Elementor versions. The concept is the same — containers hold columns or widgets, and nesting controls layout.
Editing an Element
Click any element on the canvas to select it. The left panel switches to three tabs:
| Tab | Description |
|---|---|
| Content | Controls the actual content of the widget — text, images, links, items, and widget-specific options. |
| Style | Controls the visual appearance — typography, colours, borders, padding, spacing, and background. |
| Advanced | Controls margin/padding overrides, z-index, entrance animations, custom CSS, and responsive visibility. |
Adding New Widgets
- Click the + icon inside any column, or drag from the widget panel on the left.
- Search for a widget by name using the search box at the top of the widget panel.
- Drag a widget directly onto the canvas between existing elements to insert it at a specific position.
Saving & Publishing
| Action | Description |
|---|---|
| Update / Publish | Click the green button at the bottom of the left panel to save and publish your changes live. |
| Save as Draft | Use the arrow next to the Publish button to save without publishing. |
| Revision History | Elementor keeps a history of saves — access via the hamburger menu (top-left) → Revision History to roll back. |
| Undo / Redo | Use Ctrl+Z / Ctrl+Y or the arrows in the top bar. Undo history is per-session. |
📖 Official Docs: Elementor Editor Overview