Creating a website is easy with Elementor.
It offers a wide range of customization options and a seamless drag and drop interface so you can design a website the way you want.
Although we now use Spectra, we have used Elementor extensively over the years.
This Elementor tutorial will show how to build a WordPress website with this powerful website builder.
So, let’s jump in and go through this Elementor course together.
- What Will You Learn?
- Step 1: Download the Free Project Files
- Step 2: Get Domain Name and Web Hosting
- Step 3: Set Up WordPress, Astra and Starter Templates
- Step 4: Customize the Header and Footer
- Step 5: Design Your Website With Elementor
- Step 6: Build the Homepage
- Step 7: Build the About Page
- Step 8: Build the Services Page
- Step 9: Build the Contact Page
- Step 10: Add a New Page in Elementor
- Step 11: Make Your Website Responsive
- Step 12: Optimize Your Website for Performance
- Step 13: Things to Check Before Launch
- Now Launch Your Website!
- Need Advanced Design Options Without Breaking the Bank?
What Will You Learn?
In this WordPress Elementor course, you will learn how to cheat the system and build modern websites fast.
We’ll show you how to:
- Add/remove/edit website content
- Add new pages
- Edit the website header, footer, and the navigation menu
- Customize your website identity to make it look on-brand
- Make your website fully responsive on mobile devices
To get the most out of this Elementor tutorial, we recommend following this WordPress Elementor tutorial in order.
Step 1: Download the Free Project Files
First we recommend downloading the free Elemetor project files to help you create your website.
In the zip folder, you will find pre-written text and images sorted in sections.
Step 2: Get Domain Name and Web Hosting
You need both a domain name and web hosting to launch your website.
Think of the domain name as the name of your building and web hosting as the land it is built on.
You will need these two things if you want to people to find your site.
In this video, you will learn how to buy a web hosting service with Hostinger, grab a domain name for free, and then install WordPress to create your website.
Step 3: Set Up WordPress, Astra and Starter Templates
In this video, you will learn how to set up WordPress for the first time and check essential settings.
We’ll also install Astra – the most popular, flexible, and lightweight WordPress theme.
Step 4: Customize the Header and Footer
The header of your website shows the navigation menu and your logo.
It’s crucial that you set up the navigation menu properly, as it helps users to move seamlessly through your pages.
This video will show you how to customize the header and footer and add or remove pages if needed.
Step 5: Design Your Website With Elementor
The free version of Elementor offers basic widgets, such as an inner section, heading, image, star rating, divider, and more.
While there’s more in the premium version, the free option will be enough for this tutorial.
This video will show you how to make the most out of these features.
Before upgrading Elementor, read our guide to strategically upgrade Elementor without breaking the bank.
Step 6: Build the Homepage
The homepage is the most important page since it’s where most visitors land. That means it has to be the best page on your site.
In this video, learn how to add hero images, customize the headings and text, add testimonials, set up services, and add a call to action.
Step 7: Build the About Page
The About page provides essential details about who you are and your business.
This video shows you how to add sections, customize images and text, and reuse containers from the homepage to save time.
Step 8: Build the Services Page
If you’re a freelancer or agency that provides services such as content writing, web/app development, and data analytics, you’ll need a service page.
Watch this video to learn how to create a service page, add and customize CTA buttons, and edit the content.
Step 9: Build the Contact Page
The contact page has your business details and, in most cases, a contact form so visitors can contact you.
Learn how to add containers on your contact page, edit content, and insert a contact form.
Step 10: Add a New Page in Elementor
When you install the Astra theme, you get the essential pages by default.
However, you might need some additional pages like testimonials, knowledge resources, or a login page.
In this video, learn how to add a new page to your WordPress website and customize it with Elementor’s drag and drop builder.
Step 11: Make Your Website Responsive
Since most online traffic is from mobile devices, it is crucial that your website is optimized for small screens.
That’s what making it responsive means.
This video shows you how to make your website load faster on mobile devices, adjust the CTA buttons and spacing for smaller screens, and customize the header and footer.
Step 12: Optimize Your Website for Performance
Speed is everything and ensuring your website loads fast is a key part of building one.
Optimizing your images, using a caching plugin, and using a CDN to deliver your content are some of the most important optimizations that you can do.
Learn to optimize your website so it provides a seamless user experience in this next video.
Step 13: Things to Check Before Launch
Before launching your site, there are certain things that you should check first. This is the last step in our Elementor tutorial.
They include moving the website from maintenance mode to live mode, enabling search engine visibility, and adding a social share image.
Watch this video to understand how to prepare your website for launch.
Now Launch Your Website!
So there you have it. A complete Elementor tutorial in the order we would do it ourselves.
We recommend following the series in the exact order as it’s a very logical website development process.
The videos include everything you need to know to build an Elementor website from scratch, install the Astra theme, and customize everything ready for launch.
We even created resource files including everything you need to build!
We would love to see what type of site you come up with. If you have any questions or comments, please share them with us below!
Need Advanced Design Options Without Breaking the Bank?
If you are starting with a tight budget, the free versions of Astra and Elementor give you a solid foundation to build your website.
If you need advanced features without the hefty price tag, Ultimate Addons for Elementor is an excellent addition to your web designing arsenal.
It costs less than Elementor’s Pro plans and offers powerful customization options, such as 50+ Elementor widgets, 200+ section blocks, cross-site copy-paste, WooCommerce widgets, and white-label branding.
To create the best website for your needs, a mix of Astra Pro, Elementor (free), and Ultimate Addons provides all the essential tools you may need.
Want to see the difference?
We have created an in-depth guide that compares various combinations of Astra, Elementor, and Ultimate Addons based on use cases.
Check it out now!Â
Pratik Chaskar holds the pivotal role of CTO at Brainstorm Force, serving as the backbone of the company. Renowned for his organizational skills, strategic thinking, problem-solving attitude, and expertise in leading and executing plans, Pratik plays a crucial role in the BSF’s technological landscape.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
Hi, newbie to WP question. I am using Astra and Elementor. When I’m at my dashboard and click customize your site it opens up the site in Astra without giving me the option to use Elementor. I noticed in some YT videos that some people have a “Customize with Elementor” at the top of their dashboard. Is there somewhere you have to select that in the dashboard to have that become visable? Right now the way I’m opening up Elementor is by scrolling down on my dash to the Elementor Overview and clicking on my latest version that was saved. Thanks for any suggestions.
Hello Celeste,
Probably this issue might be due to the pages post-type not enabled from the Elementor settings.
Do check this Support Topic or this article from Elementor.
I hope that helps. Feel free to reach out to the Elementor team if you have any specific concerns while using Elementor. 🙂
I am building my first website with free versions of Astra (using a template) and Elementor. I keep having issues with fonts that change in the middle of a paragraph, for instance if I try to change the size then only a portion will change. Then I’m unable to change it back to make the paragraph uniform.
Could there be a conflict between the template (Online Coach) and Elementor? Thank you.
I unknowingly imported the same design twice. Now in my header section I have everything doubled. Don’t know how to remove the extra things and bring it back to normal!!!! Really puzzled…..!
Hello Gopika, if it is a new installation do reset WordPress and try again. Or you can manage the Menus from the Appearance section of the WordPress Dashboard.
Thank you so much for sharing all this wonderful info. It is so appreciated!!
thanks for your helpful guidelines
Hi, I’m really enjoying the content, it’s a great course, thank you. The only thing is –
I’m on Step 6 so far and suddenly I cant use Elementor with this theme anymore. I think there was an Elementor update a couple days ago and since then, I just get a loading page and option to activate safe mode, which doesn’t do anything. I’ve checked and Elementor is working for me if I choose a different theme from starter templates. Is there a way to fix this for the course project theme?
I’m hosting locally at the moment and have up to date WordPress and PHP versions etc. I have also tried deleting Elementor and re-installing it with no luck. Can you help?
Thank you.
Hello Lucy, please feel free to reach out to us through our Support Portal so that we can assist you in the best possible manner. https://wpastra.com/contact/