Beginner’s guide to creating a WordPress website from scratch with Elementor

Share on facebook
Share on twitter
Share on pinterest
Share on google
If you are a non-coder like me, WordPress is by far the best platform for you to build your website on. From registering for a domain to publishing your first webpage online, this article breaks down the steps involved in setting up your WordPress website.

If you are currently researching on setting up your website, you may have come across several platforms that help you with it. Some may require a monthly payment, while some may require advanced coding knowledge to get your site up and running. However, with WordPress, none of them apply which is probably why it is used by almost 22+ million users. WordPress is free and comes with a ton of website themes & templates.

Note: Do not get confused between WordPress.com and WordPress.org. The former is a free hosting service whereas the latter is a self-hosted platform. This article assumes that you choose to proceed building your website using the self-hosted WordPress option (i.e. WordPress.org). We highly recommend that you do so especially because it provides you with full-ownership of your website. In addition, it provides extended functionalities to creating a website that you’ll love.

To get started with a WordPress website, you will need to follow 5 basic steps:

  1. Choose and register a domain name
  2. Choose a webhost
  3. Install WordPress
  4. Install Elementor Page-Builder Plugin
  5. Choose a theme and import demo content

Step 1 – Choose and register a domain name

A domain name is your website’s address on the internet. Think of it as a name and physical address you would give your customers to locate your brick-and-mortar store. Just like how you would have to register your business name with a registrar, you will have to do the same with a domain.

Once you’ve picked a name and domain extension, it’s time to register. There are many domain registrants to choose from but the one I would recommend is Namecheap simply because it’s cheap (yeah, I knew you’d figure that part out!). Depending on the extension, domains can be purchased from as low $0.88/year. However, the more popular extensions such as .COM, .CO, .ORG average at approximately $9.99/year for the first year and a renewal fee of $14.99/year. Use the search bar above to find prices of the available for your chosen domain name.

Step 2 – Choose a webhost

Once you have registered the domain, you will need a space to store the files that make up your website on the internet. In other words, you will need to register with a hosting provider. You could either own a dedicated server or use a shared server for a fee. This is similar to renting a warehouse space to store your physical goods as opposed to buying one on your own. If you are just starting up, the most viable option would be to use a shared server.

Since we hope to use WordPress as our platform for building the website, there are hosting providers that provide support for WordPress installation. One of them is SiteGround. I have found SiteGround to be better in terms of loading speed, customer support and other technical features. Namecheap, on the other hand, is a cheaper option and is something you can opt for if you are on a tight budget. Though both services provide easy WP-installation, for the purpose of this tutorial, I will be using SiteGround to show how the setup works.

siteground-wordpress-hosting

To set up WordPress hosting with SiteGround, the first step is to choose a plan. You will see 3 plans to choose from and your choice very much depends on your requirements. If you are just setting up a blog or a small website that requires basic features that are necessary for hosting a website, SiteGround’s StartUp plan will have you covered and is the one I’d recommend you go for.

Assuming you already have a domain, choose the “I already have a domain” option, type in the domain that you own and click “Proceed”. You will then be prompted to fill in your details and proceed with making the payment of $47.40.

Step 3 – Install WordPress

Once you have successfully registered with SiteGround, you can either use SiteGround’s WordPress Installation Wizard or install via. your cPanel. You will have access to your cPanel in the “My Accounts” tab. Here, you will see your registered domain listed along with a button that directs to your cPanel. Click “Go to cPanel” and scroll down to “AutoInstallers” tab, and then click “WordPress”.

Once you click “Install” and you will be provided with a screen to fill in the information related to your WordPress installation. Most of it are self-explanatory.

Note: Under protocol, if you select HTTPS, you will have to install an SSL Certificate which SiteGround provides free of charge. Follow their detailed guide on how to install a SSL Certificate to your site.

Click the “Install” button at the bottom and within minutes you will have a freshly installed blog on your registered domain.

That’s it! If you want to access your admin panel, type in your domain and include “/wp-admin”. You will be prompted to enter your login credentials to gain access to your WordPress dashboard.

Step 4 – Install Elementor Page-Builder Plugin

To provide added functionality and make the design process much quicker, I would proceed with installing the Elementor Page-Builder plugin. It’s a WordPress Page-Builder which has grown in popularity due its robustness yet a simple tool to build pixel-perfect websites. I personally am a big fan and have this blog dedicated to providing content relating to Elementor. Besides, unlike most other Page-Builder’s in the market, Elementor is free for basic use!

On the WordPress dashboard, go to Plugins and search for “Elementor Page Builder”. Once you install and activate, you will be prompted with a page guiding you through the steps to setting up Elementor.

Step 5 – Choose a theme and import Demo Content

Upon a fresh installation of WordPress, by default, your website will currently have “TwentySeventeen” theme installed. It’s a good, lightweight theme but for our purpose however, it may not the perfect one since it lacks flexibility and options. Since we hope to use a page builder, ideally, we should choose a theme specifically supports it. This could be in terms of add-on features, customizability etc. There are many themes that specifically support Elementor but I’ve chosen WPAstra to build this blog.

Whether you are using the free or pro version of Elementor, it comes down to three popular themes, namely WPAstra, OceanWP and GeneratePress. The video below from ThemeIsle provides a good comparison of three themes.

However, for the purpose of this tutorial, I will be using WPAstra to demonstrate how you could import the demo content to build a fully-functional website in minutes.

  • Click “Appearance” on the WordPress dashboard which will show you the themes currently installed on your website.
  • Click “Add New
  • Search for “Astra”, click Install and Activate.
  • Once activated, click “Astra Options” under the Appearance tab
  • Click “Install Import Plugin” on the right-hand sidebar which will then give you access to their Starter Site library.
  • Select Elementor and choose a Starter Site that you will like to import (Note: If you are using Astra free version, your choices will be limited. To access a full list of demo sites, you will need Astra Pro)
  • You will be prompted to install the required plugins (if any), and once that’s done, click “Import This Site” and you’re done!

Note: if you choose to use Elementor Pro version (which I would highly recommend that you do!), personally, I would install the Page Builder Framework because it is less bloated and more lightweight; allowing for faster page loading speeds. Besides, with Elementor Pro, you can customize all parts of a theme such as the headers, footers, blog archive pages etc.; thereby eliminating the need for the customisation abilities provided by the other themes. However, the theme does not provide demo content unlike Astra, OceanWP or GeneratePress. So this option would require you start from scratch with your own style & content.

Alternatively, you could use Envato Elements plugin to download templates to help speed up your design process.

If you do have any questions, shoot them to me on the comments section below.

WANT TO LEARN MORE?

Get content on tips, tricks and reviews on Elementor right to your mailbox!

  • We won't spam & that's our promise. We hate it as much as you do. 
Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on google
Google+

Latest Posts

How to create a custom header with Astra Pro

How to create a custom header with Astra Pro

Astra is one of the most popular themes that is compatible with most page-builders specifically, Elementor. It has a free version to get started with but this article explores one of the popular features offered by the Pro version – custom headers. It’s a great feature to have especially if you are using the free version of Elementor. Learn how to build a custom header with Astra Pro

Read More