Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

How to Build a WordPress Website With Elementor

by
Difficulty:BeginnerLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Creating your own website without learning how to code, or hiring your own developer, used to be almost impossible. Nowadays, however, almost anyone can use a platform such as WordPress and a builder plugin like Elementor to create a website in no time.

In this tutorial miniseries (available in both video and written form) I’m going to show you how to build a website using WordPress and Elementor, walking you through the entire process step by step. Here’s what we’re going to cover in this tutorial:

  • Technical setup
  • Creating website pages
  • Getting to know Elementor

Building WordPress Websites With Elementor

1. Technical Setup

To get a website up and running you’ll need a few things:

  • A domain
  • Hosting for your website files
  • A working installation of WordPress

Note: For the purposes of this tutorial I will assume you already have these, so I’ll just be focusing on the Elementor plugin. If you need help with any of these points we have a complete beginner’s guide to using WordPress which you can watch on the Tuts+ YouTube channel.

Install the Elementor Plugin

First we need to install the Elementor plugin. There are two versions, a free version, and a Pro version. The Pro version will make a number of pro features available to you, including some premium templates and blocks to help you build exactly what you want. To get the plugin visit https://elementor.com; the free version is immediately available on the homepage, but for the Pro version navigate to the pricing page to make your choice.

Elementor homepage
The Elementor homepage

Once you’ve downloaded the files, return to your WordPress installation, then go to Plugins > Add New > Upload Plugin and follow the onscreen instructions. 

One important thing to note is that in order to install the Pro version, you’ll also need to have installed the free version. Think of the Pro version as being an extension of the free version.

Once activated, you’ll be presented with a welcome screen and you’ll notice a new menu item in the WordPress admin navigation.

elementor menu item
Elementor menu item

If you’re installing the Pro version, you’ll need to hit the Activate License button once you’ve uploaded the plugin. This license number will be available through the account you’ll have made when purchasing the plugin.

Install the Envato Elements Plugin

With our technical setup almost complete, it’s now time to install the Envato Elements plugin. This will allow us to download and use a whole bunch of premade templates for Elementor. Visit the WordPress plugins repository at https://wordpress.org/plugins/envato-elements/ and download the plugin to your system. The plugin installation process is just as before.

Your plugins page should now look something like this:

plugins page

2. Create the Website Pages

For the purposes of this tutorial we’ll create a four page website for a small fictional business that sells juices. Ordinarily we’d go to Pages > Add New. We would then enter a title for the new page and begin to edit with Elementor. However, since we have the Envato Elements plugin installed, we’re going to create our pages in a different way.

Head to Elements, then make sure you have Elementor selected in the template kits options.

elementor kits in envato elements plugin for wordpress

Browser the Food & Drink category, then scroll down until you see the Juice Bar kit. We need a number of pages for our website, so let’s start with the homepage. Select the Home 6 template from the Juice Bar kit, then create a homepage with it by entering a page name in the form:

create a home page

If you now go to Pages you’ll see that we’ve created a draft homepage in just a few clicks. We can customize this later, but for now go ahead and create the following additional pages:

  • Menu page: with the Menu 5 template
  • About: with the About 1 template
  • Contact: with the Contact 2 template

With that done, back on the Pages listings, you should see all your newly created Elementor pages ready and waiting.

newly created Elementor pages
Newly created Elementor pages

We’ll be editing these pages in the next tutorial, but before we wrap this up let’s quickly look at Elementor’s basic operations.

3. Getting to Know Elementor

There are a few ways to edit content with Elementor. Perhaps the quickest way is to visit the page listings then click the Edit with Elementor link on the page you want. Alternatively, you could click on the page itself and hit the Edit with Elementor button which is clearly shown under the title. Both these routes will open up the Elementor editor:

Elementor editor

The Elementor editor shows the page you’re editing, with a large menu on the left hand side. All the widgets which you can see (like Inner Section, Heading, Image) can be dragged and dropped onto the page.

There are also options to edit the Global styles, the fonts, colors, and sizes. Whenever you change any of the options, those changes are reflected realtime in the page to the right. When you’re happy with the changes, hit the Publish button at the bottom of the menu to save your work.

Three Key Aspects

There are three key aspects to working with Elementor, and those are:

  1. Sections
  2. Columns
  3. Widgets

Sections are the largest building blocks available to you. Hovering over them in the editor will reveal a blue dotted border around them, as well as a tab on the top with some options.

Columns, also known as Inner Sections, define the layout in vertical columns.

Widgets are basically content blocks; buttons, images, blockquotes, anything you can find in the menu bar as shown previously.

Using these three key aspects of Elementor will allow you to build any kind of page you want.

Coming up

That concludes the first part of this miniseries! In the next tutorial we’ll be customizing our Juice Bar website, and exploring Elementor in more detail.

Useful Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.