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

A live WordPress site has four basic parts:

  1. Domain
  2. Web Server
  3. WordPress
  4. Theme

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 Themes

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

OceanWP Demos

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

GeneratePress WordPress Theme

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.

Install OceanWP

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.

Install Ocean Extra

You’ll want to install Elementor itself after that.

Installing Elementor

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.

Install Elementor

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.

OceanWP - Initial Appearance

Here’s what GeneratePress and Elementor look like initially.

GeneratePress - Initial Appearance

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.

Delete Widgets

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.

  1. Create a new page.
  2. Name the page “Home”.
  3. Publish the page.
  4. Go to Settings → Reading, and set “Home” as your front page.
  5. Save your changes.

Front Page

Here’s what you have with OceanWP after that.

OceanWP Homepage

And here’s GeneratePress.

GeneratePress Homepage

You’ll need to edit your Home page and choose “Content (no sidebars)” as a Sidebar Layout to remove the Archives sidebar in GeneratePress.

GeneratePress - Sidebar Layout

Let’s get the header and footer situated.

Creating & Customizing Your Header & Footer in OceanWP

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.

OceanWP - Top Bar Content

Make sure you save and publish your changes before moving on. You can also add your social media accounts.

OceanWP - Social Top Bar

You can play around with the colors of the top bar after this using the General and Social sections.

OceanWP - Top Bar Colors

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.

OceanWP - Header

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.

OceanWP - Footer

Let’s go over how to set up the GeneratePress theme before we continue.

Creating & Customizing Your Header & Footer in GeneratePress

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.

GeneratePress - 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.

OceanWP - Settings

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.

GeneratePress - Settings

While you’re viewing the page editor, you should have noticed the Edit with Elementor button. Go ahead and click it.

Edit with Elementor

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.

Elementor - 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.

Using Elementor

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.

Elementor - Add Template

Choose a template while keeping in mind that some templates are only available in the Pro version of Elementor.

Elementor - Template Library

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.

Elementor - Edit Template

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.

Final Thoughts

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:

About The Author

Oliver Dale is the founder of Kooc Media, an online company which has been working with WordPress since 2009. He has written hundreds of posts about WordPress in that time and founded two theme companies which provide free and paid themes to millions of users.

Google + / Twitter / Pinterest / Facebook

Disclosure: Some of the links in this post may be "affiliate links." This means if you click on the link and purchase an item, We will receive an affiliate commission