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 free WordPress tutorial you can watch to get up to speed.
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.
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.
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:
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.
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:
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.
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:
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:
- Sections
- Columns
- 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
Elementor Templates are now available on Envato Elements—here’s an explanatory video, plus other learning resources to help you up your Elementor game!
