Elementor Editor Panel

Elementor Editor Panel
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 23/12/2023

Review of the Elementor Editor Panel

In this article, we will cover all of the main components of the Elementor Editor Panel and how to add widgets to your page. This side editor is a responsive editor window which adapts to the Widget or Container you’re editing. It consists of three principles: Content, Style and Advanced.

What is Elementor’s Editor Panel?

Elementor Editor Panel allows you to easily drag and drop Widgets onto your page whilst giving you the ability to edit them in real-time! This is called What You See is What You Get (WYSIWYG) web building and can dramatically speed up the building process. This feature allows the designer to make changes and see the site update in real time. 

Each Widget has three basic principles applied to it:

  1. Content – What it is
    (or Layout if you’re editing a Container)
  2. Style – How it looks
  3. Advanced – Other

These three settings can help you manipulate any Widget to fit your needs.

To add a Widget, select the top right icon on the editor box and your Widget window will open. Select the Widget you require, drag it into the right page editor window and release. You will notice the side panel now displays content, style and advanced relating to the widget.

Elementor Editor Panel

Along the bottom, we have another navigation bar in grey. This bar contains elements like Settings, History and Preview Changes

Introduction to Elementor Editor Panel Widgets

Due to Elementor’s popularity, there is a Widget for everything. Straight out of the box, Elementor has a wide range of free and paid-for Widgets. These can be used on their own as well as in conjunction with other widgets to form more complex features. Here are some widgets on the free Elementor plan:

Basic Elementor Widget list

Recommended Reading: What are Widgets?

As you can see there’s a lot! As you add more plugins to your website this will also increase.

Introduction to the Content Tab

To begin editing a Widget’s content, you must first select the Widget. This will then change the Editor and display the relative settings. As the name suggests, Content is the section that deals with what the Widget “is”. 

For example a Text Editor’s content would be the text itself. With an image this would be the image itself as well as its alignment. Below are a few screenshots to show the different types of content available:

Elementor Editor Panel - Content Tab

Recommended Reading: Building Pages with Elementor Containers

Introduction to the Style Tab

Looking at the Elementor Editor Panel, the Style tab is how your content appears visually. You can’t have style without content. For your Editor to display the Widget in the editor’s section, there needs to be some content available. This is called a placeholder. A placeholder is a default for your Widget to fall back to if there’s no information available i.e. a line of text or an image of some kind.

In Style, you can change how the image or text looks on your website. This can range from size, font type, colour, borders and much more. Below are a few examples of what can be edited with Style:

Elementor Editor Panel - Style Tab

Introduction to the Advanced Tab

The advanced tab contains some of the more important features. Some of these include Widget positioning, additional background settings and even motion effects such as fading in and out. In this section, we will be covering the two most important settings: Advanced (Margin and padding) and Responsive. Some examples of the advanced settings are shown below:

Elementor Editor Panel - Advanced Tab

Margin and Padding

Margin and padding determine the space between your Widget or Container. By increasing or decreasing the values here, you can adjust the widget’s location on the page. 

Margin

The margin is the distance from the edge of the element you’re editing to the edge of its container. For example, a Widget’s margin would be from the edge of the Widget to the container. The container margin would be from the edge of the container to the edge of the screen. 

Padding

Padding works similarly to margin. However, padding works inwards. If you increase the padding around a widget it will appear to shrink as you are increasing the space between the Widget and the edge of the Widget. This is also true for columns and sections.

For a more in depth tutorial of margin and padding, follow the link below.

Recommended Reading: Margin and Padding

Responsive

The responsive setting is often overlooked by beginners but it is an important one. Responsive web design is how your website appears on devices such as mobiles and tablets. In advanced settings you will be able to change some minor settings for these devices. However, the majority of the editing is done through the bottom bar. See information below.

Recommended Reading: Creating Responsive Websites with Elementor

Editor Bottom Bar

In the bottom bar you will see 5 icons and a large green Update button. These icons are:

Page Settings

Page settings can assist you with changes like page title and your SEO. However, we always recommend setting these up in your page editor before you mount Elementor to your page. You can then tweak or add to it here in Page Settings.

Editing Page settings with Elementor

Recommended Reading: Adding a New Page/Post

Navigator

Your navigator will help you select Widgets and Containers on your page. You can also toggle sections on and off by clicking the eye icon on the Navigator popup window. This tool is especially useful if you have overlapping elements that are hard to select by conventional clicking.

History

As the name suggests, with History you will be able to jump back and forth between previous changes that you have made.

Responsive Mode

Briefly touched upon above, Responsive Mode is how to view and edit your website for desktop, mobile or tablet. You can make device specific changes changes here.

Preview

Preview is a great tool as it allows you to see changes to your website in real-time. As you make changes, click Update and then the Preview icon. This will open a new tab with your live version of your website. If you keep this tab open and switch back to your previous editing tab, you can continue to make changes. As you update the second time, your Preview tab will automatically refresh when your editor has updated and show you the most up-to-date version of your site.

Web Hosting

From £19.95 /mo