How to Use Elementor – Getting Started

Elementor is a visual website builder plugin for WordPress enabling the creation of web pages in a live, visual way. 

This step-by-step guide walks you through how to create a website using  Elementor.

---

Requirements Checklist

This is a quick checklist of requirements needed. For more details you may click here.

Installation Checklist (Core)

This checklist walks you through the entire process of installing and activating Elementor on your WordPress site. For additional information click here.

1. From the WordPress Dashboard, click Plugins > Add New.
2. In the Search field, enter Elementor and choose Elementor website builder to install.
3. If you have downloaded Elementor as a zip file, click the upload plugin button and use the file selector to install as a WP plugin
4. After installation, click Activate.

Skip to Connect To Library if not installing Elementor Pro at this time

Installation Checklist (Pro)

This checklist walks you through the entire process of installing and activating Elementor Pro on your WordPress site. For additional information click here.

1. After purchasing Elementor Pro, go to my.elementor.com
2. Login with the details you received in the email after purchase
3. After the login, you will reach the ‘My Account‘ page. Click on the Download Plugin button in the upper right of My Account section and download the .zip file to your desktop
4. Return to your site’s WordPress dashboard, and click on Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activate
5. On top of your site’s dashboard, you should get a message telling you to activate your license key.

Activation Checklist (Pro)

In order to activate all the Pro features, you need to have an active subscription and be able to log in to your account. It is no longer necessary to use a licence key and the input field was removed from the UI. If you require manual activation by key, contact support. Learn more here.

1. Go to Elementor > License. Click Connect & Activate
2. You’ll be redirected to log in to your account. Click Connect. After you log in, your license will be activated automatically via the on screen window
3. If the license key was installed correctly, the message on the top of your dashboard should disappear. 

Connect To The Library

The first time you insert a template, you will be prompted to connect your free Elementor account to access the Template Library. If you don’t yet have an account, you can register for a free account during this process. For more information about this, and why it is required, click here.

1. Click the connect to library button
2. You may be redirected to log in to your account. After you log in, click connect. Your connection will be granted automatically via the on screen window and you will return to the previous library
3. Once the connection has been made, you will be able to use Elementor templates, kits, and landing pages.

Using Elementor

If you are a new user of Elementor, these steps will help you understand the essentials of successful page-building. 

Create A New Page In WordPress

1. From the WordPress dashboard, click Pages > Add New
2. Name your page
3. Click the Publish button (Visibility options may be set if page is to remain private)
4. Click Edit with Elementor to enter the Elementor Website Builder

Edit Your First Page

Elementor uses three main building blocks: Sections, Columns, and Widgets. Sections are the largest building blocks, and inside them are groups of Columns. Columns sit inside of Sections and are used to house the Widgets. Widgets are placed inside of Columns. You control the Section, Column, and Widgets with their handle. Click the Preferences tab and slide the switch to Yes to show Editing Handles when hovering over the element’s edit button or No to hide the handles on hover.

Editing

To edit the Section, Column, or Widget, Right Click their handle. Learn more about Right Click

Sections

1. Click the + icon to create a Section, or click the folder icon to use a pre-designed Page or Block from our library
2. Set your Column structure 
3. Right click to Edit, Duplicate, Copy, Delete etc. 
4. Use the Section handle to: add a section, drag a section, or delete.

Columns

1. Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.
2. To add more Columns Right Click > Add New Column

Learn more about using columns here.

Widgets

1. Insert Widgets inside your Columns
2. A Widget’s width is automatically set by the Column width. For additional width control, you may use the custom width options by navigating to Advanced tab > Positioning
   

Copy or Delete All Content

You may Copy or Delete all content on your page by right clicking on the empty section near the add section and templates icons. You can also paste items in another page on the same website.

Adding Templates

Templates are pre-designed Pages & Blocks that can be inserted into any page with just one click.

1. From the editing screen, Click the folder icon
2. When the library of templates pops up, click the magnifying glass icon to preview a template.
3. Click INSERT to select the template of your choice.
4. You may also give your favorite templates a heart and save them to My Favorites.
5. Have a template you downloaded elsewhere that you want to use? Just click the up arrow icon in the top right corner to upload its .json or .zip file.

Mobile Responsive Editing

Many editable features have a Mobile, Tablet, and Desktop settings.  Most common uses include: Text size, Margin and Padding of elements etc.

1. Look for the Viewport Icon next to the individual element you wish to control. 
2. Click the specific device icon for which you want to edit its settings.

Controlling Responsive Background Images and Borders

Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.

1. Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
2. Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.

Visibility 

You can choose to Show / Hide a Section according to the device.

1. Go to Section Setting > Advanced > Responsive
2. Set your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.

When hiding an element, and switching to the view it’s hidden on, you will see that this element is “muted”. This gives you a clear indication that this element will be hidden on the live site, but still enables you to edit it as needed. 

You can edit that specific area in the responsive mode in which it is not hidden. For example, if the element is visible on mobile but hidden on desktop and tablet, you will be able to edit the element in the mobile view.

Change Mobile & Tablet Breakpoints

You can set the mobile and tablet breakpoint values.

1. From any Elementor page or post editor, click the hamburger menu in the upper left corner of the Widget Panel, then navigate to Site Settings > Layout > Breakpoints, and set the breakpoint value for mobile and tablet
2. Save your changes
3. Go to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files

Columns Ordering

This feature reverses the ordering of columns.

To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.

Device Preview

Switch between device views by clicking on the responsive editing icon on the bottom of the panel. The device previews will be located at the top of the editor.

Preview & Publish your page

After you’re done designing your page, you can Preview it and Publish it.

Go to the bottom panel:

1. To preview click the preview icon. 
2. If you are satisfied with the result, go ahead and click the publish button. 
3. Click ‘Have a Look‘ to view the published page

Note: The Preview link is different than the actual page link

Save as Draft

In Elementor you can edit a Published page and save your work as Draft. That means that you will not ruin your published page while saving your work as Draft.

1. Click the arrow next to Update / Publish
2. Choose Save Draft

We have a more holistic step-by-step guide showing the building process on our blog

Tip: By following these steps you’ll soon become a web design ninja.