help center

On this page

Explore the Elementor Editor

Last Update: September 21, 2023

Whether you’re building your site from scratch or using one of our website kits, you’ll need to learn how to use the Elementor Editor. We’ll start by going over the basic layout of the editor.  

How do I get there?

There are two ways to open the Elementor Editor:

  1. Go to your My Elementor dashboard.
  2. Log into your Elementor site.
  3. Choose the website you’d like to edit and click Edit with Elementor.

Or

Create/Edit a page using Edit with Elementor

What’s the structure of the Elementor Editor?

The editor consists of 2 main areas: the Panel and the Canvas.

IYtgeuHBUtCDkiekcV7HO1IfdidMvhdYCec3qyy98OawPSl5A6AJ xR5v qMgL1ngZkRPFnYUtMpxZZQIUUVztvkYycg xtwtOSDfzpGlmbbQkuq 4CRUdjtdsskV7dpFf2HYb9r967j DSA Explore the Elementor Editor 1

Panel

This is where you’ll find all of the tools and settings you need to edit and customize your site. When you can see widgets on the panel, it’s called a Widget Panel. After you’ve selected an element (widget, section or column), this panel is where you’ll edit the element. When you’re editing an element, it’s called the Editing Panel

What else can I do in the panel?

The hamburger icon allows you to change the settings, view the page as a visitor, or exit to your WordPress dashboard. 

Hamburger icon Explore the Elementor Editor 3
The Hamburger icon

The widget icon allows you to view all available widgets anytime you need.

Widget Panel icon Explore the Elementor Editor 5
The Widget icon

Page Settings allows you to set your page’s name, featured image, and general layout.

Page Settings 2 Explore the Elementor Editor 7
The page settings icon

Navigator allows you to access, edit, and reorder elements on your page.

Navigator Explore the Elementor Editor 9
The Navigator icon

History automatically tracks all changes you’ve made to your page. It also allows you to undo edits or restore your page to an earlier version.

History Explore the Elementor Editor 11
The History icon

Responsive Mode allows you to preview how your site will look on a desktop browser, tablet, and on mobile. This way, you can make any changes you need to ensure your site looks perfect across all browsers and devices. 

Respove Mode Explore the Elementor Editor 13
The Responsive Mode icon

Preview Changes allows you to see the website from the visitor’s point of view. 

Preview Explore the Elementor Editor 15
The Preview icon

Preview/Update allows you to save your page or make any changes visible and live on your site.

Publish Explore the Elementor Editor 17
The Publish button

Canvas

The canvas is also known as the Content Area. This is where you’ll create your page/post/site part.

If you have made a header and footer, they will appear on the canvas as well. When you mouse over the header or footer, their color changes.  

Click inside either the header or footer, to switch to edit mode.

 As you hover over different parts of the page, each part changes color.

Click the page area to return to its edit mode.  -You are  prompted to save before switching.

tour 1 Explore the Elementor Editor 19
A canvas with the Header and Footer highlighted.

Creating sections

Let’s create a simple section in just four steps:

  1. Click the “+” icon to create a section (The folder icon is used to create a section by importing a template).
  2. Select the column structure.

    tour 2 Explore the Elementor Editor 21
    Explore the Elementor Editor 27
  3. Click your chosen widget from the Widget Panel.
  4. Drag and drop it into the column you want.
    tour 3 Explore the Elementor Editor 23

How do I edit sections, columns and widgets?

Click on the handle any element in the canvas to open its menu.

Selecting a Widget will open 3 tabs on the panel: Content, Style and Advanced.

Selecting a Section or Column will open the panel with Layout, Style and Advanced

vKhaMXapzw3Ms72E9DawyxhiDlSyZh r5AqxvdlfKPdFp IAKtrUodfGVItwJL6eFUoTgLcmxUHWIeY6fXHXb6LJuM4rUMZ i4VfWl3m138WR4JnRVxWVgUo0vTbtk D 29cBQJQE0nhi0zo Explore the Elementor Editor 25

For more information on widgets, head over to: https://elementor.com/help/widgets/

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds