Astra Theme Full Tutorial 2023 MASTERCLASS Video Tutorial DreamHost

Astra Theme Full Tutorial 2023 MASTERCLASS

Tutorial Hosting
So you’ve chosen the WordPress Astra theme to build your website and we can’t thank you enough for that now you may be using the free or pro version of Astra but looking at a ton of options that Astra has to offer you may feel overwhelmed where do you start and what

Does each setting do should you use the free or the pro version and how to make the best of the WordPress Astra theme so you’ve been looking on YouTube for a full-blown tutorial but even more than that you’re looking for a reference that you can come back to whenever you feel

Stuck well this is your lucky day because this is the ultimate Astra warpers theme masterclass hello I’m Kay from the Astra theme team theme team and in this video I will help you set up Astra import a ready-made design in just a few clicks next we’ll go through the

Astra theme options for you to customize your website and we’ll take a look at the free and pro versions of Astra and we’ll also take a look at how you can change the default content of your website by the end of this video you will know how to set up the WordPress

Astra theme and use it to build anytime up a website like a personal website a Business website and even an e-commerce website so how to use this video now this video may be a bit long that’s why we split the video into chapters that you can access within the YouTube player

Or by clicking on the chapter links in the description of this video we use it as a reference now Astro is free and will always be free but it also comes with a pro version with additional features so in order to avoid any confusion in this video from time to

Time you may see some free and pro labels on screen also when mentioned you’ll find links to additional resources like tutorials and documentation in the description of this video but first of all why should you choose the WordPress Astra theme well not only has the Astra theme been voted

Best WordPress theme for the second year in a row but if we ask Google what others say about it we read that one of extra standout features is that it’s super lightweight on a fresh install with just a theme an astroside is only 37 kilobytes with with 7 HTTP requests

In the grand scheme of things asteroids faster than 99 of WordPress themes and you can build incredibly quick loading sites with Astra and thus it’s no surprise that so many websites trust Astra and with more than 4 800 5 star ratings on WordPress 1400 Plus reviews on trustpilot the WordPress Astra theme

Comes as a giant but with unparalleled performance with no jQuery loading less than 50 kilobytes of resources and just 0.5 seconds of loading time oh and did I mention it comes free so yeah in case you were wondering you made the right choice now let’s answer some frequently

Asked questions and let’s start with what is the difference between Astra and starter templates well that’s pretty easy Astra is a WordPress theme and if we ask Google what is a WordPress theme it’s a group of files Graphics style sheets and code that dictates the overall appear experience of your blog

Or website teams can control something as vast as your site’s layout or as minute as your hyperlink colors and of course it’s going to work with the WordPress platform only as the name says now when it comes to starter templates basically they are already made designs for the Astra theme so once you’ve

Installed Astra technically you could start creating from scratch but the starter templates are ready-made designs we have more than 200 and it ranges from portfolio you got Beauty websites you get restaurant websites e-commerce websites you name it now if you want to access the premium templates within the

Starter templates you need to get either the essential bundle or the growth bundle next can you install Starter templates on an existing website and the answer is yes and if you want more info I will link to this blog post basically once you’re inside the WordPress editor

All you have to do is click on the template kits button and then you can pick any design so let me scroll down let me pick this one and then you can choose the page templates so we can either import the whole website and we see that in a

Moment or you can just speak any page that you want and import it within the page so for example if I click on import service template there you go we’ve imported the template now click on updates and if I click on preview and preview in a new tab

As you can see I’ve imported my services template right below the existing content now technically you could even import different designs from different kits on different pages on your website but bear in mind that you do want to keep design consistency so use it with a

Caution and if you want to ensure design consistency then it may be better to start from a fresh install and import a ready-made demo like we’re gonna do in this video so for the sake of this tutorial let’s imagine that you are an author and keynote speaker and you want

To save thousands of dollars by creating a website where you can present yourself and sell your books and you want to do this with the WordPress Astra theme so where do you start so there are two ways we can do this and the first is to go to appearance themes

Then click on add new click on upload theme choose file and select the zip file that you get from the Astra website then click on install now and click on activate and voila Astra is installed and activated now the second way is to install the Astra theme via the

WordPress interface and for that you want to go once again to appearance themes click on add new and you should see the Azure theme right here but if you can’t find it just click in the search box and just type Astra then click on install and activate and voila Astro is installed and

Activated and if we click on visit sites our website is up and running with the default presentation next how to install Astra Pro so in WordPress you want to hover over plugins click on add new then click on upload plugin click on choose file and select the zip

File that you received once you purchase Astro Pro click on open and click on install now next click on activate plugin so the plugin is now activated and you get a prompt to activate your copy of Astro Pro so click on activate your license that you receive by email and click on activate

And voila your license is now activated next if you want to activate the pro modules you want to click on the welcome tab then scroll down to the Azure Pro module section and here you can activate and deactivate any module that you want or just click on activate all or deactivate all

And there you go the Astro Pro modules are now activated okay next let me show you how easy it is to import professional ready-made designs in just a few clicks and for that we’ll be using a plugin called starter templates our starter templates Library comes with more than 200 professional designs made

By our team of experts and it’s pretty easy to find what you’re looking for as you can see we have digital agencies pet and animals transport Roofing cleaning makeup and cosmetic gym in Fitness you name it you can either browse through the free or premium designs or you can

Look through the categories as I just shown you here in the navigation or you can use the search box so let’s look for an interior designer and as you can see we got a few designs here now you find a great selection of free and premium

Designs and if you’d like to level up by using our premium designs consider going pro and more specifically you can access premium starter templates with our essential and growth bundles so if you want to take a look make sure you click on the link in the description below now

To install Starter templates from the WordPress interface you want to go to Astra click on dashboard and here in the dashboard look on the right hand side for the useful plugin section you’ll find starter templates and you can click on install and activate or you can click

On the starter templates Tab and then click on install and activate you will be redirected automatically to this page and click on build your website now and here you can choose your favorite page builder and please know that Astra is totally compatible with Elementor Astra is actually one of the

Best WordPress themes that work with it but in this video we’ll be using the blog editor also known as Gutenberg but with a Twist because we’ll be using Spectra a free WordPress page builder built on top of the WordPress default editor using Spectra helps eliminate problems like performance compatibility

Issues stability issues as well as the high learning curve phase while using third-party Builders but more about that later so for the time being click on block editor okay next you want to select the design either by browsing or we can use the search field or we can

Use the categories and in our case we know we want to create a bookstore so I’m going to pick this category and next select the design that you want I like this one so I’m going to click on it and here I can upload a logo but

We’ll do that later so click on Skip and continue and here you can select the colors that you want so you have default colors that we see here the default color palette but in my case I like this color palette so I’m going to pick this

One and the same goes for the fonts you can change the fonts you can change the font Pairs and as you can see the changes are reflected in the preview but I’m just going to reset the style because I like the initial style so click on continue and don’t worry

Because we can change this later okay next before you click on the submit and build my website button if you want to help our team to serve you even better you may want to fill in the info of this form and then just proceed to

The next step and now sit back relax and enjoy the short flight and during this time the system is going to install everything that is required so the plugins the design of course so that it works exactly as the demo was showcased and voila your website is ready and it

Took just 48 seconds to build for real so now of course you can boast and click to tweet about your new website and then you can click on view your website and voila your bookstore e-commerce website is up and running I told you it was

Going to be easy but of course I will show you how to customize a new website and how to change the content but first let’s take a look at the Astra dashboard so let’s start from where we left off if you are still on the screen you want to

Hover over the little icon here with the name of your web site and click on dashboard and as mentioned previously during the starter template install all the necessary plugins were installed like woocommerce or WP forms for example now to access the Astra dashboard you want to hover over the Astra element in

The navigation and click on dashboard so first of all here on top identify the various steps we get welcome settings starter templates and free vs Pro if you want to know the difference between the free and the pro versions now here we are on the welcome Tab and on the

Welcome tab you can start customizing right away it will take you to the WordPress customizer that we’ll see in a moment next we have our Quick Settings section and it also links to the customizer but it links to specific options like colors typography header Builder footer Builder if you know

Exactly what you want to change this is the quickest way to get to it next we have our useful plugin section that you see here on the right hand side and in this section you see useful plugins that you may want to install for your website like card flows Street

Payments for woo cart abandonment recovery Variations by car flows and share triggers all you have to do is click on install and activate Okay next we have the Astra Pro module section so here I’m on the free version so I cannot activate those modules but as we saw

Previously if you have Astro Pro you can activate and deactivate all modules or you can decide to activate each module one by one okay next on the right hand side you have links for priority support join the community and a way to rate US and show us some love next at the bottom

You see the Astra Integrations and as you can see Spectra has already been installed and activated by default when we install the starter template and next to Spectra you find other plugins like shark card and card flows that you can conveniently install straight from the dashboard all you need to do is just

Click on install and activate Okay let’s scroll back up next let’s click on the settings tab and here in the free version we have the general Tab and the performance tab so as the name suggests the performance tab itself make your website faster and we can do this by

Loading Google fonts locally so if you enable this option it’s going to download Google fonts and save them to your server so that can speed up your website and also help you comply with EU jdpr laws next you may want to preload local fonts so in that case just enable the option

And what it’s doing is that it’s going to load font files right away on page load and that’s going to make your website even faster but now from time to time you may want to change some fonts or some Styles and in this case you may want to flush local

Font files and you do this by clicking on this button now if we go in the pro version on the general tab of course you can put the license if we’ve done that previously but you also have file generation now I don’t want to get too technical here but if you don’t know

What CSS and jsr you probably don’t need this but if you do the good news is that if you’re facing issues with style layout and color other page elements all you need to do is enable this option and click on regenerate assets next the performance tab is the same as

In the free version but if you click on Version Control that’s really handy because you can roll back to previous versions so if you upgraded to a new version and you actually want to go back to a previous version it’s as easy as selecting the number of the version you

Want to go back to and then click on roll back but we don’t want to do that now so let me put it back to where it was and next you have the white label tab which is an exclusive Astra Pro feature and basically that allows you to

Completely Rebrand Astra the Astra theme the Astra starter templates and that’s pretty handy if you are an agency for example and you don’t want your clients to know which tools you are using and you want to present it as your own but more about that later in this video

Okay now we’re back in free version and next we have the starter templates we actually got it in both the free and the pro version and as you saw previously in this video we use this to install ready-made Demos in just a few clicks and next in the free version we have the

Free vs Pro Tab if you’re wondering if Astra Pro is for you it’s very convenient because you have a full list of what’s included in both versions okay now how to customize your new website so in WordPress you want to hover over the Astra element in the navigation and then

You may want to click straight away on customize or you can click on the dashboard and if you want to access a specific setting you can just click on that setting but in our case we’re going to click on start customizing and this is going to load the WordPress

Customizer now if you’re using the pro version of Astra make sure you go to the dashboard and enable all pro modules just for the sake of this tutorial and then you can activate and deactivate those you don’t want for better performance okay so we’re back on the free version in the WordPress customizer

Now before we get started with the customization options let’s take a look at the customizer interface so here here at the bottom you see three icons a desktop a tablet and a mobile so if I click on the tablet as you can see we have the tablet View and as you may have

Guessed here we get the mobile view when I click on the mobile icon and that makes it really handy to know what you’re working on and if everything is going to look good on every type of device now let me go back into desktop mode and let’s say for example I want to

Change the logo here so I can hover over the logo and as you can see there’s a little pencil icon and as I click on this pencil icon now I can see that the options have changed here in the left panel I can edit right here in the left

Panel now let’s say I want to change the logo width to 200 that’s for the desktop but now let me go back into tablet mode and I could make it 50. you see it’s tiny it doesn’t look good but just to show you the difference and then if I

Click again I go into Mobile mode and let’s make it super tiny and once again this is just to show you that you can have really a granular control so you can have one size for the mobile you can have one size for the desktop and one

Size for the tablet and now in most cases if you just want to reset the values all you have to do is to click on that reset icon there you go now let me go into Mobile mode and as you can see it’s been reset for the mobile mode

And if we go back to the desktop mode it’s also been reset now the next thing you need to be aware of is that all the changes you make in the customizer will only take effect once you click on the publish button located in the top left

