Up next in 10
How to Create a Custom Homepage in WordPress _ ( Kadence Theme Tutorial )
2K views
Jan 27, 2024
In this instructional video, "How to Create a Custom Homepage in WordPress (Kadence Theme Tutorial)," viewers will receive a step-by-step guide on personalizing their WordPress website's homepage using the Kadence theme. The tutorial focuses on leveraging the features and customization options provided by the Kadence theme to design a unique and engaging homepage. Viewers will learn how to navigate the theme settings, customize layout structures, and utilize various design elements to craft a homepage that aligns with their specific needs and preferences. Whether you're a WordPress user seeking to enhance your website's visual appeal or someone new to the Kadence theme, this tutorial offers practical insights to create a customized and professional-looking homepage in WordPress.
View Video Transcript
0:00
Hello everyone, welcome to Q2 Blogging and in this video I will show you how you can create
0:04
a home page like this in your WordPress website. So I have built this home page using this Cadence theme and the Cadence Block plugin
0:13
So let's check how you can build that. So for this you have to go to the dashboard and here click on Plugin section
0:23
And here make sure to install the Cadence Blog plugin. So let me just show you, this is the Cadence Block plugin
0:29
And here you will see different options like you can unlock row layout, form, advance gallery
0:37
icons, advanced headings. So for this, you need to install the Cadence Block plugin and you can install the Cadence Theme also
0:46
So let's go to the pages section and let me just create a new page
0:53
And let me just set the title like HomePage 2. Now let's build this home page
1:00
So for this you have to set some settings like you can set the page layout to default
1:07
And let me just disable the page title so that it will not show home page 2 in the front end
1:15
And you can also enable transparent header if you want and let me just disable the content
1:20
vertical padding and you can disable the feature image. Now let's build this first section
1:28
So before that let me just preview this page and this is a blank page
1:36
So for this let me just add a row layout. So you can just search for this row layout or you can just simply type slash and type
1:48
row layout. So just add the row layout and here as you can see there is a single row layout
1:56
So let me just select a single row layout. Now you have to add advanced heading
2:03
So let me just copy this. And here click on plus icon and search for advanced heading
2:15
Now let me just paste this text and let me just make it to center align
2:22
And here click on Show More Setting. Now here you can adjust the font size
2:28
So let me just adjust this size for a desktop device. Now let's select the row layout or you can just click on this icon and just select the
2:42
row layout. Now here click on background setting and let me just add a background color like this
2:49
So that you can view the container easily. So let's close this
2:55
And let's add a padding at the top and the bottom. So for this you have to click on the padding and a margin section
3:04
So let me just add a top padding of 100 and a bottom padding of 100
3:13
Now let's preview this. And as you can see, it is looking quite odd
3:20
So for this, just go to the editor and select this option
3:25
Let's click on full width. Now click on the row layout and here make it to full width
3:35
And now select this icon and click on the huge theme content inner width
3:42
Now let's save this and let's preview this. Okay, now it is looking quite good but there is a spacing at the top
3:52
So you can fix this by adding a negative margin. So just click on the row layout and click on setting
3:59
Now click on padding and margin and let's add a negative margin of 20
4:06
Now let's preview this again. Now it is looking quite good. So let me just add a negative margin of 25
4:18
Now let's preview this. Now it is looking quite good. So you can easily adjust this space by adding the negative margin
4:29
Now let's add the second line. So just copy this and let me just add a second advanced heading
4:38
So just click on Enter and let me just paste it. Now you can make it center
4:45
Now let's add the button. So for this I will click on Enter
4:51
So let me just click on slash and type Advance button. Click on the button and let me just type watch now
5:04
Or you can type any other text you want. Now you can add a link
5:09
So let me just add a video on it. So just copy the link and paste it here
5:20
And if you are using Procaddenance. theme then you can set it as okay video pop up. So let me just select this and let me just change
5:29
the button color and typography. So for this click on the button and let me just change the
5:37
text to white and change the background color to red. Now you can add a border color. Let me just
5:45
select it to white. Now let's click on hover and let me just
5:51
add a hover color of red and a background color of white and I can add a border color of red now when I hover this it will look like this And you can also add a icon So let me just select the icon and I will type like play And let me just select
6:15
this icon. Now let's click on save and let's preview this. And now it is looking quite good. So let's click on
6:28
Watch Now button and here as you can see the video pop-up is showing
6:33
So if you want to enable video pop-up, then you have to install the Cadence Blocks Pro, which
6:38
is the Pro add-on of the Cadence Block Logging. So let me just close this and let's add this section
6:46
So you have to add a separator like this. So for this you have to go to the editor and let me just select the whole row layout and let's
6:58
click on the divider. So here you can select the divider. So let me just select a divider like this
7:08
Now let's click on second row layout. And here as you can see, there is two sections in this row layout
7:17
One is for image and second one is for the text. So for this go to the editor and here select the two column layout
7:26
Now let me just add the image from here. So let me just select image from Media Library
7:37
And the image is added. So you can make it round kernel
7:43
So let me just select it to round. Now scroll down and you can reduce this size
7:48
So let me just select it to 25%. Now select this section
7:53
So you can select this section from here. or you can just click on this icon and just select this section
8:02
Now make it to align center. Now select the whole row layout and just click on this icon
8:10
And here click on use theme content inner width. Now you can select this icon and select to align to middle
8:22
Now let's add the second section. So let me just select the advanced heading and here you can set a heading like about me
8:36
And let me just make it to center align. And then you have to add a line like this or you can add the paragraph
8:47
So let me just make it to advance heading. And let me just paste this
8:59
Now let me just bolt this and make it center align. Now let's add the paragraph
9:08
Now make it center align. Or you can make it left align
9:18
So here I will select to center align. And let's add the button
9:24
For this I will type slash and type button and then click on advance button
9:31
Now let me just copy this More About Me and subscribe. So let me just type More About Me and then you have to add a second button
9:48
So for this just click on this button, add button. Now let me just change the text to subscribe
9:59
And here you can add link. Now you can change the button style
10:07
So let me just change the text and change the background color
10:14
And here I will change the background color to something like green
10:22
And let me just change the color to white. Okay, now it is looking quite good
10:35
And here you can add an icon like this. So let me just scroll down and click on icon setting
10:43
And let me just add a arrow. Okay, the second section is done
10:51
Now let's preview this. And as you can see, this section is added
10:59
But it is looking odd, so let's fix this. So for this, I will select the image and make it to align center
11:11
Now let's preview this. So you can add a left and right padding to this section
11:20
So for this, just select this whole row layout and here click on padding and margin
11:28
So let's add right margin of 50 and left margin of 50
11:35
Or you can increase this like 75 and left margin of 75
11:43
Now let's preview this. In this way you can adjust the size and make it center align
11:54
So let me just change the right to 125 and left to 125 Now let preview this Okay now it is looking quite good
12:13
Now let's go to this website and let's take how you can add this section
12:19
So for this you have to add a row layout and then you have to add the icon box
12:25
And here I will add row layout of three columns like this
12:30
And let's add the info box. to each of the column
12:41
Now the info box is added. So here you can change the title
12:45
Just click on it and rename the title or you can change the paragraph
12:50
And here you can change the icon. So for this scroll to this setting and here click on Media Settings
12:58
So here you can change the icon. So let me just change the icon
13:02
click on second box and scroll down and here in the media setting change the icon
13:11
So let me just change the icon. Okay. Okay
13:24
Now just select the whole row layout. So here you can select this icon and here you have to select the whole row
13:32
layout. Now click on this icon and make it use theme content width. Now let's preview this
13:43
And as you can see, this section is added. Now you can change the style or you can add a color
13:54
or hover effect. So for this go to the editor and here you can set multiple style. Like you
14:02
Like you can choose different style from Okay, so let me just select this style
14:10
Now you can add a hover effect. So for this, let me just select the first container
14:18
and here click on container setting. And now here you can add a color. Like let me just add a container
14:26
border. So let me just make it black and let's click on hover icon and
14:32
and let's make it to red. So when I hover this it will change to red. So here you can
14:40
apply the same technique. So let me just click on container setting and let me just click on container
14:47
border and let me just add a container border like yellow. And here click on hover effect
14:55
and let me just edit the over color. Now click on the third container
15:02
and change the container border. So let me just add it to green. Okay, now the hover effect is added
15:19
So let's preview this. And as you can see, the hover effect is working and in this way you
15:28
can change the look and fill of your info box. Now let's check how you can add the last section like latest block
15:41
So here I will add a two row layout, one is for latest block and this button, and then
15:47
second row layout for this section. So go to the editor and here click on the plus icon and let's select the row layout
15:57
and let me just select this option two by two and let me just make it to use theme in our
16:07
content width and here i will add a button so i will type advance button and here let me just
16:18
type view all or view block and here click on the button and let me just
16:27
change the text and here you can change the button background and let me just add a border color
16:35
of white and here you can add a border radius so let me just change the border radius to 30
16:43
and let's add a icon okay now let's click on this past box and let's add a
16:57
heading and let me just add this text okay now click on the whole row layout and let's add a
17:12
background color so here I will add a background color like this now let's preview this
17:24
Okay, the latest section is added but it is not full width
17:30
So for this you have to click on the row layout and click on this change alignment and make
17:36
it to full width. Now let's add the second row layout and let me just select the row layout and click on the
17:44
single row layout. Now click on add block and let's click on browse
17:51
And here you have to select the post. So here you can either add post grid or carousel or simply add the post
17:59
So here I will choose the post and let me just close this Now you can select how many number of posts you want to show So here I will select to three
18:17
Now scroll down. So let's click on content setting. So you can either enable X off or not
18:24
So let me just close this. Now it is looking quite good
18:29
And here you can add a Read More button. So let me just close this or you can enable this Read More button or you can enable this Read More button
18:36
or you can add your own custom button like Read More. And let me just add a arrow
18:46
So for this I will search for Right Arrow Unicode. And let's click on the fast result
19:00
Okay, now scroll down and let me just add a arrow like this
19:05
So just copy this and let me just add it. So as you can see, the Read More button is added
19:16
And here you can add different meta like you can enable author or not and you can also
19:23
enable author image so that the author image will show. So let me just close the author image
19:32
Now scroll up and let's click on Image Set. And here you can set the image ratio
19:38
So here I will select 16 to 9. Now the image is looking quite good
19:44
And here you can select thumbnail medium or medium large. So I will leave it to medium large
19:52
Now click on title setting and here you can adjust the title size
19:57
So let me just reduce the title size. Okay, now it is looking quite good
20:09
Now let's review this in a new tab. Now let's scroll down and here as you can see the recent post section is added
20:23
So it is not looking quite good. So let's make it to center align
20:28
So for this, let me just select this. So here click on this and last
20:35
Click on Align Middle. Now here click on this and let me just make it to align right
20:42
Or let me just make it to align center. Now I think it is looking good. So let's preview this again
20:54
Okay, now it is looking good. Or you can change the style like this. So let's go to the editor and let me just make it to align center
21:05
And let me just select the title and make it to left align
21:13
And here I will click on this button and make it to right align
21:19
Now let's preview this. So let's check how it looks right now
21:29
And here you can add a left and right margin to align it perfectly just above the post
21:34
So let me just do that. Just click on it. Now let's add a right padding of 25 and let's add a left padding of 25
21:50
Now let's preview this. Now let's scroll down and in this way you can adjust the latest block and view block button
22:00
just above the blog post. Now let's add a background to this blog post
22:04
So let's go to the editor and let's select the whole row layout and let me just add a background color
22:13
So here click on background color and let me just add the background color
22:18
Or you can add a color like this. So here the hero section is not looking good
22:31
So let's add a top and bottom margin so that it will look
22:34
cover the whole section so for this just scroll up and let's select the row layout and
22:42
here click on padding a margin and here I will change the top padding of 150 and add a
22:50
bottom padding of 150 now let's preview this so let's add more padding so let me just
23:04
Make it to 200 and let's make the bottom padding of 180
23:13
Now let's preview this. Now you have to know how to adjust the hero section and build a home page like this from scratch
23:27
And if you have any doubt regarding this, then you can ask me in the comment section
23:32
And if you want to build a footer section like this, then you have to go to the Key to Blogging
23:37
YouTube channel and let's click on Playlist section. Now scroll down and here click on the Cadence Theme tutorial
23:45
So here I have added how to build a homepage or how to set up Cadence theme
23:51
And here as you can see, here I have shown how to build a custom footer in WordPress
23:57
So you can go through the playlist and build a home page and build your WordPress
24:02
website from scratch. And if this video helpful to you, then make sure to hit the like button
24:08
and subscribe to my channel for more upcoming videos like this. I will see you in the next video
24:14
Thank you
#Computers & Electronics
#Home & Interior Decor
#Skins
# Themes & Wallpapers