Elementor is a free page builder plugin for WordPress that initially launched in June 2016 and quickly took the WordPress community by storm – it’s now currently sitting at over 1.2 million downloads. It’s brought a lot of competition into the page building niche that’s growing in WordPress by offering a live, front-end editor free of charge.
Elementor seeks to improve upon other page builders which while giving the user lots of options can offer a poor experience in the end, for example a lot of page builders use a bloated next of shortcodes to build the layouts and if you change themes you are left with a mess on your page – Elementor let’s you switch themes at will.
These drag and drop page builders ensure WordPress stays competitive with platforms like Squarespace and Wix, so we thought we’d offer a tutorial demonstrating how to use it to build a WordPress site from “scratch” even if you don’t know how to write a single line of HTML or CSS.
Let’s get started.
The Anatomy of a WordPress Site
- 1 The Anatomy of a WordPress Site
- 2 Choosing a Theme
- 3 Installation & Setup
- 4 Installing Elementor
- 5 Preparing Your Theme
- 6 Creating a Front Page in WordPress
- 7 How to Build a WordPress Site with Elementor
- 8 Final Thoughts
A live WordPress site has four basic parts:
- Web Server
Most WordPress sites will also need a few different plugins to function as well as it possibly can, but those are the four basic parts you’ll need to get your site live and viewable.
If you’re new to WordPress and new to hosting your own website in general, check out our post comparing the top WordPress hosts in the industry. If you’re not sure how to get started, check out one of our How to Start a Blog posts to view instructions on how to purchase a web server from Bluehost and install WordPress.
Once you have a server to work with and have installed WordPress on it, you’ll be good to go for the rest of this tutorial.
Choosing a Theme
The purpose of this tutorial is to build a website with Elementor, so the only prerequisite the theme you choose needs to have is compatibility with this plugin. The developers of Elementor have created their own list of themes that are compatible with their plugin. You can check it out here. Here are our top picks from this list.
It should also be noted that Elementor will technically work with any theme, but it’s best to use an optimized theme when you’re using it to build an entire website and not a few pages.
Pojo.me is another company the developers of Elementor have created to release themes made to be 100% compatible with this plugin. If you choose a Pojo theme, you’re choosing a theme developed by the same people who made Elementor.
You can check out the collection here. Each theme is $59.
OceanWP is a free WordPress theme not developed by the developers of Elementor themselves but still made to be compatible with the plugin. It comes with a customizable header and footer. You more or less dictate the rest of the design with Elementor. It does come with a number of different demos, which you can check out at the developer’s official website.
GeneratePress is a free starter theme for WordPress. It wasn’t built specifically for Elementor, but it’s been praised for its compatibility with the plugin. It’s similar to OceanWP in that it sets up a header and footer for you and allows you to take care of the rest.
Installation & Setup
Once you decide on a theme, you need to install it and set it up. If you purchased a Pojo theme, you’ll need to download the installation file, and install it that way. If you decide to go with one of the free themes we mentioned, you can install those directly within WordPress by going to Appearance → Themes → Add New and typing “oceanwp” or “generatepress” in the search bar.
If you’re using the OceanWP theme, you’ll need to install the Ocean Extra plugin in order to use the theme. There should be an alert that contains a link you can use to install this plugin as soon as you activate the theme.
You’ll want to install Elementor itself after that.
Elementor is a free WordPress plugin, so all you need to do to install it is go to Plugins → Add New → search for “elementor,” install the plugin, and activate it.
Preparing Your Theme
If you purchased a premium theme for Elementor, search through the developer’s support website or the ZIP folder for the theme to find its documentation. This documentation should contain more information on how to use the individual theme you purchased.
Let’s learn what to do next with free themes OceanWP and GeneratePress. Here’s what the front page of your site will look like immediately after activating OceanWP and Elementor.
Here’s what GeneratePress and Elementor look like initially.
This is great because it gives you a stripped-down version of WordPress. You can customize your pages, especially your homepage, to your liking with the power of Elementor. We need to prep first, however. We’ll do that by configuring our header and footer using these two themes.
We’re going to build a homepage in this tutorial, so let’s start by eliminating the sidebar. Go to Appearance → Widgets no matter which theme you’re using. Delete all of the widgets in the “Sidebar” widget area in OceanWP and the “Right Sidebar” widget area in GeneratePress.
Before we move forward, we should note that OceanWP does come with free and premium demos you can use if you’d simply prefer to import a completed design rather than fumbling around with the header and footer settings yourself. Visit these resources to learn more about using OceanWP demos:
Creating a Front Page in WordPress
We need to create a homepage and set it as our front page. You likely already know how to do this if you’re experienced with WordPress. Follow along if you’re new to the platform.
- Create a new page.
- Name the page “Home”.
- Publish the page.
- Go to Settings → Reading, and set “Home” as your front page.
- Save your changes.
Here’s what you have with OceanWP after that.
And here’s GeneratePress.
You’ll need to edit your Home page and choose “Content (no sidebars)” as a Sidebar Layout to remove the Archives sidebar in GeneratePress.
Let’s get the header and footer situated.
Open your theme’s live theme customizer. There are two layers each for the header and footer in OceanWP. They are the Top Bar, Header, Footer Widgets and Footer Bottom. The top bar is a great feature to use if you want to store your contact information, social media links or submenu in the header.
Give it some content to start out with. You can use icons from Font Awesome.
Make sure you save and publish your changes before moving on. You can also add your social media accounts.
You can play around with the colors of the top bar after this using the General and Social sections.
Save your changes, and go back into the backend of WordPress. Create a few additional few pages you know you’re going to use on your site, such as Blog, Contact and About. Use them to create a menu you can use for the rest of the header. Make sure you select “Main” as a display location under the Menu Settings.
You can play around with the Header settings after this to get the header to look the way you want it to. Feel free to upload your own logo as well.
For the footer, you’ll want to go back into the backend of WordPress, open the Widgets screen, and add/configure a few widgets in the footer widget areas. You can style it after that. You’ll need to navigate to General Options → General Styling in the live theme customizer to customize the colors of the bars next to the footer widget headers.
Let’s go over how to set up the GeneratePress theme before we continue.
GeneratePress is a lot simpler to use than OceanWP, so if you followed along with OceanWP just fine, you’ll do alright with GeneratePress. I simply added all of my widgets and configured a few style settings to complete the header.
One thing to note is you’ll have to open the page editor for the Home page and select the number of footer widgets you need. You can use up to five widget areas.
Let’s get to Elementor.
How to Build a WordPress Site with Elementor
If you’re using OceanWP, open the page editor for the Home page, and scroll down to the OceanWP Settings section. Choose 100% Full Width for the Content Layout, and disable the page title. This prevents the word “Home” from appearing at the top of the page.
Make sure you update the page. You’ll find a similar setting on the page editor of GeneratePress. It’s called Disable Elements. Select “Content Title.” Make your Page Builder Container fullwidth while you’re at it.
While you’re viewing the page editor, you should have noticed the Edit with Elementor button. Go ahead and click it.
What you do next is entirely up to you as there are two main ways you can move forward from here. You can either use Elementor’s page building features to design and build your own page, or you can import one of the plugin’s templates.
Elementor is really simple to figure out. Start by clicking Add New Section.
I used the single-celled structure for this example. I gave the entire section an image background and added Heading and Button elements to it. I then played around with the style, margin and padding settings until everything looked the way I wanted it to.
You simply add more and more sections, more and more elements, and more and more styles until you have a completed page. If that seems like too much of a hassle for you, there’s an easier way. Start with a blank page, but select Add Template this time.
Choose a template while keeping in mind that some templates are only available in the Pro version of Elementor.
I went with the Homepage – App template. This adds a completed template to my page. Now, all I have to do is click on each element to change its content to suit my brand.
It’s just a matter of going through the template, changing out the content you need to change and deleting whatever you don’t need after that. It’s that simple. Just make sure you click Save before leaving the editor.
Elementor is a powerful plugin that makes it incredibly simple for anyone to design and build their very own WordPress site. It’s becoming more and more popular with each new release, so you’ll likely see that list of compatible themes grow larger and larger as time passes.
If you’re having a tough time figuring everything out, reference the following resources from the team over at Elementor: