How To Make Astra WordPress Websites Mobile Perfect – Including Mobile Headers…

You know one of the easiest things to overlook when you own a website is how does it look on a mobile device and what adjustments and changes can you make so that you can improve the way your website looks on mobile devices and so in this video were to go over some of the settings that Astrid gives you the Astra Theme for mobile devices hi my name is Adam from WPCraftercom Remick WordPress tutorial videos for non-techies if you knew your consider clicking on the subscribe button it on missing click on the bell if you don't have Astro or you're not familiar with the Astra Theme I have a lot of tutorials here on the channel about the Astra Theme here is their website right here you can get there by going to WPCrafter

com/Astra now what has sparked me wanting to make this video is a new feature that is coming to Astro you can actually access it right now if you already own the Astra Theme it's the it's in beta right now so if you logged into the user portal there were the downloads are there is a beta of the theme and a beta of the Pro add-on extension for Astra now this video working to go over the pro options with the Pro extension so essentially this is what they added right here on by the way they have a slight 15% off sale going right now for their birthday they are now one year old the Themis so here's what is in beta and I would imagine it will be out for everybody very soon just keep in mind if you want to use it I'm using it on my website right now just keep in mind if there is a bug or two you'll just have to deal with that I noticed when I put the beta in I had to reassign one of my menus it would not a big deal okay so what you get now is more control over the mobile header of your website your to be able to have more control there is also some menu options you can have a fly out many him to show you that a full scream in your ministry that I'm using the full screen menu I like it a lot I see some of the styling options in the header as well and you can also set the custom header breakpoint this is a big one for developers that want more control over when the header changes to that mobile website header you now have control over that so this is great here's a couple animated shifts of things that you can do so let's go ahead and jump on into it now when you add the soon as the update comes out you're going to have to go or if you want to use the beta that's fine you can have to go in your website and enable this new options you can go to appearance aster options I've already enabled it it's good to be right here mobile header this will unlock and add these new options to the WordPress customizer so that you can go in there and start tweaking these settings okay so I already have my website open here this is just on a local version on my local computer I don't know how fast or slow it's gonna be so I've got it all loaded up here I'm in the customizer so when you're in the customizer if you want to's should it have access to the settings and see how it looks like on a mobile devices is one thing I love about the customizer down here you can click on the little icon that represents a mobile phone and then there you have it you can see exactly how your website is going to look like on a mobile phone in my experiences it's pretty accurate so you can see my mobile header right now it's nothing fabulous or anything nothing remarkable but it works fine you click on it right here in I have my menus drop down like that and it's fine so let's look at some of the options that we have for a mobile device so underside identity this is where you normally popping your logo in your retina version of your logo but Uranus see and some of the controls in the customizer like the logo with your lunacy a little phone icon when you'd see that whatever you put in there is just going to apply to mobile devices so these are to be all yours setting specific to mobile devices is actually one of my favorite settings right here I can control essentially this with this slider here the size of my logo but with nice you can control it on a mobile device I can go like this and it would start reducing the size of my logo actually scratch that quick change of plans I am doing this like Artie said on my local computer I'm in a go switch to my actual live website which that's a kind of crazy to do because as I am adjusting this it's not refreshing here and I'm pretty sure that has to do with my local environment I do so much testing on it that it's not working right so I've already opened it up here in a new tab and working to skip ahead and you can actually see how my edited mobile header looks right here but let's see if we make some tweaks to its you can see I've already tweeted some but that's all right let's just jump back into site identity because there are some changes I'd like to make so now when I adjust the logo with yes you very Gorgon that dynamic feedback there some wrong in my development environment but was nice about this is you can see you can set the the width of your logo specific to a mobile device so you might want it a little smaller and always pay attention to the amount of space anything you're doing on the mobile version of your website and I think by default I go like this you'll see how it is by default I it's a little big for my tastes so I think I prefer it to be a bit on the smaller side some dial this back down to maybe like 180 or that's fine right there 190 so it's a little bit smaller I prefer that and let's go back so that is the first thing that you can do with your header right there now to go to layout and I'm going to go to where it says header now if you activated that mobile header option you can have this right here where it says mobile header this is specific to the mobile header right there for some to click on primary header because this is where working to get some of that spacing so here are three spacing options but it's really the header space so this is the spacing above to the left to the bottom into the right of this icon here that that's the spacing for that so we have options for those different parts of it or I can walk them all by clicking right here so if I wanted to reduce it to zero this is what it would look like I made it 10 that doesn't look too good if I made zero you can see now my logo is all the way to left all the way to the top all the way to the bottom just like that it's a little too much like that so I would probably maybe see what I like if I like five like this would seem 12 actually here I can just go up like this just like this there we go now as you can see right here I have it said TEM I don't know why it said to EMI minute click on the PX which is pixels I'm more comfortable with that so now I can start playing around with it to see just the spacing that I want so what I've just accomplished is I've made my header on my website just take up less space less of the heightened it's up to you how you wanted obviously if you wanted to unlock these and maybe just add a little bit more to the left or to the right to kind of tighten it in you could certainly do that so now you can control the spacing of everything up there now let's take a look at those specific mobile header options and these are the new options that are available to you so the first one is header breakpoint this can make a lot of developers very happy next you can have a logo specific to your mobile device now you might ask why would you want to do that while here's a perfect example maybe on a mobile device you want the background color of your header to be a different color so the normal logo that you use might not look good when it's laid over a different color for me I'm to leave it white although I considered making it a darker color and having a white version of my logo so that is why you have this option here to have a specific header must a specific logo just for your when the mobile version of this website okay next we have the menu style so I've already set mine to full screen by Dave this is the default one right here so let's see what that looks like that's just where the looks like this your menu items just appear next would be the fly out and when you have to fly out you have the option of having it fly out from the right or the option of having it fly out from the left so right now it's the right so when I click here you see the menu just slid out from the right and then there's this X to remove it and I can choose left or right whatever makes sense to me the one that I like for my website is full screen so when I haven't said to this what happens is the menu just takes over the whole screen and it just appears so this is what I have now and it just appears now my menu I have a lot of menu items here so people can scroll independently and then they can get out of that so that is the new menu style options okay so we have some button to toggle styles and so this is the one that I did have when you saw on over here when I did like it wasn't responding right because the website screwed up this is the style right here and then on this website here you can see I had switched it to outline I like the outline a little better just like that in here you can actually choose the color for that outline so I have it matching the green that I have their and what here this is what the border radius looks like by default I think it said that like to or something like that so this is why the button normally looks like that I just thought it would be nicer to make it around and so I said this to 30 and it made it perfectly round and I just like the way that that looks better now if I wanted to I could add a label to this it's not gonna look good because I have it set to round but you can do that so I've gone ahead right now and entered in menu you see it pushed it down a line so the border radius I don't think it looks good when you have letters in there like that but it's certainly something you can have if you want I just prefer that I think it's more a universal symbol of a mobile menu and then right here you can choose how you want this you wanted right here in the line that means on the same line as your logo or we can go here and we can stack it and this is just gonna now appear under the logo and the logo is going to end up being centered just like this this is more appropriate for putting in menu maybe not having it round the way that I have it some to go ahead and put it back to in-line this is how I like it's least some really nice new controls that are coming to the Astra Theme to give you more control now you also have options with, with fonts so for your entire website when you go to the fonts part here of the settings let me go to it right here it's under topography so you have control over the size of your fonts on mobile devices I think this is the big thing that people overlook you know they have their homepage and they have the huge bold lettering but then when it goes in the same mobile it's still showing that big huge bold lettering and it doesn't look good so on the Astra Theme for every font control there is a font size option you can see because it has the mobile device icon there this will only apply to the mobile version of your website so I encourage you if you're looking at it and it is is a little too big for me you can go in there and set those specifically for mobile device and this would be your body font to this would be your headline fonts so right here is my headline right there I might want to make it smaller so in that case I would go to contents and I think for me that is a heading to so I might want to see what that looks like if I make it 20 go like that that might not be in it might be header three I have to go and look but you get the idea you have this ability to come him here and set the headings up in the right sizes of these that you would want and let lastly we have some color options right here under color and background and then I'm in a go to header and then we have these new mobile header options right here and so I can set the background color that I want just for mobile device or a background image and here are various other options you have full control over the text the links and this also carries over into the actual menu here so you can have full control over all of that and the colors that you want so when you do go full screen you can have this color scheme match what you are going after so right now minus at the white if I wanted it to be dark I would go like that but then what I'd also want to do is set a different logo that would match with the dark background there so let me go ahead and set that back to whites and this is the new options that you have available coming soon to the Astra Theme and I would just encourage you to take maybe 30 minutes and see what your website looks like on your mobile device and identify those areas where you can make simple improvements and this is a real quick win type of thing it's really easy to jump into the customizer make these tweaks so that you are giving your website visitors those visiting off of mobile devices a much better experience such pretty much it for this video if you don't have Astro you're interested in and it's doubly decrepitcom/aster I also have a link in the video description box down below that's a referral link when you click on it's gonna take you to my website and I tell you about some bone is training that I have if you wanted to purchase the Astra Theme I have all that information right there and so my last little bit of insider information I do know that after this updates Astro will be working on adding new header styles I interested in that because I not to use a page builder to build my header so I would prefer to get that out of a theme and I'm excited to see what new header styles that they have coming and that's all I have you in this video thank you for watching if you enjoyed the video give it a thumbs up Elsie in the next video

Free Email Updates
We respect your privacy.

tools to create infographics

affiliate marketing