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 top bar (where you add elements, open settings, preview and publish), the left panel (where you find widgets and settings), and the canvas (where your page content lives). 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, page and site settings
Canvas	Main area of the screen	Your actual page — click anything to select and edit it
Top bar	Very top of the screen	Add elements, settings, history, device views, preview and publishing

The left panel

The left panel is where most of your editing work happens. It has two main states:

Click Add Element (the + icon in the top bar) and the left panel shows the widget library. Widgets are the building blocks of Elementor — they include text, images, buttons, video players, forms, and more. Drag a widget onto the canvas to add it, or select a spot on the canvas first and then click the widget.

You can search for widgets by name in the search bar in the panel.

Element settings view

When you click an element on the canvas, the left panel switches to show that element's settings. On most widgets 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 — spacing, motion effects, visibility on each device, and custom CSS (Elementor Pro, Advanced plan or higher)

Containers have Layout, Style and Advanced tabs instead. Newer elements from Elementor's V4 editor have just two tabs: General and Style.

To go back to the widget library, click + (Add Element) in the top bar.

The canvas

The canvas is the main working area. It shows your page almost exactly as it will appear to visitors. To check exactly what visitors will see, use Preview in the top bar.

Click any element to select it and open its settings in the left panel.
Right-click an element (the tab of a container, or the corner of a widget) to get a quick action menu (duplicate, copy, delete, etc.).
Hover over a container (or a section or column on older layouts) to see its handle appear, with buttons for adding, editing and deleting.

The top bar

The bar running across the very top of the editor has several important controls.

Left side of the top bar

Elementor logo — opens a menu with Site Settings (where Global Colors and Global Fonts live), Theme Builder, User Preferences, Keyboard Shortcuts, and Exit to WordPress
Add Element (+) — shows the widget library in the left panel
Page Settings — settings for this page, such as its title, status and layout
History (clock icon) — see and undo your recent actions, and restore saved revisions

Right side of the top bar

From the middle of the bar to the right:

Responsive views — switch between desktop, tablet, and mobile views
Finder — quickly find or create pages, posts and templates
Structure — opens a tree view of every element on the page (older versions called this the Navigator)
Preview — see your page the way visitors will, before you publish
Publish / Update button — save and publish your changes. The arrow next to it offers Save Draft and Save as Template.

The bottom bar

Older versions of Elementor had a narrow bar at the bottom of the left panel, with icons for tools such as the Navigator and page settings. In current versions, those tools are in the top bar instead:

Navigator is now Structure (shortcut: Ctrl+I on Windows, Cmd+I on Mac)
Settings (the cog icon) is now Page Settings

To switch between desktop, tablet and mobile views, use Responsive views in the top bar. Some Elementor articles still call it the Responsive Mode icon.

Right-click menus

Right-clicking on an 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
Paste style — to copy only the visual styling, Copy one element, then right-click another and choose Paste style
Save as Template — save a container or section for future reuse (widgets offer Save as global instead, an Elementor Pro feature)
Structure — opens the Structure window at that element
Delete — remove the element

Right-click menus vary by element type

Containers, 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

The left panel disappeared — how do I get it back?

It was probably hidden with the Hide Panel arrow, which gives the canvas more room. Press Ctrl+P (Windows) or Cmd+P (Mac) to show it again.

Click + (Add Element) in the top bar, then type the name of the widget in the search bar in the panel. If it's a Pro widget, it needs Elementor Pro, which may or may not be installed on your site. Pro widgets also can't be added if the Pro license hasn't been activated or has expired.

What is the difference between Content, Style, and Advanced tabs?

Content holds the actual data (the text you type, the image you choose). Style controls how it looks (colors, fonts, spacing). Advanced holds technical options you will rarely need as a content editor. Newer V4 elements put their content options on a General tab and have no Advanced tab.

How do I undo a change?

Use the keyboard shortcut Ctrl+Z (Windows) / Cmd+Z (Mac). To redo, press Ctrl+Shift+Z / Cmd+Shift+Z. You can also open History in the top bar to see and undo your recent actions. For bigger rollbacks, use the revisions in the History panel — see Undoing changes with revision history.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.