Last Updated 7 Oct 2024
|

Become a Web Design Pro With Free Elementor Video Tutorials

Quick Summary ↪ Learn how to use Elementor with in-depth video guides created by experts. They cover every aspect of building a website using the popular page builder. Learn how to build a website for free and why Astra is our go-to theme for building amazing pages!

Ultimate Elementor Tutorial

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?

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! 

Article by
Pratik Chaskar

LinkedInTwitter

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!

7 comments
  1. Celeste Profile Pic

    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.

    1. Team Astra Profile Pic

      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. 🙂

  2. Linda Profile Pic

    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.

  3. Gopika Profile Pic

    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…..!

Leave a Comment

Your email address will not be published. Required fields are marked *

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top