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.

More...

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!

Affiliate Links Ahead!

Most of the links on this post are affiliate links. I get a commission if you purchase any of the products/services through these links. Clicking them costs nothing to you.

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:

search for domain

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

register a domain

4. Click the Checkout button:

click the checkout

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:

create account
7. With the new account creation, add the other contact information. Once you have done that, click the red Continue button on the right:


additional contact informaton

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.

auto billing

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:

payment confirmation page

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:

paypal payment method

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

2. Get Your Web Hosting

The next step is to get hosting for your website. 

Although I have used many web hosts in the past, I recommend two companies at the moment: SiteGround and WPX Hosting. I have already written a post on how to create a WordPress Website with WPX Hosting

In this section, I focus on how to set up hosting with SiteGround

1. Head over to SiteGround and pick the web hosting option on the front page:

choose webhosting siteground

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

select hosting plan

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.

contact information
Once you have filled in the required information, chosen the billing period, and agreed on the Terms of Service, click the Pay Now button at the bottom.

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:

choose websites

2. In website details, click the cPanel button:

website details
3. In the WordPress tools section, click on the WordPress installer icon:
wordpress tools

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

install now wp

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.
setup options

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:

installation progress

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

installation ready

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:

NameCheap sign in

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:

menu list item

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

custom dns

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:

wordpress installation confirmation
2. Login to your WordPress website using the login information on the email. 


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.

WordPress Password Lost? No Worries!

If you have forgotten the WordPress admin password, you can always reset it through the SiteGround dashboard.

So log in to your account and then go to Websites > cPanel > WordPress Tools > WordPress Toolkit:

wordpress toolkit

Then, choose the particular website for the password you want to reset and click Manage:

manage website

On the next page, choose the Reset Admin Password section and click the Reset Pass button. You can then change the password inside the pop-up window.

reset admin password

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:

elementor tutorial astra tutorial astra

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

elementor tutorial astra tutorial activate 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:

Elementor plugin

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

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

elementor menu

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:

free starter template

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

free starter sites 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:

select elementor
2. You’ll then see the Starter Templates page:
select starter template

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:

custom printing starter site

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:

import starter site

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

import complete

What Are Premium Starter Sites?

If you are happy with Astra’s free starter templates, you’ll be glad to know that there are even more sites to explore with Premium Starter Sites.

If that sounds interesting, why not upgrade to the Mini Agency or the Agency bundle? When you do, you get 55+ starter templates that you edit with Elementor or Beaver Builder.

For example, take a look at this partial list of Astra templates. See the ones with the text Agency? You get them + many more when you upgrade to Mini Agency or Agency bundles!

premium templates

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:

wordpress customizer
From there, you can change a bunch of settings regarding your website:
  • 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):

blog layout settings

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:

publish button

Astra Pro Gives You More Customization Options

But why stop the customization with the free version of Astra when you can have many more tweaking options for your blog with Astra Pro!

astra pro options

For instance, Astra Pro contains these excellent features that save you time, and give you more flexibility in website building:

  • More blog layouts
  • Many header designs
  • More footer layouts
  • WooCommerce integration
  • +more!

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:

edit page
If there is a text Elementor next to the page name, you can click Edit with Elementor right away:


edit with elementor

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

edit with elementor blue button

3. Choose any of the elements on the left:

pick element

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.

drag 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:

edit element

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

change element content

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:

update the element content

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:

delete individual element

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:

blue rectangle 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:

elementor edit text

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

text editor

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

inline text editor

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

update the element content

4.3.5 How to Add a New Image/Change Image

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

image element

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:

drag element

3. Edit the image properties on the left:

edit image properties

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

update the element content

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:

astra pro annual pricing

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:

astra pro lifetime

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:

elementor price table

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. 

Timo
shares