Elementor is a Freemium Drag & Drop page builder for WordPress, meaning there are both free and paid versions with extra features. Launched in 2016, it has over 3,000,000 active installations and a 4.9 Star rating on the WordPress.org Elementor Plugin Page (here). It’s able to take what 10 years ago would have been months of development down to a few hours of drag and drop, no coding required.
This guide is aimed at complete Elementor beginners and not only will get you on your feet with Elementor, it’ll get you running!
If you don’t already have a website you may want to check out my other tutorial on setting up WordPress.
Why Use Elementor
It can’t be overstated how valuable having a good page builder is in WordPress. There is good competition for #1 page builder right now, my top few being Elementor, Divi Builder and Beaver Builder. However, out of these 3 I find I keep coming back to Elementor as a favorite.
It’s clean elegant drag and drop interface makes content creation a breeze. Snapping the elements where you want them is easy and there is a plethora of Widgets and Templates for you to choose from every step of the way.
What Can I Make With Elementor?
Why I’m glad you asked, here is a list of things you can make, all with the drag and drop editor!
- Blog Posts and Pages
- Header and Footer
- Contact and Opt-in forms
- WooCommerce Products and cart (Full Integration)
- Popup Builder
- Widgets
- Much much more!
You can effectively redesign your entire theme with this plugin.
Advantages of Going Pro
While free Elementor is very powerful in itself, it does bind you within your themes limitation. Here I’ll outline some of the main selling points for Elementor Pro.
- Theme Builder allows customization of all theme aspects, with any theme. This means you can replace your themes header, footer, archive and category pages.
- WooCommerce Builder allows you to build your product pages, categories and cart.
- Popup builder lets you make custom popups for email marketing.
- Global Widgets enable reuse of widgets site wide, meaning you can edit them in 1 location and they update everywhere.
- Contact form design with the forms widget.
- Many professional looking Templates and Blocks to choose from.
I will be using Elementor Pro for this guide. However there are many parts you can follow along with if you’re using the free version.
Choosing A Theme
You can use almost any theme with without much trouble Elementor however here is a list of themes that work best. You can customize to the extent that the theme doesn’t matter very much. Once you create your own headers, footers, archive pages etc, there really isn’t much left of the theme.
My blog at the time of writing is using the stock Twenty Nineteen theme but you wouldn’t know it.
For my example site I will use the OceanWP Theme.
Install Elementor
Installation is easy as it’s in the plugin store. Go to Plugins > Add New, Search for Elementor, click Install and once it’s done Activate.
If you’re planning on using Elementor Pro you will need to purchase it from here. Click pricing at the top of their page to view plans and purchase.
If you use my affiliate link I’ll get a kickback, that covers the time it takes to make these guides.
After purchase, you need to download the Pro version from their website on your account page.
Now, back on to your WordPress Website, go to Plugins > Add New. On the top of the page click Upload Plugin and select the file you downloaded before. Install and activate it.
From here go to the Plugins page and select Connect & Activate.
From here you have to click Connect & Activate. You’ll be redirected to confirm and then directed back to your site. At this point you should see a page like this.
Elementor Pro is now active, you have all features unlocked and at your disposal!
Page and Post Building
To create a page using Elementor you can go to your regular edit page and click the big blue button up top. Note: posts and pages are edited in the exact same method.
On pages you have previously used Elementor on you have a shortcut on the top bar of the page to edit directly.
Editing the page itself is done by dragging elements from the left hand pane to the page itself.
Dragging elements on top of an existing page element allows you to place it above or below the existing page element.
Clicking on a page element gives you a new left pane. These are unique for each element. In this image you can see the Edit Heading pane.
At any time, if you want to go back to the list of elements to add, you can click the little box of boxes in the top right of the left pane.
Everything can be added using this same method. For example, adding a contact form to your page can be done by dragging the Form element in.
Posts are created in the exact same methods described above.
Templates
Adding A Template
To add a template to a page or post click the Add Template button shown below.
Here you can search for and select any theme from the list. You can use the example images commercially or change them to suit your needs.
Type in what you would like to search for and choose one of your liking.
Click insert and watch the magic happen. You’ll be able to edit any of the templates with ease to suit your liking. They’re extremely easy to customize once you have your head around the basics of the Elementor editor.
Archive Page Template
In your WordPress dashboard under Elementor there is a Templates tab. In the following example I’ll show you how to create an Archives page from a Template.
Go to Templates > Add New
From the drop down box select Archive and type a name in.
You’ll see a list of archive page templates here. I’m going to go with the first one.
It will present you with the editing pane on the right of your new page. However you’ll notice some new options.
When creating an Archive page you’re presented with new options. This also happens when creating store pages, product pages, etc. Unique elements for these pages are given as options for you to use.
Clicking Publish brings up a new page. The Publish Settings page allows you to set conditions for where you want this page to display. Click ADD CONDITION and you’ll see this menu.
Choosing Categories for example will only show this page if people click to view all posts of a certain category. All Archives is the simple option here as it’ll show for all of the below types.
Additional Customization
There are loads of additional customization options. I will cover creating a custom header and changing fonts.
Header
Similar to the Archives page, go Templates > Add New. Select Header from the drop down list and name your header.
Once you click CREATE TEMPLATE you can select if you would like to start with one of their templates. If you want to work from a blank canvas then you can click the X in the top right.
I will go with a blank canvas and build it up myself. Starting with an Inner Section to divide up the columns needed.
By right clicking in the dividing line I can choose to add a 3rd column.
On the left hand side you can see the custom elements for creating your header. In the first column I drag in the Site Title element. Also, I’ll go in to the Style tab and change how it looks.
The middle column will be the menu so I’ll drag the Nav Menu to the middle. In the final 3rd column I’ll put social media links. Search for social and drag Social Icons to that final column.
At this point you should have a header looking similar to mine.
Publish it and choose the condition called Entire Site. All done! Footers are made in the exact same way, I believe it should be easy to work out by now.
Fonts
Go to Elementor > Settings. Look for the Disable Default Fonts checkbox and untick it.
From here go any page or post’s Edit With Elementor page and click on the top left menu.
Click on Default Fonts and expand down the 4 boxes.
You can change your site wide fonts and thickness here.
Thanks for reading up until the end. If you find this content useful drop a comment down below to let me know. Any feedback is greatly appreciated.
Good luck with your website!