Full Astra Theme Tutorial - Learn How To Use The Astra Theme To Make A WordPress Website

[Music] this is going to be the perfect video for anyone that wants to use the Astra theme it's a full tutorial where I'm going to walk you through from step by step from top to bottom how to get the most out of the scene how to customize it exactly the way that you want to customize it for you for your business for your brand for your website this is the video for you maybe you're a beginner maybe you watched another tutorial on YouTube about how to use this theme this is going to be the full tutorial I'm going to show you everything from top to bottom let's not waste any time let's get right into it so here I am on a clean WordPress website installation there's nothing installed now if you don't already have hosting and a wordpress installed if you visit WP crafter com a slash the site ground it's gonna take you here to site ground and apply a 70% discount on and there hosting now if you don't have hosting I recommend this go grow big plan right here you're gonna save 70% off performances fantastic support is fantastic and I'll put a that link down below in the video description and I'll also put a link to a tutorial on how to set up WordPress on site ground it's a pretty great service okay so here we are back to the website now what we need to do is download the Astra theme now the best way to get the Astra theme is to open up a new tab in your web browser and visit WP crafter comm slash get Astra now I'll also have a link to this in the video description box when you click on enter and go to that link it's going to take you to Astra's website and automatically start the download process for you that's all that you have to do you can see here on the bottom left it's already downloaded to my computer and that's where we're going to get it so let's go back to our WordPress website we'll go to appearance and we'll click on themes we'll click on add new and then we'll click on upload theme and then we're going to just drag-and-drop Astra from our downloads folder of our computer right there and click on install now once it's uploaded click on activate and now you can see Astra is active on your website so the next thing we want to do is visit the Astra settings so underneath appearance there's a new option that says Astra options go ahead and click on that and right here is basically the home base for the Astra theme now one of the main benefits of going with the Astra theme is a plugin they have called astrocytes which is over a hundred ready-made websites that you can add to your website with just a few mouse clicks so we're gonna go ahead and get that set up right now so right here it says import starter sites and I'm gonna go right here it says install importer plug-in we'll click on that and it's going to download the plug-in and then it went ahead and activated it for us now the first thing it's going to ask us is which page building tool are we going to use a wordpress theme handles all your global styles in your header and footer I'm going to show you all this in a little bit and everything in between is put together with something called a page builder so we're gonna choose element or which happens to be the most popular page builder ever created for WordPress so we'll click right here and then I'll click on next and this plugins now going to show me all of the sites that I can restore with one click now some of the sites that you see you have this little badge right here that says agency and what that means is there is a premium version of this that you pay a little bit of money for and you get access to all of the astrocytes that say agency along with the free ones obviously so we're going to just go and choose one of the free ones so on any of these you can hover over it to see what the design looks like click on preview and you can get a full screen preview of what the design looks like if it's one that you want to add to your website it's very simple all you have to do is click on import site now what this is going to do is essentially make your website into this demo where all you have to do from that point on is change your styling your Fonts to be the fonts you want the colors that you want to change the text and the images and you have a full website so we're gonna let this do its thing alright the site is done importing I did want to point out an option that is right here what's nice is if you go through the site and you decide that you didn't want that one you want to try a different one you can go through that whole process again but before you click on the button to start the import you'll want to click on this checkbox right here that will delete the previously installed a site so if I wanted to switch all I have to do is make sure I check that box it's gonna wipe out what I had prior and it's gonna put in the new website so here is what WordPress looked like by default now I'm gonna click on refresh and you're gonna see what my website looks like right now see how easy that was it just took a few minutes to get everything set up and get me to this point now in the rest of this tutorial we're gonna go through how to customize the site to make it your own this includes changing the logo changing the colors changing the fonts changing the menu changing what is off to the right of the menu changing the footer etc we're gonna go over all of that in the rest of this video now I'm gonna click back and once this is done you can click on the X on the top left and it's gonna take you right back here I do want to let you know late in 2019 Astro starter sites the plugin that shows us all of this is going to have a massive overhaul and it's going to look better it's gonna be looking a little different but it's gonna be better but if you just follow what you've learned in this video you'll be able to get by just fine just don't be startled if you see it looked a little bit different so now I'm going to go back to the Astro options by clicking right here underneath appearance and what we see here is a series of jump links and these will take you is specifically to where you need to go to change what it says so if I wanted to change my logo I would click right here if I wanted to change my fonts it would be here my header right here my footer right here and we have four other options right here on this side.now the Astra theme also has a professional version available you can find out more information by visiting WP crafter comm slash Astra and what it's going to do is give you more options to customize your WordPress website however for this video I'm gonna focus on the free version what you have right now we also have some useful links right here so if you want to learn more about the Astra theme you can click this link right here to visit their knowledge base there are hundreds of documentation and articles there that you can go through to learn just about anything you'd want to learn about the Astra theme here's a link right here that's going to take you to the Astra Facebook group community you might just see me in there that's a great place to go to connect with other Astra users and last right here is the option to submit a ticket if you're running into some trouble you can click right here and open up a support ticket and they will help you out to solve whatever problem that you're facing so now let's learn how to start customizing the properties of our website you're gonna want to go to appearance and then click right here where it says customize and it's going to take us into what's called the customizer and this is where all of the options are gonna be for you to customize your colors your fonts everything about the Astra theme you're gonna find that it's quite easy to make this website your own now throughout your website you're going to see these pencil icons you're gonna see one right here you're gonna see one right here and you also see one right here now those are there for convenience if you're to click on it it will take you to the specific part in this settings panel or you can adjust the settings for what that is next - so let me show you for example here's my logo if I click right here to the pencil off to the left of the logo you can see it takes me exactly in the settings panel where I need to go to change my logo so I can change the logo right here you also get the option to change a retina logo that is for displays that have high resolution and then down here you can also set a unique logo for when you're viewing this website on a mobile device and we get these same options we click on the pencil right here next to the menu and when we click on the pencil right here next to the entire main menu so those are there for convenience but I think it's best to learn the settings from a top-down approach so you'll always be able to find exactly what you're looking for so at the very top we have global options and these are options that are gonna affect your entire website and these are gonna be typography and font options how large you want certain fonts it's going to be colors it's also going to be the style for your button right here so you're going to be able to set those in the global options ml affect your entire website next down on the list we have our header options and this is going to be the options for everything above this line that is called your header so this is where your settings are gonna be for your logo for your menu and for your button they're all gonna be right there as well next we have bread crumb options I'll show you that when I get to it next are the options for your blog and the style of your blog posts then the sidebar this is an area that will be off to the right of blog posts optionally and you can put information there and then lastly you were gonna have the footer this is that area at the bottom of the page where you typically have a copyright and then we see this separation right here and we have some additional options one is menus now this is going to be where you decide which items are gonna be in your menu in which order it's gonna be pretty easy to use next we have widgets for various widget areas homepage settings this is where you choose which page on your website you want to act as your homepage and then here's a slightly advanced section called additional CSS this is where you can modify some of the Styles with code for your website don't worry it's actually quite easier than I just made it sound now depending on what plugins you have on your website you might see additional options here for example here is a website and it has Astra but this also has a plug-in called Commerce which allows you to have a full ecommerce platform on your website now if you notice there's an additional option here that isn't shown on the site we were just looking at and that's because it doesn't have woke immerse enabled so you're gonna see this with a lot of the Astra integrations such as WooCommerce learn - easy digital downloads and various plugins like that so that is why it might look different depending on your website ok let's get started I'm first gonna click on global and we have these four options right here we have typography these are gonna be your fonts colors container what the container is is your website has this container from the far left to the far right just like that we can set some settings on how wide the content actually goes in that container section it'll all make more sense when we take a look at it and then we have buttons and this is where we're going to control the button style for your website so let's first take a look at typography you have base typography and headings so this right here for example is a heading and that would be under headings but all the rest of the typography on your website that's just gonna be under base typography so when we click into one we have the options of choosing our font and then we can choose the font size and pixels and then we can choose the thickness which is also known as the weight the line height and the paragraph margin underneath the paragraph okay I'll go back and click on headings we have something similar here we choose the heading family and then we can choose the weight and as we scroll down we can choose the font size for each of the specific headings heading 1 through heading 6 and let's go back so those are your typography options next we have colors and then we can choose on base colors this is where we're going to choose our text color theme color link color and link cover color and these settings are being pulled from to generate the link color right here and this is also the active color and also the hover color so if I hover my mouse over these menu items you could see it changes color that is the link hover color that you see right here and the link color and then the theme color is used all throughout your website now we also have an option to change the background color of the header but as you can see on this website the background color is no color it's set to transparent and we'll get to where that is set in a moment you can also choose a background image okay I'm gonna go back out of colors I'll go into container now the container is how wide you want the content of your website by default on this site it's set to 1,200 each Astra starter site it's going to be set to something different so you can make it more narrow if you want and then there's the different types of content on your website so this is the general layout this is the layout for pages this is the layout for blog posts and this is the layout for archive layout so what that means is when you go to your main blog page and it shows all the different blog posts that people can click into that's going to be known as your archive layout and we get to choose from multiple options so when I click on the drop-down we have boxed content boxed full width and full width stretched so we have these various options right here that you can test now it's hard to show you on the page that I'm on but I will show you when we are into the blog post options so you can see what each of those look like I'm gonna back up and then we have buttons right here and you can click on the pencil to reveal the color selection panel so for buttons I can choose the text color the background color I can click right here and choose the hover color so if you notice when I hover it over this button it changed colors well that is the hover color right here if we wanted to change that color to something else like that we could easily do that and now when I hover you can see it's an entirely different color so you can set that right here for the normal and the hover and as you see we don't they have it set for the normal it's pulling from the theme color that we looked at just a moment ago I'll click here to close that panel and we have this option to style it even further called border so when I click right here you have the padding and that's for vertical and horizontal that is essentially the space right here that's your horizontal padding right there and your vertical padding is how far it is from the bottom of the button right there that is how the padding works if you want to change the size of your button and we also have border radius this is what's rounding the corners so if I didn't want the corners rounded I would just change this down to a zero and you can see now our button is a box and you have that option right there you can make it as round it as you want I'll go ahead and click the X to close that I'll back up and we've covered all of the global options that comes with the free version of Astra let's back up and now we can start with our top-down approach with the header now the biggest issue I see people running into with astra is not understanding where to go to change the logo there is only going to be two potential options the option if you're using a transparent header which we are and the option if you're not using a transparent header so let's first start with site identity and we'll work our way down to transparent header when I click here we have our logo options and we just covered these a moment ago we have our normal logo we have our retina logo for high-resolution displays we have our mobile logo what's nice is we also can adjust the size of the logo by adjusting the logo width so if I wanted it to be smaller you can see it's shrinking and now it is increasing so you're able to control it that way with the logo with option right here we have an option to choose the site icon better known as a favicon so when you have a tab open in your web browser it will show this site icon you can optionally show your site title and your site tagline now by default on this site we're not showing it but if I wanted to show it I would check this box you can see it's going to say the text that is right here and you can see it says that right here now you can see it doesn't fit with this design so I'm going to uncheck that box right there we have the same options for tagline let's go back let's take a look at the primary header and this is going to be your header or style so you have three style options logo on the left this is for logo in the middle navigation underneath it and this is for logo on the right navigation on the left I'll click back here and choose the logo on the left option right here we have some options related to the width of the header we have a border option right here it'll add a border to the bottom of your header and then we also have some mobile options so this option here is going to show the logo on the left and a hamburger icon on the right and this other option will show the logo on the top and the hamburger icon on the bottom now we can see what these look like very easily because we have these options right here in the customizer I can click this option right here and it immediately shows me what the website looks like on a mobile device so I can choose the other option which was right here and you can see it has changed the way the layout works so I'm going to choose this one and I'm gonna go back to desktop view and these are our primary header options I'll go back I'll choose primary menu now here we are in one of my favorite settings for the Astra theme and it's the last item in the menu option we can click right here to show some various options we can have nothing you see there's a button there now I can just choose none and there's nothing there we have an option for a search we have an option for a button we have an option for text or HTML and we have an option for a widget you would use widget to add social icons there so we can choose button and then right here we can put our button text in and our button link in so you have a great amount of flexibility to make this look however you want it to look and then we also have an option to hide that last menu item on a mobile device this is gonna be very good if you go and you test it on a mobile device and you don't like the way it looks just check this box next we have some options for a sub menu we don't have a sub menu on this website but we do on this one right here and it's for this account menu item and you can see we have options for that sub menu as well so here are our options what animation will happen when you hover over it and you see the options that are right there and we have some border options as we scroll down we have some additional options here for the way the mobile menu appears for the way that the menu appears on a mobile device and when it appears on a mobile device let's go back to the menu version and so right here you can put a menu label there isn't one but if I type menu right here you can see it just added it right there we also have border-radius options so you can see right there the button is kind of square but if I wanted to be circle I can increase the border radius so that it looks like a perfect circle so we have lots of flexibility there with the mobile menu okay that's primary menu let's take a look at transparent menu now what confuses people sometimes is when there's a logo and a transparent header but they're going to where it says site identity changing the logo there and they don't see it updating so it could be different if you're using a transparent header your logo could be in the site identity or it can be under transparent header so just understand the difference there okay so the reason why you might want a different logo on a transparent header because it's a transparent header it might have a dark background or a light background in your logo might not look right so you want to have this option to have a logo that's going to be appropriate for the background that you're putting behind your logo and you can see we have the option checked right here different logo for transparent header so this is where you're gonna put the logo for your transparent header and here's the option for retina devices and as we scroll down you'll see a lot of the same options but right here we have different color options as well for your menu and the reason wise what I was just explaining how you might have a different colored background so if you have a dark background you can't have a dark font or a dark logo you have to have a light logo and a light font so we have additional options here for that so here is for example the menu options I can click right here and you can see we have color options here that are specific only on content that you're using a transparent header on now there's an option at the very top here of when we're going to have this transparent header do you want it on your entire website or do you just want it on a page-by-page basis so how we're doing it on this website is we're using it on a page-by-page basis and I'll show you how to enable it individually on particular pages but let's take a look at what the options are when we check this box here that says enable on complete website so right off the bat we're not seeing any difference here but we do get additional options that reveal themselves and what this is gonna allow you to do is disable the transparent header on certain parts of your website now these are parts of your website where having a transparent header might look problematic and might be problematic and it has to go with the content that you have behind it so it's nice that we have these options to disable it where we want it disabled so I'm going to uncheck that box and I will make sure to show you how to enable transparent header on a page-by-page basis okay let's go back now we've covered header and we'll be able to move a little quicker next we have the breadcrumbs option I'll show you this on this site I have setup right here so this is another astro site and I'm going to click on breadcrumbs and here's the position and it is let's choose after header so this is my header and I just decided that I want breadcrumbs after the header and this is what breadcrumbs are this is taking the visitor back on your website so here is the content that they're on right now and there's going to be a link to the category your contents in and the original homepage so they can see how far away they are from your homepage and we have those options so your options are inside header after header and before title I think it looks best after header exactly how I set it up now when you enable it like this you also get those disabled rules on where you would want this disabled so if you only wanted them enabled on blog posts you can easily accomplish that and as I scroll down we have additional options where do you want it on the left center or right and we have spacing options as well as color and typography options so I'll go ahead and turn that back off and then I'm going to back up and we're going to stay here for the next customizer setting which is blog I'm already on a blog post so I'll click into blog and we have the settings for when we're looking at a list of our blog posts and then what we're on right now is a single particular post so here's a single blog post I have a featured image and I have some other elements so let's click into there to see the options that we have so our first option is to set the content width and I'm really glad this features here because a trendy option is to have a more narrow content container for blog posts let me show you what I mean so our options for content with our default and custom so it's on custom and now right here I can set how wide I want this container so if I wanted more narrow container I could start reducing this number to say where I have it now close to 900 and you can see it's more narrow it looks a lot more stylized and you can even go more narrow if you wanted to have that for your blog post content and this will apply to your blog posts I really like that this options here next we get to choose the order and the visibility of elements so right here I have the option of my featured image and the title so if I wanted to change the order of these I can just drag this up like that you're gonna see the title is now above the featured image and we can easily drag that back now you also have visibility options by clicking on the I so if I didn't want to show a featured image I click right here and none of my blog posts will show the featured image it's really as simple as clicking on the I now we also have some options right here for the meta this is what meta is right here so you're going to see as I start clicking on these different options you're going to see that change so if I wanted to show the author name I can click on the eye right here and now you're going to see it added the author name the publish date I can click on the eye right here and if I had tags and when I click right here it will show the tags for that blog post and guess what you get to rearrange these as well if I wanted that publish date to be first I drag that to the top and now you see we have our publish date right here at the front it's as easy as just dragging and dropping these options around last we can choose how large we want the font to be for the title I can click right here it's set to 30 but I can just increase it like that and you can see the title is getting larger those are our options for blog so let's reset our container width and let's go back now we have options for our sidebar now this page right here does not have a sidebar but if I wanted a sidebar on blog posts I have that option right here I can choose right sidebar like that and it's going to add a sidebar here on the right and I can decide what widgets I want here and in what order I want them I can even change the width of the sidebar right here so let's take a quick look on how to add these widgets and move them around once again we have the pencil icon I can click right here and the option panel just jumped me right to where I needed to go and you can see here are the series of default widgets that are added automatically to WordPress and the first one is search but if I did onesearch or I wanted to rearrange it it's the same thing I can just drag-and-drop it and now recent posts appears at the top but if I didn't want search I can go right here and I can click on remove and it disappears entirely you have these options and down here you can click on add a widget and you can choose from any of the available widgets that you see right there lastly we have options for our footer I'll click right here and then I'll choose the first option that says footer widgets this is going to enable or disable a footer widget area just a moment we saw a widget area for a sidebar we have those same options for our footer we can have four different widget areas down there let's go back and take a look at the footer bar the footer bar is that area at the very bottom of your website I'll scroll down there is also a pencil icon here that would have taken us directly there and this is where we're going to change the copyright notice and we can choose what we want on the right and what we want on the left right here so we could disable it we can have this option right here to change the layout where everything is now stacked and we can go back to how we just had it where there's an area on the left and the right so we're left with these two sections and we have options so here's section one I can choose the drop down I could have nothing text widget or a menu there and you can see I have text and it is the copyright so this is where you can change the copyright to whatever you want it to be but you're gonna want to leave this little portion right here because that's always going to update to the latest year so when you enter a new year you don't have to figure out where you go to update your website and so on the far right we have same options now what I like to do typically on the right is I like to have a footer menu and this would be a specific menu that would have my Terms of Service privacy policy and site map information and I would choose that right there so we have some similar options of content width border size color and we also have some background and content color options there now let's go back to the root of our settings we have menu widgets homepage and CSS let's get through these quickly we have menu I just scrolled up to the top this already is our main menu if I click right here it says main menu I can see my menu options I can easily rearrange these if I wanted to by just dragging and dropping them just like this I can change what the label says so if I didn't want this to say get in touch I can click on the arrow and I can change that text right here I'll collapse this at the very bottom here's an option to add an additional menu items it's so easy to add new menu items to your WordPress menu let's go back let's go back let's take a look at the home page settings this is where you're going to tell your website which page is going to be your home page and here's a list of all the pages that are on this particular website you're also going to select a page that's going to act as your blog index page where it will show a list of your blog posts let's go back and lastly is additional CSS if you contact support and there might be some form of a styling issue they might give you a custom snippet of CSS this is one of the best places to put that okay I'm gonna back up and we have covered all of the customizer settings I'll click on publish and then I'll click on the X here to get out of the customizer now remember here are those quick jump links to different settings areas in the customizer this will be a big time-saver if you quickly want to jump to a settings option now lastly I said I would show you how to enable the transparent header on a page-by-page basis so let me click right here on my home page and there's also this other area of settings for Astra and you're going to see them right here in the right-hand column and it says Astra settings so we have page by page settings for the site bar for the layout of the content layout we can disable elements on a page by page basis so if there's a page you didn't want your header to be on you can check this box right here and it will not show the header on that page we can disable the title the featured image the footer bar we can disable breadcrumbs lastly transparent header it's right here you can see it's enabled on this particular page but there's additional options to disable it if that's what I wanted to do now before we wrap this part of the tutorial up I wanted to just show you what happens when you have a plugin that there's a specific integration for in this case it's WooCommerce so we have that WooCommerce settings option here when I click in it you're just gonna see specific settings for that integration now you're already familiar with a lot of these settings because we went over fonts and colors and layouts and containers so you will see those specific options here there are very deep integrations with WooCommerce and learn - for example on WooCommerce there's checkout options right here you can control the visibility of certain checkout fields and you can link to your privacy policy in terms and condition page but there's many other options that are available and in various other locations of the customizer settings there may be additional options in this case you'll see on the far right area we have a shopping cart icon right here in the header well there's going to be an additional option for that when we go to header and we go to primary menu and it's the last item in menu now there's an option for WooCommerce which will show that shopping cart icon there are a lot of great features in the free version of Astra but I did want to take a quick look at the professional version because it just takes it all that much further it will unlock additional menu navigation options you can white label it if you're using this on clients websites additional blog layouts additional site layouts deeper WooCommerce integration you'll get a sticky header option I use that on my website page headers that's a very nice feature you're gonna get more color options more typography options more custom layouts you'll get the scroll to top link you can see being used right here on the bottom right footer widget options header sections more header designs you'll also get space in control as you scroll down on this page you'll see more information about each of those features just so you know exactly what you're getting when you purchase Astra Pro now currently Astor Pro is coming in at a very affordable $59 now they also have a mini agency bundle and this is gonna unlock all those agency sites that we saw it's also going to include an add-on plugin that will extend what you're able to do with your page building tool and if you're selling websites as a solution to clients it will also include a portfolio plug-in so that you can show off all of the astrocytes and you can sell them and those designs on your own website there's also a full agency bundle available right here and what this is going to do is include everything in the mini bundle but it's gonna also include a lead generation plug-in called convert pro it's going to include schema Pro that's an amazing plugin and it's also gonna include future plugins that they might add to the suite it's a really good value a lot of people are benefiting from it there's also lifetime options to purchase all of these different packages so you won't need to renew them each year now if you visit WP crafter com a slash Astra and I'll have a link in the video description box down below that's what's known as a referral link if you did click on that link and purchase any of these packages I'll receive a small referral fee which goes to help me create these tutorials for you well congratulations for making it to the end of the video if you like tutorial videos like this remember to hit that thumbs up button subscribe and click on that notification bell and YouTube's gonna let you know when new videos come out so you don't miss a thing if you don't have the professional version of Astra the link to that is WP crafter comm slash Astra and I'll also have a link in the video description box down below hopefully this isn't the end of our relationship with WP crafter we have a Facebook group with over 20,000 users in there asking questions answering questions everyone participates and contributes so if you have questions that were not answered in this video you have two options to go with right now you can ask in the comment section down below and I'll be happy to answer you there and I also want to personally invite you over to the WP crafter Facebook group I'll put a link to that in the video description box down below thank you for spending this time with me I hope to see you around more on the channel and I'll see you in the next video [Music]

Channel: WPCrafter.com WordPress For Non-Techies

Views: 149,411

Keywords: astra theme tutorial 2019, astra theme wordpress ecommerce, astra theme wordpress, astra theme with elementor, astra theme woocommerce, astra theme review, how to make a wordpress website, wpcrafter, how to make a website for free, astra theme pro, astra theme wordpress tutorial, astra theme customization, astra theme tutorial 2020, astra theme header, astra theme blog layout

Id: LTycfxNIZfM

Length: 38min 32sec (2312 seconds)

Published: Thu Aug 15 2019