Home » WordPress Tutorials » Astra WordPress Theme Tutorial (Video)

Astra WordPress Theme Tutorial (Video) – Complete Setup Guide

Photo of author
By Martie
Last Updated:
Photo of author
By Martie
Last Updated:
Photo of author
Updated:

In this free Astra WordPress Theme tutorial.

I’m going to show you how to create a professional WordPress website, with ZERO previous experience.

Astra WordPress Theme Tutorial Image

That’s right.

Even if you normally only use your computer for watching cute cat videos.

You are going to have no problems building your own website.

(trust me, it’s easy!)

Post Contents:

  1. Astra Theme Tutorial (Video)
  2. Why choose the Astra Theme?
  3. Astra WordPress Theme Reviews

Astra WordPress Theme Tutorial (Video)


You might think building a website is going to be difficult.

But, there are only 5 main steps we need to follow:

  1. Register a domain name & hosting
  2. Install WordPress
  3. Install the Astra theme
  4. Customise the Astra theme
  5. Create Pages (Add Content)

(you can find a list of everything covered, underneath the video)

And don’t worry if any of this sounds confusing.

I will explain it all as we go.

So, just click play on the video below, and let’s get started.

How to Build a WordPress Website (Step by Step) – The Easy Way!
📓 Video Transcript – Click to Open/Close

Astra WordPress Theme Tutorial – Transcript


Hi guys, it’s Martie here and in this video, I’m going to show how to build a professional WordPress website, step by step.

See, I’ve been using WordPress for about 10 years now, and I decided to make this WordPress tutorial, to show you everything you’ll need to know, in order to build a website you can be proud of.

You don’t need to have any previous design skills.

We won’t be using any coding.

And it’s only going to take us about 60 minutes to complete! So, if you need a website for your business, or maybe you just want to build a website for fun, this is how you do it.

I’m going to walk you through the entire process, step by step, and in a way that anyone should be able to understand.

But, rather than just talking about it, let’s take a look at the actual website we’re going to be building.

So, I’m going to show you how to add your logo here at the top.

And how to change the site colours and fonts.

Then, we’re going to have this large header on our home page, which consists of a few lines of text, two buttons and a background image.

Then, under this we can add images, text, headings, buttons and anything else we might want on our home page.

Then, we can create as many pages as we need.

And in any style we like.

Then, we can add our pages to the menu at the top.

Along with this action button.

And we can link this button to whatever we like.

Then, we’ll also be adding a form to our contact page, so our visitors can send us a message if they need to.

And these messages will be sent to us as an email.

This website’s also going to be 100% mobile friendly, which means it’s going to look amazing on any device.

So, if I just make this window a little smaller, we can see what our website will look like on a tablet.

Then, if we make it a little smaller again, this is what our website’s going to look like when being viewed on a mobile phone.

So, no matter what device it’s being viewed on, it’s always going to look great.

Now, you’re probably not going to be building a website about coffee like my example site.

But don’t worry, this is going to work for almost any kind of business, or website you might need.

So, here’s the same website with different images, and branding to give you an idea of what I mean.

And as you can see, the website’s pretty much always going to look great.

So, if you’re ready to get started, this is how to build a professional WordPress website, step by step.


Registering a Domain and Hosting


Okay, so the first thing we need to do, is register a domain name and web hosting for our new website.

And for anyone who doesn’t know already.

A domain name is usually the title of a website or business with www. before and .com after it.

So, a domain name is what we type into our internet browser, to visit a specific website.

Then, web hosting is where the different files that make up our website will be stored online, so people can gain access to our website, even when our own computer’s switched off.

Now, there are tons of different places we can get these from, but I personally recommend a company called HostGator.

I’ve been using them for years without any problems.

They’re a well known hosting company with affordable pricing and great support.

Which is exactly what we want when getting started.

So, we just need to open up our internet browser, and go to hostgator.com.

Then we’re going to hover over where it says “Hosting” at the top and click “Shared Hosting”.

And this is going to show us the 3 different hosting plans they offer.

Now, to be totally honest with you, the business plan comes with a whole load of added extras we’re probably not going to need when just getting started.

So, really that just leaves it between the Hatchling plan and the Baby plan.

And the only real difference between these two plans is the amount of websites we can have with each one.

So, with the Hatchling plan we can have one single website.

And with the Baby plan we can have as many websites as we like.

Then, once we’ve decided on which plan we’re going to go for, we can click “Buy Now!” underneath.

That’s going to bring us to this page and this is where we’re going to register the domain name for our new website.

So, we just need to type whatever we want to register as our domain name, into this box at the top.

And for my example, I’m going to type “websiteaboutcoffee”.

Then, on the right, we can choose our domain extension.

And for this example, I’m going to choose .com.

So, the domain name I’m registering here, would be websiteaboutcoffee.com.

Then, as long as the domain name’s available, it’s going to say “Primary Domain”, here.

But, if it comes up and says the domain’s not available, unfortunately we’ll need to choose something else.

Then, as long as our domain’s available, we can scroll down, to where it says “Domain Privacy Protection”.

Now, this is an optional add-on and I normally just uncheck this box myself and haven’t had any problems to date.

But, if you’re trying to to keep your website totally anonymous, just leave this box checked and it’ll be added to your bill.

Then, underneath, it says “Choose a Hosting Plan” and here we just want to double check our “Package Type” is correct and choose a “Billing Cycle”.

So, I went for the Hatchling plan in this example, so this is correct.

And then here on the right, we can choose how often we’d like to pay for our hosting.

Now, this is obviously going to depend on how much money you have to spend on your website.

But, I’d recommend setting this to 12 months or higher, if you can.

And not only because we get a great discount compared to monthly billing, but we also get a domain name for free if we go for 12 months or higher, up front.

And with that being said, I’m going to set mine to 12 months.

Then, once we’re done here, we can scroll down and here we just want to to enter our email address and password.

And then create a “Security Pin” for our account.

And then under this, we can enter our personal billing information, so things like our name and our address.

And then on the right, we can choose how we’d like to pay for our order.

