A tour of the Elementor interface
Learn what every part of the Elementor editor does — the panel, the canvas, the top bar, and the right-click menu.
When you first open Elementor, the screen might look unfamiliar. This guide walks through every area of the editor so you know exactly what each part does and where to find things.
Quick summary
The Elementor editor has three main areas: the left panel (where you find widgets and settings), the canvas (where your page content lives), and the top bar (where you publish and preview). You work mainly by clicking elements on the canvas and adjusting settings in the left panel.
The three main areas
Here is an overview of how the editor is divided:
| Area | Where it is | What it does |
|---|---|---|
| Left panel | Left side of the screen | Browse widgets, edit element settings |
| Canvas | Center of the screen | Your actual page — click anything to select and edit it |
| Top bar | Very top of the screen | Publishing, preview modes, undo/redo, settings |
The left panel
The left panel is where most of your editing work happens. It has two main states:
Widget library view
When nothing on the canvas is selected, the left panel shows the widget library. Widgets are the building blocks of Elementor — they include text, images, buttons, video players, forms, and more.
You can search for widgets by name in the search bar at the top of the panel.
Element settings view
When you click an element on the canvas, the left panel switches to show that element's settings. You will see three tabs:
- Content — the actual text, image, or data inside the element
- Style — visual properties like color, font size, padding, and borders
- Advanced — motion effects, custom CSS, and visibility rules
Click the back arrow (top left of the panel) to return to the widget library.
The canvas
The canvas is the main working area. It shows your page exactly as it will appear to visitors — almost.
- Click any element to select it and open its settings in the left panel.
- Right-click any element to get a quick action menu (duplicate, delete, save as template, etc.).
- Hover over a section or column to see its blue border and action buttons appear.
The canvas uses your live site's styles, so what you see is very close to what visitors will see.
The top bar
The bar running across the very top of the editor has several important controls.
Left side of the top bar
- Hamburger menu (three lines) — site-wide settings including Global Colors, Global Fonts, and other options
- Arrow buttons — undo and redo your recent actions
Right side of the top bar
- Eye icon — preview your page in the browser without publishing
- Device icons — switch between desktop, tablet, and mobile views
- History (clock icon) — view and restore previous revisions
- Update / Publish button — save and publish your changes
The bottom bar
At the very bottom of the canvas area is a narrow bar with additional tools:
- Navigator icon — opens the Navigator panel, which lists every element on the page in a tree view
- Responsive mode — another way to switch device views
- Settings — page-level settings (background, layout width, etc.)
Right-click menus
Right-clicking on any element gives you a context menu with quick actions:
- Edit — opens the element settings in the left panel
- Duplicate — makes a copy of the element
- Copy / Paste — copy an element and paste it elsewhere
- Copy Style / Paste Style — copy only the visual styling to apply to another element
- Save as Template — save the element or section for future reuse
- Delete — remove the element
Right-click menus vary by element type
Sections, columns, and individual widgets each have slightly different right-click options. If an option you expect is missing, you may have right-clicked the wrong element — try clicking more precisely on the element you want.
Common questions
Related guides
- What is Elementor?
- Sections, columns & widgets explained
- Using the Navigator to find elements
- Undoing changes with revision history
- Publishing & updating your page
Need a hand?