How to Build a WordPress Website with Astra and Elementor (The Ultimate Guide)

Nowadays, it’s easier to build a website than what it was ten years ago. You can get your next website up and running by yourself, and you don’t have to hire anyone to do it. Besides, you can also create a good-looking website online without having to learn how to code HTML.

In this tutorial, I’ll show you how to build a WordPress website with Astra and Elementor. This tutorial shows you everything you need to do, from registering a domain to installing your theme and modifying the content.

So let’s get started!

1. Register Your Domain

The first thing to do is to get a domain name for your website. There are two ways to do it:

• By registering a domain name separately through a third-party registrar. The registration price is lower this way.
• By registering a domain while you purchase web hosting. The registration process is smoother, as you don’t have to use a separate service for registering and setting the domain for you.

If you purchase the domain through a third-party registrar, this section is for you. However, if you want to register the domain while you get web hosting, jump over this part and read the next section, Get Your Web Hosting, instead.

I’m using NameCheap as my domain registrar, and after registering tens of domains through them, I can recommend them.

Here is how the registration process works through NameCheap:

1. Head over to NameCheap

2. Search for the domain name, to see if it’s available:

3. If the domain name is available, you can add it to the cart by clicking the Add to cart button:

4. Click the Checkout button:

5. The next page shows you the registration confirmation. 

The default domain registration is for one year, and it also contains the Whois Guard. The Whois Guard protects your domain contact information on the Internet.

Once you have reviewed your order, click the red Confirm Order button on the right. As you can see from the screenshot, the price for one year (at the time of writing), including the Whois Guard, is approximately 7.50€ (9$).

6. On the next page, you can either log into your account if you have one or create it:

8. On the Whois Contact Information page, check that the Registrant Contact, Administrative Contact, Technical Contact, and Billing Contact information is correct. In my case, all these have the same information (my name and my contact information).

Once you are ready, click the Continue button.

9. Enter your billing information on the Payment Method page.

I rarely set an automatic renewal for my domains. However, I have saved the default payment information in my account. That makes the additional domain registrations easier.

Once you have defined your payment settings, click Continue.

10. Look at the order on the Order Review page and make sure that all the information is correct:

11. When you are ready to register your domain, click the Checkout button. In my case, I have already selected PayPal as my payment processor, so it’s displayed there:

12. Congratulations! You are now the owner of your new domain!

2. Select the hosting plan. I have used the GrowBig plan in my projects, but you can naturally use whatever plan you want.

Once you have decided on your plan, click Get Plan.

3. Choose a domain for your website. In the previous section (Register Your Domain), I showed you how to register a domain using NameCheap. But if you haven’t done that already, you can also register your domain through this view.

4. Whatever option you choose in step #3, you’ll land on the Review page, where you enter your contact and payment information.

2.1 Set up WordPress in Your Hosting Account

You have now registered a domain for your website and purchased web hosting too. The next step is to set up WordPress on your hosting account.

1. Log in to SiteGround and choose the Websites menu at the top:

2. In website details, click the cPanel button:

4. On the next page, click on the Install Now button:

5. On the Software Setup page, set the following information:

• In Choose Installation URL, the protocol is https://www.
• In Site Settings, enter the name of your site and your site description.
• Pay attention to the suggested user credentials. You need them when you log into WordPress.
• In Select Plugins, choose the Limit Login Attempts. This plugin gives you the extra layer of security, making it harder for anyone to attack your website.

Once you have set up these options, click the Install button at the bottom.

6. Wait until the installation is complete. This process may take a while:

7. Once the installation is ready, you’ll see this screen:

8. WordPress installation is now complete. 

9. Check your email with a message “WordPress Installation Confirmation.” It contains the login information to your new website. You need this information later in this tutorial.

Next, I’ll show you how to connect your domain to your website. But if you registered the domain through SiteGround, you can jump directly to the section Test WordPress.

2.2 Configure domain name on NameCheap

1. Go to NameCheap and log into your account by clicking the Sign In link at the top:

2. Click the Domain List menu item on the left. Pick the domain you want to manage and choose the Manage button on the left:

3. In the Domain Details page, in the Name Servers section, choose the Custom DNS. 

Enter the Siteground DNS information in the Nameserver 1 and Nameserver 2 fields