And we can choose either credit or debit card, or PayPal.

Then, once we’re done here, if we scroll down, we’ll see a section called “Add Additional Services”.

And these are just some added extras that HostGator offer.

Personally, I don’t want any of these, so I’m just going to leave them unchecked.

But you can have a read through them yourself, and check the box beside any you want and they’ll be added to your bill.

Then under this, we’ll see a place to enter a coupon code if we have one.

And there might already be one entered in here, worth 20 or 25 percent off.

But if we delete this.

And instead type in WPBUILDING.

When we click validate.

We’ll see that our hosting is now even cheaper, and we’re getting both our domain name and web hosting for less than $40.

And remember that is for the full year, which means it’s going to cost us less than $3.50 a month to run our website.

Which is awesome!

Now, I would just like to mention that as well as you getting a great discount on your hosting, I’ll also be paid a small commission from HostGator if you click through my link, or use my coupon code to make a purchase.

Any money made from this, will go towards creating more tutorials like this one.

So, thank you in advance if you use the coupon, but even if you don’t, I’d still highly recommend using HostGator for your website.

But anyway, let’s get back to the tutorial.

So, once we’re done here, we just want to double check our order, and make sure everything’s correct.

Then, we’re going to scroll down to the bottom, check this box to agree to their terms and then click “Checkout Now!”.

So, if you’re following along at home, you can pause this video now and pay for your order.

Then come back and press play when you’re finished, and we’ll carry on building our website together.


Installing WordPress on HostGator


Okay, so that’s me now back and after paying for our order, we’ll find ourselves logged into the HostGator Dashboard, which is where we’ll be installing WordPress.

So, from this screen, we’re going to click where it says “Launch cPanel”, here on the right.

And this is going to open up the HostGator cpanel.

Then, we’re going to type “WordPress” into the search bar at the top.

And then click on “WordPress Manager by Softaculous”.

Now, we need to click “Install”.

And this is going to open up the WordPress installer.

Here, we just want to make sure the new domain name that we registered is selected in this box.

And the box beside it is left blank.

Then, underneath, we can enter our site name.

And our site description.

But, don’t worry too much about these for now, as we can always change them again later.

Then on the right, we’re going to enter the username and password we want to use, for logging into our WordPress site.

And under this, we can update our email address.

Then, once we’re done here, we’re going to leave everything else as it is, scroll down to the very bottom and click “Install”.

HostGator’s then going to install WordPress for us onto our new domain name and this will usually take less than a minute.

Once it’s finished it will say “Congratulations, the software was installed”.

At this point, we can click the link, beside where it says “Admin URL”.

Which is going to open up the WordPress dashboard.

And this is where we can add any content, or make any changes to our new WordPress site.

Which is now live online.

All we need to do to visit it, is click our site title in the top left.

And this is going to show us what WordPress looks like when we first install it.

And don’t worry if yours looks a little different than mine, as sometimes they change up the default theme.

But, either way, it’s just going to have some demo content on it for now, but it’s ready for us to start customising and adding content to.

And now that we have WordPress installed, the next thing we’re going to do is delete the demo content, so we can start of with a fresh installation.

To do this, we just need to go back to the dashboard, by clicking our site title in the top left.

Then, we’re going to click into Pages on the left.

And this will show us any pages we have on our site.

Which at the moment are just a few demo pages that we don’t need, so we’re going to delete them.

To do this, we just need to hover our mouse over the page name, and then click Trash.

And then we can do the same thing, for any other pages in this list.

Then once we’re done, we are going to delete some plugins that come pre-installed, and these are basically like apps for WordPress.

So, we need to click where it says Plugins, on the left.

And here we’re going to see any plugins that we have installed, which at the moment are just some demo plugins we don’t need.

So, to remove these, we’re going to check this box in the top left to select all of the plugins in this list.

Then, we can change this drop down menu to “Deactivate” and click apply.

Then, once the plugins have been deactivated, we’re going to check this box in the top left, to select them all again.

Change this drop down menu to “Delete” and click apply.

And at this point, WordPress will delete all of the plugins in this list.

And now that we’ve removed the demo content, we’re going to move onto the next step, which is installing a WordPress theme.


Installing the Astra Theme


This is going to change the entire look of our WordPress site and make it more like the website we’re trying to create.

So, to install a theme, we’re going to click where it says “Appearance” on the left.

And this is going to show us any themes we have installed.

And as we can see I’m currently using a theme called Twenty Twenty-Two, as it’s the one that says active.

But, we’re going to be installing a new theme instead.

To do this, we just need to click “Add New” at the top.

And this will show us all of the free themes WordPress have to offer.

Now, for this tutorial, we’re going to be using a theme I really like, called “Astra”.

So, we just need to type the word Astra into the search bar in the top right.

Then when it shows up, we’re going to hover our mouse over the theme, and click “Install”.

It’s only going take a few seconds to install.

And once it’s done, we can click “Activate”.

Then, once the theme is active, we can visit our site, by clicking our site title in the top left.

And we’ll see that our site now looks completely different.

But, we still have a few more things to do, before it starts to look like the website we saw at the start.


Installing a Plugin (Starter Templates)


So, the next thing we’re going to do is install a free plugin, which is going to help us to build our site much quicker, and make the whole process a lot easier.

To do this, we just need to visit the dashboard, by clicking our site title in the top left.

Then we’re going to click “Plugins” on the left.

And then click “Add New” at the top.

Now, we’re going to type the words “Starter Templates” into the search bar, in the top right.

Then when it shows up, we’re going to install this plugin by “Brainstorm Force”.

And to do this, we just need to click “Install”.

It’s only going to take a few seconds to install the plugin.

And then when it’s done, we can click “Activate”.


Setting up Our Website using Astra Starter Templates


Then, once the plugin’s active on our site, we’re going to click here, where it says “See Library”.

Then, we’re going to click “Build Your Website Now”, at the bottom.

And then choose the “Block Editor” from these 3 options.

And this is going to show us all of the different templates we can choose from.

The one I used for the example website at the start of this video was called “Mountain”.