Corner okay with that out of the way let’s take a look at the options to start customizing our website for both the free and the pro versions of Astra now before we take a look at this specific Astra options let’s take a look at the WordPress options and it starts

Here with site identity so if I click on site identity I can click on select site icon which is the icon that usually appears in the browser Tab and I can also change the site title and Logo settings if I click here but we’ll see that in a moment because there’s another

Way we can access those settings so let me go back next we have menus so if I click on menu I can see my current active menu by clicking here but once again we’ll access it via the Azure options later and I can also view all locations that

Can have a menu attached to it once again we’ll see that later and next we have the widgets Tab and it says here that the Astra theme has 10 widget areas but this particular page does not display them so we can navigate to other pages to add widgets but once again

We’ll see that later in this video next we have our home page settings and this is very important if you want to change your home page so for the moment the home page is a page called home makes sense right but let’s say I want

To change it and change it to books so now this is the new home page so if I click on publish and if I go back to the front end Let me refresh this page and there you go this is our new home page now of course if you click on home

Here it’s still linking to the page called home if that makes sense but if you click on the logo it’s going to redirect to the home page and this is our new home page so let’s go back and let’s set it back to home pretty easy huh

And next we have the post page so basically what this is is telling WordPress which page we want to use for our blog and if I click on blog as you can see we can see the blog here and if we go in the WordPress admin in pages click on edit blog

As you can see this page is empty but let me show you something if I change this to books for example and I click back again on blog so as you can see we are on a page called blog but it’s empty so basically we tell WordPress which

Page is going to be the blog page regardless of the name of that page so here in the drop down I’ve selected books let me click on publish and let me show you so if we go back to the front end this is our books page before I’ve made the

Changes and I’m just going to refresh the page and as you can see now the page called books is our blog I don’t want to confuse you but just to explain to you how you can easily change the blog page so let’s go back and let’s put it back to the blog page

Let’s click on publish and now if you go back and refresh and just remember we are on the books page so as I refresh there you go the book page is back and if I click on blog it’s back to normal this is our blog so

Now you know how to easily change the home page or to set a blog page if for example the starter template you install didn’t have a Blog by default okay next we have additional CSS and if you don’t know what CSS is you probably don’t need

It but just know that it’s a way to style your website with code or to do crazy things like this and the whole website disappear with just one line of code okay let’s not play with fire let’s remove this okay now let’s start with the Astra specific options okay so first

We have the global options and when we click on global options we can see we have a subset of options typography colors container buttons scroll to top block editor and miscellaneous so let’s start with typography and here in just one click I can change the fonts by

Clicking on one of the presets or I can change the fonts on a granular level so for example if I want to change the body font and by the way the body font is the font that’s going to be used for the body of the text so excluding titles for example

So here if I select in the drop down I have many fonts let me change it and as you can see it’s completely changed now I can always go back and put back the previous font now I can also select variance and depending on which font you selected it may look different

And I can choose the font weight so let me select Ultra bold and as you can see our body text is now super bold so let me put it back and here I can change the font size the line Heights and the letter spacing now most of the options are

Self-explanatory so make sure you play with it let’s put it back let’s close this you could do the same for the headings font so all the titles or you could decide that you want a different font for the H1 the H2 the H3 and so on

Next let’s take a look at the global color palette now before explaining the global palette let me explain how it would be if we didn’t have this option so as you can see here we have several elements with the same color here on the page and as

We scroll through we have more elements now if we didn’t have the global palette we would have to set each color individually and then let’s say that you know after a few days you think oh no I don’t want this color I want to change it to Green

For example why you would have to open each and every element and change it that would be a nightmare especially if you have a lot of pages and a lot of elements whereas here look I can pick this color and then I’m just going to change it to Green

Let me pick this green and as you can see all the elements have changed we have our cards our title and our buttons in just one click so as you can see it’s really powerful so let’s click on reset to put our main color back and as you

Can see it’s back to normal in just one click so once you’ve defined all the colors in your Global palette now you can affect those global colors to various elements like the accent color which is going to be the color you want to use when you want to draw attention

To something the links color so you have the regular links color and then we have the hover color you can also choose Global colors for your headings which are your titles your body decks your borders your side background and your content background so for example let’s pick this color for our side background

I know it doesn’t look good but it’s just for demonstration’s sake so let me reset this and we could do the same thing for our content background and if we take a look at the pro version of the Astro you can see that we have more granular control because now we can set

A specific color for each heading or in other words for each title size so for example let me scroll a little bit here at the top we have an H1 title and here at the bottom we have an H2 title so now let me show you I’m going to click on heading 1

And I’m going to change the color and now you can see here on top the sons of the Empire has changed let me close this and now let’s select heading 2. and let me pick this color and take a look at the bottom right corner of this window

And there you go the colors change so it makes it really easy to have more granular control on the titles colors okay next let’s take a look at the containers options so we’re back in the free version and back to Global containers and to showcase the containers let me

Open our sample page which comes by default with every WordPress install so basically container layouts give you several options to display the content on your website so here we have a boxed view as you can see here it’s really in a box but if I want to demonstrate all

The layouts I should add a sidebar so let me quickly go back go to sidebar and I’m going to use a right sidebar but don’t worry about it we’ll talk about sidebars later so let me go back go back to Global container where we were and as you can see here in the

Thumbnail it shows the sidebar is boxed which is exactly what we can see here we have different boxes next we have content boxed and as you can see here we still have our sidebar but no boxes anymore next we have full width contained and now the box has disappeared around the

Content but once again if I really want to demonstrate this I’m going to have to remove the sidebar so let me go back back one more time sidebar and I’m going to choose the no sidebar layout okay let’s go back Global container and now you see our content without a sidebar

But it’s not boxed anymore next we have full width stretched and as you can see is stretching all across the width of the window and next we have our new layout narrow width and talking about width you can change the container with so for example let me drag this down

And as you can see the content is now narrower let me put it back how it was and if I choose box layout for example here I can change the container width and there you go let’s reset it so as you can see it’s really powerful because you have a great amount of

Control about how you want to present your layouts and if we take a look at the pro version as you can see we have more options with site layouts so the default is full width but then we have Max width and take a look at what

Happens in the preview now it takes the max width value so if I change it I have more control on all the elements let’s reset it let’s click on padded and padded is very convenient if you want to have a margin all around your website’s content and

That’s a very trendy design next we have the fluid site layout which as the name hints allows you to create fluid elastic layouts let’s put it back on default and next as you can see here we have a design Tab and that gives a success to container

Spacing options so if I add 50 pixels of outside spacing you can see it reflected here in the preview output 500 you see what I mean same thing for inside and now 500. let’s put it back how it was now these are for the global container options but

As we’ll see Astra allows us to have a more granular control because we can actually decide which container we want for example for Pages or for posts and we see that later in the video next let’s take a look at the buttons options so in global click on buttons and for

This we’re going to go to our shop page open one of our product pages now as you can see here we have a button with rounded corners and now I’m just going to click on this preset and there you go in just one click all the buttons on our

Website have changed so let’s take a look let’s scroll down and here in the footer as you can see our button in our form has also changed let’s scroll back up and just like we saw previously we can also use the global colors to change the text color

Background color border color we can change our fonts change our padding our border with and the amount of roundness we want to our rounded corner button okay let’s reset this and now stealing Global you want to click on scroll to top and as the name suggests we’re going to add a scroll to

Top button so just click on enable scroll to Tab and now as I start scrolling as you can see here in the bottom right corner we added the scroll to top button so here in the options you can decide to display on desktop or on mobile on the left or the right hand

Side and you can also change the icon size that’s a bit too big next you also have a design Tab and when you click on it you can change the background color so let’s pick this color we can also change the background hover color so let’s pick this and now when I hover

Over the element as you can see it’s got the right colors and we can do the same thing for the icon color we could pick this and this of course here it doesn’t look really good so let’s change it back to White And now when I click on the button

It’s doing its job back to the top next let’s go to Global block editor and basically the block editor option takes care of core blocks spacing now depending on which starter template you installed you may see different results so if you want more info on the topic

I’ve put a link to our documentation in the description of this video but for the time being and for this specific demo you can choose Comfort compact or custom okay next let’s go to Global miscellaneous and here you have an option that says enable smooth scroll to

Idea now before I show you what it does let me show you what happens when it’s not enabled so here I have a button that’s linked to an anchor on the page so basically it’s going to go to a different place on the page so as I

Click on it as you can see it went straight to the last sentence which is the anchor that I’ve added I will show you in a moment how to do this so let me show you one more time as I click on it it’s going straight there but it’s

Snappy it’s not smooth now if I enable smooth scroll to ID and now if I click on it as you can see it’s scrolling down but the smooth way and if you’re wondering how to create an anchor on the same page we’ll see later on in this video how to

Edit the content but for the time being let me just show you so I click on the plus sign here and I’m just going to start typing buttons I’m gonna take this one in the blue color because it’s from our Spectra plugin so I can just click on it and it

Added a button here at the bottom so next I can click on this icon to see the list View and then I can just drag and reorder and I’m just going to put the buttons just below the previous ones so here are my two buttons I only need

One so I’m going to click on this one click on the three dots and remove the button next I’m going to double click to change the text let me call it anchor next seal with our button selected make sure you click on the content sub tab here on the

Right hand side and then where it says link you’re going to put a unique identifier just one word for example down and take notice is get the pound sign and then the word so I’m just going to copy the word without the pound sign very important so right click and copy

And next I’m going to select where I want to go on the page so I’m going to select this block right here and now with my block selected here on the right hand side I’m going to click on the advanced sub Tab and where it says HTML

Anchor I’m just going to right click and paste the word I just copied and by the way before I save I’m just going to click on the previous button and remove it just to show you that it works fine next let me click on update

And now if I go back to the front end and refresh here is my anchor button and as I click is going down smoothly now let’s take a look at the header Builder so in the customizer you want to click on header Builder and before we dive in the options I have

To introduce a few Concepts so here we are on the home page and you may not see it because it’s just a color behind it but this is a transparent header there are several types of headers you have the standard header you have transparent header and in the pro version as we’ll

See you also have the sticky header but this is a transparent header now let me click on the blog page and here you can see we have a regular header now let me show you so here I have an option transparent header and we’ll talk more about the transparent

Header later but just to show you I have an option that says enable oncomplete website so if I toggle this on as you can see it toggled on the transparent header it looks a bit weird here so let me put it back let me toggle It Off

But that was just to introduce the concept that you can have several types of headers on a website made with Astra now you may be wondering how do we decide which page has the transparent header or the standard header and we just saw we can enable globally but what

If you want to enable page per page so in WordPress go to Pages then click on edit home and here I’m on the home page so if you take a look in the top right corner you have the Astra settings icon and if I click on it that allows me to introduce

This concept of granular control so first of all you can change the layout here we saw earlier on that you can change the layout globally and we’ll see later on you can change it per page per post what type of content but you can do

It here in each and every page you can decide which layout you want which container you want next you can decide if you want a sidebar for this specific page but let me close this you can also disable the header and the footer for this specific page

But what we’re interested in is the advanced settings so if I click on advanced settings first of all I have an option to disable the primary header and the mobile header but what we’re interested in is the transparent header and as you can see here it’s enabled

Just for the home page now if you go back to the WordPress admin to pages then sample page click on edit and once again let’s click on the Astros settings let’s go to advanced settings and as you can see here the transparent header is disabled it could also be said to inherit because

By default the transparent header is not enabled globally and if you go back to the front end here we have our home page and if we click on the sample page as we can see we have a regular non-transparent header okay with this concept out of the way let’s go back to

The WordPress customizer so once again in the customizer we want to click on header Builder and look at the message here the system is going to tell us that this header on this page is set for the transparent header so it gives you a hint on where to actually change the

Settings but first of all we want to start with the regular header so in my navigation I’m going to select my sample page and as you can see the message has disappeared so as you can see here we have several elements and we can either Click on each and every element and then

Change the settings or here at the bottom of the window we have the header Builder so for example if I click on primary menu as you can see in the left panel now I have the options where I change things click on search cart you get the idea so

Let me go back and it’s really up to you how you want to access the various elements but for me I find it easier to just click on what I want to change here in the header Builder but before we even change the elements as you can see here

