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
- Post Types: Choose where Elementor can be used. If checked, the Edit with Elementor button will be available for that post type. If unchecked, the post type cannot be edited with Elementor.
- Disable Default Colors: Choose whether to use your theme’s color settings or let Elementor control it
- Disable Default Fonts: Choose whether to use your theme’s typography settings or let Elementor control it
- Improve Elementor > Usage Data Tracking: By enabling this, you will help us learn about the way you are using Elementor and help us improve
The Style settings that used to be here have changed its location and can now be found within Elementor Editor’s Panel > Hamburger Menu > Site Settings. You can use the Site Settings to make changes and see them live!
The Integrations settings allow you to optionally connect Elementor with 3rd-party APIs as needed.
- reCAPTCHA: reCAPTCHA is a free service by Google that protects your website from spam and abuse. Paste your reCAPTCHA Site Key and Secret Key here
- reCAPTCHA v3: reCAPTCHA v3 is a free service by Google that protects your website from spam and abuse. Paste your reCAPTCHA Site Key and Secret Key here and enter your Score Threshold. The Score threshold should be a value between 0 and 1. The default is 0.5
- Facebook SDK: Facebook SDK lets you connect to your dedicated application so you can track the Facebook Widgets analytics on your site. Enter your APP ID here
- Mailchimp: Enter your API Key and then click the Validate API Key button to integrate Mailchimp with Elementor’s Form widget
- Drip: Enter your API Token and then click the Validate API Token button to integrate Drip with Elementor’s Form widget
- ActiveCampaign: Enter your API Key and API URL and then click the Validate API Key button to integrate ActiveCampaign with Elementor’s Form widget
- GetResponse: Enter your API Key and then click the Validate API Key button to integrate GetResponse with Elementor’s Form widget
- ConvertKit: Enter your API Key and then click the Validate API Key button to integrate ConvertKit with Elementor’s Form widget
- MailerLite: Enter your API Key and then click the Validate API Key button to integrate MailerLite with Elementor’s Form widget
- Woocommerce Mini Cart Template: Set to Disable in order to use your theme’s or WooCommerce’s mini cart template instead of Elementor’s
- TypeKit: Integrates TypeKit’s thousands of fonts into Elementor. Enter your TypeKit Project ID and then click the Get Project ID button
- Font Awesome Pro: Enter your Font Awesome Pro Kit ID and then click the Validate Kit ID button
- CSS Print Method: Choose if your CSS will be included as an independent stylesheet (recommended) or on each page
- Switch Editor Loader Method: In cases of server configuration conflicts, enable this option*
- Editing Handles: Show or hide editing handles when hovering over the element’s edit button
- Enable Unfiltered File Uploads: Enable or disable the ability to upload SVG, JSON, and other unfiltered files. Please note! Allowing uploads of any files (SVG and JSON included) is a potential security risk. Elementor will try to sanitize the unfiltered files, removing potential malicious code and scripts, however, we recommend you only enable this feature if you understand the security risks involved.
- Optimized DOM Output: Select Enable to use the optimized DOM output, which removes several HTML wrappers from output. By default, this is only enabled on new sites created with Elementor 3.0+. Sites upgraded to 3.0 from a previous version should be set to Disable by default to avoid causing site layouts breaking.
- Load Font Awesome 4 Support: Choose Yes or No. Font Awesome 4 support script (shim.js) is a script that makes sure all previously selected Font Awesome 4 icons are displayed correctly while using Font Awesome 5 library.
* Switch Editor Loader Method is useful in solving the “err_content_decoding_failed” and err_empty_response” issues that sometimes occur. Enabling this option helps users running sites on servers with low resources which have difficulty reading long JSON code. When enabled, the tool splits the lines so that these servers can read the JSON code without issues. Switching to this method won’t negatively affect performance. Instead, it will likely improve performance. This tool can also be useful sometimes in solving the white screen of death.
This option is important, given that we sometimes need this information to assist you when you experience a bug.
You can find your System Info from your WordPress Dashboard’s menu by going to Elementor > System Info
The system info includes information about your Server and your WordPress environment.
The system info can be copied and pasted into an email or downloaded as a .txt file that can be attached to the email.