So, we just need to type the word “mountain” into search bar at the top.

Then, when it shows up, we’re going to click on it.

And this will load a preview of the website on the right.

And then we’ll be guided through a few different options, here on the left.

So, first we can upload a logo image if we have one.

Or, if we don’t, we can click “Skip & Continue” at the bottom.

But, I’m going to use one in this example.

So, to upload our logo, we’re going to click “Upload Files Here”.

And then click “Select Files” in the middle.

Now, we just need to find the image on our computer, click on it, and click “Open”.

Then, once it’s been uploaded, we’re going to click “Select” in the bottom right.

And at this point we will see our logo now appears in the preview on the right.

Then, if we want to adjust the size of our logo, we can use this slider on the left.

Then, once we’re happy with everything here, we can click “Continue” at the bottom.

And then here on the left, we can choose the default colours we want to use for our website.

So, we can click through these different presets.

And we’ll see the colours update in real time, in the preview, on the right.

Now, I’m just going to put mine back to the original colours.

But, you can pick whatever colours you like best.

And, we don’t need to worry too much about these for now, as I’ll also be covering how to change most of the individual colours, later on in the video.

Then, once we’re done with our site colours, we can choose what fonts we’d like to use.

And just like with the colours, we can click through the different presets on the left, and we’ll see our fonts update on the right.

And I’m going to choose this one for my example.

Then, once we’re happy with our colours and fonts, we can click “Continue” at the bottom.

Then, on this screen, we don’t need to fill out the personal information here, but we are going to uncheck this box, beside where it says “Import Widgets”.

Then, we’re going to click “Submit & Build My Website”.

And this is only going to take about a minute.

Then, once it’s done, we can click “View Your Website”.

And just like that, we’ll be brought to our new website.

Now, obviously we need to change up the content and make it our own.

But, our new website’s already looking awesome and it’s only taken us a few minutes! So, we now have this awesome looking home page.

With our text, images and buttons.

Then, if we scroll back up to the top, we also have these other pages in our menu as well.

And now we just need to update the content on each of these pages.

But, just quickly before that, we do need to change something first, to make sure our logo shows up correctly.

Now, mine is showing up fine as I’m on my laptop, but if you’re on a mac, or retina screen, you might find that it’s still showing the demo logo.

So, to make sure our logo shows up for everyone, we just need to click where it says “Customize”, here at the top.

And this is going to open up our theme options on the left.

And then we’ll see a LIVE preview of our website on the right.

Now, we’re going to click into where it says “Header Builder” on the left.

And then click into “Site Title & Logo” Then here, we’re just going to turn OFF this switch, beside where it sats “Different Logo For Retina Devices?”.

And then click the back pointing arrow in the top left.

Now, we’re going to click into “Transparent Header” at the bottom.

And turn OFF the switch beside “Different Logo For Retina Devices?”.

Now, we just need to click “Publish” up at the top to save our changes.

And then we can click the X in top left, to close out of these options.

And at this point, we’ll see our logo now appears at the top, if it wasn’t showing already.


Astra Theme Tutorial – Creating Our Home Page


And now that we’re done with our logo, we can start changing the content on our page.

And we’re going to be starting with the homepage, which is the first page people will come to when they visit our website.

So, to do this, we just need to make sure we’re on the homepage, by clicking “Home” in our menu.

Then, we’re going to click where it says “Edit Page” at the top.

And this is going to open up the WordPress editor.

So, here at the top, we have our page title, which says home at the moment.

And we can change this if we like, but I’m just going to leave it as it is.

Then, under this, we have the different content that appears on our page.

And the first thing we have here, is the main header, which has a few lines of text, two buttons, and a background image.

To change any of the text, we just need to click into it with our mouse, delete what’s here, and then type whatever we like.

Then, we can do the same thing for the subheading above.

And then the text underneath.

Then, say we wanted to remove one of these lines of text.

We just need to click on the one we’re wanting to remove.

Then, we’re going to click the 3 dots on the right side of this menu.

And then click “Remove Heading”, at the bottom.

And this is going to delete it from the editor.

But, if we ever do something like this, and then regret it.

We can click the back arrow in the top left of our screen, to undo it and bring it back.

But, I’m going to click the redo button to remove it again, as I don’t really want it.

Then, we can also change the colour of our text, if we like.

To do this, we just need to click on the text we’re wanting to change.

And then if we look over on the right, under where it says “Colour”, we can click on “Text”.

And here we can choose from our theme colours.

Or, if we want to use a different colour, we can click into this box at the top.

And choose our colour here.

And when we change the colour, we’ll see it updates in the editor, on the left.

But, I’m just going to put mine back to white in this example.

Then, once we’re happy with our text, we can update our buttons.

So, first, we can just change the button text to whatever we want.

And for this example, I’m going to link my first button to my contact page, so I’m going to type “Get in Contact” for my button text.

Then, if we look on the right, we can change our button colours.

So, I’m going to click into “Text”, here.

And change mine to white.

And when I do this, we’ll see it updates on the left.

Then under “Text” on the right, we can click into “Background”.

And I’m going to make my background colour orange in this example.

But, I want it a little darker than this.

So, I’m going to click into this box, here at the top, and change it to be a bit darker.

And we’ll see this update on the left.

Then, once we’re happy with how our button looks, we can link it to one of our pages.

To do this, we just need to click on the button.

And then click this little chain link icon, in the menu above it.

Now, we can just start typing the name of one of our pages, into this box.

And as I’m linking to my contact page, I’m going to type the word “contact” in here.

But, say for example, you wanted to link to your services pages, you would just type the word “services” instead.

Then, once it shows up, we just need to click on the page, to add the link.

Now, we are going to be covering how to add new pages, later on in this tutorial.

So, if you’re wanting to link this button to page we haven’t created yet, you might want to make yourself a note to come back and link it later.

And now we’re finished with our first button, we can move onto the second one.

So, first, we can change the button text, and for mine, I’m just going to type “Second Button”.

Then, I’m actually going to leave the colours the way they are, as I think the default looks pretty good.

But, you can change the colours over on the right, if you want to.