We have three rows the first is the above header the second is the header and the third is the below header and in each one I can add some elements so if I click on the plus sign let’s say add the account and there you go now you have the

Account icon here on top now here at the bottom let me add social and now we have the social icons in the below header and as you may imagine you can just drag and drop and reorder in the elements easy huh now this is such a powerful feature because otherwise you would need

A developer to change the elements around but now you can take care of it on your own so let’s remove this and the next thing I want to show is that at the beginning of every row there is a gear icon and if we click on this gear icon we have

Specific settings for example we can change the height of the header or if you go to the design tab we can change the background we can add a bottom border and we can change the spacing or the margin now as I demonstrated when you click on the plus sign you have several elements

That you can add here now in the pro version as you click on the plus sign as you can see we have more elements because we have buttons button one button two so let me add some the language switcher so if you use a plugin like wpml to have a bilingual or

Multilingual website then you can use these handy language switcher widget you can also add a toggle button and if I click on the toggle button I have the options here so I can change the way it looks in case you can’t see because it’s too small it’s right here

Actually let’s put it here on the right hand side let’s save and now if I click on the toggle icon you see we have this full width navigation now of course we could have made it look much better but it was just to show you an idea of some of the additional

Elements you get with the pro version and by the way if you want to edit the off canvas menu that we just saw just click on the gear icon and then you can select whether you want it to be a flyer type a full screen type or a drop down

Type so let’s take a look we had the drop down let’s select fly out let’s click on publish now let’s refresh our page and now as you can see we have the fly out let’s go back and now let’s select full screen click on publish let’s go back and refresh the page

And now as you can see it’s full screen let’s go back here you can decide whether the drop down Target is an icon or a link and you can select the content alignment so I click Center publish let’s refresh and now our content is centered then we have our design Tab and let’s

Change the colors so let’s pick this color for the background and let’s change the close icon color let’s publish refresh and there you go of course you can make it look even better but you get the idea now let’s take a look at our language switcher and here we can add several more

Languages so if you want to add Albanian there you go you can also select whether you want it to be horizontal or vertical and decide whether you want to show the country flag or maybe you just won the country flag and not the name and of course on the design tab you can

Really make it look the way you want okay let’s remove this and let’s save okay now back in the free version let’s click on site title and logo and here we have our current logo we can remove it click on select logo or we could have just clicked on change next

Click on upload files select files and I’m going to select some images so here I’m going to select a logo for the regular header and my regular header has a white background so I don’t want white and white so I’m going to pick this one click select and here is going

To ask me to crop by default but if you want the full image click on skip cropping and voila here is our new logo next you can decide to add a logo for retina devices but I’m not going to use this option and you can change the logo size so you can either

Use the slider or input a specific value but it’s a bit too big so let’s scale it down next you can add a site title and toggle the visibility on desktop tablet and mobile but I just want my logo here so I’m not going to

Activate it but if I did I could say whether or not I want the logo and the side title to be in line so on the same line and next I have my tagline and once again I can toggle the visibility just like I can toggle the visibility for the

Logo so if I toggle this off right now the logo is not visible on desktop but if I move to tablet as you can see the logo is still visible and the same will happen if I click on the mobile okay let’s go back into desktop and let’s

Activate the visibility okay next I have an option here to change the site icon so click on select site icon and once again you can pick one from your media library or you can click on upload files click select files and I’m going to add my site icon click on select and there

You go now our side icon is set which is what is going to appear in the browser tab click on publish to save your changes and let’s go back and once again if I click on site title and Logo click on the design Tab and here we can change the title color the

Tagline color but we don’t have any here and we can change the margin so if I input some values as you can see I can change the margin and if we go to the pro version we can see that in the design tab we have two more options title phone and tagline font

Okay let’s go back to our free version and before we take care of our primary menu let’s look at the Search widget so click on search and as you can see here we can change the icon size and if you go to the design tab we can

Change the icon color and the spacing now let’s go to our pro version and as you can see here we can change the search style so we get four search style first of all we get a slide search which is the default then we get the full

Screen search and if I click on publish and go back to the front end Let me refresh and now when I click on the icon as you can see it’s full screen let’s go back let’s use the error cover search option publish back to the front end let’s refresh

And as you can see it’s just a top Banner let’s go back and the last option is the search box publish let’s refresh and here we have our search box okay let me put it back to the default and if we take a look at the design tab

You can see that we got many more options okay let’s go back to the free version and let’s click on the card element and here you can change the icon the card label you can choose to display the card count or hide the card total label but the great thing is that you

Can select which card click action you want so for the moment it’s dropped down so let me publish this now let’s go to the front end let’s go to the shop let’s open this product and let’s add to cart let’s add another one and now I’m going to hover over the icon

You can see we got these drop down style card now let’s go back and let’s change the option to slide in publish let’s click on another page to refresh and now I need to click on it and I got this slide in card Style now if you click on cart page and publish

Let’s click on the new page to refresh and if I click on it it’s going to take me straight to the cart page let’s go back and let’s put it down on drop down and let’s publish our work okay next let’s open our sample page with our regular header next let’s click

On primary menu so first of all if you install the same demo you will notice that in the original demo there is no drop down menu now the pages were created when you imported the demo but it was not in the menu I’m going to show

You how to add new elements in the menu but the first set of options you see here are for the sub menu so I can change the width and now you can see how wide it is and I can add item dividers so now I have a line between each element

So let me put it back however it was and next click on configure menu from here and it’s going to take you to this panel where you can view all locations for your menu in our case you want to use our primary menu which is located in the header

So just click on edit menu and as you can see this is our menu here now if you want to add an item click on the plus sign and here you see all the pages currently on your website if you’re looking for a specific page if

You have too many pages you can just type the name of the page so if I type contacts there you go and if I want to add it I just click on the plus sign now granted it’s already there but it’s just for demonstration purposes and I can reorder

Drag and Drop it where I want but in case I have a hard time to place it exactly where I want what I can do is click on reorder and then use the little arrows so for example here I can put it at the same level then the home page and

Then I can go down are up and when I’m done I just click on done now if I want to remove a page I click on the little arrow and click on remove so as you can see it’s pretty simple to edit the menu now let’s go back one more

And once again let’s click on header Builder and if you go back to primary menu click on the design Tab and here you have a set of options to change all the colors here in the header and it’s pretty self-explanatory so for example in one click I can change the background

Color but this is just for the primary menu not for the header now if you go to the pro version the difference is that you get way more granular control for all the colors of your primary menu and you also get options for Mega menu which is the feature exclusive to the pro

Version next in the customizer we want to go to header Builder transparent header and as we saw previously on this video we can decide to enable the transparent header on the complete website but we don’t want to do that because I showed you how to do it per

Page because we want a mix of transparent and regular header on this website now if we did decide to enable the transparent header on the complete website as you can see here we could still enable or disable it on certain type of content like on four four pages search Pages archive pages

Just on the main blog page on the latest post page so you still have some control but as mentioned on this demo we’re not going to use this because we can actually manage it per page as we saw earlier on in this video next we can decide to enable on desktop mobile or

Desktop and mobile and we can choose a different logo for the transparent header if we wish now here we don’t really need it because we have a solid color but let me show you what happens if we change this so let’s edit the home page so first I’m going to select my

Main container and then in style I’m going to change the image go to the midi library and let me use a dark image let me use this one click on select and click on update and now back in the customizer as you can see we can’t see

The logo actually we can’t really see the menu or the text but we’re just going to focus on the logo here so enable the different logo for transparent header click on select image page and I’ve already uploaded a light logo in the media library and voila now it’s readable

Now you could also decide to have a different logo for retina devices but I’m not going to do it here and as usual you can change the logo width but for now we’re going to remove this image and put the previous image back so let me toggle this off let’s publish and back

To editing our home page I’m going to switch back to the previous image and click on update to save our work and there you go things are back to normal okay let’s go back to our free version let’s go back again then let’s click on header Builder and this time we’re going

To click on transparent header but if you want to see the changes reflected we need to click on a page with a transparent header so let’s click on the home page and left click on the design tab we have a colors and background options for example our background overlay

We can customize the colors for the side title now we don’t have a side Title Here we can change the menu colors so for example the text links as you can see we can change it easily also for the hover color so when you hover over it

We can change the colors of the sub menu so for the moment the sub menu is all white for the background but we can change this and we can change the text and Link colors and if you added social icons search or some other widgets you have a lot of

Control for the colors and if we take a look at the pro version you have a few more options for example for the search color on top of the icon color you can change the Box background and the text and placeholder colors now let’s take a look at some exclusive Pro features for

The header Builder so once again in the customizer click on header Builder and next click on sticky header So currently before we enable the options as we scroll down the header disappears on top now let’s go back and let’s stick the primary header and as we scroll down as you can see the

Header is sticky the only issue is because it’s transparent it’s not really readable because you get the content coming behind but the solution is easy so hover over the area of the header and click on the little pencil icon which is the other way to access the settings and now in

The left panel you have a general and a design tab so click on the design tab and here you will see a sticky header option and you can change the background color of the sticky header so for example I could add this color which is completely white and now as I scroll

Down as you can see we have this solid color so it’s way more readable and of course we have the usual spacing options like adding some padding or some margin so let’s go back and then once again in sticky header now if we had an above

Header row or a below header row we could also stick it but for the moment we only have one row which is the primary header neat huh now right now when we scroll we see the sticky header right away but we have an option here Hide when

Scrolling down so let’s take a look as we scroll down we don’t see the sticky header but as soon as we scroll back up here it appears great but now what about a different logo for sticky header so let’s enable the option let’s click on select image I have already uploaded my logo

Let’s scroll back up and I’m going to remove the height when scrolling down option so as soon as I start scrolling you can see we have our new logo but now I can also add a different logo for retina devices but I’m not going to do this and

I can change the size so let me make it a bit smaller and next I can select the animation so right now it says None but I can change it to slide and as you saw we saw the sliding movement so let me show you one more time slide let’s try fade

Scroll back up and as we scroll you see the fade effect next you can decide to enable on desktop mobile or desktop and mobile let’s publish our work let’s go to the front end let’s refresh and now as we scroll down we have this sticky header so that our menu is always

Available and if you want to style the background color of the sticky header all we have to do is hover over the header then click on this pencil icon click on the design Tab and then where it says background color once again we can change the color here and as we

Scroll as you can see the color changed now let’s put it back to White and let’s publish our work now before we move on to the next option which is the breadcrumb let’s take a look at the footer Builder because it’s pretty similar to the header Builder so click

On footer Builder and if you followed along for the header Builder you should now be familiar with this interface so once again you can click on each element here on the left hand side or you can click on the elements directly within the footer Builder now here for example

If I click on html1 basically I have a text editor module and I can just add some text right here next I have the widget and this widget is a form widget from the plugin WP form that was installed automatically when we imported the starter template demo

Here we have another HTML widget that has the logo and we can change it and add our own logo and we can resize it next we have our footer menu and it’s the exact same thing as we saw earlier click on configure the menu locate footer menu click on edit menu

And just like previously you can add pages remove pages and reorder let’s go back back one more let’s click on footer Builder again and as usual when we click on the gear icon on the row we have some options and actually more options than what we saw in the

Header Builder so we can choose the number of columns here I got three but let’s try four and if I click on the plus sign I can add three more widgets let’s go back to three now in terms of layouts you have several options next you have more options for Inner

Elements layout by default is stacked but you can use inline next you can choose to use the content with or full width and the vertical alignment Middle top or bottom and once again you can toggle the visibility you also have a design tab or you can add a top border change the background

Change the inner column spacing use custom padding or add a margin now if we take a look at the pro version if we click we can add more elements instead of just three more widgets we could add two buttons and a language switcher next in the customizer let’s go to

Breadcrumb and basically the breadcrumbs are way for the website visitor to know where they are on the website so in the drop down let’s select inside and as you can see our breadcrumb is here let’s select after and as you can see it’s a little bit lower and let’s select before title

And there you go now you can change the alignment and you can also decide where you want to enable it you could say you just want to enable it on the home page and just remove it from anywhere else it’s really up to you so let’s turn this off and

Let’s save our work okay next in the customizer let’s take a look at the blog options and let’s start with the blog archives so first of all here at the top you get the block title so click on the little arrow here and here we can change the layout

