All about Colors tutorial ( Astra Pro Series )

Introduction

hi guys my name is Ferdie and in this video series I’ll talk about the amazing features of the Astra thing one of the best themes for WordPress there’s a free version that has a lot of capabilities but they’re also premium upgrades and in this video series I will cover every topic if you want to get one of the premium packages of the Astra theme you can go to 30 Corp come forward slash Astra this is an affiliate link so when you buy this through my link I get a commission so thank you for that then you can choose a package and click on get started you can pay with credit card or PayPal then you can download all the premium plugins upload them to your website activate them and then through these tutorials I will show you

step-by-step how all premium plugins work if you like what you’re seeing so far please like this video and if you want to see more upcoming videos please consider it to subscribe and click on the bell notification so you’ll get an update when I upload a new video now let’s get started so this is what we have made with the free version of a strap it is amazing but we will take it to the next level and in this video we will take a look at the colors of the pro version of estra so I go to the back end to appearance extra options I assume you have extra Pro installed and over here you see all the available extra Pro modules and here are colors and

Subscribe To Ferdy Korpershoek

backgrounds so if I go to the website in a new tab and I go and customize the website here at the colors and

backgrounds you see three options but if I activate this colors and backgrounds and i refresh the page and I go to colors and background you see more options so what I will do in this video series I will walk through all these extra modules one by one and I start with colors and backgrounds so this one this one in this one we had already those are exactly the same as with the free version and everything between header content block and sidebar are new so let’s take a look at the header with a free version you cannot change the background color and now we can so I click on Heather primary header the background color I can change that if I want to do a different color

but I don’t want to do that so I clear it but I can so let me for illustration make it a little bit greyish like that we can also select a background color so I grab just one selected then you don’t see it why because the background color is in front of the background so if I make it transparent you see coming true like that so imagine I leave it like this

so you see the background what I can do now if I scroll down we also have the primary menu this area over here I can change the background color to white now we see that this area of the menu has a different background color so you can have a background color for the whole width and for the menu area so if I would do that it doesn’t look that good but I just want to illustrate how it can look in the tutorial so you know what I don’t get rid of this one I make this white and I make the primary background color dark you know again I get the color of the logo using the color pick tool of Google Chrome and I copy this color over here so it’s the same as logo but then I want to change that links so over here I can change the link to white like that and if I hover over it the color changes and I don’t want that so I wanted to stay white but what I want to do is change the background color when I hover over it so I make it blue again but this time darker like that so when I hover over it this happens when you hover over here you don’t see this anymore how can we fix that really easy but before we do that I leave this all as it is how to change the active background color to this color so I copy that and paste that and if I click on publish and I go to the about page for instance it stays that color but now this is blue I don’t want that so the active

link color must be white so it gives you a lot of freedom to do whatever you want to do within the header I did not even mention the sticky header that’s also a possibility with pro module so I think you made a great choice getting extra Pro and I will show you step by step what you can do with it so let’s continue with this but then we have the submenu I want to show the colors so I can choose a dark background with white text so the background color I can say make it dark again and now you see the text so I can say make the make it the same background as this over here I can’t color so this one still or I can make it white and change the link color and now it looks like this I’m gonna hover over it change like that I like that it pops out a bit better so that’s what I can do and again here we’ve all the same options link hover color however our background color active link color I think the background color so that’s what you can do over here I go back and I go back and then we have content and we have a background color we can change it but it does not apply to this page because this page is made with Elementor if you would go to the blog page we can affect this area over here so let’s see what we can do we can affect this area so now it has this color I like it to be white and again we can have a background image let me show you really quick and then make this transparent like that

let’s remove this then the colors of the heading this is a heading one I know that because that’s a title we can change all the colors of the headings so if I go to this blog post I know that this is the header – so I go to heading 2 and I can change the color to

something else

and you see it changing immediately so I like that if you’ve had a three four five you can change all those colors so that’s really nice

what else can we do I go back I go to block to block archive and there are archive pages for instance personal I search for the let me go back to block and I have two blog post with the category personal so if I click on personal I see an archive page and over here I see grey background and the blue text and I can change the background color to this one and I can change the title color to white and the description color I don’t think we have that but if you could see it it will be orange and if you want to have that I can go to the back ends to posts categories I go to personal edit and I can say my personal blog posts update now refresh the page I go to block personal and there you have it and then we can go to colors block block archive that description can be white as well then we have the block page the block slash archive post title color in there I can change the color of the title so I can make it read and see it is read again I paste this color then we have the post meta color which is this over here I make it great maybe the darker I think this is okay and then we can have

the links those two and change the colors but I think I like it the way it is

and when people hover over it then I can say it should be green maybe bit darker so when they hover over it they see it’s a color when you hover over read more it becomes green we hover over it you see it is a link and also here so I like it and then we have the single post and we have only one option so if I go to the single post we can chase a single post title color which is this over here so I can make it gray or a different color so that’s what you can do over here at block and as you see we’re all just in colors and backgrounds so we’re only changing colors there are a lot of options with the pro version using in combination with the blog page but in this video we’re just covering the colors then we have the sidebar the background color I can change it then you see those areas between the sidebar so I don’t like this

Conclusion

this option is better applied when you have a different style right now it is boxed and if you would use a different style then you can apply a different backgrounds so then you should go to layout container and change this over here so colors sidebar widget title color again I pasted it and becomes blue the text color well there’s not much text but this is also text so I can change it to red for instance and then you see it changes over here so you can change it I normally would say just something like that black the link color this is a link in this over here so if I change that it all will be orange and then the link hover color so that’s it for the sidebar and those three options are in the free version so we talked about it already and that’s what you can do with the colors and backgrounds using Astra Pro I want to thank you for watching this video I hope you learn a ton of stuff feel free to like this video and to subscribe for more upcoming videos

we have a great day you’ll see me next time bye-bye

 

Leave a Comment