Then, to link our button, we just need to click on it, in the editor.

And then click this chain link icon in the menu, above it.

Then, if we want to link to another page on our own site, we can just type the page name into this box, like we did with the first one, and then click on the page to add the link.

But, say we wanted to link to another website, instead of a page on our own site.

We just need to open up a new tab in our internet browser.

And find the website, or video, or whatever we’re wanting to link to.

And I’m just going to link mine to a random tutorial on how to make a cup of coffee, for my example.

Then, once we get here, we just need to right click and copy the URL at the top.

And then we can close out of it again.

Now, we’re going to paste the URL we just copied, into this box.

And then click the enter icon to the right, to link it.

Then, when we’re linking to another website, we also want to turn on this switch, beside where it says “Open in new tab”.

And this will make sure our website is kept open in the background, when someone clicks on the button.

Then, say we only wanted one of these buttons.

We just need to click on the one we don’t want.

Then, click the 3 dots to the right side of this menu.

And then click “Remove Button” at the bottom.

And when we do this, we’ll see the button’s now gone.

But, I’m just going to click the back arrow in the top left to undo this, as I want to keep it.

And now that we’ve updated our buttons, we can change the background image.

To do this, we just need to click on the background image.

And then click where it says “Replace” in the menu that appears above it.

Now, we’re going to click “Upload”.

Search for the image we’re wanting to use on our computer.

Click on it and click “Open”.

And we’ll see the image updates in the editor.

Now, you might have noticed that the image isn’t the same colour as it was before we uploaded it.

And that’s because there is an “overlay colour” for our background images.

To change this, we just need to click on the background image.

Then, if we look over on the right, and scroll down, we’ll see it says “Overlay”.

And below this, we can click on “Colour” and change the colour to whatever we want.

And for this example, I’m going to make mine black.

Then, under this, we’ll see it says “Opacity”.

Which at the moment, is set to 50%.

But, if we change this to zero, it will turn the overlay OFF.

And then if we turn it to 100%, it will become a solid colour.

Personally, I’m going to set mine to 20%, but you can set yours to whatever you like.

Then, if we ever want to preview our page to see how it’s looking so far.

We just need to click where it says “Preview” in the top right.

Then, click “Preview in new tab”.

And this is going to open up a preview of our page.

And here we’re going to see that our header’s been updated.

And personally, I think it’s looking much better.

So, we have our text, and our background image.

And if I click on my first button, it’s going to bring me to my contact page.

Then, if we go back.

And click on the second button.

We’ll see this one opens in new tab, as I turned on that switch.

Now, we can close out of the preview.

And make any changes to our content, if we need to.

But, personally I’m happy with how mine looked in the preview, so I’m going to keep it as it is.

Then, once we’re done with this section, we can scroll down to the next one.

And here, we have 3 images with text overlays.

So, just like we did in the section above.

We can change the text, by clicking into it, deleting what’s here, and then typing whatever we like.

Then, once we’re done, we can change the text colour if we like, over on the right.

So, under where it says “Colour”, we’re going to click into “Text”, and then choose the colour we want to use.

And I’m going to make mine dark blue.

Which, I realise doesn’t look that great at the moment, but it should look a lot better in a second, when I change the background image.

Then, to change our background image, we just need to click on it and then click “Replace” in the menu above it.

Now, we’re going to click “Upload”.

Find the image on our computer.

Click on it and click “Open”.

And as always, we’ll see the image changes in the editor.

Then, say we wanted to change the position of this text.

We just need to click on the background image and then click this symbol in the menu above.

Now, we can change the position, here.

And for my example, I’m going to put mine at the bottom.

Then, the last thing we need to do here, is change the colour of our “overlay”.

So, over on the right, if we scroll down.

Under where it says “Overlay”, we’re going to click on “Colour”.

And then choose colour we want.

Then, once we’re happy with the colour, we can change the opacity underneath, using this slider.

And I’m actually going to put mine to zero in this example, to turn it OFF.

And when I do this, we’ll see it updates on the left.

And my dark blue text is now looking better as well.

Then, once we’re happy with our first one.

We just need to follow the same steps to update the other two.

But, to save some time, I just going to do this.

And just in case you’re wondering where I got these images from, I created them myself using canva.com.

Then, once we’re done here and we’re happy with our 3 images and our overlay text, we can scroll down to the next section.

And here we have a text heading on the left.

And then some text and a button on the right.

So, first, we can change the heading text to whatever we like.

Then, to change the colour, we’re going to click “Text”, over on the right.

And then choose the colour we want.

Then, once we’re happy with our heading, we can update our text on the right, in the same way.

But, to save time, I’m just going to paste in some text I already have copied.

Then, under our text, we have this button.

And we can link it to a page on our own site, or another website, like we did with the other buttons above.

But, I’m going to remove this one instead, for my example.

So, to remove a button, we just need to click on it.

Then, click the 3 dots, to the right of this menu.

And then click “Remove Button” at the bottom.

Then, once we’re done here, we can scroll down to the next section.

And here we have what’s known as a “call to action”.

Which consists of some text and a button.

So, first, we just need to update the heading text.

Then, we can change the text colour if we want, over here on the right, but I’m going to leave mine as it is.

Now, you might notice that the text stays in all lower case, even if we try to add in capital letters.

And that’s because it’s using something called “text transform”, to keep it all in lower case.

But, if we want to change this, we just need to click on the text.

Then, if we look over on the right, under where it says “Typography”.

We have a few different options.

First, we can change the size of the text if we like.

So, if I click on 13, we’ll see it get’s way smaller in the editor.

And if I click on 42, it gets much bigger.

Then, if we want to go back to the default size, we just need to click this icon, here.

And then delete the number from this box.

And when we do this, we’ll see it goes back to the original size.

Then, under the size option on the right, we also have “Letter Case”.

And here, we can choose all upper case, all lower case, and then the last option here will add a capital letter at the start of every word.

Then, once we’re happy with our heading, we can change our other text.

And now we can update our button.

I’m going to link this button to my contact page, so I’m going to change the text to say “get in contact”.