So for that let me go to the blog page so this is considered our blog archive because it will reference all the blog posts that we have so now you can click on the second layout and it looks like nothing happened but here you have an option that says enable

On block post and page so let me turn this on and there you go now you can see the difference so let me switch back to Banner layout one and banner layout 2. so here you can change if you want the full width size or a custom size

And once again you can play around with the width next you can decide if you want to show the title or turn it off let me switch it back on if you have a description you can also decide to turn it on or off and here you can also turn on breadcrumbs

Now we’ve seen breadcrumbs before so you should have a pretty clear idea of what they do next you can choose the horizontal alignment so left middle or right skip it in the middle and you can also choose the vertical alignment but if I do change it now nothing will happen because the height

Of this Banner is not big enough so for that we go to the design tab and here I can change the banner minimum height so now we decide let me go back to the general tab vertical alignment top middle bottom let’s put it back in the middle and

Let’s go back to the design tab so here I can also change the Inner Elements spacing as you can see I can decide whether I want a container background so let me pick this color I can change the title color the text color the link color and the link hover color

So now when I hover over the breadcrumb as you can see it’s working fine next I can also change the title font so as usual I can change the size and all the other options that you should now be used to next I can change the margin and the padding

Let’s reset all styles let’s go back to our blog archive options and now let’s take a look at our container and sidebar layouts so let’s say I want a sidebar let me pick the right sidebar layout and then here in the container layout I can choose for example the box layout

Let’s scroll down once again I can keep the content width or I can use custom content with and now I can really play with the width just with this slider next I can decide to disable the featured image and the title and blog meta and if I decide to enable the title and

Blog meta I then have a granular control over these so for example let me put the category just before the comments and here you see it reflected I can decide to hide the category actually I can decide to add any elements of the meta elements according to build the publish dates and

If there are any tags I can decide to show them next I can decide to show the full content or just an excerpt so if I put full content there you go the full content is displayed okay let’s scroll back up and let’s go to the design Tab and here on the design

Tab we can change the post title font size okay now let’s take a look at the pro version so once again in the customizer let’s go to blog blog archive and when it comes to the blog title the options are going to be the same but now let’s

Scroll down and as you can see here we have a Blog layout section in the pro version so now I can change the layout to this one or let’s say I want to have the image on the left hand side there you go next I can decide to add space between posts

As you can see and I can decide to enable a date box now that looks very slick and professional and you have several options you can keep it square or maybe you want a circle version because maybe it better matches your branding and I’m going to put it back to square

Next as usual you can change the content with going to custom and playing around with the slider and as we saw previously you can decide what you want to show in terms of feature image and title and blog meta now one difference with the free version

Is that in the pro version you have an item called read time so let me enable this and as you can see now we have the reading time so here it says three minutes of reading one minute of reading maybe you’ve already seen that on professional blogs it looks really neat

And really helps the viewer know how much time they’re going to spend on each blog post also in the pro version you can change the extra account so let me show you if I put 15 there you go the excerpt is way shorter so you have more

Control over this let me put it back and next you can also change the read more text label so let’s change it to Reddit and there you go next you can decide should you read more text as a button so if I turn this on now we have a fully fledged button

And next we can show the featured images size so for example let me put 300 by 150 pixels apply size and as you can see you can really play with the size you want now that doesn’t look really good so let me remove this and when you

Remove the number it goes back to Auto just click on apply size and there you go next we have our post-pagination and the post-pagination style but in order to demonstrate this we need to go back to the WordPress admin and next you want to go to settings reading

And here I can decide how many posts I want to display on the blog archive page so where it says blog Pages show at most instead of 10 posts I’m just going to put one post just for demonstration purposes okay settings saved now let me go back to the customizer

I’m going to save my work and I’m going to refresh the page okay now let’s go back to blog blog archive let’s scroll down and here let me click on the blog archive page okay so now as you can see we only have one blog post showing on the Blogger archive page and

Here is our pagination so if I click on two it’s going to take me to the next blog post and so on you get the ID so let me go back to page one so this is the number post-pagination option but I can also choose infinite scroll so let me save our work

Now let’s go to the front end let’s go to the blog page and now as I start scrolling as you can see it’s loading more blog posts every time I scroll is going to load a new blog post until there is no more posts to show so that

Was one way of doing it but there’s another way as you can see here there’s a new Option called event to trigger infinite loading now it’s set to scroll but if I choose click now as you can see I have a button and if I scroll down I

Can change the label on this button so let me change this to load more posts let’s save now let’s go back to the front end and Let me refresh this page so as you can see now I still have one blog post but now I have a button so if

I scroll down nothing is going to happen I need to click unload more posts and you get the idea so let’s go back and now if I scroll back up let’s go to the design Tab and compare to the free version now we can change the content color so we can

Change the post title color The Meta color and The Meta link color and of course you can also change the hover state you can change the meta font the pagination font and the post spacing outside and inside okay next in the customizer let’s go to blog single post options so first of all

Let’s click on our Blog Page and let’s open one post okay next you want to take a look at our post title so first of all if I disable you can see the whole image and the title disappeared so let me enable it back and now let’s click on the little arrow

And once again we have two layouts so let me show you layout two but in this case I prefer layout one so once again you can reorder the elements we just drag and drop features so it’s very easy you don’t need a developer you can just do it yourself

Next we have a granular control to disable any element that you want to disable and as usual you can add breadcrumbs next once again if you enable The Meta we can change the elements and have more granular control over these and last but not least we can change the horizontal alignment

Now if you go to the design tab we can change the inner element spacing let me scroll back up and we can change the title color the text color the link color and the link hover color and right below we can change the title font text font and meta font so for each

Of these all you have to do is click on the little pencil and you can start playing with the various options that are self-explanatory okay let’s go back and let me scroll back up on the page here and just like for the blog archive page you can change the layout so let’s

Say I want a right sidebar let me click on right sidebar layout and then I can choose which type of container layout I want do I want it boxed Like It Is by default or maybe I want it content boxed if you follow the video along you should

Be pretty familiar with this concept now so let me put it back to boxed now let’s scroll down once again you can go to custom and change the content with now one neat feature is the enable related posts so let me scroll down and now if I enable this option

As you can see I have a neat little section with related posts and I have a few more options so let’s add read related post so we can change the label we can change the text alignment we can also change the number of posts so let’s say I want three

But now we set in two columns so let’s set it to grid column layout three nice we can also decide which pose we want to use with the post query option so we can choose related post by categories or by tags we can decide to order by day tarot post

Order random or common counts and we can choose the order is it ascending or descending so many options to display the related posts next we can decide whether we want to show the feature of the image and the title and post meta and as usual you can

Change things around so you can put category first but let’s say that for a related post section could be nice to just remove some of the meta way cleaner now there is one more option here which is the enable post excerpt so let’s turn

This on and as you can see we have our post excerpt and let’s say a count of five words there you go scroll back up and now if we click on the design tab we have options here for the related post we can change the color of the section title

And we can also change the section background next we can change the content colors so we have our text color our section title font our post title font and our meta font but I’ve removed the meta here so you won’t see it let’s reset everything and next you can change the post spacing

So if I want outside spacing you get the idea okay now let’s take a look at the pro version so in the customizer you want to go to blog single post and next in the preview I’m going to click on blog and let me

Open a blog post so let’s take a look at the post title option click on the little arrow and the difference here with the free version is that in the meta options we have the read time so let me enable this and now as you can see we have the

Minutes of reading so here it says three minutes of reading which is really handy for the website visitors okay let’s go back and now in our single post options let’s scroll down and here we have a new section so we can enable author info so let me go to the bottom

Of the post and if I enable author info as you can see here I have a author info box now just as a side note if you want to change the thumbnail here for the author you need to do this with a service called gravatar it’s free all

You need to do is link the email address of your WordPress account to your gravatar and once you’ve done that the default thumbnail image will be replaced with the image you uploaded to your gravatar now the good thing is when you set up your gravatar every time you use

That email address that image will appear next disable single post navigation so here you see we have previous post and if I click on this it’s taking me to the previous post as you may have guessed and now we also have a next post link so if we turn this

Option on our single post navigation has disappeared as part promised so let me reset this the next option is auto load previous posts and if you hover over the little question mark says Auto load previous posts can now be previewed in the customizer so let’s save this

Okay let’s go back to the front end let me open this post and now take a look at the scroll down as you can see it loaded the previous post let me scroll again and again and again you get the idea now the next option is remove featured

Image padding but this option would not work on fluid layouts okay let’s enable our related posts and next let’s scroll back up and let’s go to the design Tab and here in the pro version on top of the outside post spacing we also now have the inside pole spacing

Okay next let’s take a look at our page option so in the customizer click on page and in the preview we want to go to our sample page which once again is the default page that comes when you install WordPress so first we have our page title option once again we can disable

The page title but if it’s enabled we can click on the little arrow and here we can change the layout of the page now we have a banner here here we can change the banner container with and we can change the structure now here we don’t have a featured image for this

Page so we can’t see it but we can decide to hide the title and show the breadcrumbs for example we can change the horizontal alignment and we can change the vertical alignment but the banner height here is not big enough so let’s go to the design Tab and

Here we can change the banner minimum height and now if I click on the general Tab and scroll down to vertical alignment as you can see now I can change to the top middle and bottom let me put it back to middle and let’s go back to the design tab where I’m

Going to reset this value next we can change the inner element spacing change the background change the title color the text color the link color and the link hover color let’s reset all of these next I can change the title font with all the options here and I can change the text font

Next I can change the margin and the padding so let’s go back so let me switch back to Banner layout number one and let’s go back one step now here we can change the container layout so we’ve already seen container layout options in the global options in

The customizer but this is just for the page level so for example let’s say I wanted a box sidebar now of course I need to select the sidebar in the sidebar layout or I could have it on the left hand side then you could decide if you wanted boxed or content boxed

Full width contained full width stretched or narrow width and we did narrow width option the sidebar disappears so let’s put it back on default and when you set it to default it’s going to take the value from the global container options same for the sidebar layout okay let’s save our work

Okay now let’s take a look at our sidebar options so in the customizer click on sidebar and in the preview I’m going to go to my sample page once again this is the page installed by default when install WordPress and earlier in this video I’ve shown you how to add it

In the menu so here we have the default layout that says no sidebar and these options are on a global level so of course if you’re already enable the sidebar for the page or the blog post you would already show here but in case you’re just using the default options on

The page and Block Level then what you decide here is going to be reflected there so for example here let me click on the left sidebar and there you go next we have right sidebar and next we can change the sidebar width so I can play around with a percentage

And now let’s take a look at the pro version and in the pro version you now have a design tab so if you click on design and as you can see we have a lot of options we can change the background color and that will be the background

Color of the whole sidebar we can change the contentile color content text content link title phone content font but here we’re using widgets here in the sidebar so we can change the title font size of the widgets we can also change the widget font size next we can change the outside sidewar spacing

As well as the inside sidebar spacing next let’s take a look at the woocommerce options so in the customizer you want to click on woocommerce and before we take a look at the options let’s open our shop page and if you followed along I showed you earlier on I

Had to add a page in the menu navigation so first let’s click on General and here we’ll be able to control our container layout and sidebar layout options now if you choose the default it’s going to take the global container options into account so once again I can change the

Container layout to boxed content box full width contained fully stretched and for the sidebar I can decide no sidebar left sidebar or right sidebar and if you want to know more I invite you to watch the segment of this video dedicated to the global container options okay next

Is in woocommerce let’s take a look at our product catalog options so first of all I can enable the products title and as you can see here I have a different layout so if I click on the little arrow I have two Banner layouts so let me show you layout two

Once again we can decide to change the width of the banner let’s put it back how it was and we can decide whether or not we want to show the title the description if we had one and a breadcrumb next we can change the horizontal alignment to left center right

Let’s put it in the center and we can change the vertical alignment but here the banner height is not tall enough so let me scroll back up let’s go to design and now let me change the minimum Banner height now let’s go back to General and now I

Can change the vertical I’m into top middle and bottom let’s put it back in the middle and let’s go back to the design tab now let me reset this value and here I can also change the inner element spacing next I can choose no container background a custom container background

