In this page we’re going to learn how to build a website with WordPress and Elementor. Disclosure: Some of these links might be affiliates, meaning I may get a commission at no extra charge to you for recommending the product.
Why WordPress?
WordPress is a powerful open-source website building platform used by millions of websites all over the world. It’s one of the best tools you can use to build a website for 98% of businesses. Here’s a couple reasons why WordPress is one of the best options for building your website:
Open Source:
WordPress is “Open Source”, meaning anyone can go into the code and change things as they please. It is fully, 100% customizable.
As your business grows your needs become more complex. On a system like Wix, you might not be able to do what you need to do. Maybe you need a dynamic pricing model, or a multi-select dropdown with images. If you need a feature that isn’t available in a closed system then you’ll need to live without the feature or potentially migrate your entire system to a custom or open source platform. WordPress allows you complete flexibility.
Extremely Popular:
Popularity is important because it’s easier to find developers and agencies that can help you with your technical needs. With millions of developers and over 60% of the web being powered by WordPress, you’re guaranteed to be able to find developers and seo agencies that can bring your ideas to life.
Easy to use & Beginner Friendly:
WordPress is made for developers and highly configurable for those who know how to code. It’s also easy to use even if you have no experience building websites and no coding ability. With dozens of drag and drop page builders like Bricks, Beaver Builder, Elementor, Thrive Architect, and many more, you can easily build websites without knowing how to code.
Easy Developer Hand Off:
Migrating all the content and posts from one platform to another is not always a seamless experience, even with migration tools. The bigger your business gets on one platform, the more painful it could be to migrate. If you build your website on the right platform from the start, then you’ll never have to migrate.
If you use page builders on WordPress correctly, a quality developer should be able to optimize your site and remove the page builder without having to do an entire migration all at one time, making it a seamless experience to transition from a DIY website to a highly optimized and competitive website.
Why Elementor?
Elementor is one of many page builders on WordPress. Being one of the most popular builders, it’s a lot easier to find support and the features you need.
Being a drag and drop page builder, it will add significant bloat to your website, but if you’re not a developer it’s a good option to build a website without having to learn to code.
I may recommend another page builder to build your website in the future, but for now, Elementor is a great option to get your website up and running quickly.
Tools Needed to Build Your Website:
You will need the following products, services, and tools to properly build a website:
Domain Name: The site URL that people type into a search bar, like https://taxconsult.site or https://networkeffect.pro. These domain names point to IP addresses like 192.158.1.38. An analogy is like how a human readable physical address actually represents a latitude and longitude.
Web Hosting: a place to store the code, content, images, etc. that make up your website.
Page Builder: Not technically necessary, but if we’re not coding, we need a page builder to drag and drop elements onto the pages that make up our website.
Template Kit: Design is actually pretty hard for most people. Even if you have the technical knowledge to write the code, figuring out how to put elements on a page together so they look nice is difficult. A template kit is an “already done for you” design kit for your type of business. All you need to do is swap out the text, images, and colors for your own, and we can use that as a launch pad for the first version of your website.
Shopping List to Build Your Website:
You may have some of these tools already. If so, you do not need to purchase them again.
Page Builder: Elementor
Template Kit: Do an online search for “Elementor Template Kit X business”. eg “Elementor template kit plumber”
Domain & Hosting: (pick ONE)
Easiest: BlueHost
BlueHost is around the same quality as NameCheap, but slightly more expensive. But it’s the easiest platform to use by far.
Cheapest: NameCheap
NameCheap is slightly more complicated to setup, but it’s a bit cheaper than the other options.
Highest Performance: WPEngine
WPEngine is significantly more expensive than the others, but is the ideal option for businesses who are serious about SEO and website optimization.
Build Your Website in One Video:
This is an old tutorial I have on using Elementor to build a website. It still works, but it’s a little dated. This page and tutorial series is being rebuilt, but in the meantime, you can learn to build your website here, in one video, without writing code.
Build Your Website With Elementor:
Step One: Domain & Web Hosting:
The first step is to acquire a Domian name and web hosting. There’s a bunch of places to get a domain and hosting, and to make things more confusing, you can buy a domain at one company and hosting at another, and then you can point the domain from where it was purchased to the hosting on another platform. If you have a domain already, you only need to purchase hosting.
Option 1: NameCheap (Cheapest)
Option 1: NameCheap
NameCheap and BlueHost have a similar level of quality, but NameCheap is much cheaper. The downside is it’s slightly more complex to set up. If budget is top of mind, choose NameCheap.
Setup & Purchase Domain & Hosting:
Install WordPress in NameCheap / Cpanel
Once you have a domain name and web host, you can install WordPress onto your server, which is the foundation your website will be built on. This next video applies to all hosting companies that use CPanel.
Install SSL on NameCheap
It’s important to install an SSL on your domain name so the website is “secure”. You can tell a site has this security feature if the url has “https” instead of “http”. Browsers will warn you about insecure websites and it has an effect on SEO, so it’s important to make sure this is done.
Option 2: BlueHost (Simplest)
BlueHost Instructions Coming Soon!
Option 3: WPEngine (Highest Quality)
WPEngine instructions coming soon!
Step Two: Install Plugins & Child Theme
Once we have the WordPress installation on our server, it’s time to start installing plugins and themes to get our page building experience situated. The first thing we need to do is Install the “Hello Elementor” Theme:
Once the theme has been installed, we’ll need to install the plugin. The theme can be thought of like the “skeleton” or “foundation” of the site, while the plugin gives us the page building features that allow us to drag and drop, and use pre-built templates that use the plugin.
Install Elementor Plugin:
Setup a Child Theme:
Setting up a Child Theme in WordPress allows you to create your own customized changes to a theme in a safe manner. Without a Child Theme, anytime the theme maintainer updates the parent theme you’re using, any custom changes to the theme will be overwritten.
Option A: Elementor Template Kit via Download:
Once you have the above steps completed, we’re ready to start customizing your design to fit your specific needs. One of the key benefits of Elementor is its popularity and # of pre-built templates. If you’re a business with a commonly provided product or service, you will likely find dozens of existing “done for you” designs to choose from.
The below video shows you how to download a template kit from somewhere and upload it to your site properly.
Option B: Template Kit via Envato:
The Envato marketplace also has a ton of usable template kits, but using Envato has a slightly different process for installing template kits. They have their own built in plugin so you can browse template kits from within your dashboard. The below video demonstrates how to use Envato’s plugin to install a template kit for your business:
Posts & Pages in WordPress
In order to setup your template kits in WordPress you need to have a basic understanding of WordPress “Pages” and “Posts”. This video shows you how to set them up in your WordPress dashboard
By default WordPress lists the home page of your site as a list of blog posts. For most websites you’ll want to designate a custom home page. This is how you set up your Home page in WordPress:
There is a LOT of information to cover on using Gutenberg, so unfortunately a single video could never cover everything. The goal of the below video is to introduce you to the basics as a foundation, so you can learn more advanced Gutenberg concepts covered on your own, either through my website or the thousands of other tutorials online.
Introduction to WordPress Gutenberg:
Another important task is to create a clean URL structure for your website. You want URLs to be easy to read and remember. The below video explains how to setup a clean URL structure in WordPress:
Like Gutenberg, the Elementor Page Builder is fairly simple to learn the basics, but there’s too much to cover in a single video. The goal of this video is to introduce you to the basics of using the Elementor Plugin to build out pages and utilize template kits to quickly build a “Do It Yourself” website. Once you have a solid foundation, it should give you the knowledge you need to follow along with other tutorials online.
Elementor Page Builder Plugin Basics:
Elementor uses a “templating” system to manage different sections of the website. In the below video we’ll show you how to setup the header for your Elementor Website:
Setting up a “Single Post” template in Elementor is important for the long term maintainability of your website. As your business grows you may eventually want to remove Elementor from your website. When that time comes, it will be much easier if you’ve created your blog articles in Gutenberg, and place that Gutenberg content within the Single Post template you create / import with Elementor. You can see what I mean by watching the video below.
Important: Single Post Template (Blog Template) set up in Elementor:
More parts to this article coming soon!