You can find the values for these servers by logging into your SiteGround account, choosing Websites, and clicking the cPanel button. In cPanel, this information is on the left, under Account Information.

4. Once you have entered the DNS information, click the green checkbox to confirm your changes.

Please note that it may take up to 48 hours until your domain information is copied to other name servers worldwide. However, I have also noticed that often, this process is faster than this.

2.3 Test WordPress

After the DNS settings are in effect, make sure you can now log into your WordPress website:

1. Check your email for a message with the subject line: “WordPress Installation Confirmation.” It’ll give you the details on how to log into your website:

3. After a successful login, if you see a SiteGround welcome screen, just click Cancel. You can then see the regular WordPress admin panel.

4. You have now confirmed that you can access the WordPress admin panel.

3. Download and Install Required Software

In this section, we download and install all the required software for your website. The list includes the following free items:

• Astra: The WordPress theme.
• Elementor: The WordPress page builder.
• Starter Sites: A website library that you can use on your projects.

So let’s get started with the Astra theme first.

3.1 Astra Theme

1. Log in to WordPress and then choose Appearance > Themes > Add New. In the search box on the top-right, enter Astra. Choose the Astra theme and click Install:

2. Once the theme is installed, click the Activate button to activate the theme.

You have now installed the Astra theme. It’s time to install the Elementor next!

3.2 Elementor

1. Go to WordPress > Plugins > Add New.

2. In the search box on the top-right, enter Elementor.

3. Pick the Elementor plugin from the list. It looks like this:

4. Click Install Now, and once the installation is ready, click Activate.

5. You’ll see the Elementor menu item on left in WordPress:

Next, we’ll install the free starter templates. These templates are ready-made websites that you can use or tweak in your projects.

3.3 Install Free Starter Templates

1. In WordPress, go to Plugins > Add New. Choose the Starter Templates plugin, and click Install Now:

2. Once the template installation is ready, click Activate:

3. You can find the templates when you go to Appearance > Starter Templates.

You now have plenty of free templates to choose from. And to get started with your website building, I’ll show you how to pick one for your use.

3.4 Pick a Starter Site Template for Your Website

1. In WordPress, go to Appearance > Starter Templates. Select Elementor from this list:

Please note that some templates have the text Agency. They are premium starter sites and only accessible if you have a Mini Agency or Agency plan of Astra.

3. In this example, I picked the Custom Printing starter site from the list. When you click the template thumbnail, you’ll see more details about it. 

For instance, this starter site in question contains multiple pages, like the front page, the about page, or the contact page:

4. When you are on the details page of the starter site, click the Import Complete Site button at the bottom-right of the page.

5. Next, you’ll see some import-related options on a pop-up screen. Just leave the settings as they are, and click Import:

6. Once the import is ready, you can start customizing the website to your needs.

4. The Website Customization

In this section, we’ll look at how to customize your website with Astra and Elementor. 

The changes you’ll make to your layout will depend on your needs. Therefore, I’m giving you an overview of the customizations you can do with both tools.

4.1 How to Customize Your Website with Astra

You can customize your entire website with Astra. Since the theme provides the overall look and feel of your website (thus, why it’s called a theme), you use the WordPress Customizer to make the modifications.

You can access the WordPress Customizer by going to Appearance > Customize. There you can see the following view:

• The colors
• The fonts
• The sidebar
• The blog layout
• + plenty of other settings

When you collapse the main heading of a setting, you’ll see the options you can configure.

For instance, when I open Blog > Blog/Archive setting, I see all the blog-related options (this is just a partial screenshot of that view):

The customizer view works in two parts: on the left is the customizer with its options, and on the right, you can see the live website. And when you change settings on the left, the view on the right updates in real-time.

Once you have made your changes in the customizer, save them by clicking the Publish button at the top-right:

4.3 How to Customize Your Website with Elementor

Elementor is made for building and customizing posts and pages on your website. You can also use it to customize your layout, even your WordPress theme.

In this section, I’m focusing on just some typical customizations you’ll do with Elementor.

4.3.1 How to Add Elements

One of the first things you’ll do is add elements to your web page. In Elementor, you do it like this:

1. Open a page for editing. Just go to Pages in WordPress and hover your mouse pointer over a page name to see an additional menu. Click the Edit under the page name:

