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.
I have WP version 5.2 or greater
I have PHP version 7.0 or greater
I have MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
I have WP Memory limit of 128 MB or greater (256 MB or higher is preferred)
I have the correct folder permissions granted on my server
I have new versions of Chrome, Firefox, Safari, or Microsoft Edge version 79 or greater
I have access to a desktop or laptop computer
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.
From the WordPress Dashboard, click Plugins > Add New.In the Search field, enter Elementor and choose Elementor website builder to install.If you have downloaded Elementor as a zip file, click the upload plugin button and use the file selector to install as a WP pluginAfter 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.
After purchasing Elementor Pro, go to my.elementor.comLogin with the details you received in the email after purchaseAfter 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 desktopReturn to your site』s WordPress dashboard, and click on Plugins > Add New. Choose the zip file you have just downloaded. Click on install and activateOn 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.
Go to Elementor > License. Click Connect & ActivateYou』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 windowIf 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.
Click the connect to library buttonYou 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 libraryOnce 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
From the WordPress dashboard, click Pages > Add NewName your pageClick the Publish button (Visibility options may be set if page is to remain private)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
Click the + icon to create a Section, or click the folder icon to use a pre-designed Page or Block from our librarySet your Column structure Right click to Edit, Duplicate, Copy, Delete etc. Use the Section handle to: add a section, drag a section, or delete.
Columns
Set the Columns Width. You can do it under Layout, or drag the dashed line between the Columns.To add more Columns Right Click > Add New Column
Learn more about using columns here.
Widgets
Insert Widgets inside your ColumnsA 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.
From the editing screen, Click the folder iconWhen the library of templates pops up, click the magnifying glass icon to preview a template.Click INSERT to select the template of your choice.You may also give your favorite templates a heart and save them to My Favorites.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.
Look for the Viewport Icon next to the individual element you wish to control. 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.
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.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.
Go to Section Setting > Advanced > ResponsiveSet 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.
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 tabletSave your changesGo 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:
To preview click the preview icon. If you are satisfied with the result, go ahead and click the publish button. 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.
Click the arrow next to Update / PublishChoose 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.