Lesson 1 of 0
In Progress

Structure and Layout

Jared Lutz December 14, 2020

Here is a quick tour of the Elementor Editor, where you’ll discover the structure and layout of the Elementor Editor itself, as well as how to create your page’s layout and structure within the editor.

Welcome to Elementor

To start working with Elementor, click the Edit with Elementor button from any WordPress page or post editor. 

Elementor Editor Layout / Structure

The Elementor Editor includes 6 main areas. Match the numbers with the image below. 

1. Panel Header: Go to Global Site Settings using the hamburger menu on the left or Return to Widgets Panel using the dotted icon on the right.

2. Widgets/Widget Settings: Select a widget or modify a widget’s settings here 

3. Hide Panel / Preview Tab: Enables you to preview the page. Once clicked, it hides or shows the panel. 

4. Panel Toolbar: Contains several tools including Page Settings, Navigator, History, Responsive View, Preview Changes, Publish/Update

5. Content Area: A blank slate where you can drag and drop widgets, and design your page here. 

6. Add New Section/Template: Choose between creating a new section on your page using the Plus icon or inserting an existing pre-made template that is ready to edit using the Folder icon.

“Add New Section” Details

It is easy to add a new section to your page. This section will consist of one or more columns. Each column can consist of one or more widgets. Match the numbers with the image below.

1. Click the Plus icon to create a new section. 

2. Then select a structure / layout for your section  (1 column, 2 columns, 3 columns, etc.). Later, you can edit the exact width of every column. See image below.

“Add Template” Details

If you don’t want to start a new section from scratch, you can choose to insert a pre-designed section from the Template Library instead. Click the Folder icon to launch the  Template Library and insert an Elementor pre-designed template, a pre-designed section block, or one of your own saved templates. See image below.

Section / Column / Widget Details

Each section, column, and widget has options that can be modified. Right-click the section handle, column handle, or widget handle to open the options in the panel. Match the numbers with the image below.

1. Section: You can edit, duplicate or delete a section. You can also save it as a template or add a new section above. Right-click the section handle to modify section options.

2. Column: You can edit, duplicate, add or delete a column. You can also drag & drop it anywhere on your page. Right-click the column handle to modify column options.

3. Widget: Click the content to edit, duplicate or delete a widget. You can also save it as a Global Widget. Right-click the widget handle to modify widget options.

4. Resize Column: Drag dotted vertical column borders right & left to change the width of your columns. 

5. Add Widget: Drag a widget from the left panel and drop it into a column.

Edit Widgets and Save Changes

Learn how to modify widget options, save changes to your page, and view your live page. Match the numbers with the image below.

1. To edit a widget, click the Pencil icon, which is the widget’s handle. 

2. On the Panel header, you can choose to edit the widget’s content and style. 

3. Every widget has different settings. Adjust the elements as needed.

4. You can save / update your current changes at any stage. 

5. When you have finished designing, click the hamburger menu in the Panel header and click View Page to see your live page.

Responsive Mode Details

Elementor makes responsive sites easy. View how your page will look in different devices using the Responsive Mode viewer. Adjust specific elements on the page for different devices in Panel options, if the option has a device icon next to it. Match the numbers with the image below.

1. To view how the page looks like on different devices, click on the Responsive Mode icon, in the Panel toolbar. 

2. Choose between the different devices from the popup menu.

3. Only elements that have a device icon next to them can be modified per device. If you change an element that does not have a device icon next to it, the change will affect all devices (desktop, tablet, and mobile).