Hi, guys. My name is Ferdy and in this video I want
to talk about an amazing new free theme. When it comes to free themes, I want to stick
with one and teach you everything I know about it until this day. It was the Astra theme, but now there's a
new one. It's called the Kadence theme -- a free thing
with pro functionalities. Let me show you what we will cover in this
tutorial. This website uses the Kadence theme. What can you do with it? You have a header over here. It is transparent so if I go to the about
page, you can see through it and I have a dark layer over it that shows 30% of that
color. If I scroll down, look at this. We have a sticky header with a different logo
and we can navigate through our website with this theme no matter where you are. Then here, I can click over here and show
what I have in my cart if I use a webshop. I can search in my website like that, and
if I go to the contact page, I decided not to have a transparent background, so you can
change it individually, but that's not all. If I click on customize, I go to the header
and this is what you'll see. What is this? Here we can configure our header. So we have the primary navigation over here,
then there's the cart, and then there's the search button. If I bring this to the left, it is over here. I can bring the menu to the center, like that. Just with dragging and dropping, I can bring
the logo up to the next row, and now it's there. So there is so much possible over here. So if I want to have a second menu I have
a secondary menu or navigation over here, I can drag it over here to the center and
there it is. I decided over here that the background should
be this color. You can even make something like this, and
when you scroll down you can decide what you want to stick. You can do the same with the tablet. So I go to the tablet version and now we see
only this and this. You know what, I can say I want to have a
button here in the center or I can have a search toggle over here, and that's how easy
it is. The same goes with the footer, over here,
widget areas. If I click over here I can have more columns,
if I go to the desktop version, I can configure this completely. There are global colors, that's really handy
because if you want to change the style of your website, you can do that in a few clicks. I go to general > colors and here are the
global colors. There are three pallets. So you can also create a second pallet and
when you do that, you see all those colors in the website... Change. So let me go to palette 1; right now, this
is all white. If I want to make this darker or have a different
color, I can change it over here, then it will be changed on all the place in the website
where I use global colors. So let me bring this back to white. When you see this icon over here it means
you use a global color. So if I change the global colors, this one
to green - this becomes green, and then my second color I change it to orange, and now
when I hover over here it becomes orange. When I hover over here and comes green. You can change all the colors in your website
with a few clicks. If I go to the blog page, you can show it
like this. If you go to the individual blogposts. There are a few different styles you can have
something like this. If I want to make this full width I go over
here to the blog posts > single post layout and I decide not to have a sidebar. So I change it to this option for instance,
and then it looks like that. Maybe, I want to get rid of this area, show
it a different way over here, show it a different way. This is gone and now over here you see all
that information. Scroll down, make it smaller, all these things
are so easy to configure. Then we can go to the shop page and in here
you can decide to show it like this. Or have the sidebar the other way. And then if I want to see what I have over
here in my cart, I click over here and I open it like this. I can view the cart I can configure this page. I can proceed to the checkout and I can have
it look like this. And if I go to an individual product, for
instance, this one. It looks beautiful. I can configure it like this, but if I want
to change it, let me do that. I go back and I go back and I go to the woocommerce
settings, single product layout, maybe I want to have an extra title area and then over
here, I don't want to show hoody anymore. So I scroll down and I uncheck the title. So now you see the title over here. I can go to design. If I want to change this, I click over here. Make it white. You can change the font to something else. Change the style, change the size, letter
spacing. If I don't like it I can bring it all back. Let me make it white. And if I want to change the background, I
can scroll down a bit and over here I can choose a gradient, change the colors like
that or I can show an image if I want to. Configure it over here make it fixed and then
have a background overlay, make it transparent, the sky is the limit with this amazing theme. You can show extra information over here. So if I go to general and I scroll down, I
can show extra options over here. So after the price I can say there's also
free shipping, you can turn it off and then it is gone. I can show extra information over here, how
you can pay. So that's what you can do. But you can do so much more and I will show you that in this tutorial. In the description of the video I have time
stamps, so if you want to go to a certain part of the tutorial you can click on the
time stamp and it will go directly to that part of the tutorial. If you like what you have seen so far or you
like my hair or you like the background, or like yourself please like this video. Feel free to subscribe for more upcoming wordpress
related videos and now I would like to say let's get started. So what we have over here is the Astra theme
and Elementor page builder -- both free tools. This is made with Astra theme. We can configure this, we can change the look
and feel and this is how it looks right now. I have a shop and that gives me the possibility
to have this area over here. When I hover over it, I see what I have in
my cart. I can view the cart and I can go to the checkout. From this point on and below, it's all Elementor
-- the free page builder, and then from this area on and below, it is made with the Astra
theme. So if I go to a different page, this is the
Astra theme and this is the Elementor page builder. So if I change the theme, this stays the same. Of course, we can change the font style and
font size, etc., but besides that, everything stays the same, as long as we keep on using
Elementor. This is made with Astra theme. And if I go to a blog page, this is totally
configured with Astra theme. If you change the theme, this will all change
and you can configure it a different way with a different theme. I like this you can also create a blog post
or blog page with Elementor and then it will look something like this. So if I will change my theme, this will stay
the same because this is made with Elementor. And there's a shop page. The content will be the same with every theme
but the look and feel is different with this theme. So we're going to take a look at Kadence,
how it will look and how we can configure it. Then we have this area over here, view the
cart and this will be displayed. A little bit different with a different theme. Also the check out, they look different with
the Kadence theme. So this is the website. And what I what I want to do now? I want to install the Kadence theme and show
you what is possible. In my opinion the free Kadence theme is much
better than the free Astra theme. Okay what I want to do now, I want to go to
ferdykorp.com/kadence. Hit enter and then you can click here on free
download, and I can say no thanks I just want to download the theme. And there it goes. I go to the website, to the back-end dashboard,
and I go to appearance > themes > add new. Upload a theme and I drag this one over here
and I click on install now. There it goes. I can activate the theme and what will happen,
the look and feel will be changed. So I open the page in a new tab, and this
is how it looks now. So here we see everything that's made with
Elementor and then here below, things are different and here above things are different. And now we can make this look really beautiful. How can we do that? We can click on the customizer over here,
close this and now we are going to configure this and I will show you all the beautiful
things that this theme has to offer. So first I go to general and to layout. We can change the width. So I can say a 1000, you see the website becomes
smaller, but I leave it as it is. I click over here. We can change the content top and bottom. So if I say zero, there will be less space
over here. We're going to fix this and then the narrow
layout, content max width. We can change all these settings over here
and actually I like them the way they are, and we can also change things for different
devices. So if I click on tablets you can change things,
and if I click on mobile you can also change things over there like that. I go back. I skip the sidebar for now. We are going to talk about it later. And then there are colors over here. So right now, when I hover over here, it becomes
blue. If I go to a different page, it's a little
bit darker than this color and we're going to change those colors, and the great thing
is when you change those colors over here, they will automatically be changed in the
whole website. We're going to work with global colors. So I have two colors I want to use. Here's the first one. Paste it over here. And there's a second one. So what you'll see now, when I hover over
an area it becomes this color. So in the whole website all the customization
options where we can change the color, for instance, over here, we can link to one of
those colors and then if we change those colors over here, all those colors in the website
will be changed. So in that way, you can change the look and
feel really easily. If I click on palette 2 and I make everything
light that is dark... And the other way around, you see those colors
change. So this is light, I make it dark. You see now everything changes. If I go to palette 1, change this back. So you can have a few pallets. You can make a dark website by changing all
those colors. You can make a light website. And now the site and background, it is linked
to this color. So if I would go to palette 2, it says that
the site background is dark. So where can you see that? Over here for instance you see a little bit
of the background of the website and it is dark. So if I would change this to something else,
you'll see it over here. So if I use one of those colors and I choose
a different palette, a light one or a dark one, you can see the difference at once. In that way you can change the look and feel
really easily. So I like the way the colors are over here
and then the side backgrounds as a global color which is the white one. So again if I change the white color over
here to red, it will also change over here. So that can save you a lot of time if you
do want to decide to change the colors for your website. You don't have to change it on a dozens of
places in the website, you just change it over here. So the content backgrounds, I leave it as
is. The title above the content background. If I click on publish and I close it then
I go to the home page, I click on customize again. I go to general colors and then over here
the title above content background, that is this area. So if I change the color over here, it becomes
this color. What I also can do, I can go to gradients
and I can create a gradient... Like that. Or an image. So I can select an image, this one for instance
and then I can focus on a certain area, I can say repeat: no-repeat, contain cover:
automatic, fixed, so if I scroll, the image stays in text and if I say cover a scroll,
it looks like that. I remove it and I go for a gradient and again
I want to use those colors. So I copy this one for the first one, and
then the second one over here, and then still I
can make it look transparent. So I can click on the color I can make it
transparent over here. I leave it as it is and actually I don't like
this color anymore. I want to make it white, we can do that somewhere
else. Over here there's the title above content
overlay. If you decide to go with an image, you can
have an overlay over here. So you can say I want to have a dark overlay,
it is less transparent and then that way you can show an image over here and have an overlay. You can also have a gradient as an overlay. So here I can make it more transparent. Also here, if I change the color to green,
you'd see better and then you can change the angle and change the type. You can also clear it, so that is what you
can do. Again, I don't want to use an image, I just
want to show you what is possible. I like it the way it is. Content links -- the links color. By default a link color on my website is this
color which is a global color so it links to this color, and then when I hover over
it, it goes to the second color. So I can say I want the hover color to be
this one, and I choose this one. Links style -- you can highlight it and underline
it. So let's go to the blog page and then I scroll
down and I go to this area and do I have a link? I have a link over here. So right now, you see it's on the line, so
I can say highlight on the line -- standard like that, background on hover. Wow! I like that one. Offset background -- I really don't like that
one. So let's say background on hover. You still can see it is a link. You can link to a different color, or you
can just choose a random color. So you see the world icon is gone now, why? Because I have not chosen one of the global
colors. I will bring them back. I like to maintain the style. So that's what you can do. This is a small bug I guess, or I need to
click here again; it's not a bug, it was my fault. Okay I go to the about page and that's it
about colors. Let's go to buttons; you can change the colors
of the buttons. So first I want to create a button. So what I want to do? I want to go back. I want to go back again. I want to go to the header, and then over
here. It looks a little bit overwhelming maybe but
this is beautiful. First I want to drag a button over here. It will appear over here. Now I go back. Forget i've show, you this; I will show you
this later. I go to general > buttons and now the colors
of the buttons. Right now, it says that initial color of the
button of the text is white. Even when I hover over it, when I hover over
the hover color, it will show the hover of the hover. When you hover over it, you know what I mean... So initial color -- hover color, both are
white. If I would say this one should be purple,
and I have a problem because if I hover over here, the background is also purple over here. So this is color, the text color, I leave
it at white, and then the background colors, by default they are this color. When I hover over it, they become the purple
color. So that's it with buttons. You can also add a border, change the amount
of pixels, change the radius and then over here the font of the button is inherit. I can also change it to something else. So I can say over here, it should be a Arial
black and then you see changes over here. And if I don't like it, I can bring it back. Are you guys happy? Are you liking this? I hope you do. I like it a lot. I publish it and I wait a minute, I want to
bring this back to inherit, inherit... That's what you can do. Okay. Let's go back to the typography in the website. The base font; so this area or the blog text,
this.. How should it look? Let's use this one. System default. If I would like to say open sans -- nothing
happens because it is open sans but I can also say I want to have an Arial and then
it will change everywhere. But again I like open sans. If you want to find a font, search for fonts.google.com. Say "Ferdy is awesome." it contains all the letters you need to see
which font is awesome. Then you can find something. You can also filter it on certain aspects
-- Arabic etc. So if you find something you like. El Messiri -- you can search it over here,
and that's how you can do that. I can bring it back. You can also do the same for all the headings;
you can change the size, by the way, of the text. You can bring it back. Over here, you see how it will look also. So you make it smaller, you see the result
over there. How great is that? You don't even have to see this; you can just
do it over here. If I want to make everything thicker or the
size, you can also make it capitals, so everything is in capitals. This is really handy to do for your website. It's the best thing you can do -- no it's
not. I can do that for headers for instance. So here's headings. The heading font family -- if you have a heading,
this is a heading, should the font be different? I like to use a 'Raleway' for headings. Then the h1, that's the title of the website. Probably this area should have a different
color. Okay this one is a heading; this is h1. It should have a different color. You can choose it over here. H2 -- it is probably this over here or h3. You can change all the colors of the headings
really easily you can do this for every title and then there's the h1 title, you can also
choose a color and the breadcrumbs, you can give it a title that is for this area over
here. We don't see that yet so what we can do? I can go back. I can go back and I can go to the page layout,
and here at the page title I want to show this, this area. I scroll down and I want to show the breadcrumb
and the metadata. Over here, you don't see it because we're
at the homepage. I go back to typography, then I scroll down
and then h1 title, I can say it should be white and the breadcrumbs should also be white. Then the meta, we can change that somewhere
else. If I would go to the blog page, you see also
here it looks white. Okay let's go back. Scroll to top. If I scroll down, do I want to have an area
over here that can help me to go back to the top? If so click over here and it looks like that. I can change the icon size, I can change the
icon. I can align it at the left or at the right. I can have the offset like that. Oh I like it ... Ferdy. Visibility -- where it should be shown on
a desktop and on a tablet, not on a smartphone. Then there's the design area -- this is a
lot. When you have general settings, they are also
design settings. So here I can say I want it to be outline
or filled; filled gets more attention I guess, and I can change the colors again to this
one. Or let's say white and then the background,
normal, and if I hover over it, then you have a border, radius, scroll button, padding. Go back and then there are social links; just
fill in all your social networks you want to show on your... Social networks you want showing your website
facebook.com/ferdykorpershoek. Instagram. Youtube. If you have a Facebook group, you can add
it over here. Look at this, everything over here you can
add it. I like it. I click on publish and we can use this later
on different places in our website. Then there's the performance enable CSS preload,
I just leave it as it is, and then I go back and we have discussed the general settings. We'll talk about the sidebar later. Then we go to the header. I love this about the Kadence theme -- look
at this. Right now, this is how our header looks, but
we can do so much things over here. You see three areas over here -- the top row,
the main row and the bottom row. So right now, we only see the main row because
these two areas are empty. If I will drag this over here, I would have
two rows -- one over here and one over here. So I bring this back and for every area over
here, we can edit it. We can click over here or we can click over
here and then we go to the settings. So I want to add a logo. Select the logo. I have it in my website already and I use
this one. It is retina. I do not crop it because i've done so already. Then we can change the max width; you can
make it bigger and you can make it smaller. I would like to say 150 pixels. Then for a different tablet, I can make it
bigger, smaller and for smartphone I can do the same. Then over here, do I want to have logo for
mobile? I can say yes. I can select an image and I grab the blue
logo -- just because I have one. So if I go to a normal screen, I have this
logo and if I go to a tablet or a smartphone I have a different logo. What else? You see the text of the website after the
logo, I don't want that. Logo layout -- I only want to show the logo. You can also show everything and then change
how it is displayed, but I like to keep it simple. Like that. Then the site title, actually I should show
here what I can offer to my people, to my viewers. So I say Photography | Film | Webdesign and
then the tagline, you can decide what you want to show. Then the site icon, I have one already. You see it over here, so when people have
a lot of tabs opened, they can go to your website by seeing the icon. It needs to be square and the best thing is
when it is a PNG file. Okay. Then there's the primary navigation. I can select the menu over here. So I click over there and I can also say I
want have the product categories and then I see different menu. So I select my menu and there is a secondary
menu and I can say I want to select the product category, so people can see a few categories. Then there's a footer menu and I would like
to have the main menu over there. I go back and I go back, and I need to go
to the header. So let me show you a few things. Right now, at the left, we have the logo. I can also say I want the logo to be at the
right, or in the center. I can track it to the right. I can bring this to the left; there's so much
possible over here. What I like to do? I like to drag this to the left. You can also drag the primary navigation to
the center, like that. Then over here I can have more items, so I
drag the secondary menu over here for instance. Look at that -- those are the product categories,
my second menu. What I can do? In every item I can change the settings, but
I can also change the settings of the rows. So here's the main row. I'll leave it as it is. Then there's the bottom row. I can click over here, then I can change it
to full width or contained. Well, you see nothing. You can change the height; make it really
high, or bring it back. Then there's design again. I click over there and I can say I want to
have a background color, or a gradient, or an image. So if I would say, this color, let's say this
one, it looks like that. But then I don't see the text that well anymore. So what I can do now, I can go to the secondary
navigation, click over here and then here at navigation colors, I can make them white. Wow! Then the navigation background -- that is
only for this area. Let me show you. Like that. So it gives you so much freedom to do whatever
you want to do. When I hover over it, I don't see it anymore,
so what I can do now, the hover color should be the darker color or the lighter color,
and this one, active color, let's make it this one. So now, it looks like that. Then there's the top area, so I can go back,
general and I can have social.. Over here. Or at the right. I can have a cart, since I have a webshop,
I can change it. Order. Over here, I would like to make it a little
bit bigger. So I increase this arrow up, let's see; something
like that. Okay. I can add HTML or search and also drag it
to the center or to the right and here at the left I want to have HTML. I click on it and I say, "Give us a call." It's bold. I don't want it to be bold, so I go to design
> font > select the style > the font; style I want it to be, and regular. Link colors -- if there is a link I can change
the color and change the margin, I can go back to general and I can go back over here. First, I want to bring this back to the right. I've shown you what is possible; now I want
to show you how I would like to do it. I don't need a button. I do not want to show my social icons. I do want to show my cart, and I do want to
show a search icon. And I want to close this, and when there's
nothing over here in this row, it will disappear. Same goes for the navigation, I will leave
now to show you a few more things that are possible. Then what we can do now? We can have a transparent header, which is
amazing. If I click over here, let me go to the about
page then you can see it better. Right now, we have a white background over
here and a color background over here. I can enable the transparent header and then
it will look like that. But now, you don't see the menu that well. Well i've never seen a free theme where all
this stuff is possible, so let me show you what we can do now. We can enable it over here; we've done that. We can disable it on certain pages. We can disable it on all the pages or on the
posts, I will disable it for the posts and I can disable it on the product pages. I enable it for the normal screen and for
the tablet, and I want to have a different logo for the transparent header. So I turn that on and now I want to have a
white logo over here, the same logo. So I go to select image, over here. I choose the image. It is the same aspect ratio or the same resolution
as this one and now it's white. When I scroll down, nothing happens. But when I go to the blog page, it's a normal
logo again, because I said it should not be visible on the archive pages, and this is
an archive page. So I go back to the about page, so we can
configure this further and then I scroll down, logo max width -- it's okay. I go to the design of the transparent header
and then there's a site title color. Then there are the navigation colors, use
this one. When I hover it becomes this one, when it's
active it can become this one. So you see, about is active right now. I don't see that well, so maybe you can do
something like that or just white. Now the submenu, how does it look? Okay. Let's talk about it later. What I see over here is that this is dark,
how can I fix that? I scroll down, cart colors, white. And what I also can do here at the design
settings is the transparent header background. I can click over here, I can make it black
and then I can say I want to make it transparent. So it becomes a little bit darker, but you
still see it. Then there can be a bottom border which I
like, this one of two pixels and I want it to be white, like that. Okay. Publish. Close it and this is the home page. It's a bit darker as you see when I scroll
down, nothing happens. When I go to the about page, it looks like
this. When I go to the blog page, it is gone. So what I do not like is how this looks. This over here, it looks a little bit weird. I use it right now because I want to illustrate
something and after that, I will remove it. So what I want to do? Now I want to talk about the sticky header
and this is one of the few themes that has a free sticky header. I click on customize. I go to the header and this time not to transparent
header but to sticky header. Do I want to enable it -- yes. Only the main row; this is really interesting. So if I say only the main row, this will not
stick. So if I scroll down, it looks like that. Don't worry about this; we're going to fix
it. Let's fix it right now. I go to the design; how should a sticky header
look? Well the site color is okay; the navigation
colors -- maybe.. Yeah.. Maybe this one. When I hover over it, it becomes this color. So on the sticky header, it looks like that
and when I'm here it looks like that. Okay. So far so good. I don't see the logo, but you can change the
logo on a sticky header. So I go back to general > different logo for
stuck header -- yes and I choose the normal logo again, which is this one. Choose it. So when I'm on top, it looks like that. When I scroll down, it looks like that and
you see this one stays behind. Okay. I think this is too dark. Okay. Then I go to design and then I choose this
one. A little bit lighter. You can also change the other colors over
here. Sticky header background; you can change the
backgrounds, you can also say I want it to be... Still be dark, but less transparent. Then I should say white, more transparent
by the way. I don't like it. So, I bringing back to the white background. I can have button border, cart colors, I can
change it. I go back to the general settings and I can
say enable main row shrinking and I can say 40 pixels. So what happens, over here, it's like this
and when I scroll down, it becomes a little bit smaller. Perfect! So I don't need this anymore, so I close this. Now it looks like this. So if I go to the about page, it shows a little
bit of the background and I scroll down and then it looks like that. I think this is amazing. What I want to do know? I want to make this capitals how can I do
that? I click on customize. I go to the header. Over here, design > font navigation font,
over here. Go to style, make it regular, then size, make
it uppercase and a little bit bigger. Okay. Publish. So that's what you can do over here. You can make it sticky; you can change the
logo when it is transparent backgrounds, or transparent header -- all those things are
for free. I have no idea why they do it, but I'm really
happy that they do it. I go to the homepage; so let's continue. Click on customize. So I want to take a look over here at the
page layout. We'll take a look later at the footer. Page layout; show the page title -- well,
I prefer not to do that. But maybe you prefer something else and I
want to show what you can do. Right now, you see it above the content, so
you can also say in the content and you'll see it over here. Home > Ferdy Korpershoek. We can align it in the center, at the right,
you can change it for all devices. Let's say put it in center. You can show the title, and bread crumb or
hide it; hide the meta data. Also here you have more options. So if I turn it on, you can also change this
to horizontal line. Like that. Show the author -- if your website has a different
language you can change the word by to, in my case, a Dutch word. You can show the date; posted on November
6, 2019. You can show the last updated version and
you can show if there are comments. Well, normally, there are no comments on pages
so it's up to you what you want to do with this. Then there's the page layout. If I turn this off, you see there's a weird
gap over here. If you want to get rid of that, we can scroll
down and click on disable. I'll talk about it later. I will put it back to show you what is possible
over here with all these settings. I go to the contact page and then I want to
take a look at the page layout. Right now, it's the normal one; it looks like
this. We can choose for a narrow page layout and
then everything that's not full width will be narrowed down. It's full width and everything will be stretched
and then there is the left sidebar. Now there is a sidebar at the left. It interferes with the full width area. There's the right sidebar and if you use a
sidebar, you can choose which one you want to use. I have two sidebars and that is this one. I choose the first one, but I rather choose
normal, and then per page you can change it individually. I will talk about it later. And what I want to do? I want to get rid of this area, so I scroll
down and I click on disable. So right now you can see through it. And then also here I can say I don't want
to have that, so what I can do, I can publish it, close this, go to the contact page, edit
the page and then over here, there are a few extra settings of the Kadence theme, transparent
header, disable update, preview -- so that's how it works. So over here, we have a transparent header
by default and over here, I said I do not want to have that. So if I click on customize again and I go
to the page layout, I scroll down. I can have a boxed content style so right
now, it's unboxed. If I say boxed, there's a box around this
area. What will happen now, if you have a transparent
background, for instance, on the homepage... It will look weird. So if you use a transparent background or
a transparent header, you need to use unboxed, and then it works perfectly. So also on different pages and here at the
contact page. Beautiful! So I rather use unboxed and then there's the
featured image and show comments. I do not want to show that on a page. So it looks really beautiful now. If I go to it the about page for instance,
it works. Perfect! Awesome! I publish it. I go back. Perfect! So now I want to scroll down and take a look
at this area -- footer. Do I want I have a footer background? Yes. That is this at the design tab, so over here,
I can say make it dark. Now it's dark. So I go to general and there's a copyright
area over here. And if I design, I want to make the text white
first. So I go to the font, there it is. I can have a change in the link colors, but
I like it the way it is. I can have a different margin. Let me go to general and show you more. Over here, you see the same thing as with
the header. We have a lot of areas in the footer. Right now, over here, we have the copyright
area and what I can do, over here, I can change the settings of the row. So I can have more columns. So right now, this is at the left and at the
right, I go back. I want to have social. Like that. I click over here, and I want to align it
at the right and in the center. Let me see, this one. Perfect! I can also make it bigger or change the spacing. I can show the icon label. And of course, you can add social over here. So I can say youtube... Where are you... And click over here. Change the icon and at design, we can change
it to outline. Well then you should change the colors because
right now you don't see it. I like it filled. When you hover over it you nice color. Okay. I go back; I go back. Footer > General. What else? I want to have a few widget areas. I have this widget area already from what
i've made already before. So if I say widget area one, drag it over
here, widget area two drag it over here. I want to have four widget areas, so I click
over here and I change it to four, and it is so easy to do. I also can have a different way to display
this, like a big area of three, smaller areas I want to have four even areas. Okay; two; widget area three and widget area
four. And then of course, I can change the colors
everywhere because right now, it doesn't look that appealing. So let me see. I click on the middle row. I go to design > budget titles should be white
-- that's better and I like them to be capital, in capital, so I click over here -- capitals. Make them a bit smaller. Go to style. Regular. Perfect! I can change the line. I'd make them a bit bigger. Widget contents, also white since we have
a dark background. Link colors - I like them to be white. When I hover over it, this color or the purple
one -- no, that's better. Links style -- no underline or underline. There should be no underline so I don't know
what's happening over here. Middle row backgrounds, this is the middle
row background so I can change every background. I prefer that, so, over here, I can change
it. I can use a lighter one. I like it and I can change of course, the
colors in our style. So I can also say you know what, no global
colors but this color -- only a little bit dark. So I go over here, go down a bit or then I
prefer the purple one, go down, make it darker like that. So it maintains the style of the website and
actually I'm happy with this. Then I click over here. I go to general > copyright year okay, and
then the title of my website, and I don't want to have to theme credit, and I'm happy
with that. If we want to, we can also add something over
here. So there are a few things left that we can
choose, but I'm okay. Let me go to the footer one more time and
here at the bottom row, I want to go to design, purple and even darker; not too dark. Yes. I'm happy with this. Publish; close it. Let's take a look what we have. If I go to the about page, this area, when
I scroll down, I see my normal logo. It shrinks. I love the menu, sub menu. Scroll down. I like this and this. What I do not like is that I do not see this
icon over here. So let me see if I can fix this. Customize; I go to the header, to the sticky
header, to design. Scroll down. I want to see this over here. How can I do that? Scroll down all the way, cart colors, dark
-- there it is. Don't you love this? I think this is amazing. Go to general > go back > go back, and you
know what, I want to make it a little bit bigger. I want to make it a little bit higher. So let's say: 50. Okay. Go back; go back. So we covered all this stuff. Okay let's go to blog posts, there's a single
post layout, so if I go to the blog page and then I go to a blog post, we can click over
here. Right now, it looks like this. I think this looks beautiful. This a blog post with comments, previous posts,
leave a reply and the footer. So how can we configure this? We can show the post title or turn it off,
and then that area is gone. I want to show that and there are different
ways to show this. Like this, or like this. Here above, then we can change the container
width -- full width or contained and contained means it's from the left over here to the
right. So this is the width of the website. I like it to be standard. Post title > align. You can do that to the left or at the right
or in the middle. Container: I can make it bigger and I can
change it per device. I like the 200. What do we want to show? The breadcrumb, where are we in the website? If there's an arrow down, you can change the
settings over here. Then there is the page layout, i'll talk about
it later. I want to go to design, and then... Because over here, I want to change the colors,
post title font -- you can change it over here. I can say I want it to be in capitals. The category colors --- I like those. Bread crumb -- over here I like the 2, I can
make it bigger if I want to. Then the meta colors. If I make them white, I can see them better. When I hover over it, I can make them this
color. This point, I want to change that. Let's see. I go to again. Over here at meta, change it to this. Okay. That's it. Let's leave it at this moment, and then I
go down, and general. We can change the post layout, so right now,
it look like this. I can change it to something like this. It's wider -- full width. You see a complete image and below blog post
starts, or with a sidebar. Now you have the sidebar over here, we can
choose one. This is for blog posts and this is for the
store. I choose blog posts -- sidebar one, and if
you use one, I prefer to have it at the right. So if I leave it, I can also change the content
style to this -- boxed or unboxed. I prefer boxed. I like it. Enable vertical padding -- you see this area,
if I disable it, it all stick to each other. Maybe it sticks a little bit too much. Show featured image - yes. If I turn it off, it is gone. I turn it on. Then you can say where above, above the blog
posts, behind or below. Featured image width -- Stretch to full, or
wide. Aspect ratio - 9x16. Show the post tags here below. Few tags. If you click on that you see every blog post
with the tag. Self-improvement -- show the author, box. If I turn this on, it looks like that. I want to bring it to the center. What I can do now, I can publish it. I can close it. I can go to the backend, to settings... Over here also to edit my profile. I can say I love my wife. You can have a text about yourself. Update. Now when I go to a certain blog post, I have
a text about myself. So here you can say I'm a content writer blah
blah blah. You can post it over here. So I click on customize again, I go to the
blog posts, single pose layout, scroll down -- show the post author box, show the author
archive link. So if you click over here, you go to all my
blog posts. Show the previous and next blog posts -- over
here related blog posts if you want to; show the comments; show the comment date. So if I turn the date on, date is gone. All those options in the free version -- I
really like it. At design you can give everything -- color. Okay. Let's go to the archive page. I need to go to the blog page for that. So do we want to show the archive title which
is this one, and if so in the content or above the content. Then we can make it contained. Bring it to the right or to the center, change
the size, what do I want to show. Archive layouts -- normal or narrow. So they will be closer to each other -- full
width. So even if I make the website smaller, I still
will see the full width. With a left sidebar or with a right sidebar. And if I do a right sidebar, I prefer to show
two columns. Right now, there are boxes over here. So if I go to design, I scroll down, and I
go to the content background, I can make it a little bit more gray. If I go to side background, let me do it like
this. This will be gray and then this will be white. In that way, you can see it better. General, and you also can say unboxed like
that. So it's what you prefer. I think this is fine. Two columns and a sidebar. What do I want to show -- the featured image
over here and then I can say 16x9... 9x16 and then it will change over here. Medium/large -- let's show a large image,
so the quality will be bigger, better. I want to show the categories, here I can
also change it to Pill. Wow! I like it. I hope you like it too. The title -- yes, meta information by Ferdy
Korpershoek on which date and then there's an excerpt and the read more. I don't want to have to read more, I just
want people to click over here or over here, then they go to the blog post. So let's take a look at design again. Title color over here, first I go to general
and I want to hide this, and I want it. If I go to the blog page, people know there
are blog posts over here. So design, title color is not necessary anymore,
so let's go to the archive layout. Category colors, fonts and we can change all
those colors. I go back and I go back, and I want to go
to the menus. We've talked about it already; you can change
the menus over here -- we don't need that. Then there are widgets we talked about a little
bit, there's a sidebar one and you can add widgets over here. That is not only with the Kadence theme, it's
just a normal thing within wordpress. If you want to know more about it, you can
watch my wordpress tutorials. Home page settings -- it's also fine and then
there's woocommerce. Hmm... That's interesting. Some settings are with all themes and some
are specific to the Kadence theme. So I go to the shop page, we see shop over
here. Do we want to have a store now, well, this
is something you see about everything but with the Kadence theme, you have more options
showed at the bottom... And over the top. Then at design you can even show more different
things, you can change the look and feel of it. So that is just something extra with this
theme. I turn it off, but that's what you can do. Then product catalog. Do I want to show the archive title, and if
so how do I want to archive background to be? Well, of course, a gradient because I like
that. And then you can change it to something like
this. I think this is beautiful. Of course, I want to change it to the colors
of my website. So what I can do, change those colors..... Then it's in the style of the website. So the shop, perfect! I go to general, and I like it the way it
is. I want to show nothing more. Then the archive, how do you want to display
this? I want to have a sidebar. So I bring sidebar to the right -- okay. Then I want to have a sidebar too because
that is a shop related, filter by price. I want it to be... First I want to scroll down, let me see. Products per row: 3, like that. When you hover over it, it looks like that. I want to go to design, scroll down, content
background. That is this one, okay. Site background. Change it a little bit; not too much. Make it, you know what? Make it a little bit darker like that. Okay. Go back to general, I like the hover. So I leave it is as it is. Sidebar 2, you can also make it like this. Oh! I also like that. I'll leave it at this. Show the archive result count? Showing all results. I can put it away. I can remove this, default sorting and I can
remove this. Normally, you need to use codes for that and
here you can just save it. I remove it all, action button style. Right now, there's a slide up, then you can
add it to the cart or you can show it always, like that. I like the slide. Shop page display. I want to show the products, also the category,
I want to show the products. The ordering -- I can order it by default,
or on the price or other things. Products per row: 3. Products per page, rows per page, so how many
rows maximum. I can say 5. So you see 15 items per page, and if you have
more see second page where you can click on them and stuff. Okay. Go back. Go to the single product layout. So I click on the product, let me see, let
me do the hoodie. Look how beautiful it looks already. You can go to the images. Above the content layout, extra title area
-- no. Bread crumb or nothing. I like to have the bread crumb. Product layout; I can change it to make it
smaller. Make it full width. You can have a sidebar, I want to focus on
this product so I want to say small area like this. Beautiful! If there's a sidebar which one? Then the contents style, the content sounds
interesting when your background is different. So I go to design > site background, make
it a little bit like that; yes this is what I like. Wow! All that for free. Okay. Disable padding so it will all be closer to
each other. Also here, if I turn it on, I like this space. Then what do I want to show, category, hoodies
and the title "Hoodie," the rating if there is a rating, the price. And this is something really interesting. Look at this - show shipping statement? And free shipping. So you can say, if you buy this, it is $29.95
and free shipping, so that's really interesting. There's an excerpt, this area, this text. Add to the cart, do I want to have that -- yes
and I can make that bigger. Extras -- this is also really interesting. If I turn is on, free shipping over $50, then
I should remove this one, but satisfaction guarantee, no hassle refunds, secure payment. So that can help people to buy this and then
there's even more -- payments. Look at this. You can have this and then you can change
it to Gray. You can show what you want to, what you offer
--- Visa, mastercard and paypal. Then there's product meta information and
you can let people share this. Okay, show the weight and height dimensions
in an additional tab. So we can have additional information -- there
you show that information. Show related products, these. Related products column -- you can change
the width of it, the amount of columns I mean. Then there's design, we can change all the
colors. I go back. Then there is the product image and these
are all main settings. You can change them over here. This has nothing to do with Kadence, it's
just normal. These are also for default, so I click on
publish. Then I want to change this back. So I click on customize and I go to the blog
posts > single post layout. I can also go to design, then to the post
title background, do the same thing again. So it is more in the style of our website,
and then you go back. If I go to this area, it looks weird. I need to edit the page. I click over here -- page settings; transparent
header: disable, page title: enable, page layout: normal, content style: box, content
vertical padding: yes. And I do not want to show the featured image. I click on update. Look how much better this is. Then I click on proceed to the checkout, and
that also looks weird. So how can we fix that? Edit, click over here, disable transparent
header, page title enable, normal view boxed enable and enable. Featured image, sorry, disable. Update, preview. Okay. Awesome! I go to the home page. If because of all the settings, your website
looks like this, you can fix that if you use Elementor. Edit with Elementor or a different page builder. You should go and take a look at the padding
of the section, so that's what I want to do. I click over here. I use Elementor, then I go to advanced padding,
I uncheck this and then at the top, I increase the area. Then I click on update, preview the changes. Oh! Then I need to fix this. Okay, but you get the point how you can fix
this. And if I scroll down, it looks like that. There's something we can do over here. I need to go to the customizer. I need to go to the header as I told you before. You can click over here and change a lot of
things. So I click over here and now I can say that
there should be a pop-up cart, and it can be from the right or to the left. Design and change that. So if I click here now, this pops up. That's what I like. So what have we done? We created this over here. We can have a transparent header. If I scroll down it looks like this. We can have a different logo, different colors. We can customize all those colors. Here, we can have the footer area, configure
it. We can click and go up. We can go to different pages some with a transparent
header. Some without. Just a normal one. We talked about the blog page -- how we configure
this. It's looks beautiful, and the shop page and
all those other pages check out. If I click over here now it looked like that,
and we can view the cars or go to the checkout page. Well there is more, right now i've shown you
some things you can do with woocommerce. Woocommerce is not installed with wordpress
by default, but there are different plugins with extra settings. The great thing is that when you use lifer
LMS or a different plugin, there are a few plugins that are supported by Kadence and
in that way you can have extra customized options when you install one of those plugins. Lifter LMS, Tutor LMS and probably more will
come. If you want to know what's going on, you can
go to ferdykorp.com/kadence and there you'll see what is going on as you see over here. What will be included in a premium theme extension,
well there will be more options. Well, I think this is the best free theme. I want to thank you for watching this tutorial. I hope you learned a ton of stuff and you're
now able to start working with the free Kadence theme. Have a great day and you will see me in the
next video if you subscribe. So please subscribe for more upcoming wordpress
related videos. Have a great day and you'll see me. Bye bye!