So for example I can change the color and I can change all the colors on a granular level like the title color text color link color and Link hover color let’s reset these values I can also change the title font and the text font next I can also choose the featured

Option and here I have an option for overlay color and the rest of the options are the same next I can add a margin so for example let me link all the values and let’s add 50 pixels let’s put it back or I can do the same thing for the padding

So let me link the values and let’s add 50 pixels of padding now in case you’re wondering the padding is going to be the spacing inside of a container whereas the margin is going to be the spacing outside of a container now let’s reset those values let’s scroll back up click on the

General Tab and I’m going to go back to Banner layout number one and just disable description and breadcrumb now let’s go back one step and here once again we can change our container and sidebar layouts and we can change the shop card design now depending on the starter template you’re using you may

See some differences or not in this case there is no difference but once again if you choose a different starter template you may have different results next we can change the number of shop columns let’s go back to four and you can also change the number of

Products per page now here it says 12 but we only have eight products so it’s only showing the maximum of product but let’s put four and there you go now we have some pagination options next you can change the shop archive content with so you can go to custom

And you can play with the slider to change the value let’s put it back next you got shop display options so you can decide what you want to show on the shop page do you want to show products or maybe categories so here we have two categories or you can decide to show

Categories and products so as you can see we got a mix of categories and products next we have the category display option so for this let’s click on one category and now it’s showing an archive page just for this category which is the fantasy category so now I

Can decide what do I want to show do I just want to show products like you see here or show subcategories or show subcategories and products so it’s the same as the previous option but the thing is we don’t have any subcategories on this specific example but if we did

We could show it here next we can change the default product sorting so the default sorting is custom ordering plus name but it could be popularity how many sales the average rating now here we don’t really have a rating but you could order it by rating you can sort by most recent

By price ascending or by Price descending which means the most expensive first down to the least expensive product next we have our shop car structure so once again we have various elements we can change the order of the elements so let me put the ratings first

And there you go as you can see we have our ratings just before the title let me put it back now we can decide to enable or disable elements we can add a short description add to cart and category let’s save and scroll back up let’s go to the

Design Tab and here in the design tab we can change the shop card styling so we can align it in the middle on the right hand side or on the left hand side now let’s take a look at the pro version so ceiling woocommerce product catalog if I scroll

Down we can see here that in the shop card design I have more options so I still have design one and design two and here let me show you design three so now we have the thumbnail on the left hand side and then the meta elements on the right hand side

Let me change the number of columns to two let’s scroll down and as we scroll down we now have a toolbar structure option so here we can decide if you want to leave the result count on or if you want to turn it off and now it disappeared let’s put it back on

We also have our sorting option on the right hand side we can turn it off are back on here we have our easy list View and as we click on the little arrow we have some options how many columns do we want and do we want to align the content

In the top or the center so let me show you if I click here on our easily view icon here is my easy list now I can change whether I want to align it on the top next I can add a filter so if I click on

The filter as you can see I can add shop filters here and if you want to add shop filters click on the pencil icon and here at the very bottom you will see shot filters so this is using Spectra so here you can click on the plus sign to add a block

Let me type filter and let’s add our Spectra widget filter by price let’s save our work and never click on filter let’s say I only want products that are from twenty dollars to twenty two dollars and as you can see the changes are reflected here

So this is how you use the filter option okay let’s go back let’s go back one more step then back to woocommerce product catalog and first of all let’s switch off the products title because we need it for the options we’re going to take a look

At now so let’s scroll down to where we were okay now if I disable the display page title there you go same thing for display breadcrumb and next we’re going to take a look at enable sticky sidebar change filter list to buttons and enable filter accordion

But for the time being let’s take a look at display active filters so if I click here on filter and I’m going to set the filter to 20 to 21 dollars and there you go I have three products here and now you see my active filter here

And I can remove it by just clicking on it okay so for these three options to work we need to make a few changes so first let’s enable these so enable sticky sidebar change filter list to buttons and enable filter accordion now let’s scroll back up and for the sidebar layout let’s pick

Left sidebar and as you can see here now on the left hand side we have the space for the sidebar so now let’s go back back one more step and click on widgets next as you can see now we have an option called woocommerce sidebar let’s

Click on the plus sign and I’m going to type filter and I’m going to add filter by Price which is the Spectra widget and we’ll talk about Spectra later in this video next let’s add another filter this time is going to be filter by stock

Next click on the plus sign here to add a block and this time we’re going to look for a widget called products list great now let’s go back one more step and let’s click on woocommerce product catalog let’s scroll down to where we were so let’s start by the end we have the

Enable filter accordion so if I enable it this allows me to collapse the products list widget that we added okay next the change filter list to buttons so if I toggle this off you can now see here a little box that can be ticked but

If you prefer you can switch it back to change filter list to buttons next we have the enable sticky sidebar and for that we want to make sure that we collapse our accordion and now if I scroll down as you can see our sidebar stays in place next we have our quick view

So quick view option could be on the image so now when I hover over the image as you can see we can see the quick view button and if I click on it there you go next I can choose on image click so now when I hover over the image nothing

Happens but if I click on it it opens our quick view right away the next option is after some airing so now I have a dedicated button that says quick view and if I click on it you guessed it it opens our quick view pop-up let’s put it back on image and

Depending on the layout you’re using it may be different so let me scroll back up let’s go to design one in the shop layout and now when I hover over it you can see the quick view button is right here and if I click ta-da okay let’s go back to where we were

And for the time being I’m going to select on image click let’s publish next we will stick add to cart button so if I enable this option and let’s say I want a quick view of this book as you can see because the show description is so long this option

Allows to keep the add to cart button always visible at the bottom so this is way better for your conversion next we have our shopagination options so as I scroll down we have our shop pagination here it can either be a number and it can be square or Circle

Let me put back to square or I could decide to use infinite scroll now this is very similar to the options we saw earlier on in this video for the blog archives so let me scroll back up here once again let me scroll back up and let me change the number of products

Per page so I’m just going to put two let me publish and now let’s go back to the front end Let me refresh so I only have two products here and as I start scrolling down as you can see it’s going to load more products until there are no more products to show

Now let’s go back let’s scroll down interruptions and with infinite scroll we can also decide to use the click option so now it’s got a button with the load more label and you can change the label so let me change this to load more books Let’s publish

Now let’s go back Let me refresh the page so now Cinema two products but now as a scroll nothing happens I need to click on the button load more books and it’s loading our books okay let’s go back okay when it comes to the shop filter that you can see right here

Can either be a link or it could be a button and if you’re using CSS you can even take it a step further and add your own custom class all you have to do is add a class here in the field so right now let’s put it back to link

So first of all I can change so I could write filter books there you go and next I can decide the behavior of the filter panel so by default it’s fly out so if I click on it we have this fly out panel or I could choose top collapsible and in

That case when I click on it as you can see our filter appears right here so let me put it back to fly out and let’s publish our work now of course here we have the filter panel but we also have the sidebar so in reality you

Pick one or the other okay so as you can see there are many many options in the pro version when it comes to woocommerce and if we scroll all the way back to the top we can go to the design Tab and here you’ll find many options like changing

The product title color the product price the product content so for example take a look at the category here as I change the color the product background now let’s reset all of this you can change the horizontal content alignment here in the middle or here on the right hand side

Let’s put it back on the left and next we can change the product image over style but for that let me load another product so now as you can see when I hover over this book I can see an alternate image and that’s because I added an image

Gallery as we’ll see later just for this product just for this book next we have fade so this is our fade effect Zoom and zoom fade so a combination of both effects let’s put it back to swap images next we have our button padding so as

You can see I can change the values and we have our content padding which is the space inside of each product container next we can add a box shadow so as you can see we have our shadow here let’s reset all of that and if you had a

Bug Shadow we could have a box hover shadow so when we hover we can have a more dramatic effect if we want or more subtle it’s up to you next we have our product title font our product price font and our product content font so all in all the pro version of Astra

Comes with a ton of options when it comes to woocommerce and just imagine if you didn’t have this you’d have to go through a developer or maybe become a developer yourself but here it’s just drag and drop pretty easy okay next let’s go back to the free version still

In woocommerce in the single products so first let’s open our shop page and then let’s open one of our products so first of all we could enable the product title but it wouldn’t really make sense here because we already have the title here in the card so next as

Usual we have our container and sidebar layouts so as we’ve already seen earlier in this video when you use the default options it’s taking the options from the global container options but if you want to change this specifically for the blog post you can totally do so so for

Example for width stretch and you could even add a sidebar now let’s put it back to default now let’s scroll down and here we can change the order of the elements so now I’ve put the category just after my title and I can put it back with a

Simple drag and drop next I can enable or disable any element that I want or put it right back with a mouse click here I can add a payments element and as you can see it looks very professional and it’s going to reassure your customers and if I click here on the

Little arrow I have the options I can choose icon colors or I can go grayscale and I can change the payment title next you can decide which options you want to show so let’s add PayPal you can even add your own custom payment option so

Just add a title and then add a Nikon or an image so let’s add the me me option next we have our product options so we can decide whether or not we want to enable breadcrumb so let me remove the breadcrumb just to show you

Let’s put it back on and next you can enable shipping text so here it says and free shipping and let’s add just for you next if you have any variations for your products you can decide to show it inline or stacked but here we don’t have any variation so I

Won’t be able to show you and by the way if you’re interested by product variations let’s say for example you are selling mugs well the variation would be the color you could have one green variation one blue variation one red variation so if you’re interested in variations we have a nice little video

That you may want to watch and I’ll put the link in the description below next enable sticky add to cart so if we toggle this on now if I start scrolling down look at the top we have this Banner here that’s sticky with our add to cart button right here

We can change the placement so we can put it at the bottom and now it’s right here so whatever the user is doing when they’re scrolling they always have the add to cart button let’s see if our work and let’s scroll back up now click on the design tab

And here we got options for the sticky add to card colors so let me put it back on screen so it’s here at the bottom and now I can change the text color I can change the background color the button text color and the button background let me reset all of this

And let’s save our work now let’s take a look at the pro version so still in the customizer in woocommerce single products let’s open one of our products okay now let’s scroll down and the first thing you notice is that now we have more options for our product gallery so

Here we have our product gallery and in order to add a product Gallery in WordPress you want to go to products all products then open one of your products and then on the right hand side you will see product Gallery so you can click on ADD product Gallery images and next you

Can select which products you want to add and if you want to add several images to your gallery make sure you click and hold the shift key on your keyboard and then click on any image you want to add and then click on add to

Gallery and as you can see now I have more images but I’m just going to remove all of these because I just want four for the time being and then click on update so now we get three different layouts as I click on the thumbnails as you can see

I can display all the images so let me select the first one so here we get the first image that’s really big and then we have the thumbnails here next I have a vertical slider layout which is pretty handy so let’s keep that one next we can

Enable image Zoom effect and if you take a look at the asteroid documentation enabling this option as the name suggests will Zoom the product image on Hover next we can change the image width next we can alter our single product structure so we already saw that we could add our payments

But we can also add extras like this text here free shipping on orders over fifty dollars no reason money back guaranteed and so on and if we click on the little arrow we can change the title and we can change each of the items we can also add an icon an image

We can duplicate it and just edit the content next we can disable our product navigation so let me scroll back up let’s add the circle option and as you can see we get little arrows and we can go from product to product okay let’s select Circle outline Square and square outline

Next we can enable navigation preview and for me to show you this let’s publish our work now let’s go back and let’s refresh and now when I hover over one of the arrows as you can see I can see the previous and next products next if you had product variations we

Could change the drop downs to buttons but once again for this specific example we don’t have a product variation next we can enable the product description and once we enable it we get several options so either horizontal and if I scroll down here it is so this

Is the default layout that’s the way it would show in the free version but here we can change it to vertical accordion and distributed now if you go back to accordion now I have another option accordingly inside summary and now my accordion is right here let’s set it to vertical

And next we can display upsells related products or display recently viewed products now we can also change the labels we can change the columns and we can change the number of products let’s save our work now let’s go back let me open this product let’s go back let me open this one

Let’s go back once again and if I click on this one and scroll all the way down you can see now I have recently viewed products with the two books I just looked at and as usual I can still enable my sticky add to cart now let’s scroll back up

