help center

Search
Close this search box.
On this page

Explore the Elementor Editor

Last Update: February 15, 2024

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.  

Elementor Editor layout

The Editor consists of three main areas: the top bar, the panel, and the canvas.

2 labelled screen Explore the Elementor Editor 1

Top Bar

This is where you’ll find the tools and settings you need to build and customize your page. For more details about the options available from the top bar, see, Elementor Top Bar.

Panel

The panel is where you’ll find the design elements, such as containers, and widgets, such as the Heading widget, used to build your page. For more details about moving elements from the panel to the canvas, see Add elements to a page

The panel is also where you adjust the settings for elements, pages and the site. 

Canvas

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

If you want to increase canvas width, click the Hide Panel arrow to add more space.

Hide panel button Explore the Elementor Editor 3

There are different views you can use when working on pages. For more details about these different views, see Change canvas views.

If the page header and footer appear on your canvas, their color changes when you hover over them. 

Click inside either the header or footer, to switch from editing the page to editing that site part. 

Click the page area to return to editing that page. You are  prompted to save before switching.

Header and Footer highlighted Explore the Elementor Editor 5
A canvas with the Header and Footer highlighted.

Creating a container

  1. On the canvas, click the + icon.
    Clikc the Plus icon Explore the Elementor Editor 7

    You can now select a container layout.
    Add container Explore the Elementor Editor 9

  2. Choose the first container layout. This will create one container with a vertical layout.
    Clikc the top bar plus icon Explore the Elementor Editor 11
  3. On the top bar, click the plus icon.
    5 Drag Heading widget Explore the Elementor Editor 13
  4. From the panel, drag the Heading widget to the new containers.
    Enter my first container to heading Explore the Elementor Editor 15
  5. In the panel, in the title field, add the text; My first container.

Edit containers and widgets

To edit a container:
Clikc the container tab Explore the Elementor Editor 17

  • Click the settings icon Settings icon Explore the Elementor Editor 19  in the container tab.
    Three tabs layout Style Advanced Explore the Elementor Editor 21

The container settings menu opens in the panel with three tabs: Layout, Style and Advanced.

To edit a widget:
Clikc widget handle Explore the Elementor Editor 23

  • Click the widget handle.
    Three tabs Content Style Advanced Explore the Elementor Editor 25

The widget settings menu opens in the panel with three tabs: Content, Style and Advanced.

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