2. In the WordPress editor, click the blue Edit with Elementor button:

3. Choose any of the elements on the left:

4. Drag the selected element and drag it on to the page. You’ll see different sections on the page, getting blue rectangles around them. These rectangles show you the locations where you can drop the element.

5. Drop the element on a page.

Once you have dropped the element on the design area, it’s time to modify its properties. That’s what we do next.

4.3.2 How to Change Element Properties

1. Click the element on the page:

2. Change the element content and settings according to your needs:

For instance, in this case, you could change the text or the icon of the element.

3. Once you have done the changes, save them by clicking the Update button at the bottom:

4.3.3 How to Delete an Element

1. Pick the element on the page you want to delete.

2. Right-click on the top of the element and choose Delete from the menu:

3. To delete the whole part of the page, hover over the section. You’ll see a blue rectangle around the area.

4. Just click the cross at the top of the rectangle. That deletes the section:

4.3.4 How to Add New Text/Change Text

1. Hover your mouse over the desired text in the editor. You’ll see a blue rectangle around the text area.

2. Click the pen icon or inside the text box. Alternatively, you can also edit the text directly inline:

You can also edit the text on the left in the text box:

3. When you mark the text, you can also see some styling options popping up (bold, underline…)

4. Once you have done the changes, click the Update button at the bottom:

4.3.5 How to Add a New Image/Change Image

1. Pick an Image element on the left, on the elements menu:

2. Drag the element to the design area into the desired spot. You’ll see the potential drop location when an area gets a blue rectangle around it:

3. Edit the image properties on the left:

4. Once you are ready with the changes, click the Update button at the bottom:

FAQ

In this section, I answer a few frequent questions regarding Astra and Elementor. 

• Is Astra Theme Free?

The Astra Theme is free. You can build an entire website fast with its ready-made site templates.

• What is Astra Pro?

Astra Pro is a fast and light-weight premium WordPress theme, built by Brainstorm Force. 

When you install the Astra Pro Addon plugin, your free Astra theme turns into Astra Pro. This plugin gives you many new functionalities to your Astra theme.

• Is Astra Pro free?

No, Astra Pro is a paid product. Currently, you can choose from three pricing tiers and two payment plans.

If you choose the annual pricing model, this is how much you pay per year (see the screenshot). Once the annual billing period is over, you’ll renew the theme with the pricing depending on the plan:

If you choose the Lifetime pricing, you pay for Astra Pro only once. The upfront price is naturally higher, but you don’t have to pay for Astra every year:

The features are the same in both pricing models. 

The prices shown in these screenshots were valid at the time of writing this article.

• Is Astra a good theme?

This is purely a subjective matter, and it depends solely on your requirements. 

However, Astra offers impressive performance, great customer support, and plenty of options to create a nice-looking website. It also works well with other major WordPress site builders like Elementor or Beaver Builder. 

So if those aspects matter to you, then yes, the Astra Theme is a good theme.

• Can you use the Astra Theme with page builders like Elementor?

Astra works well with page builders like Elementor. Although some features between the two can overlap, Elementor and Astra are a great couple.

• Is Elementor Free with WordPress?

Yes, Elementor is free. You can download it by going to Elementor.com, or by getting it through the WordPress plugin repository.

• What is the difference between Elementor and Elementor Pro?

The first noticeable difference is the pricing: Elementor is free to use, while the Pro version is a paid product.

There are some other notable differences between these two versions. For instance, the Pro gives you 24/7 premium support, a theme builder, forms, and eCommerce capabilities. You can also integrate the Pro with many external systems, like MailChimp or ConvertKit. 

• Should I buy Elementor Pro?

Naturally, this depends on your needs. But knowing how many convenient features Pro adds to the table, I would recommend upgrading to the Pro version.

• How much does Elementor Pro cost?

At the time of writing, there are four pricing plans, ranging from 0$ per year to $199 (approximately 168€) per year:

The price depends on how many sites you are about to install the Elementor for.

The Conclusion: Build a Website with Astra and Elementor

As you can see, building a website with Astra and Elementor requires a few steps. Fortunately, you only need to do most of the steps once. 

Once you have set up your website correctly, you can then focus on building stellar content with Elementor and Astra.