Let’s click on the design tab and whereas in the free version we only add the sticky add to card options now we can change General colors like title color category color price color content color and breadcrumb color you also have the product navigations so we can change the color icon the navigation color

Then we have our product description colors and all the general fonts so you have more control you can change the title font category price font breadcrumb content font the category font price fonts breadcrumb font content font let me reset this now if we enable these sticky products

Some airing what is going to do is that it’s going to let you stick the product summary even if the users are scrolling down to check the details of the product or the related products now if you’re wondering how to add upsells I will link to a post in the

Woocommerce documentation in the description below okay next still in the customizer in woocommerce let’s take a look at our card options so click on cards and here we can change the card button text so when I hover over the question mark it says add custom text

For card button so let me enable this let me hit publish and now if I go back to the front end let’s say I want to add this product to the card then go to view cart so this is our text here proceed to checkout so let me go back enemy add now

Let’s publish and now let’s refresh our page and as you can see proceed to checkout now the next option is for enabling cross sales and once again if you want to know more about cross sales I will link to the woocommerce documentation now let’s take a look at the pro version so still

In the customizer in woocommerce let’s go to cart so on top of the enable cross sales and change card button text that we just saw we now have a few more options we have enable modern cart layouts which comes with sticky card totals and we have the real-time quantity of data so let’s

Publish and now let’s go back to the front end let’s refresh and now let me add to cart a few of the products now let’s click on view card and as I scroll as you can see the card totals stay sticky next the card layout itself has changed

And if we compare it with the free version we can see that in free version the layout is a bit different the card totals are at the bottom whereas here in the pro version we have the car totals here on the right hand side with a more modern layout

And with the sticky options it’s a very efficient layout next if we go back to the shop for example and now when we hover over the card icon to open the mini card we can now change the quantities straight from the mini card now these are the options for the

Woocommerce card but don’t forget if you want to change the way that the mini card is displayed here in the header all you have to do is hover over the icon and click on the little pencil icon and now on the left hand side don’t forget you can change the card icon

You can add a card label show to display the card count hide the card total label and select the card click action so right now it’s set to drop down but it could be slide in or the click is sent straight to the car page but once again let’s put it back to

Drop down okay next let’s take a look at our checkout page so still in the customizer in woocommerce you want to click on checkout and here you can decide if you want to make the company name field optional or required so for example if you’re selling only to businesses it might be

Required you can decide whether or not the address line 2 is optional and once again hidden or required phone field same options he did an optional or required you can select whether or not the required field are highlighted with an asterisk so if I turn this off

As you can see the asterisk disappeared but you may want to put this back on you can select which page is your privacy policy which page is a term and conditions page in the drop down and if you don’t have this page yet just create it save refresh and it will be available

Here in the drop down and here you can also add some text about the privacy policy and it’s a text that’s appearing right here now let’s take a look at the pro version so still in the customizer in woocommerce checkouts as you can see the layout is different if we compare it

With the free version and here if you want we can change the form width but playing with the slider we can change the checkout layout now we set to Modern we could put it back to default which is what you would find in the free version but let’s put it back

On Modern next you can decide whether you want a two column layout or a one column layout and if you do this then everything is skewed from top to bottom let’s put it back to two column layouts next you can change the button text for the place order

So it could be by now but let’s put it back to place order next you can enable or disable the button padlock icon next to the place order label and you can remove the price if you want but it might be better that you leave it on

Next you can decide to display product images now here we don’t have any product so you don’t see any images but let’s save our work let’s go to the front end and let’s go to our checkout page so as you can see here we can see

All the images now if I go back and disable this publish back to the front end let’s refresh and there you go we removed all the images but I think it looks better with it so let me put it back next we can enable or disable modern order received

So this is what it would look like with the modern layout and this is what it would look like without it so you make your own opinion but to me this one looks cleaner and more modern next we have the enable CK Order review and as we scroll as you can see

The right side of the page so our right sidebar with the order stays sticky next we can enable the two-step checkout so in that case we have two tabs and that’s interesting if you want to break down the information so you have the first tab here people need to fill in

All the details and then they’re going to be moved on to the second tab to the last part of the purchase process and when you enable this option you can change all the labels for the titles and subtitles now you also get an enable checkout node

And now you can change the label also so let’s disable this and let’s go back to our regular layout next we have our display order nodes so if I disable this as you can see our additional information block has disappeared so let me put it back next we have our display apply coupon

Field it’s right here when you click on it you can display and add your coupon code so you can disable this but of course if you want to use coupons it’s better to leave it on next you can enable distraction free checkout so now there is no top navigation and no

Footer which is actually a good idea when you get to this part of the purchase process next you may want to display a back to card button and this one would be at the bottom just below the place order button and of course you can also change the label

Now the next option is persistent checkout form data so this retains the checkout form field even if the visitor accidentally reloads the checkout page and you’ve probably already experienced this when you want to purchase something on the website and then maybe you made a mistake you refresh the page and all the

Fields are blank so basically with this option it’s going to retain all the information even if the user refreshes the page all information is still going to be there now back up in the pro version we now have a design Tab and here I can change the background color of the order

Summary so for example I could pick this color here let’s reset this and when it comes to the payment options I can change the content background it’s not going to show here because we can’t see it but let me publish not let me refresh and now we can see

The background color we’ve just set but let’s go back and let’s reset this okay next let’s take a look at the options for the my account page and this is exclusive to the pro version so in the customizer you want to go to woocommerce my account

And I’m going to open the my account page and the first option is to enable the modern layouts now if I disable it let me show you this is what you get so it’s the default woocommerce layout now let’s toggle it back on and as you can see it’s way more modern

So the next option is to enable the user gravatar and if you don’t know what gravatar is basically it’s one avatar for everything everywhere gravatar Powers your public profile visible wherever you post common and interact online and it’s free so in other words if the email address you’re using for

Your WordPress account is linked to a gravatar account you will see your thumbnail appearing here the next option is enable grid view now I can’t really show it to you here but if we take a look at the astral documentation which I will link in the description below it tells us that the

Grid view is for your orders and downloads and it’s basically going to provide a grid view that’s more organized and way cleaner next let’s take a look at some miscellaneous options so still in the customizer let’s go to woocommerce and then in the preview I’m going to

Open my shop and let me open this product next I want to click on miscellaneous and now take a look at the number here for the quantity if I enable quantity plus and minus as you can see now we have a clean box with the plus and minus now let’s take a

Look at the pro version so first of all we can change the input field style so for this let’s go to the checkout page and here we got the modern style so let’s go back to default and you can see the difference here we got square

Corners whereas if I go back to Modern it’s a rounded Corner design next we have sale notification so let’s go back to the shop and here we can see we have a sale badge so we can set it to none so now it’s invisible or we can set

It to custom string and here by default it gives us a macro with the value but I could add some text okay let’s remove this next we can change the cell bubble style so by default it’s set to Circle but we can set it to Circle outline Square or Square outline

And if you select square or Square outline and if you enable the custom border radius now you can have rounded Corners if you wish that should be too much voila next in the pro version we also saw that we had the quantity plus and minus but

Now we can change from normal to merge or vertical so let me open one product and pay good attention to the minus n plus box and if I click on merged we now have this modern style or vertical if you prefer so let’s put it back to normal next we

Have an option to enable steps navigation and that allows us to display steps navigation at the top of the card checkout and thank you page so let’s enable this let’s go to the checkout page and now we have our steps navigation here and if we scroll down now we have

An additional option enable step number and there you go now just imagine if you wanted to do this yourself either you need to know how to code or you need to add an additional Plugin or you need to pay a developer but now you can do it yourself

Now let’s scroll back up and let’s go to the design tab and let’s go to our shop so here we can change the product rating color as you can see right here we can change our sales batch text color as well as the background color let’s reset this

Now let’s open one of our posts and here we can change the background color of our quantity colors box we can also change the hover color as well as the text colors so now when we hover over the element our changes are reflected let’s reset this and next we can change

Our steps navigation styling so let’s go back to our checkout page and here we have default but we can change it to small ER and that’s looking good now we can also change our steps phone case so by default it’s as you can see here on screen but we can set it to

Uppercase let’s put it back to default and as always let’s save our work okay back in the free version and this time we want to take a look at product images so still in the customizer go to woocommerce product images and a first option is the main image

Width now if you hover over the question mark it says image size used for the main image on single product pages these images will remain uncropped the next option is our thumbnail width which is what you see right now here on the shop page so right now it’s set to

300 and the ratio is 1 1. so images will be cropped into a square next you can set it to custom and in this case by default the ratio is 4 3 but we could put 69 and a bunch of other ratios basically anything you want

You can do it here now the next option is uncropped images will display using the aspect ratio in which they were uploaded so if you uploaded all images in the same aspect ratio that may be a good option so let’s do this and as you can see it’s much better and

Makes more sense because here we’re selling books so let’s save our work okay next let’s take a look at this store notice option so still in the customizer in woocommerce click on store notice and all you have to do is click on enable store notice and as you can

See the store notice is here at the top and this is particularly interesting either when you’re setting up a demo store so you’re still building the website or maybe you have a sale and you want to draw attention to it so you can change the color to match your branding

You can change the text color also but hear why it was better and then you can decide where you want it so here it said at the top so as we scroll it sits at the top or you could select hang over the top so in this case it says on top of

Everything and here we have our header so now it sits on top of the header whereas if we select the top it’s overlapping the header and next you can select bottom now bear in mind that as we saw earlier on you can also have a add to cart

Sticky Banner that can sit at the top or at the bottom so make sure these don’t overlap so you have the sticky at the card you have the store notice and if you have the pro version of Astra you can also have the sticky header okay so let’s disable this

And let’s save our work okay if you’ve made it up to here congratulations but now you may be wondering well how do I set up woocommerce like the payment the taxes and so on now as you may imagine this is beyond the scope of this video

Which is already very very long but if you need help with this I’ll put a link to a resource in the description below now throughout this video I’ve shown you options for both the free and the pro versions of Astra but now let’s take a look at the additional features that

Come exclusively with the pro version of Astra and that are found outside of the customizer and the first feature we’re going to take a look at is the Mega menu so in WordPress you want to go to appearance menus and let’s say that we want to add a mega menu under blog so

The first step is to open blog and next click on Astron menu settings and enable Mega menu now there are a bunch of options we’ll take a look at this in a moment click on Save changes then let’s close this and next let’s add the pages we want to add under blog

So I’m going to pick a few pages here just for demonstration purposes and I’m just going to place them right under a Blog now let’s save our menu and if you go back to the front end let’s refresh and now as you can see we have our Mega

Menu here but we can tweak it so let’s go back let’s open the blog menu item click on Astra menu settings and now where it says Mega menu with you can change the width to either menu container width full width fully stretch or custom width so let’s try the options menu container width

Save changes let’s refresh and as you can see now it’s much narrower full width and there you go forward stretch silver width but the content is stretched all across and custom width so let’s say we want it to be 200 pixels there you go so let’s put it to full width next we

Can decide whether or not we want an icon so we can either upload our own icon but we’re not going to do that or we can pick an existing icon so let me pick that one let’s save changes let’s go back refresh and as you can see we got our icon here

In the navigation we can put it before or after the menu label we can change the size and the icon spacing with the word that’s before or after it we can also add a menu highlight label so if you want to add a label let me just add Mega save changes let’s refresh

And as you can see we got a mega label let me remove this and next you have the design tab and basically you can completely style the background so we could use a color or we could use a gradient let’s save changes let’s refresh and there you go let’s go back

Or we could decide to add a background image for example from the media library but we’re not going to do this right now next we can change our heading colors text and Link colors we can decide how you want our icon to be viewed whether stacked or framed change is primary color

We can decide to set dividers either solid dotted Dash double or no divider at all we can set tab border with column width row width top border and column divider colors highlight labels margins and padding and if you want to make the mega menu taller you could use this so

For example 200 let’s save let’s go back let’s refresh and as you can see it’s way taller because we are more inner spacing now I’m just scratching the surface here and of course we can make it look way better but let me show you something else so in

WordPress go to Pages add new and we’re going to call this page Mega menu template next click on the plus sign and since we have this Spectra plugin installed we can now add a container so let’s pick this layout next click on the plus sign and we’re

