Elementor is one of the most popular page builder plugins for WordPress. It’s a free plugin that allows you to create beautiful page layouts with an easy to use drag and drop interface. It also has tons of elements and cool features you can add to your site.
In this post, I’ll show you how to use the Elementor plugin to create a professional and modern WordPress website. This step by step tutorial will walk you through the entire process of setting up your website, installing WordPress, and working with Elementor.
Preparation Steps for Making Your Website With Elementor Before you can build your website, you’ll need to complete the following tasks:
Getting a domain name and hosting Installing WordPress Creating the pages for your site Here’s a quick look at the website we’ll be creating:
With that out of the way, let’s walk through these steps one by one.
Step 1: Get Domain and Hosting Let’s start this tutorial with getting a domain name and hosting plan first. My number one company for hosting is Siteground. They are one of the most reliable hosting companies around with the best uptime and fastest loading times, not to mention their customer service is excellent.
Get started by going to Siteground . You can choose between three plans but I recommend you select the Grow Big plan. This plan costs a little more but it gives you the option to host an unlimited number of websites.
Once you’ve selected your chosen plan, you’ll need to choose a domain name for your site. Choose a name that is line with the type of website you’ll be creating and then enter your billing details on the next page.
Submit your payment and Siteground will create your hosting plan. After that, you can proceed to customer area.
Step 2: Install WordPress In your customer area, you’ll notice an orange button at the top that says Set Up Website. Start by clicking that button, then press Start a new website , then choose WordPress .
Choose a username and password that you will use to login to your WordPress dashboard and copy it and store it somewhere safe. Click the Continue button and let Siteground to install WordPress for you.
When this installation is done, you can click on Manage Site button. On that screen, you’ll be able to see a list of all your WordPress installations but for now, you’ll only have one. There is an icon that will take you straight to your WordPress dashboard next to your site name so click it and you’ll be logged into your brand new WordPress website.
You’ll notice that there is a button prompting you to get started but you don’t need this so exit the starter plugin and then head on over to Plugins > Installed plugins and deactivate and delete the WordPress Starter plugin.
Then, click on Settings and go to the Permalinks section. Change the structure to Post name .
Step 3: Create the pages and the menu The last step here is to create the basic pages for your website as well as a menu. In your dashboard, go to Pages > Add new . Type in the name of your page, for example Home, and click on Publish .
Repeat these steps to create About us and Contact us pages for your site. Then, click on Appearance > Menus . Name your menu and tick the boxes next to the pages you’ve created on the left-hand side under pages. Press the Add to menu button and assign this menu to the Primary location. Click Save and your menu is done.
Create Your Website With Elementor Now it’s time to go through the process of creating your website. Here are the steps we’ll take:
Installing Elementor and the theme Importing premade page layouts Customizing the layouts Mobile Settings Creating Contact page and contact forms Theme Customizer Editing footer Advanced features Adding SSL to your site Let’s walk through these steps.
Step 1: Install Elementor and a theme To install Elementor on your website, go to Elementor and enter your email address. The plugin will then download to your computer.
In your WordPress dashboard, go to Plugins > Add new . Locate the zip folder with the Elementor plugin and upload it to your site. Then, install and activate the plugin.
Once you’re done installing Elementor, there’s one more plugin we need to install. Go back to the Plugins section and click on the Add new button. Then, search for Envato Elements and install their plugin. This will give you access to 1700+ templates for Elementor that will speed up the site design process.
The last step is to install a theme so go to Appearance > Themes > Add new . Search for the Astra theme, install it, and activate it on your site.
Step 2. Building Your Homepage Go to Pages > All pages and then find the homepage you’ve created earlier. Click the Edit link and make sure to check the box to hide the title, select No Sidebar and choose the Full Width Stretched option. Then, press the update button to apply the changes.
With the changes saved, press the Edit with Elementor button. You can now use Elementor’s building blocks to create your homepage. Each block can be customized individually and blocks include headlines, text, buttons, call to action, and more.
You can move the blocks around as you wish and you can easily duplicated each block as well as each page section.
Step 3: Importing and Customizing Layouts While you can create your website from scratch, you can save a lot of time by importing a premade layout from the Envato Elements plugin. To do this, first, go back to your WordPress dashboard and then go to Elements. You’ll need to enter your email address and accept their terms to be able to use the templates.
In the search bar, select Corporate and Business and then choose the Professional Services template. You can see all the pages that are available with this template but for the homepage, we’re going to choose the Home 2.
Import this template and then go back to editing your homepage with Elementor. Once the editor loads, click on the folder icon and choose My Templates . You’ll be able to see the templated you’ve just imported so insert it onto your page.
You can then proceed to edit and customize the layout by adding different elements, removing sections or blocks you don’t need, changing colors, and more.
In the same fashion, you can speed up the design of your About page by installing the About page layout from the Professional Services layout.
Step 4: Creating Contact page and contact forms Just as we did with the Home and the About page, we’re going to create the Contact page using a premade layout. Select the contact us page from the same Professional Services template, install it, and then insert it onto your page.
You’ll then need to install a contact form plugin. I use and recommend the WP Forms plugin. It’s free and easy to use as it uses a similar drag and drop interface. Install it and activate it then create a new form from a premade template. Once you’ve created a form, it will give you a shortcode that you’ll need to paste into your Contact page.
It’s worth mentioning that the WP Forms plugin has a pro version if you’re interested in having more features.
Step 5: Theme Customizer Now that the major pages on our website have been completed, let’s talk about the Theme Customizer and how you can use it to style your site. For example, the first thing you need to do is go to Appearance > Customize > Homepage settings . Choose the Static page option and then assign the home page you’ve created with Elementor.
As you can see, you can use the customizer to edit colors, fonts, set the sidebars on your site and more.
You can also use the customizer to add widgets to your Footer area so it displays the most important information for your business.
Step 6: Advanced features Elementor has lots of cool features that can make your site look even better. This includes:
Shape dividers – you can create different shapes for your dividers to give your site a more visually appealing look, like I’ve done in the demo website. You can access them by clicking on the dots for a particular section container and then going to Style > Shape divider. Custom positioning – this feature allows you to place various elements and blocks in creative ways to spice up your website. Blend modes – use this feature to get creative with any text module that’s positioned over an image. Step 7: Mobile Settings Elementor makes it easy to optimize your site for mobile, tablet, and desktop devices. You can switch between these by clicking the corresponding icon and then you can rearrange elements so that they look great no matter the screen size.
You can even remove some of the elements from either desktop, tablet or phone view to ensure your website is mobile-friendly.
Step 8: Adding SSL to your site The last step is adding the SSL certificate to your website. For this, you’ll need to install the free Really Simple SSL plugin . Once it’s installed, activate it, and then the plugin will automatically log you out of your website. Use your username and password to log back in and then click the Go ahead activate SSL button.
Congratulations, your website is now secure and done!
Keep in mind that you can also install the pro version of the Elementor plugin which you can check out here .
Creating Your Website With Elementor: Video Tutorial If you prefer to follow along with this tutorial, here’s a step-by-step video that will walk you through the entire process:
Final Thoughts Creating your website with Elementor is easy, especially when you have a starting point to go from. Use this tutorial to help you create an amazing website with Elementor and the Astra theme.