Editing with Elementor

Meet the Elementor drag-and-drop frontend editor.

Drag-and-drop interface

To edit a certain page from the frontend, simply click Edit with Elementor on the admin bar. This will open the Elementor frontend editor.

Elementor Editor on the Corporate Order page

If you cannot find the Edit with Elementor link on the admin bar (or the link is not working), it means that the page was not built with Elementor. This applies to pages on Woocommerce such as the Shop, Collection Pages, Product Pages, Account, Login, Register, Cart, and Checkout. It is not advisable to edit these pages on your own.

You will notice that the interface is divided into two main areas:

• the narrow left panel - which has the controls

• the wide right panel - which has the editor's live preview

One of the main features of Elementor is that you can drag any item (called widget) from the left panel to the right panel, to add an element to your webpage.

For example, if we want to add a block of text to the page, we simply drag the Text Editor widget to the desired area on the page:

How to drag and drop a text block

Saving your changes

To preview your changes, click the view (👁️‍🗨️) icon at the bottom of the left panel:

preview button

To save your work, simply click the green Update button (also seen above).

Made a mistake while editing? Deleted something you need? Don't worry! Just press CTRL+Z or ⌘+Z to undo your changes. However, once you click Update, everything is permanent and cannot be undone. So be careful.

Now, let's go through some of widgets you will likely encounter when editing content on your website:

Paragraphs and headings

found on: About, Contact

Editing paragraphs and headings on Elementor is pretty straighforward. Simply click on the widget, and edit the content on the left panel.

Editing headings with Elementor

Background image

found on: Homepage

To change the background images, right-click on the preview area, and select Navigator. Select the column you want to edit, right-click on it, and select Edit Column.

How to choose a column to edit

Column 1 is on the left panel, Column 2 is on the right. Column 2 is the panel that shows on mobile.

To replace the photo, select style on the left control panel, click on the image preview, and choose an image from the media library.

You may also drag and drop an image to upload a new photo to the media library.

Adding a new image to the media library

Tabs

found on: Customer Care

On the left panel, select the title of the tab you want to edit. Make the changes you want on the title or text on the left panel.

Editing the tabs widget

You will need some basic knowledge of HTML to format the content area of the tabs.

Form

found on: Contact, Popup

On the left panel, select the field you want to edit. Here, you can change the Label, Placeholder, Required toggle, and Column Width.

How to edit form fields

Changing the field type is not recommended.

To change the text on the button, scroll down to the Buttons tab, and edit the Submit Text.

Editing the submit button text

To add an email address for receiving notifications, scroll down to the Email tab, and add/remove an email address in the To field.

Editing email notification recepients

You may enter multiple addresses as long as they are separated by a comma (,)

Popup

found on: Homepage

From the backend, go to Templates > Popups.

Going to the Popups Editor

Hover over the popup you wish to edit, and click Edit with Elementor.

Selecting the popup to edit

Edit the header, text, or form to your liking.

Useful Links

• Elementor Documentation

• Getting Started with Elementor (Youtube Video)

• Elementor 101 (Youtube Playlist)