Going to look for a widget called pulse grid which is a Spectra widget and as you can see now we have a post grid from the blog so here we’re quickly going to change some of the options in the right panel so you want just three posts per page

And as we scroll down let’s go to content and let’s disable the date the comments The Meta icon the excerpt next let’s click on read more link and let’s even disable the read more link next click on the plus sign and we want to add a buttons widget so let me grab

This one from Spectra and I’m quickly going to style it so in the right panel go to the style tab click on spacing I’m just going to unlink the margin values and I want to give it some top margin 60 pixels so that there is enough spacing

Next let me click on the second button and I’m just going to remove this button so I have only one left and here I can change the text to all blog posts great and now let’s click on the content tab and here I can paste the link to my blog page

Then click on publish and publish again okay let’s go back to our menu in appearance menus and now I’m going to remove all the pages we previously added under a Blog and let me add the New page we just created Mega menu template click add to menu

And let me place it underneath blog so that it’s like a sub menu now let me click on the little arrow click on Astron menu settings and here once again I have General options so just like for the previous one I could show it as heading I could

Add the menu label disable the link add an icon or upload an icon but here I want to focus on the content source so where it says content Source I’m going to choose template but take a look we could have chosen custom text or widget

But in this case we’re going to use a template and then here I have a second drop down and I can search in Pages posts and reusable blocks but I know the name of my page was Mega menu template so let me start typing and there it is

Now as usual we have a design tab here but for the moment let’s click on Save changes and don’t forget to save the menu and now if we go back let’s refresh and as you can see now we have our newly created Mega menu now of course we still

Have the styles from the previous one so that’s very easy to fix let’s go back let’s open the blog page Astro menu settings design tab we can change the color let’s say black let’s save changes let’s close this now we didn’t change the structure of our menu so we don’t

Have to save but if you want to be sure you can always save then let’s go back and refresh and voila now we have our custom Mega menu and if you’ve put the link to your blog post when you click on blog post there you go so once again only scratching the

Surface here but as you can see it’s a very powerful feature next let’s talk about page headers so in WordPress you want to go to Astra dashboard then you want to scroll down to Astra Pro modules and here you will find page headers now if you forgot how to use it or need

Access to the documentation just click on the documentation link and just go through the page now back in the Astra dashboard if you want to access the page headers just click on settings next click on add new and basically the page headers are a very powerful feature and it’s all going

To be clear in just a moment when I showcase what you can do with it so first of all let’s give you the name page header one then we need to choose a layout so let’s keep the default layout page header Center aligned we can choose to display the breadcrumb

Select the title text color select the breadcrumb text color we have the link color link cover color the size the background and so on so here we’re going to select an image so let me pick this one click on select and then you get some self-explanatory options like for example overlay

Background color so you can add an overlay color just on top of the image next you can decide whether you want to add a parallax effect on desktop and mobile desktop or just mobile so let’s scroll back up and then if we click on the side header

Tab we can decide whether or not we want to merge the page header with the site header and if we do we can select the primary menu but for the moment we’re not going to use this because I just want to show you how the page header

Looks first and then we’ll merge both so next we have the display rules Tab and here it’s very powerful because basically you can decide where you want to show this page header it could be on all singular like all single blog posts could be on all archives it could be on

The 4-4 page which is the error page when one page is not found on your website on the search page blog post and so on you get the ID it’s very very powerful so for the time being let’s put it on the entire website and by the way

You can combine this rule with other rules you could add an exclusion rule say Okay I want it on the entire website but I don’t want it on one specific page so for that I will go to the very bottom specific pages and say okay I don’t want this on the contact page

And you can add as many display rules and exclusion rules as you wish so once again very powerful next you get the user role so you could say I want this for all users just logged in users logged out or by role administrator editor and so on

Okay so let’s publish now let’s go back and let me refresh our website and as you can see now we have our page header with our image here in the background plus the styles that we chose and as I scroll as you can see we have this Parallax effect now you can’t

Really see it because of the overlay so let me go back let me go back to page header and let me deactivate the overlay and next let’s update let’s go back to the front end and Let me refresh okay now it’s easier to see The Parallax effects

Okay now let’s take a look at if we merge it with the side header so all you have to do is Select this option and then you get some more options but for the time being let me click on updates let’s go to the front end let’s refresh

And as you can see now it’s merged with the header so it’s one and the same now it doesn’t really look good because you can’t really read here with the text but we can take care of this so first of all we could change the logo

Because if we go back the logo is dark and let’s say we want another logo a lighter one so let’s select this option let’s select our logo once again we could have a different logo for retina devices but we don’t want that so for the width let’s select 180 now we

Could have just changed the background overlay color but it’s just to show you all the options that we have now let’s change the link text color to White and for the link hover color let’s pick this color here okay you get the ID and of course you

Get many more options but there are self-explanatory so let me go back up and update let’s go back and now let’s refresh and as you can see it’s now way cleaner and more readable of course we can make it look better but you get the idea and

If you remember we had an exclusion rule for the contacts page so let’s go to contact and there you go it’s not active on the contact page but if I go to any other page like about author as you can see even the home page it’s set everywhere

And that’s because here in the display rules I set it to the entire website minus the contact page so as you can see it’s a very powerful feature that allows you to add any amount of headers that you want you could have a different header for any page on the website even

For different blog posts but for the time being I’m going to deactivate this so you can either completely delete the page Header by going back to the page editor dashboard and delete the page header or you can simply click on the status so right now it’s published

If you click on edit and set it to draft for example click on OK update and now if we go back and refresh voila it’s gone and we’re back to normal okay next if you like page headers You’re Gonna Love custom layouts because as the name hints with custom layouts we

Have full creativity with your astral Pro layouts so to access it you can go to Astra dashboard then scroll down to the Astro Pro modules once again you can open the documentation or click on settings to access custom layouts or if you wish you can just go to Astra custom layouts

Next click on add new and here you can decide the type of custom layout that you want to add so you could add a header a footer 4 4 Page hooks or inside post page content now to showcase the possibilities I’m going to choose the Indie post page content so first of all

Let me give you the name so let’s call it my custom layout and for the sake of this tutorial let’s make it simple so click on type to choose a block click on the plus sign and I’m going to select a block called cover so here I can choose an image I’m going

To choose an image from the media library and let me select this one click on select and here I can write a title let’s write hurry up okay and next you want to click on the Astra settings icon and here you can decide to change where

You want to show it but for the time being let’s keep it inside post page content next you have the location settings sub tab but we’ll see that in a moment and we’re going to focus now on the display and user conditions so just like we saw in the page headers

Segment of this video now we can decide where we want to display it so once again let’s decide we want to show it on the entire website and let’s say we want to add an exclusion Rule and not displayed on a specific page so once again I will choose specific Target here

At the bottom and I don’t want to show it on my contact page now just like previously you can add several rules and you can decide to also add several exclusion rules now last but not least you can decide to display for users all offer logged in

For logged out or depending on the user role now once you’re all set click on return to post and next we want to go back to the location settings here we can set the location on the post or the page depending on certain options so it could be after a certain number of

Blocks so for example let’s say after one block we want to display this custom layout so let’s click on update now let’s go back let’s refresh our page and now as we Scroll after the first block which is the main hero block here here is our custom layout so once again

Very powerful feature you can totally control where you want it to show and you can combine several options now let’s go to our about author page let’s scroll down and as you can see after our first block which is all of this because it’s a container here is our custom layout now

Let’s go to contacts and no it’s not there and that’s for a reason because we added that exclusion rule that we wanted that custom layout to show everywhere except on the contact page now to be sure let’s check another page and there you go it’s here after the first block

Now let’s go back and in the layout options let’s say you want to show it in the header let’s click on update and now let’s refresh our page and as you can see it replaced our header let’s go back let’s select footer and let’s refresh

Our header is back but now a footer has been replaced now the 4 4 Page is the default page when someone tries to access a page that does not exist on your website but now the next feature is very powerful hooks so you have to think about hooks like

Total control on where you want to show your custom layout and that happens here in the action drop down now if you look at the name you might be a bit scary but it’s very self-explanatory where do you want to show this layout in the head in

The header so for example if I put the header before click on update now let’s refresh and there you go it comes before a header so it’s like really in plain English so let’s go back and speak header after update let’s refresh and guess what it comes right after our header

Now let me show you one more let’s scroll down and let’s set it to footer before now let’s refresh our page and as you may have guessed it comes right before our footer now if we take a look at the drop down there are so many options options for

Woocommerce options for the footer for the content you name it and it’s in plain English so that makes it a super powerful solution to have total control over your layouts for your website built with Astra next you also have a priority option so let’s say that you have

Several custom layouts what you can tell which one has to appear first so number one would be the top priority number two and so on next we have a spacing option so let’s say we want to add 100 pixels at the bottom let’s update let’s go back and refresh

So as you can see here now we have 100 pixels between the custom layout and the footer because we added 100 pixels at the bottom next we already saw the display and user conditions if you recall it was this screen and then we have our device visibility

So we could decide we only want to show it on the desktop so then we would deactivate tablet and mobile and so on you just decide where you want to show it next we have date and time conditions and that’s very powerful because you can time that event you could say the start

Dates the end date and even set your time zone to be sure that things happen when you want it to happen so the possibilities are endless let’s say that you have a special promotion for Christmas Easter Valentine’s Day or whatever you could really add this custom layout and time

It and then when the promotion is over this custom layout would automatically disappear at the date and time that you’ve set now if you want to delete or disable these custom layouts just go back to WordPress and here you can enable or disable or you can trash it if you know

You’re not going to use it but here let me just disable it because I may want to reuse it later and you don’t need to click on the save button because it’s automatically done and now if we go back and if you refresh it’s gone next let’s talk about another powerful

Astral Pro feature white label so in WordPress you want to go to Astra dashboard and then you want to scroll down and here you find white label so if you click on documentation it says that white label branding is the ability to rename and present a product or a plugin

As your own this helps you hide the actual identity of the theme and plugins use and lets you use your brand name instead so for example if you’re an agency that’s very very powerful or maybe you know the name thing you could be a freelancer or just building

Websites for someone else so in the Astra dashboard scroll down to the Astro Pro modules and where you see white label click on settings so here I can give it an agency author name academic agency URL the agency license link next the theme name let’s call it me Me theme a theme description

We can add a theme screenshot URL and for that I’m just going to open the media library in a new tab click on add new click on select then I’m going to add my image and then all I have to do is click on the image and here you find a button

Where it says copy URL to clipboard so just click this it’s copied then I can go back to my white label settings page and paste the URL here same thing for the theme icon URL and next we have the Astra Pro branding so let’s call it me me Pro plugin description

And we can even brand these starter templates me me starter templates so you want to save all that information and make sure you go back to White Label and enable and as you can see now the white label option has disappeared from the settings but fear not because I’m going to show

You how you can access it but now if you noticed here where it used to say start a template it now says me me starter templates nice now let’s go to appearance themes and as you can see the active theme is now the me Me theme with our custom thumbnail

And if I click on it here we see our description this is the best theme ever we even have the version and we can enable auto updates so of course it’s still Astra but you’ve completely rebranded it to your own branding now as I showed you earlier on

If you go back to what now says me Me theme instead of Astra let’s click on dashboard and if you click on settings where the white label option was it’s not there anymore so let’s go back to the welcome tab and it’s not even there anymore in the

Me me Pro modules but like I said fear not so let’s go to plugins and as you may notice Azure Pro is now me me Pro so now all we have to do is to deactivate Astra Pro and we can reactivate it and if we go back to the settings it

Still says me me Pro but let’s click on settings and now if you scroll down you have access to wide label once again and you can change the information here as you wish and once you enable it then it will go back to hiding the white label

Options and the reason is simple if for some reason you don’t want to show the Astro branding then you don’t want the people using the website to be able to find that information easily but now you know how to find those settings again now what about additional third-party

Tools so once again in WordPress you want to go to Astra dashboard and now if we scroll down as you can see we’ve got additional third-party tools like Easy Digital downloads learn Dash and lifter LMS now you cannot enable these options unless you’ve installed those plugins and as always once enabled