Then, once we’ve added the text, we can change the button colours.

So, under where it says “Colour” on the right, I’m going to click into “Text” and change this to be white.

Then, under this, I’m going to click into “Background” and change this to dark grey.

And we’ll see that the colours have updated in the editor.

Then, to link the button we just need to click on it and then click the chain link icon in the menu above.

Now, we can either type the page name, or paste whatever URL we’re wanting to link to, into this box.

And as I’m linking to my contact page, I’m going to type the word “contact” in here.

And then we just need to click on the page to add the link.

And as I’m linking to a page on my own site, I’m going to leave this switch turned OFF.

And once again, you might want to make a note to come back and link this button later, if you’re planning on adding a new page to link it to.

And now that we’ve updated our button, we can change the background image.

And you might have noticed that if we scroll over this image, it has this cool scrolling effect, which is known as a “parallax effect”.

If we want to turn this OFF, we just need to click on the background image.

And then turn OFF this switch, on the right, beside where it says “Fixed Image”.

And this will turn it into back into a static image.

But, I’m going to turn it back on in my example, as I think it looks nice.

Then, to change the background image itself, we’re just going to click on it, and then click “Replace” at the top.

Now, we’re going to click “Upload”, find the image on our computer, click on it and click “Open”.

And once it’s updated, if we scroll a little, we should see the parallax effect is still active on our new image.

And now, we’re going to change our overlay colour.

So, we need to click on the image, and then over on the right, under “Overlay”, we can click “Colour”.

And then choose our colour.

Then, under “Colour” on the right, we can also change the “Opacity”.

Then, once we’re done here, we can preview our page, to see how it looks.

So, we just need to click where it says “Preview”, in the top right.

And then click “Preview in new tab”.

So, here at the top we have our main heading, with our text and buttons.

Then, under this, we have our 3 images, with text overlays.

Then, we have our text and text heading.

And now, we also have our call to action, with our text and button.

And when we scroll past it, it has this cool parallax effect.

And we can just double check our button’s working.

And then we can use the back button in our browser, to go back.

Then, once we’re done here, we can close out of the preview.

And make any edits to our content, if we need to.

Then, once we’re happy with our call to action, we can scroll down to the next section.

And here, we’ll see we have 6 images.

This section would be great for showing off some portfolio items, or something like that, if we wanted to.

And if we do, we just need to replace the images in the same way as before, by clicking on the image and then clicking “Replace”.

But, I’m actually going to remove this whole section, in my example.

So, to remove a section we don’t want, we just need to click the 3 lines icon, in the top left, to open up the “List View”.

Then, we want to close any open sections by clicking the down pointing arrow to the left, and this will just make it a little easier.

So, each of these represent a different section on our page.

And to remove one, we’re just going to hover our mouse over the one we don’t want, which for me is the last one in the list.

And at this point, over on the right, we’ll see a blue outline around the entire section, when we hover over it.

Then, to remove it, we’re going to click the 3 dots to the right.

And then click “Remove Group” at the bottom.

And when we do this, we’ll see the section is now gone.

And remember, if we ever make a mistake, or remove the wrong section, we can use this back arrow in the top left to undo the last thing we did.

Then, once we’re done here, we can click this X, to close out of the “List View”.

And now, if we preview our page again.

If we scroll down to the bottom, we’ll see that the portfolio section is now gone.

But, we aren’t limited to the sections that came with the template, there are actually hundreds of other sections we can use.

And we can add as many sections to our pages as we like.

So, to add a new section, we just need to close out of the preview.

Then, we’re going to click where it says “Template Kits”, in the top left.

And then click into “Patterns” at the top.

And here, we’ll see all the different pre-made sections we can add to our pages.

Then, if we look over on the left, we can filter them by colour.

So, if I click where it says “Light”, it’s only going to show us the ones with a light background.

Or, if I click “Dark”, it’ll only show us the dark ones.

And I’m going to choose light for mine.

Then, under this, we can click through these different categories on the left, until we find the one we like.

Then, over on the right, we can pick the section we want to add to our page.

And obviously, you can spend a little longer looking through these, but I’m just going to choose this one for my example.

Then, once we find the one we want to use, we just need to hover our mouse over it and click “Import”.

And at this point, it’ll be added the bottom of our page, in the editor.

Then, once we’ve added our new section, we just need to edit the content, in the same way we’ve been doing.

So, first we can update any text we have, but to save some time, I’m just going to do this.

Then, we can change our text colours, over on the right, if we like, but I’m just going to leave mine the way they are.

Then, once we’re done with our text, we can update any images we have.

And to do this, we just need to click on the image we’re wanting to change.

And then click “Replace” in the menu above it.

Then, we need to click “Upload”.

Search for the image on our computer.

Click on it and click “Open”.

And as always, we’ll see the image changes in the editor.

And then we just need to do the same thing for any other images we have in our new section.

Then, once we’re happy with our new section, we can add another one if we like, but I’m only going to add the one in my example.

Then, once we’ve added any new sections we want, we can also change the order of them on our page.

So, to change the order of our sections, we just need to click anywhere on the one we’re wanting to move.

Then, we need to click this icon to the left of our menu, and we need to click on it a few times, until it shows these 2 overlapping squares, and the entire row is outlined in blue.

And that means it’s all selected.

And now, we can use these up and down arrows to move it up and down our page.

But, I’m actually going to put the new section back to the bottom again in my example.

Then, once we’re happy with the position of our section, we can preview our page one last time, just to make sure everything looks good before we publish it.

So, to do this, we just need to click “Preview” in the top right.

And then click “Preview in new tab”.

And now, if we scroll down, we’ll see our new section has been added to our page, and it’s also in the new position if we moved it.

Then, once we’re done, we can close out of the preview.

And make any changes to our content, if we need to.

But, I’m pretty happy with how mine looked in the preview, so I’m just going to leave it as it is.

Then, once we’re finished adding content to our page, we can publish it.

To do this, we just need to click where it says “Update” in the top right.

And now, if we click “View Page”, in the bottom left.

