Up next in 10
How to design a homepage using kadence blocks in wordpress
2K views
Jan 24, 2024
In this tutorial video, the presenter guides viewers through the process of designing a homepage using Kadence Blocks in WordPress. The video likely covers practical steps and demonstrations on leveraging the features and functionalities offered by the Kadence Blocks plugin to create a visually appealing and dynamic homepage layout. Viewers can expect insights into using Kadence Blocks' block options, customization settings, and potentially integrating additional design elements to enhance the overall aesthetic of the homepage. Whether you're a WordPress user, designer, or someone seeking to optimize their homepage layout, this video aims to provide a user-friendly guide for designing an engaging homepage with the Kadence Blocks plugin.
View Video Transcript
0:00
Hi everyone welcome to K2 blogging and in this video I will show you how you can design
0:04
a home page in your WordPress website using the Cadence blocks plugin
0:09
So I am personally using the Cadence theme and Cadence blocks plugin to design my WordPress
0:13
website and you can easily design any WordPress website using the Cadence blocks
0:19
So let's check how you can design a website like this. So as you can see that this website is probably built on generate a press theme but you will
0:27
recreate this using the Cadence blocks plugin. So let's check how you can do that
0:33
And first of all if you new to this channel make sure to hit the subscribe button and
0:37
if you found this video helpful then make sure to hit the like button
0:41
So let's get started. So first of all we need to go to WordPress dashboard and we need to install the Cadence
0:46
blocks plugin. So for this I will click on add new here and I can simply search for Cadence blocks
0:53
As you can see that this is the plugin Gutenberg blocks by Cadence blocks
0:57
So all you need to install and activate this plugin and after that you need to go to the
1:01
pages section here and let's create a new page here. Let me set the title here to home page or let me add it home page too
1:12
So here we need to assign the layout option here. So I will click on this option here page setting and here you can set different layout of your
1:24
page like as you can see that you can enable left side bar, right side bar or you can make
1:29
it full width. So this is a full width website. So here we will select the full width here
1:35
Now here we don't want this title home page too in this page
1:40
So we will disable the page title from here. Now here you can disable the content vertical padding so I will click on disable here
1:49
Now here you can also disable header and footer if you want but I will keep it as it is
1:56
Okay now we have set the layout let me just save the draft here
1:59
Now let me just preview it in a new tab and as you can see that this is how the home page
2:04
looks like. So as you can see that we have removed the title and set this as a full width
2:10
So let's start designing the hero section of this website. So for this we need two sections one is in the left and one is in the right side
2:18
So in the right side we can add an image like this. So what I can do is I will click on plus here and here you need to add a row layout
2:27
So you can simply search for row layout. Here you can select different options like you can set different to equal row layout
2:35
or you can left heavy so you can set the left to 66% and right section to 33% or you can
2:43
adjust the percentage from here like this. So let's keep it 60 40
2:49
Now here we need to add this heading so let me just copy the heading here
2:54
So I am demonstrating it for demo purposes so you can learn how the cadence blocks work
3:00
and how you can design your own website by following this video
3:05
So you don't need to follow exactly but if you follow this video completely you will
3:09
understand how the row layout work, how you can place images and how to make it responsive
3:15
for mobile devices. So for this just follow the video till the end
3:20
So here I will add a advanced heading here and here it is text advanced and let me paste
3:29
the text here like this. So here we need to add the second paragraph here so let's hit enter here or let me just
3:40
duplicate it here and let me paste the paragraph here. Now let's set it to text advanced let's keep it paragraph and let's select this option
3:56
here and let's increase the size a little bit. Now let's keep the line height to 2 or you can set it like 1.5 like this and here you
4:12
can set the line height in pixel em or rem. So let's keep it like that
4:18
Now here you can adjust the size here like this or you can set a custom font size here
4:24
as well. So let's keep it large here and let's select the heading and I will keep it XL extra large
4:34
Now you need to reduce the space between these two elements. So what I can do is I will go to the bottom margin here and I will set the bottom margin
4:45
to 0. So you can see that the margin between the heading and the paragraph is set to 0
4:51
So by default it is set to 20 so we need to reduce it from 20 to 10 or 0 according
4:58
to your choice. Now let me select the whole row layout here and let me preview it once
5:05
So as you can see that it is showing from the top left end
5:10
So we need to make it center align so as you can see that the logo start here and the content
5:16
ends here. So now we need to set this text in between this center align
5:23
So for this we need to select the whole row layout here and here you will see this option
5:28
huge theme content inner width. So that it will align to the center and it will not move to this left or right side
5:37
Now here you need to set it to full width. Now let me set a background color here
5:43
So this is the background color so you can choose the background color here
5:47
So here I am using the colorzilla extension to copy the color code from this website
5:52
So you can easily search for colorzilla chrome extension and you can install it in your chrome
5:57
browser or any other browser and you can easily get the hex code
6:02
So here let me set a background color here so I will paste the hex code here like this
6:08
Now as you have set a background color to dark so we need to change this color to white
6:14
like this. Now again I will select it and let us select the color to white like this
6:20
So we need to add a spacing from the top and bottom so for this we can use the padding here
6:26
So you can easily drag this padding like this or you can adjust the padding from here in
6:31
the advanced tab. So let's increase it to double excel and let's add the bottom padding to double excel
6:40
Now here we need to use an image so let me just download this image here and let me upload
6:46
this image from here. Alright the image is uploaded now we need to make this center align
6:53
So for this what I can do is I will select the whole row layout and I will click on here
6:57
and I will click on align middle and as you can see that now it is aligned to middle
7:03
So let's reduce a little bit let's keep it is in large
7:08
Ok now let's increase the size a little bit and let's increase the size to 2xl
7:17
Now it is looking quite good so let's reduce it to a little bit of 40px like this
7:25
So it is quite similar now. Now we need to add a button like this start now
7:32
So to add the button I will click on here enter click on enter and I will search for
7:37
advance button. Button advance like this. Now I will select this here and I will justify item to left and I will click on start here
7:54
like this. Now I can set it to full like this or you can set it as fixed or you can set a custom
8:05
width like this. So let's keep it as auto
8:14
Now here you can set the color so if you want a different color then you can add your color
8:21
from here so white is looking quite good. Now here we need to add a icon here so to add icon I will click on icon setting and
8:31
I will add a icon from here. So let's add an arrow icon here like this
8:37
Now you can adjust the icon size if you want like this
8:41
So let's keep it 25px. So let's increase the text size as well to 25px like this and let's click on here and
8:56
let's adjust the top padding to extra small and let's adjust the bottom padding to extra
9:06
small like this. Let's increase the right to large. Let's keep it to large like this
9:18
So it is now looking quite good. So you can adjust the button according to your website or according to your preference
9:26
Now here you can change the color to similar color like this
9:30
So I can simply drag it here and I will select it here and here I will select the button
9:39
style here let's change the background color here like this and you can change the hover
9:47
background color as well to blue. So as you can see that it is now changing its color
9:52
So this is how you can set the hero section. Alright we have set the hero section so let's make it mobile responsive as well
10:01
So what I can do is I will click on the preview button here and I will click on tablet
10:08
So we need to adjust the font size in tablet as well
10:12
So let's click on paragraph let's set the size to 24. Let's click on button and let's keep the typography to middle and let's keep the icon like this
10:33
Now let's click on general and let's reduce the size here or let's keep it as auto and
10:46
let's reduce the left and right padding from here like this and let's keep the padding
10:57
to extra small like this. So we have adjust the tablet so you can similarly adjust the mobile from here
11:09
So as you can see that the text is showing at the top and the image is showing bottom
11:15
that's because we have set this to left so it is collapsing from left to right
11:21
So if you want to add the image to the top then you can also collapse it from right to left
11:28
So I will go to mobile here and here you will see this collapse order
11:33
So let's click on reverse and as you can see that the image is now showing at the top and
11:38
if you check the desktop it is still same but if you see the mobile the collapse order
11:43
is now changed. So this is how you can swap the column between left and right
11:52
And here we need to make it center align. So what I can do is I will click on general tab and I will click on center align
12:00
So we need center align for mobile devices to look good. Now let's click on here and let's set it to align center
12:11
And as you can see that in mobile we have aligned everything in the center so it will
12:16
look good. Now let's switch to the desktop view. So we have individually changed the values in the mobile as well to center align and
12:26
the in desktop mode it is in left align. So you can easily make the adjustment in tablet, mobile and desktop
12:34
So this is how the responsive work. And let's create a different section like this as seen on
12:42
So it is completely optional. So I will show you how you can design this as well
12:46
So for this I will refresh it a little bit and as you can see that it is now looking
12:53
quite good. So we need to reduce the top margin here. So what I can do is I will select here and let's add the top margin to minus 32 like this
13:07
Now let's preview it in a new tab. So let me just refresh it and as you can see that that margin is now fixed
13:15
Now let's add the second section. So I will again add a row layout here and here as you can see that there is 1, 2, 3
13:23
4, 4 section and there is 5 section. We need to create 5 section here
13:28
So let me add 4 section first and I will show you the different approach to design it
13:34
So as you can see that we have to create 5 section here
13:38
Now we need to add the heading. So I will add the heading like this as seen on
13:44
I will copy it and I will paste it here like this
13:48
Now I need to add these images here one by one
14:03
We need to make it full width and we need to make it align center like this
14:10
So we need to increase the size a little bit and here you can also assign the row gutter
14:18
here and you can assign the column gutter if you want like this
14:23
So medium is fine and we need to change this color to white like this and here you can
14:33
reduce the size padding from here like this. Alright we can also use theme inner content width like this
14:41
Now we need to align the images to center align. So let's do that
14:46
Let's set to center align like this. So as you can see that it is now looking quite good
14:55
So we can change the color little bit like this. Alright now let's create the rest section
15:05
Some of the best from our blog. So let's copy it. Now let's click on here and click on add after
15:13
Now let's add a row layout here. I will add the single row layout
15:19
Make it full width. Use theme inner content width. And I will add a heading here and I will paste the heading like this
15:27
And I will make it center align and increase the size a little bit like this
15:32
And you can also make it like upper case or lower case like that
15:39
And you can also change its font family if you want. So let's add a system default
15:46
Let's click on 900 like this. And let's set it like font style to italic
15:54
Ok now it's looking quite good. Now we need to add the section like this
15:59
So we need to add the title of the blog post and then we need to add the images
16:05
So let me just copy the title from here like this. And I will click on add after
16:14
Or we can create a new row layout from here. So I will click on add after
16:21
Let's add a row layout. And I will add two section, two equal section
16:27
And I will make it to full width and I will use the theme inner content width
16:32
Now let's add it here. So I will click on paste like this
16:38
Now I need to add a button. So I will search for button
16:42
And I will add the advanced button here. And I will make it to left align
16:47
And I will like create blog post like this. And we can add an icon here
16:58
So let's add the icon like this. And let's keep it like that
17:07
And you can add the link here as well. And you can also select it here and you can add the link here like this
17:15
Now we need to add the image. So let me copy the image from here
17:22
And I will upload the image here in the right side. So let's upload it
17:30
And as you can see that we have added two section here and we need to adjust the typography
17:36
So let's change it to advanced setting here. And let's make it like extra large or let's keep it like 40 pixel
17:46
And let's select the paragraph. Let's change it to advanced setting. And I will set it to paragraph
17:54
Now let's keep it like medium. And let me remove it. Okay
18:02
Now it is quite close. Now we need to add the color here
18:07
And I will select the button. Change the background color here. Like this
18:16
And I will change the hover color from here. Okay. Now we have added one section
18:22
Now we can duplicate this section. So what I can do is I will click on here
18:27
Let's click on duplicate. And let's click on duplicate again. Now we need to make the image to the left side
18:35
So how we can do that? So for this I will click on here. I will click on the whole section here
18:41
And I will click on move to right. Like this. So as you can see that now the image comes in the left side
18:48
So let me select the second image here. Alright now we have added our popular post here
19:12
So we need to make it mobile responsive as well. So I will select the fast roll layout here
19:18
I will switch to the mobile here. And as you can see that the image is showing bottom and the paragraph is showing at the top
19:26
So we need to set the collapse order to reverse. So it is looking quite good
19:32
So we need to make the collapse order to reverse here as well
19:36
So it will show the images at the top. Now you can adjust the size in the mobile
19:42
So let's keep it large. Let's select it and let's keep the size to large here
19:49
Like this. And we can make this button to center line if you want or keep it left alone there is
19:55
no problem here. And we can reduce the size as well. So large is looking good
20:03
Alright now all the images are moved to the top as you can see that
20:07
Now let's check the tablet view here. And tablet will looks like this
20:13
So if you want a different style in tablet then you can also do that like this
20:17
So you can show the images at the top. Let's click on the second row layout and let's keep it like this
20:25
And I will keep it like this. So this is looks quite good in tablet
20:30
Now let's switch to the desktop view here. And as you can see that the page is looking quite good
20:37
And then you can add a latest post section here. So it will automatically fetch the latest post and show it here
20:43
So for this we can use the post block here. So I will click on here add after and I will click on add row layout
20:52
Now let's click on three equal row layout here or I can add a single row layout
21:00
Now I will click on plus here and I will search for the post block here
21:05
And I will select it here. As you can see that it is fetching the latest blog post from your blog
21:12
Now I will select the whole row layout, make it full width and I will use the theme inner
21:18
content width. Now you can select it here and you can remove the except if you want
21:24
So for this I will click on advance and I will click on disable the except like this
21:33
And you can disable the read more button like this. And you can remove the date, author levels and you can remove all meta tags like this
21:43
And you can also remove the category section if you want. And you can keep the image and the post title here as well
21:50
So as you can see that we have added the image and the title
21:54
You can also add a new heading here at the top. So I will click on here add before
22:02
Let's add the row layout and let's add the heading and let's make it align center
22:12
Now let's click on full width and set it to theme inner width
22:17
Now let's increase the font size a little bit. Now let's assign a background color here
22:24
So I will set the background color to something like this. And as you can see that the latest post section is now added
22:34
Now you can also set a divider like this if you want
22:38
So for this I will click on here and I will add a top divider here
22:43
So let's add a divider style like this and let's increase the padding here
22:51
And as you can see that we have added a divider and we have added the latest post here
22:57
So you can show number of post here. So you can either show 3 block post or 6 block post if you want
23:06
And you can also filter according to the category or tags if you want
23:10
So you can also change the layout like you can show 2 block post in a single row or you
23:17
can set 3 block post and you can also individually adjust the tablet column as well
23:24
Now let's change it to mobile here. And as you can see that it is looking quite good in mobile as well
23:30
So let's click on tablet here and tablet is showing the 3 column here
23:36
So let's select the post block here. And here you can change the tablet column to 1, 2 or 3 like this
23:47
So in tablet I will prefer to select 1 column like this
23:52
Alright let's switch to the desktop. As you can see that we have designed the home page using the Cadence Blocks plugin
24:00
So let me quickly publish this page. Now let's click on view page here
24:04
And as you can see that we have designed the same page like this using the Cadence Blocks
24:09
plugin and it is looking quite good. So you can also remove this bottom space if you want
24:16
So let's click on edit page here. And you can add a negative margin in the bottom
24:22
So let's increase the padding a little bit and let's remove the let's add a negative margin
24:31
So let's add it like minus 32. Now let's update it. Now let's view the page
24:37
As you can see that it is looking quite good and we have removed that spacing
24:42
So this is how you can build a custom landing page in your WordPress website using the Cadence
24:48
Blocks plugin. So if you have any doubt regarding this then you can ask me in the comment section
24:54
And if you want to build a home page like this in your WordPress website then I have
24:59
already created a video on how to design a home page like key to blogging
25:04
So I have made some modification till now and I have removed or I have added new elements
25:11
to the home page. But you can definitely follow that video to learn more about how the Cadence Blocks work
25:18
And if you found this video helpful then make sure to hit the like button
25:22
And if you have any doubt regarding this then you can ask me in the comment section
25:26
And I will see you in the next one. Bye-bye
#Online Goodies
#Skins
# Themes & Wallpapers