You’ll find link 2D documentation if you need help okay great now you know how to customize your website to match your brand but how do you actually edit the content so earlier on I told you that we’d be using our free plugin called Spectra and the good news is that

Spectra was automatically installed and activated once you imported the ready-made design now the Spectra plugin comes as a response to common problems and limitations of the WordPress core blog editor also known as Gutenberg like the lack of layout options the limitations of mobile responsive options and more Spectra is built on top of

Gutenberg and comes with many customizable blocks that help you craft beautiful websites in no time so basically Spectra’s mission is to help build Ultra fast modern websites easy enough for beginners to use and is doing so by Boost using performance ensuring compatibility with the native WordPress

Blogs and all of that with the very light and intuitive learning curve and best of all Spectra works with all the themes and plugins developed for the WordPress core so if you want to know more about Spectra you find a link to this video in the description below but

Let me quickly show you how to edit your home page so in WordPress you want to go to Pages all pages then you want to hover over the name of the page you want to edit and click on edit now another way to do the exact same

Thing would be to hover over the little house here at the top left corner click on visit sites then you can browse on the website and when you’re on the page you want to edit look at the top in the top toolbar and click on edit page and

You will learn here so these are the two ways you can initiate editing a page so now let me show you how to edit content so let’s scroll down so when it comes to text it’s pretty straightforward just click here select the text you want to

Change and start typing as easy as that next here is an image let me click on it and once it’s selected we have the options here on the right hand side now this is a Spectra widget so it comes with a lot of options but here we just

Want to change the image so click on change image and I’m going to upload a new image click on select and there you go now I could also add a new element so here with my image selected I click on the plus sign and let’s say I want to add a block quote

And here’s my blog quote and once again if I click on the blog quote I have all the options on the right hand side in this panel and usually we have a general tab where we set the general options so for example here for the Tweet button let me select bubble link

Or classic so let’s put it back to Bubble here in the style tab as you may have guessed I can change anything that has to do with the style so for example let me change the border to dotted and it shows right here I can also change the thickness

I can change the color and basically I can style pretty much everything can even change the hover state so now when I hover over the Border as you can see it goes black now once again it’s very well done in most of the options are pretty self-explanatory

And then we have the advanced tab so most of the time you’re not going to worry about this but basically you can decide to hide on desktop tablet and mobile these are called the responsive options we’ve already seen this in the customizer and the rest of the options

Are more advanced as the name says namely the Z index which you probably won’t use but just imagine that every piece of content on a page is like a layer so basically the Z index is going to be which index is the top it’s going

To be the top layer I meant top layer and next we have the advanced tab where we can add HTML anchor and additional CSS classes and we already talked about HTML anchor earlier in this video when we looked in the customizer at the smooth scroll ID option so once you’re

Happy with the changes click on update and never go to the front end let’s refresh our page and now as we scroll down as you can see now we’ve changed the image we’ve changed the text and here at the bottom we added a block quote and when I hover

Over the border the color changes so let’s go back and we’ve already talked about this earlier in this video but just as a reminder you can click on the Astra settings and here you can change many of the options so here we have the content layout and here we have the sidebar so

You could decide on a box layout content box fully stretched or narrow width and in the same way you could add a right sidebar or a left sidebar next you could decide to disable the header and the footer and here in the header rows you could decide to disable the primary header the

Mobile header you could decide to enable or disable the transparent header or enable or disable the sticky header because yes if you remember the sticky header is an Astra Pro exclusive feature next let’s take a look at how to create a new blog post so in WordPress you want

To go to posts add new then you want to give it a title let’s call it my post next click on the plus sign to add a block and there are many blocks you can add but here just going to keep it simple and I’m going to paste some text

Content now you have several options here but I’m going to leave it at default next you want to click on the post tab and here you can change the post format but I’m going to keep it as standard because this is a standard blog post but

If you wanted to add a video a quote or a link you would choose the appropriate content but most of the time you’re going to use standard next if you have several writers on the blog several accounts you’re going to choose the appropriate account here I only have one

Than the categories So currently I only have one category but I could add a new one call it news click on ADD category and now it’s part of the news category and in the same way you could add sub categories so for example very new just select the parent category news

Click on ADD and now you can see the hierarchy here next you could add some tags which is another way to categorize the content let’s add fresh tag and just type enter next very important if you want an image you need to add a featured image so set

Featured image let me click here and let me select this image set featured image next you can decide if you want to show an excerpt or not but we’ve seen we have other options in the customizer with Astra and next for the discussion do you want to allow comments and ping backs and

Trackbacks so next click on publish anywhere let’s take a look at the free version and in this one I showcase the sidebar and as you can see it’s looking beautiful and when I click on the posts looking good okay next if you installed a starter template that did not come with a Blog

How do you set up one and how do you link to your blog in your menu now I’ve already mentioned this earlier in this video but just in case you haven’t seen it here it goes so the way it works is that you’re going to create a page that

Page is going to be empty and you need to tell WordPress this page is going to be the blog page that Astro is going to be using so first of all let’s create our page so for that you want to go to Pages add new

And I’m going to call it new blog now let me publish this page and before I show you how to tell WordPress which page is the blog first we need to edit in our navigation so for that you want to go to appearance menus and here in the left panel we can

See our new Blog Page we just created so I’m going to select this page click on add to menu and I’m going to drag and drop it right after the blog page not within but just after at the same level and then click on Save menu now let me refresh this page

And as you can see now we have blog and new block so let me click on blog and this is actually the page we’re currently viewing with our blog posts and now if I click on new blog which is the page I just created it’s completely empty

And that’s totally normal so let’s go back and now you want to go to settings reading and here where it says post page you want to change this to new blog then click on Save changes now let’s go back and now if I click on the blog page

Which has been our blog page up to here it’s empty but if I click on new blog voila this is our Blog Page archive so this is how you set up your blog page as simple as that congratulations for making it to this point in the video

Because now the Astra theme should have no secrets for you whether you use the free or the pro version you should now be confident to install and set up Astra and install Starter templates demo in just a few clicks you’ve also learned how to use the customizer and many

Options that come with Astra and Astra Pro now Astra will always be free and you can build amazing websites with it but if you want to take your website to the next level with more options to fine-tune your website exactly the way you want consider going pro and if

You’re interested you find a link in the description below and if you appreciate the word behind this video and want more of this type of content make sure you give this video a thumbs up and let us know in the comments which other type of content you’d like to see on this

Channel see you in the next one Thank you
Astra Theme Full Tutorial 2023 Masterclass is here! After this video, the Astra WordPress theme will no longer have any secrets for you! For both the free and pro versions 👉 https://wpastra.com #wpastra #wordpress #brainstormforce Products mentioned in the video: 🟣 Astra: https://wpastra.com 🟣 Starter templates: https ://wpastra.com/updates/starter-templates-2-0/ Tutorials / Documentation 🟣 WooCommerce Variation Swatches: https://www.youtube.com/watch?v=j2UbKnuF7-Y 🟣 Build websites faster with Starter Templates 3.0 – https://www.youtube.com/watch?v=GX9HR26oYZ4 🟣 WooCommerce Up-Sells and Cross-Sells: https://woocommerce.com/document/lated-products-up-sells- and-cross-sells / —————————————— —– ——————- 📽📌 Table of Contents 📌📽 00:00 – Astra Theme Full Tutorial 2023 MASTERCLASS 00:38 – What you learn 01:05 – How to use this video 01:39 – Why choose Astra? 02:41 – FAQ 02:45 – 1 | Difference between Astra and Starter templates? 03:45 – 2 | Can starter templates be installed on an existing website? 04:57 – The example we will use in this video 05:11 – Astra installation from a zip file 05:37 – Astra installation from WordPress 06:09 – How to install Astra Pro 07:10 – How to install a starter template 10:57 – The Astra theme dashboard 15:42 – How to customize your website 16:06 – How to customize your website | PRO Modules 16:19 – Customizer Interface 16:29 – 1 | Reaction options 17:58 – 2 | Release 18:16 – Customizer | WordPress Options 19:15 – 1 | Home page settings 20:00 – 2 | Blog Page Settings 21:34 – 3 | Additional CSS 21:52 – Customizer | Astra Options 21:55 – Global Options 22:09 – 1 | Typography 23:22 – 2| Color palette 25:11 – 3 | Color Palette – PRO 26:00 – 4 | Container 28:08 – 5 | Container – PRO 29:27 – 6 | Buttons 30:21 – 9 | Scroll up 31:23 – 10 | Block Editor 31:48 – 11 | Other | Smooth scrolling to ID 32:33 – How to create an anchor button 34:32 – Header builder 34:39 – 1 | Concepts and transparent header 37:28 – 2 | Default header | General 39:47 – 3 | Default header | General – PRO 42:18 – 4 | Default header | Logo & Site Icon 44:32 – 5 | Default header | Logo – PRO 44:40 – 6 | Widgets | Search 44:58 – 7 | Widgets | Search – PRO 45:52 – 8 | Widgets | Cart 47:02 – 9 | Widgets | Main menu 49:14 – 10 | Widgets | Main Menu – PRO 49:27 – 11 | Transparent header | General 51:35 – 12 | Transparent header | Design 52:35 – 13 | Transparent header, | Design – PRO 52:49 – 14 | Sticky Header – PRO 56:00 – Footer Builder 58:08 – Footer Builder – PRO 58:19 – Breadcrumb 59:02 – Blog 59:06 – 1 | Blog Archive 1:03:04 – 2 | Blog Archive – PRO 1:07:44 – 3 | Individual contribution 1:11:42 – 4 | Single post – PRO 1:14:03 – Page 1:16:45 – Sidebar 1:17:32 – Sidebar – PRO 1:18:12 – WooCommerce 1:18:26 – 1 | General (Containers) 1:18:56 – 2 | Product catalog 1:24:13 – 3 | Product catalog – PRO 1:34:33 – 4 | Single product 1:38:03 – 5 | Single product – PRO 1:44:19 – 6 | Cart 1:45:11 – 7 | Shopping Cart – PRO 1:47:08 – 8 | Checkout 1:48:06 – 9 | Checkout – PRO 1:52:40 – 10 | My Account – PRO 1:53:55 – 11 | Other 1:54:23 – 12 | Other – PRO 1:58:01 – 13 | Product images 1:59:11 – 14 | Store Note 2:00:29 – Setting Up WooCommerce 2:00:52 – Other Exclusive Features of Astra Pro 2:01:00 – 1 | Mega Menu 2:09:10 – 2 | Page headings 2:15:02 – 3 | Custom Layouts 2:22:06 – 4 | White Label 2:26:10 – How to edit the content 2:27:09 – Edit a page 2:31:18 – Create a new blog post 2:33:17 – How to set up your blog 2:35: 30 – Take it to the next level —————————- ———– ———— 🤔 Are you just starting to build a website? Read this ultimate guide: https://wpastra.com/guides-and-tutorials/how-to-create-a-website/ 🤔 How to use Astra Theme (Step by Step) Read this ultimate guide : https://youtu.be/BAN-puzLheM ————————————– – —————————- 📌 About us 📌 At Brainstorm Force we believe that creating a website is not complicated should be. We build high-quality WordPress products and tools that are easy to use, affordable and reliable to help entrepreneurs, professionals and bloggers grow online. Brainstorm Force is the team behind popular WordPress products like: 🟣 Most popular WordPress theme Astra: https://wpastra.com/ 🟣 Starter templates with over 300 pre-built website templates: https://startertemplates.com /🟣 Spectra to support your WordPress block editor: https://wpspectra.com/ 🟣 Ultimate Add-ons for Elementor: https://ultimateelementor.com/ 🟣 Ultimate Add-ons for Beaver Builder: https ://www. Ultimatebeaver.com/ 🟣 Schema Pro to add schema markup to your website: https://wpschema.com/ 🟣 Convert Pro to generate more leads: https://www.convertpro.net/ 🟣 WP Portfolio to design your beautiful portfolio: https://wpportfolio.net/ 🟣 ProjectHuddle to get sticky note-style feedback on your websites and designs: https://projecthuddle.com/
#Astra #Theme #Full #Tutorial #MASTERCLASS


https://i.ytimg.com/vi/vNHS9Fz-_yc/hqdefault.jpg