We’ll see all of the changes we made are now LIVE on our site.


Astra WordPress Theme – Creating Our About page


And now that we have our home page sorted, we can move on to the next page in our menu, which is our about page.

But, just quickly before that, if you’ve been enjoying the video so far, please be sure to give it a LIKE here on YouTube to show your support.

Not only would it mean a lot to me, but it also shows YouTube that people like my content, and helps get my video promoted more in the searches.

It‘ll only take you 2 seconds to hit the like button, but I’d really appreciate it if you did! But anyway, let’s get back to our website.

So, now that we’re finished with our home page, we can move on to the next page in our menu, which is our About page.

And this is where we can tell our visitors a little bit about ourselves and our business.

So, we just need to click where it says “Edit Page” at the top, to open it up in the editor.

And now we can update the content.

So, we can update the text and images, and add or remove any sections we like, in the same way as we did with our home page.

But, to save some time, I’m just going to do this.

But, if you need a reminder of anything we’ve covered so far, I’m going to add the timestamps for everything in the description below.

So, you can just skip back and forward to the exact bit you need.

Then, once we’re happy with our page, we just need to click “Update” in the top right, to publish our changes.

And then click “View Page” in the bottom left.

And we’ll see that our changes are now LIVE.

And just for reference, all I did was change the text to say “About Us”.

Then, I changed the background image and the overlay colour at the top.

Then, I removed the other 2 sections that were here before.

And then added 3 new ones.

The first one is just a text heading and some text.

Then, the second one has an image to the left and some text to he right.

And then the last one has some text and a button.

Which is all simple stuff that we’ve already covered.


Deleting pages on WordPress


Then, once we’re happy with our about page, the next page in our menu is called “Services”.

And this is where we can show off any services we plan to offer.

So, we just need to click into services in the menu.

And then click “Edit Page” at the top, to open it up in the editor.

Then we can edit the content, in the same way as we did with our homepage and our about page.

So, we can update the text, images and buttons, and add or remove any sections we want.

But, for my example, I’m actually going to delete this page, as I’m not planning to offer any services on this site.

So, if you don’t want one of the default pages, this is how to remove it.

We just need to visit the dashboard, by clicking our site title in the top left.

Then, we’re going to click into “Pages”, on the left.

And this is going to show us all of the pages we have on our website.

So, as I’m wanting to delete my Services page, I’m going to hover my mouse over that one, and click “Trash”.

Then, once the page has been deleted, we can visit our site again, by clicking our site title in the top left.

And at this point, we’ll see the page has also been removed from our menu as well.


Creating New Pages on Astra


Then, say we wanted to add a new page page in its place.

We just need to visit the dashboard again, by clicking our site title in the top left.

Then, we’re going to hover over where it says “Pages” on the left and click “Add New”.

And this is going to open up the editor for our new page.

Then, here at the top, we can give it a name, and for my example, I’m going to call mine “Types of Coffee”.

Then, once we’ve give it a name, if we preview our page.

We’ll see that it doesn’t look quite right.

And that’s because our other pages were created using the plugin we installed earlier.

So, when we create a new page, there are a few settings we need to change in the editor.

So, we just need to close out of the preview.

Then, we’re going to click the (A) icon in the top right, to open up the Astra theme options.

And then here, under “Content Layout” we’re going to select this one, and when we hover our mouse over it, it should say “Full Width / Contained”.

Then, we’re going to click into “Sidebar” under this, and set it to this one in the middle, which is “No Sidebar”.

Now, we’re going to click into “Advanced Settings” at the bottom.

Which is going to open up this pop up.

And here, we’re going to change the “Transparent Header” to “Enabled”.

And then click “Return To Post”, in the bottom right.

Then, the last thing we need to do, is hide the page title.

To do this, we just need to hover over the page title.

And then click the “hide” icon that appears in the top left.

And at this point, we’ll see that our title’s now greyed out, which means that although our page has a name, it won’t actually appear on the page.

And now, we just need to save our page as a draft, for the new changes to take effect.

And we can do this, by clicking “Save Draft” in the top right.

Then, once our page has been saved, we can start adding content.

But, rather than doing this from scratch, we’re going to import a page template, using the “Starter Templates” plugin.

To do this, we just need to click “Template Kits” in the top left.

Then, we could click into “Patterns” like we did before, and build the page by adding a bunch of different sections.

But instead, we’re going to import an entire page.

So, we just want to make sure “Pages” is selected at the top, here.

And then we can start looking through all the different sites we have to choose from.

So, we can just click into any of these sites.

And here, we’ll see the different pages on the right.

And then a preview of the page on the left.

Now, we can just click through the different pages on the right, until we find the one we like.

Or, if we don’t see one we like, we just need to click the back button, in the top left.

And click into a different one.

Then, we can look for the page we want to use on the right.

And for my example, I’m just going to use this one.

Then, once we find the page we’re wanting to use, we can click “import template” at the bottom.

And this is going to import the full template into the editor.

Now, we can preview our page.

And we’ll see that the new template has been added successfully.

And it’s also been updated to use the same fonts as the rest of our site.

Then, at this point, we can close out of the preview.

And now we just need to change the content in the same way as our other pages.

So, we can update the text and images and add or remove any sections we like.

But, I’m just going to leave mine as it is to save time.

Then, once we’re happy with our new page, we can click “Publish” in the top right, and then click “Publish” again.

Then, once it’s published we can click here, where it says “View Page”.

And we’ll see that our new page is now live on our site.

Now, obviously mine just looks the same as the template, as I didn’t change anything.

But, the page has been successfully published.


Editing Our WordPress Menu


Now, you might have noticed that our new page isn’t appearing in our menu, but this is super easy to do.

So, to add a page to our menu, we just need to click “Customise” in the top left.

And this will open up our theme options.

Now, we’re going to click into “Menus”, on the left.

And then click into “Primary Menu”.

At this point, we’ll see that the page I deleted is still here and it’s showing an error, so we just want to remove this first.

To do this, we just need to click on it and then click where it says “Remove” at the bottom.

