Astra Theme - Still good in 2021? (Site Setup & Speed Tests)

today we have an astra themed tutorial so astra theme for wordpress still one of the best wordpress themes especially if you're looking for a free theme for wordpress now this is what we've put together today it doesn't take very long using a free astra starter template i'm using some of these flat graphic illustrations i'll show you how to get some really cool free illustrations that you can use for your website as well later on so we're going to put this together i'll cover everything headers footers using the page editor i'm going to be using the default wordpress editor i'm not going to use elementor at all this is going to be different from most other youtubers most other youtube videos will use elementor as it is a bit more newbie friendly but it is a bit slower let's be honest if you use the standard wordpress editor the gutenberg editor that we're going to use today you'll get faster page loading scores i'll go into those a little bit later in the video so i'll show you exactly what i mean but this is what we're going to build and it looks good on mobile as well completely mobile responsive and that was really easy to set up when you stick with the templates and the wireframes and patterns that come default with the free version of astra probably the thing that makes astra stand out from its competition is its free library of starter templates there are loads of free designs that you can load up and get started with a project get really fast results and so we're going to use one of those today there are lots to choose from e-commerce blogs lots of different business templates so you can probably find something that will match your project pretty much straight away that is its main strength so we'll go through that as well so if all this sounds interesting then keep watching [Music] alright so i'm just starting with a fresh install of wordpress here and we're going to go to our dashboard and then we'll just head over to appearance and themes from here we go to add new and generally you'll see the astra theme under the popular tab there it's the most popular theme at the moment so it's pretty easy to find you can also just type astra in there and you'll be able to search it up so either way is cool let's go ahead and install astra when that's all done you click activate as soon as astra activates you'll get this option here to get started with a starter template so let's click that one so now the starter template plugin is active we can choose our page builder there are four that we can choose from now most youtubers are going to use elementor elementor is a little bit easier to learn but the performance is not quite as good as gutenberg is the default one that comes with wordpress we can see our wordpress logo there this is the one i'd encourage you to use i'll talk a little bit more about why we're going to choose gutenberg in just a second now at this point i'll just do a quick one-minute comparison between gutenberg with astra and elementor with astra so i'll do a quick one-minute comparison and then we'll come back to this point and continue the tutorial all right so the reason i prefer gutenberg ahead of the other page builders and particularly a head of elementor is gutenberg's the default wordpress editor it doesn't add any plugins doesn't add any extra code to your website so therefore it does perform a little better and it's loading faster than the other choices so let's look at this public speaker starter site because this public speaker site is available from astra and it's available on gutenberg it's also available on elementor they're basically the identical versions of the same site so we've got the uh elementor version here and the gutenberg version here we can run them through google page speed insights we've got the gutenberg version here running at 98 on mobile and the elementor version running significantly slower so we've got the first content for paid 3.5 seconds there 1.1 seconds so significant speed improvement by just by using gutenberg you've got the same looking site it's obviously a little bit more of a learning curve using gutenberg compared to elemental but it's worth doing that because of the performance benefit so hopefully from there you can see why i'd recommend gutenberg ahead of elementor and actually it's not that hard to use gutenberg nowadays with astra provided that you stick with one of these starter templates and you utilize a lot of asterisk pre-built blocks and wireframes which i'm going to do in this tutorial just to keep things as simple as possible and you don't get frustrated trying to work with gutenberg so let's continue on with our tutorial from here we can choose the starter templates to choose from let's just choose the free ones so let's highlight the free one there straight away you can see that there are loads of choices to choose from i'm actually going to go with this web agency one it's a very new i haven't seen this one since i've used astra last time so i want to try this one i quite like the styling here it's a very contemporary in its design so i think i want to go with this one it looks quite tidy as well hopefully this loads fast so let's go ahead and import the complete site here astra they're trying to collect a bit of data for their development so you can just say i'm a beginner i'm building a website for myself click next and then click skip you don't have to sign up to that stuff it'll start importing your website so it'll take a few seconds uh to import and then we can view our site so this is what we've got so far all loaded up on our site so the other reason i really wanted to try this was when i installed astra i saw that this was their actual thumbnail that they used to promote the theme so i think this would be a nice one to choose from obviously if they're promoting this one this must be a pretty good experience to use so i'm going to try this one out the first thing i like to do with these asterisk data sites is go to our customize i'm going to turn on some performance options here in the customizer we'll see we've got performance here let's click that one we want to turn that on turn on google fonts locally and turn on preload local fonts we hit publish on that and we flush the local font files so this is going to speed up the page load just by loading the fonts locally so now that we've made that small tweak let's just test the google page speed at the moment and see how we're running so here we've got a 91 on mobile which is pretty good and on desktop we've got a 99 which is very nice as well so the 91 on the mobile is not quite as good as the one we tested earlier the public speaker website but still i think this is quite good and it does look quite attractive on mobile i think as well anyway let's get back to customizing this site let's head to our dashboard you can get there in the top you'll see the dashboard link there i'm going to head to settings under permalinks now i like to use post name as my permalink setting there's a few different options but this is the best one for google and it looks very uh more clean and simple as well so go with post name and i'm going to save that in the other thing i like to do is under settings and general and here we've got our title and our tagline so just make sure that you've got those customized to your liking the default tagline is usually just another wordpress site so i'm going to change that to wordpress tips and tutorials i'm okay with this title but just set those up as you like and save that in then let's head to our customizer that's under appearance and customize so our customizer gives us the ability to work on the headers and footers so the footer is down here and the header up here includes our logo our menu and our social icon so let's work on that first thing i'll do let's go to site identity we can do our site title and logo settings now here it says our logo on this page is from the transparent header section so we have to click customize transparent header and this is the header we've got here see the white color is the white color there so we're going to change that image and we can go ahead and upload one of our own logos that we've made i'm going to upload a white logo that i made earlier this is it here we can choose that one and there's my new logo it's a little bit big and so we can adjust the width of it down here i'm going to make it 60 pixels so that looks about right if you're wanting to make a simple logo with a transparent background i found logomaker.com that's it logomakr.com does a pretty good job of making simple transparent logos for these kind of applications otherwise just use your favorite image editing software and let's continue on here so we've got our menu so let's click the menu here so here we've got a link to configure the menu and we click that one and here we've got our primary menu this is the menu that we see up along here so let's hit click edit so here we can see we've got home about services reviews etc this lines up to what we're seeing up here so we can actually add and remove things from that menu so if i wanted to remove the services link i could just click the x there and we can see that we've actually removed that one and if you want to add things you can add items obviously by adding any pages they've created click the plus button to add things on here you can actually add posts and you can add custom links as well so any link you like you can add that to the menu so go ahead and add anything you like there later on in the tutorial i'll actually make a new page by adding a new page we can actually add new pages to the menu as well from pages that we create ourselves another thing worth learning at this point is to make a sub menu so let's say we wanted to move reviews and faq into a sub menu under the about so we can actually drag these around a little bit so that they're indented and that will create a sub menu i'll show you what i mean so let's move this faq so it's just behind the about it can be a little bit fiddly that looks okay and i'll drag that reviews under there too so we've got about reviews and faq all in the one menu and we can see we've got a drop down there the problem is that because we've got white text and our background color is set to white we can't read our menu so we need to fix that so if we actually head to that pencil icon there we can design our menu so we've got uh designing the primary menu what we actually want to do is design the transparent menu because we're working on a transparent menu here so let's go back and customize the transparent header that's the link we want you can get that to there under header builder and we've got customized transparent header so just make sure you know where that is click on design and here we've got submenu text and link so let's add a color here we can choose the global colors so let's go for black and maybe gray as our hover color so i recommend choosing global colors you can edit that global palette we'll do that a little bit later but now when we go there we've got reviews and faq in our sub menu that's actually a nice little upgrade because the free version of astra didn't used to have any customization of the sub menu used to have to do that with css code so this is a nice little addition that they've made since i've last used it the other thing we can do up here is let's work on these social icons so we can go ahead and add and remove things so i might add a youtube one we're obviously using youtube right now so let's add that in and the one i don't tend to use is twitter i'm not a big twitter fan but these are social icons and then all we have to do is add the relevant link to each one so for youtube i just paste my youtube url in there so youtube.com ideaspot is my youtube link but just put in your relevant links for those social media pages another thing you can do if you want to make these a bit more prominent is actually show the label there and that will add the full label there for each of the social media pages i think that's a bit overkill for my taste i think people know what these are by now the other major upgrade they've made in astra is this header is made up of three rows now so there's three sections and three rows so there's total of nine areas where you can add menus buttons text that kind of stuff so you just go ahead click on this is the top row all these things are on the main row and there's a bottom row down there so let's add something to the top row let's just add some some html for example and then we could click that now we can just add in some stuff there so that's what you mean i mean that's what i mean so make that smaller anyway you get the idea i'd rather just keep this fairly simple but you can add lots of things to that header now that there's so many more areas you can work with now let's head down to our footer let's look at that footer so we've got that down here so as we can see clicking on that actual footer there brings us to our footer design and we can see this whole thing is footer now i actually don't like having so much content in the footer you might be different but i think i'd rather if i'm using wordpress i'd rather use the block editor to do this kind of work rather than putting all this in the customizer with the footer so i think i'd just have a small copyright message maybe some contact info down there but i wouldn't put the google map and the hours and all this menu and stuff down here i don't think that's helpful personally i'll just clean this up by just removing those things so just the x there you can remove them so i'm just going to remove those things the one thing i will customize is just that copyright info down the bottom there so we can click that one and we've got copyright info there so you can type whatever you want in here by default you've got copyright 2021 the site title so 2041 idea spot and then powered by astra um you could delete that part out i think powered by astra just leave it as copyright ideas but i think that's cool you could add some stuff there if you want up to you but i think just keep it keep it nice and simple for this demo and hit publish but again if you want to add custom stuff to this footer you can you can do that if you like so you can add widgets and html social icons footer menu all those things you can add there but i prefer just to keep it simple if i want to add content i'll just add content to the bottom of the page using the normal page editor finally i'll show you how to tweak the typography and the colors of our theme so that is we head back and from back on our main menu here we've got global we can change our typography and colors here so let's go typography first the two main things you'd want to look at here are the body font and the heading font so heading font here is poppins we can change that to whatever you want so if we wanted to roberto we could change that to roberto and uh body font changes to roboto there i thought poppins was actually better so let's change it back to poppins and we can see our body font changes back to poppins now our heading font the heading font at the moment is monster and it's set to bold 700 for h1 so we can actually change that now the heading font family is monster art so we could change let's try later and there we go change to later now it's later we've not just dropped a normal 400 if we wanted something as bold as it was before boost that back up to 700 so now i've got later bold 700 and h2 is lato bolt 700 h3 so it's inheriting those values from the previous one from the heading font family which is very handy now honestly i did prefer mozzarella so i might actually just go ahead and change that one back now you can get quite detailed in here changing line heights having individual fonts for different levels of heading having different sizes for each different level and weights for different levels i don't think that's really worth spending too much time on just stick with the current design maybe change the font type but that's probably about all i would change here i'll keep the weights the same i think this design looks balanced as it is you just tweak it a little bit to suit your taste next step we can head over to colors so that's here so here we've got three palettes to choose from you can customize these palettes and these are the global colors which match these descriptions so the first one that we've got set up by default uses uh purple as our link hover color and we've got these yellow uh highlights for our buttons so we could change it to this one or this one they're all just a little bit subtly different i think let's go with the number two and if we publish this if we wanted to be a little bit more conservative we could just change this yellow and orange to be another shade of blue so maybe let's start with this shade of blue i'll just copy that out and there we go and i'm going to pop that in here and i'll make that a little bit a little bit lighter there we go same with this one let's make that a little bit lighter again there so that's a little bit more conservative rather than the the um flashier yellow so up to you i might leave it for this for this example and then publish when you're done the only other thing i don't like is that the headings are a little bit gray i'd rather just have a solid black as i had in color so let's click that one and click the black from our global color there and that's changed all our headings to solid black i think that's a little better and i'd prefer the text color to be a little bit darker as well so i think we can choose that one and perhaps we make that a little bit darker cool all right so again don't get too crazy with these palettes i just keep it fairly conservative i like to use blues and grays black and white but um totally up to you so that covers our colors and our fonts in our customizer one other little thing i want to just want to make this header into a full width header so let's go back to our header builder there is a design option here full width or content width we can change it to full width and it spaces out our header a bit more i kind of prefer that but that's just a design choice really now that we've covered off on the basics of using our customizer we can start actually looking at editing this page so i'm going to head over to our page here and you can access the editor just by clicking the edit page one here now this will bring us to our block editor also known as gutenberg so feel free to explore here you can basically click any of the blocks and edit the content of them you'll notice it doesn't really look what it looks like on the browser when you're viewing it live to preview the page you can use the preview feature there and preview in a new tab this will allow us to scroll through and look at how it's progressing by default we've got the desktop view here if we're using google chrome like i am you can right click and inspect and you can change the device it'll emulate various devices such as the iphone x and the pixel galaxy s5 those kind of things and you can have a look at how it responds on a mobile device as well i'll close out of that and go back to desktop view but let's start editing our page basically what i'll do in this is edit the things that i like and just remove the blocks that i don't want on the page so i'm just going to change the text there idea spot tutorials and we can change this image just click on the image we've got a replace option there we can take anything from our media library or we can upload pictures from our drive i'm going to open the media library i've uploaded a few different graphics here if you're wondering where i got these images i got an image pack from free illustrations.xyz they've got some really cool designer work here in that popular flat illustration style so i'm going to use these kind of images on this website here so let's go ahead and insert one of these and see what that looks like there we go the nice thing about these illustration styles is you can choose the format on this site and you can use svg which gives you quite interesting designs and very small image sizes so if we actually look at what this image is in terms of its size you can see here these are quite small that's only a 16 kilobyte image if we were to compare that to a photograph such as this one here that one is 144 kilobytes so you can save quite a lot of loading time by just choosing simple illustrations so i'm going to go with that for now and let's see what we can do with this background so we've got different gradients we can choose from and we can customize the gradient ourselves by clicking the color swatch there so i might go with it just a blue that looks pretty cool if i wanted to be even more uh particular about these blues i could actually match them to the blues that we chose before from our customizer so i could just go and and grab that that particular shade of blue and click on there and replace it with the with the shade that we used before there we go i'll do the other one as well see what that looks like a nice light blue there we go you'll notice we even have arrows here so we can undo and redo things as we go and see what the effect is we can also go ahead and repreview again and see what it looks like in the actual website fully loaded now sometimes just clicking around and changing things works well but sometimes it can be a little bit confusing figuring out what exactly you're trying to do you can look at this list view here and that will open up all the things that the page is made up of and you can scroll around and see exactly the configuration they've used to build this page let's say i didn't really want this block with the orange icons and those bits of text so i could try and remove that just find the group that it's associated to so we can see this is the group here and if we wanted to remove that whole group we could just remove that block and besides removing things completely you can change the order of things as well so how about instead of putting the why choose us below about us we could move why choose us up one more level so let's find that section so we've got a group here which contains all of this in there we've got this group we've got a spacer then we've got this one called media and text so this is a media and text block you've got media there which is the picture text which is this part here and we can actually move those up and down with these little arrows so we can i'll move those up there we go so we've got uh why choose us block above the badass block now if we go ahead and reload our site on the live site we can see how we've made the progress so let's go back and let's actually change some of this text so this is just filler text we can change it to our own content like that i might change the heading first some id spot provides tutorials and training and then put a little bit of text about why we choose ideaspot here there we go i'll hit update and then refresh here and we can see our new text next thing we might look at is this button here so if we head back to our editor we can see the button links to the contact info here so it's a hash contact these buttons effectively let people scroll around the page by putting these little anchors on the page so these are internal linking anchors that let you for example this one will scroll right down to the bottom there where the contact info should go so we can see here on this on the on our list view the about link is there the services link is is this one here our services the about is this section here that we built earlier and the contact is down the bottom it should be we've got reviews there faq there and contact is down here so this is where we'd want to put our contact info later on but for now let's just do a little bit more work on these i think we can just replace these images with other images just to show you how to do that so you basically just click it click replace as we did earlier and let's stick with our illustration style that we were using maybe this one is cool and let's go with maybe that one all right let's update and reload here so it looks a little bit more customized now let's get back to working on that button again so i want to make a contact area so let's make a new block down the bottom now we can start building say like a media and text block from scratch that's one way of doing it i think that's a little bit more work than it needs to be we can actually use the starter templates have some patterns that are pre-built and they have wireframes as well which has some pre-setup layouts this will save you a lot of work just pick a design that's already set up these look good on all devices so fully mobile responsive and they've obviously had a professional designer work on these and get them looking just right they even have quite common style blocks here in that list so i'm going to choose a contact block and then choose something that might be useful for what we want to do here so let's maybe go with this one so this contact block sort of implies that we've got two locations on these two columns so i might have a look at that in more detail so we've basically got a column there if we look in our list view and a column here i might just remove that column so once that com column is selected we can remove the block now we've just got the two the other thing you're probably thinking is what what on earth is this here this is the google map that has been embedded there so i might hit update and i'll show you what i mean so if we reload here we can see that we've got a google map embedded at the bottom of the page now this is pointing to brooklyn we obviously want to change that to our own location so you just go to google maps yourself and just pick a spot an address that you want to use on your map then we click share then we click embed and we just copy that html that is the same sort of code that we actually put in here so we can just replace that just highlight it and delete it and replace it with your own code that you got from google maps if we hit update we can see if we refresh our page here we should get our new map of our new location and we'll change the picture of that building we'll change that to something of our own probably the mailbox would be appropriate for a contact section so we'll pop that in there now it looks like it's out of the picture but the pitch is very small so let's see if we change up to 100 and let's go ahead and update and then reload this page and see what we've got there's our contact so it looks decent and would obviously go ahead and change all the text there to match up with the relevant info of our own contact but you get the idea now our main goal was to have that contact button actually linked to this position on the page so let's select that group there and what we want to do is go to advanced and you've got this section called html anchor and i want to anchor that to the contact button so i'm just going to call that one contact now when we update it we should be able to see that i'll reload here and all these buttons that link to the contact will actually just shoot us right down to that contact section there so same same as that one there we can see it links to contact and brings us down to the contact block so you can basically link to any point on the page by using that kind of link so you've got that contact you can see the the anchor is there on our listing view we can go any at any point we can go back to advanced we can use another name and anytime we want to link to any position on the page we just simply add that link let's say i wanted to link that to contact as well just put that in there and that's an internal link the other thing we can do is make external links obviously as well if i wanted to link to say this page another page or another page on my website we can pop in another link there and you'll be able to link um to that other place so like i said reload there now i've got that linking to the free illustrations page not yet i think we have to click update and reload there we go that is linking throughout to this page so you can set up links internally or externally like we've done here but the main lesson to get out of this is uh adding new sections that by far the easiest way is adding it in through the astra pre-built starter template blocks pre-built these always look good it's going to save you a lot of work just customize these to your own content either using patterns or or wireframes both work well so the other thing is this is obviously a fairly simple one-page website where all the links are just internally on the same page so we can go to reviews by going there for example but we don't have any uh other pages on the website so if what if we wanted to add another page to this site i think the quickest way to do that is just clone a copy of this page and then change the content then we can keep the same sort of work that we've done on this one and just add more to our website so i'll show you how to do that so in our wordpress dashboard i'm under plugins and add new if you search for the word duplicate you've got a few different duplication plugin options i like this one called yoast duplicate post has four million active installations very very common very good plugin we can head over to pages here we can look at all our pages and now with that yoast duplicate page plugin active we can see we've got if we hover under our page we can see we've got the clone option there so i'll click clone and it's created a draft version copy of that page so i'm going to click quick edit there i'm going to call this one about let's make a dedicated about page so we'll hit update and let's go edit here now that we're in our editor we can just first thing i'll do is check under the page tab there check the permalink it's called about just make sure that you're happy with the name that'll that'll be the name the link there if we click that one we can see it loads up and that's after we publish it it'll do that anyway there we go so we can actually view the page and it's at slash about so if you're not um happy with that permalink you want to change it to a different name you can change it in there under permalink but i'd basically just put the about details in here um like that about us and just remove anything that's not relevant to this section maybe just change something to make it look a little bit different from the other pages pop that in there for example and hit update and i don't want the button there but basically go through and make this into a different page the about page i just removed the things that aren't relevant to to what we're working on here so use the list view uh grab the blocks that you don't need it and go ahead and just remove those blocks um pretty straightforward only takes a few seconds when you're done update we can have a look what we've got there we go and now we can actually add this dedicated about us page to the menu here so i might copy that link here and we can go back to our customizer let's go to our to our menu there we go the primary menu and the about here is a custom link at the moment what we could do is change that custom link to the link that we've created there and publish it the other way we could do it we could add an item and you can actually just add the about page in that way as well so you can use a custom link or you could just use a page link both both ways will work that creates another one in there but i'm not going to use that one i might just remove that one there we go hit publish and now if we're on our home page we can let's reload and we can see if we click about there that'll take us to our about page we can go back to our home page we can still move around our homepage and even if we're on the about page if we use that submenu that will take us back to the home page to the facts section on the home page so all runs really nicely one last little tweak that i forgot to mention during the video is the button colors you can do global buttons i should have mentioned that earlier so if we are in our customizer you can go global and buttons and the buttons i think would be better with white text here so i'm going to change that to white text so and then you can have the whole of a color so when it hovers it's gray text and non-hover is is white text so i think that's good same with these background colors of the button itself the button will be lighter when you hover so you can play around with those and then hit publish when you're done but i think this looks a little bit better so at this point in the tutorial you've basically got all you need you can build a header you can build the footer you can put all the content in move it around remove it completely add new content through wireframes and pre-built sections and customize everything as you like so that's really all we need to get started with astra and the astra starter templates and using this method with this theme and these kind of illustrations it's gonna load really fast i think just for fun let's run this through page speed insight so let's go ahead and put the about page on google page speed insights and see how this goes should be done in just a second here let's see what we get 92 on the mobile and a 99 on the desktop so pretty nice we've got a first contentful paint 1.2 which is really good so that's usually the most difficult one we need to keep that under 2.5 seconds so well under where we need to be for our load time okay now for our conclusions on the astra theme so using the free version of astra is still really quite good in 2021 going into 2022 i still see astrid being a solid choice the speed using the gutenberg builder here was very good still 90 plus in google page speed insight so you still need good hosting something like cloudways would be a good way of getting these kind of scores i'll put a link in the description so you can get a free trial to some good hosting options so check that out 180 plus templates uh a lot of those are in the free version even e-commerce websites blogs astra has the advantage when it comes to having a big range of free starter templates so i think that is where astra really shines and using gutenberg this year i think it's been much easier i would say astra is quite usable now especially using the pre-built wireframes and patterns and combining them with the pre-built gutenberg sites that was quite easy to put aside together as we saw during the tutorial and the customizer has improved a lot especially the menus having three layers of menus be able to put lots of things in the menus very easily i quite like that lots more options in terms of customizing colors and fonts and different aspects of the header and footer they've given us a lot more in the free version you used to get those in the pro version but now they've uh delivered a lot of those in the free version i think that is because of cadence theme cadence theme last year gave us a lot of these things in the free version so i think astra has improved a lot in that area just to keep in touch with its competition so moving on um from astra i think cadence theme is the other really good choice in terms of what's the best free and fast theme i think cadence does tend to be a little bit faster but i think the advantage with astra is the designs the templates and the patterns and wireframes does make it quite easy to work with and get results in terms of productivity so astra very good choice still it's the most popular theme for reasons so i still quite like it i think it's still a top theme to use especially if you want a free theme for wordpress from here you should probably check out the cadence theme i put the video up on the end screen and also cloudways hosting just setting up cloudways hosting with wordpress if you want to transfer from a slow host over to a fast host that's a good video to watch i'll put that on the end screen here but thanks for watching i'll see you next time

Channel: IdeaSpot

Views: 2,598

Keywords: astra theme, astra theme wordpress, astra theme review, astra theme tutorial, astra theme wordpress tutorial, astra tutorial, astra vs elementor, gutenberg vs elementor, elementor bloating, elementor bloat, astra speed, astra theme speed

Id: 3QnTmbrkbFw

Length: 33min 41sec (2021 seconds)

Published: Wed Oct 06 2021