Then, to add the new page to our menu, we’re going to click here, where it says “Add Items”.

And then, on the right, we’re going to click on the new page we just created.

And when we do this, we’ll see that it’s been added to the bottom of this list, on the left.

Now, if we click here, where it says “Reorder”.

We can use these up and down arrows to change the position of the page in our menu.

And when we do this, we’ll see that it updates on the right.

And for reference, anything we put to the top of this list, will be on the left side of our menu, and anything we put to the bottom of the list, will be on the right.

Then, once we are happy with the order of our menu, we can click “Done” on the left.

Then, we can also change the name of any pages in our menu, without affecting the actual page name.

To do this, we just need to click on the page we’re wanting to change.

Then, we can change the text in this box, to whatever like.

And we’ll see it updates on the right.

Then, once we’re done with our menu, we can click “Publish” at the top, to save our changes.

And then, click the X in the top left, to close out of these options.

And at this point, we’ll see our new page now appears in the menu.

Now, we’re already on the page, but if we click home in our menu first.

We can click back into the new page.

And we’ll see everything is working as it should.


Adding a Contact Form (WPForms Plugin)


Then, the last page we have here in our menu, is our “Contact” page.

And we can make any changes we like to the text, images and colours, or add or remove any sections we want.

I’m just going to leave it all as it is to save time, but, I do want to cover how to add our contact form in here, so our visitors can get in contact with us.

And also how to change the map at the bottom, so it shows our location.

So, to get started, we’re just going to click “Edit Page” up at the top, to open it up in the editor.

Then, if we look under this heading on the right, we’ll see it says “The form can’t be displayed”.

So, we’re going to remove this block, and add it again correctly.

To do this, we just need to click on it.

Then, click the 3 dots to the right of the menu.

And click “Remove WPForms” at the bottom.

And this is going to remove the block.

Now, we need to take a new line, by hitting the enter key on our keyboard.

Then, we’re going to click the plus symbol to the right.

And this will let us add a new block.

Now, we’re going to type the word “forms” into this search bar.

And click on “WPForms”.

And this will add the forms block to the editor.

Now, we’re going to click here, where it says “Select a Form”.

And then choose “Contact Form”.

At this point, we’ll see the contact form now appears in the editor.

And this form asks for the users name, phone number, email address and their message.

Which is going to work for most websites.

But, if you’d rather have different fields in the form, I’ll link to a video of mine in the description below, that’ll show you how to create a custom form instead.

Then, once we’ve added our form, we can preview the page.

And we’ll see that it’s been added successfully.


Astra Theme Tutorial – Adding Google Maps


And now we’re going to update the map at the bottom.

So, first we need to close out of the preview Then, we’re going to open up a new tab in our internet browser and go to google.com/maps.

Now, we need to find the location we’re wanting to show on our map, using the search bar in the top left.

Then, once we find it, we’re going to click where it says “Share” And then click “Embed Map”, in the middle.

Now, on the right, we’re going to click “Copy HTML”.

And this will copy the embed code that represents our map.

Then, once we’ve got it copied, we can close out of Google maps.

And now, we’re going to highlight all of the text that’s in this box at the bottom, and delete it.

Then, we need to right click, and paste in the code we just copied.

And now, we just need to make one simple change to this code.

So, if we look closely at this code.

We’ll see it says width equals 600.

And here, we’re going to change the 600 to 100%.

Now, we’re going to keep the quote marks on either side of it.

We, just want to replace the 600 with 100%.

And this is just going to make sure our new map is the same size as the old one.

Then, once we’re done here, if we preview our page.

And scroll down.

We’ll see that the map has been updated and now shows our new location.

Or, if we wanted to remove the map altogether, we can close out of the preview.

Then, we’re going to click on the code that represents the map, click the 3 dots the right of the menu and then click “Remove Custom HTML” at the bottom.

But, I’m going to use the back arrow in the top left, to undo this and bring it back.

Then, once we’re happy with everything on our page, we just need to click “Update” in the top right, to publish our changes.

And now if we click “View Page”, in the bottom left.

We’ll see that our changes are now LIVE.

So, we have our new contact form here on the right.

And if I just quickly fill this out.

Type a quick message.

And click submit.

If I open up my email inbox, we’ll see that I’ve received the message as an email.

And, it’s going to be sent to the email address we used, when installing WordPress at the start.

Then, if we go back to our website.

We’ll see that the map has also been updated at the bottom and now shows our new location.


Updating the Astra Theme Footer


And now that we’ve finished adding content to our pages, we’re going to update our websites footer.

Which is this part at the bottom of our website, that shows on every page.

So, to update our footer, we need to click where it says “Customise” in the top left, to open the theme options.

Then, we’re going to click into “Footer Builder”, on the left.

And now, if we look on the right, we’ll see our footer area, here.

And then under this, we have the different parts that make it up.

And we’re going to remove everything from this 2nd row.

So, to do this, we just need to click the X to the right of each of them.

And when we do this, we’ll see the stuff is now gone in the preview above.

Now our footer just consists of this line of text, which is known as our “copyright text”.

To change this text, we just need to click where it says “copyright”, on the left.

Then, we can change the text in this box, to whatever we like.

And we’ll see it updates on the right.

Then, under this, on the left, we can also change the “Alignment”, if we like But, I’m just going to put mine back to the left.

Now, if we click into the “Design” tab in the top left.

We can change our “copyright text colour”, here.

And then our “font size” underneath.

But, I’m just going to put these back to the way they were for mine.

Then, if we hover over our footer on the right.

And click this little pencil icon.

This will open a different set of options on the left.

And if we click into the “Design” tab at the top.

Here, we can change the “background colour” of our footer.

And we’ll see it updates on the right.

But, I’m just going to put mine back to white.

Then, once we’re happy with our websites footer, we can click “Publish” at top, to save our changes.

And then click the X in the top left, to close out of the theme options.

And now, if we scroll down to the bottom.

We’ll see that our footer has been updated and the colours will be different if we changed them.

And we’re getting close to the end now, the last thing we need to do is update this action button in our menu.

But, just quickly before that, since you’ve made it so far through this video, be sure to hit the subscribe button and turn on notifications for the channel.

I release WordPress tutorials all the time, that will help you improve your new website and I’d love to have you as a subscriber.

But anyway, let’s get back to our website.


Call to Action Button (Menu)


So, to update the button in our menu, we just need to open up our theme options again, by clicking “Customise” in the top left.

Then, we’re going to hover over the button itself, on the right and click the little pencil icon above it.

And now, if we look over on the left, we have the different fields for the button.

So, first we can change the button text, and I’m going to change mine to say “Coffee Tutorial”.

Then, under this, we need to paste in the URL we’re wanting to link it to.

And to save some time, I’m just going to paste in the same URL I used earlier.

But, if we wanted to link this button to a page on our own site.

We just need to open a new tab in our internet browser and visit our website.

Then, we can find the page we’re wanting to link to, copy the URL from the top, and then come back and paste it into this box.

Then, if we’re linking to another website, we need to turn on this switch, beside where it says “Open in a new tab”.

Then, once we’re done here, if we click into the “Design” tab at the top.

We can change the button colours, size, and anything else we want.

But, I’m just going to leave mine the way it is, as I think it looks pretty good.

Then, once we’re happy with our button, we can click “Publish” at the top, to save our changes.

And then click the X in the top left, to close out of the theme options.

At this point, we’ll see our button’s been updated.

And when we click on it, it now links to the URL we used.


Astra Theme Tutorial – Final Overview


And now, the very last thing you need to do is congratulate yourself, because you just finished building your very own website.

And saved a bunch of money compared to hiring someone else to do it for you.

So, we have our different pages.

With our text and images and buttons.

Then, we also know how to create any new pages we need.

And we can add or remove any of the different sections.

Then, over on our contact page, we also have our form, so our visitors can send us a message.

And then we have our map at the bottom, showing our location.

We also have our menu, here at the top.

And our action button.

Then, without us needing to do anything else, our website’s also 100% mobile friendly.

So, if I just make my screen a little smaller.

We’ll see that everything resizes and rearranges itself.

So, it’s always going to look good on any device.


Astra WordPress Tutorial – Outro


So, that’s us now at the end of this tutorial and I really hope you enjoyed it.

If you did, please be sure to give it a like here on YouTube to show your support.

And subscribe to the channel, if you haven’t already.

And if you know anyone else that would benefit from this video, be sure to share it with them as well.

Then finally, if you have any questions about any part of the process, just leave them as a comment below and I’ll try my best to help out.

Once again, my name’s Martie from letsbuildwp.com and thank you very much for watching my video.

[End of Transcript]


Please consider subscribing on YouTube (thank you)

Hosting & Domains

Note: Since I created this tutorial, HostGator stopped giving affiliates discount coupons, which means, the coupon no longer works. But, you should still receive a discount by clicking through the link above (just not quite as good), sorry.❤️

Related Links

Worth Noting: There is a pro version of the Astra theme, but we will be using the free version in the tutorial above.

Astra WordPress Theme Circle Logo

Why choose the Astra theme?

If you’re on the fence, wether or not to use the Astra theme.

Here are 5 solid reasons to choose it:

  1.   The Astra theme is super easy to use (beginner friendly).
  2.   It works perfectly with Gutenberg and all major page builders.
  3.   Astra is a super lightweight theme, at less than 50 KB (loads fast).
  4.   It follows best SEO practices and automatically adds schema markup.
  5.   They have some of the best support I’ve personally experienced.

According to Hubspot, the Astra theme is also the most popular WordPress theme of all time, with over 1 million downloads!

Click here to jump back to the video.

(or keep reading to see some reviews)

Astra Theme Tutorial – Trustpilot Review Image

Astra WordPress Theme Reviews

★★★★★


Not only is the Astra theme popular.

But, it’s also one of the best REVIEWED WordPress themes of all time.

With a 4.9 star review score on Trust Pilot (1,700+ reviews)

WordPress Astra Theme Reviews on Trustpilot

And a 4.9 star review score on WordPress (4,900+ reviews)

WordPress.org Astra Theme Reviews

The Astra theme also has a few great testimonials from BIG name’s in the WordPress space (including WPBeginner and LearnDash).

Astra Theme Review by WPBeginner

You can see more on their official user reviews page.

Martie – All the steps

Astra Theme Tutorial (All Steps)

Here’s a list of everything covered in the video above.

(along with the time they appear)

TimeSteps
00:00:00Tutorial introduction.
00:00:42Website tour.
00:03:29What are domain names?
00:03:44What is web hosting?
00:03:55Registering a domain name and hosting.
00:09:30Installing WordPress (on HostGator).
00:12:04Deleting WordPress demo content.
00:13:47Installing the Astra WordPress theme.
00:15:20Installing the Starter Sites WordPress plugin.
00:16:12Setting up the Astra Mountain template.
00:21:20Editing our website’s pages.
00:49:09Deleting pages.
00:50:00Creating new pages on WordPress.
00:50:49Astra page options.
00:52:16Importing page templates.
00:55:08Editing our website’s menu
00:58:23Adding a contact form to our website.
01:00:05Adding Google Maps to our website.
01:03:37Updating the WordPress footer area.
01:06:56Updating the “Call to Action” button (in menu)
01:08:47Tutorial outro.

If you’re new to WordPress, some of the stuff above might sound confusing.

But, don’t worry, it’s all easier than it sounds.

Click here to jump back to the video, and let’s get started!

Martie – All my love and support

I really hope you find this Astra theme tutorial helpful.

Let me know what you think in the comments below.

(I’d love to hear from you)

Until next time,
Martie.

P.S.

Do you think your friends would like this tutorial?

Please share it with them, if you get a chance.

I would really appreciate it.

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Join the Newsletter?

Just enter your details on the right and I'll send you a quick email when I publish something new.

Join the Newsletter?

Just enter your details into the form below, and I'll send you a quick email when I publish something new.

Join the Newsletter?

Just enter your details below, and I'll send you a quick email when I publish something new. (no spam)