Up next in 10
How to Design a Blog page in Wordpress using Kadence Blocks Pro
8K views
Jan 24, 2024
In this tutorial video, viewers will be guided through the process of designing a blog page in WordPress using Kadence Blocks Pro. Released in 2023, the content provides a step-by-step guide, making it accessible for both beginners and experienced WordPress users. Whether you're a blogger, content creator, or website owner looking to enhance the visual appeal and functionality of your blog page, this tutorial demonstrates the features and capabilities of Kadence Blocks Pro for WordPress. Learn how to design a stylish and engaging blog page using the advanced block options offered by the Kadence Blocks Pro plugin.
View Video Transcript
0:00
Hi everyone, welcome to Ketub Blogging and in this video I will show you how you can create a
0:04
block page in your WordPress website like this. So here you can easily switch between posts like this and if you scroll down here and
0:14
I have added some category-wise post here like this, here I've added the tools category here
0:20
here I've added the affiliate marketing here. So this is the blog page and I can design the block page according to my own choice
0:28
So here I'm using the Cadence Blocks plugin and to add the tab functionality, you need to
0:34
use the Cadence Blocks Pro plugin. So Cadence is a fast loading theme and you can use the Cadence Block to design your page in WordPress
0:44
So let's check how you can build a block face like this in your WordPress website
0:49
So for this I'm going to log into my WordPress dashboard and I will go to the pages section
0:55
here and I will click on Add New. So as I have already created the blog page, so I can name it like block to and I'm not
1:03
going to publish this. So here I need to change some settings like I can set this block page to full width and I can
1:12
disable the page title here and or I can keep it as default or you can keep it as anable
1:21
And after that you need to add a row layout first. So let me just add the row layout here
1:27
And here I have added this single row layout, so I will click on this first section here
1:33
And after this, I will click on plus and I will click on Browse All. Now here you need to find a section like this, post section
1:42
So let me just scroll off here, post grid carousel. So you need to find this option here
1:50
So let's click on here. And here I will select this third one
1:55
So let's click on here and let's click on this settings here and here I need to scroll down
2:05
here and click on layout settings here and I will select the three column here
2:11
Now I will select the whole row layout here and I will click on this button and I will click on the
2:17
huge theme in our content width like this and I will keep it as full width
2:23
Now here as you can see that this section is added and here I want to filter it with categories
2:30
So what I can do that, I will click on this block here and I can select this by filter by category
2:38
So let me just click on the affiliate marketing section here and as you can see that it will
2:42
only show the blog post from affiliate marketing category. And let me just click on here and I will select the number of items to three
2:52
like this now i can duplicate this section here and i will click on here and i will change the
2:59
affiliate marketing category to something else like i will select the SEO category here like this
3:07
so the SEO category is added now i can add a heading to identify the sections according to your
3:13
category so what i can do is just click on this block here and i will click on the parent block here
3:22
like this and I will click on insert before and I can add a heading here so let me just add a advanced text here and I can say affiliate marketing
3:37
And I can make it at center align. And I can adjust the color
3:43
I can change the background color here. And here I can add a border like this
3:48
If I add a border like this, so let me just add a 2 px border like this
3:53
And let's keep the border radius to some. something like 10 pixel
4:00
As you can see that the heading is added and we have added the affiliate marketing blocks here
4:05
And I will copy this block like this and I will click on this block and I will click on insert
4:12
before and I will paste it here and I can change the category to something like SEO
4:18
And I can also link this headings to its category like I can select it here and here and
4:26
In this general tab, I will click on link here and I can add my SEO category link here
4:31
So if I go to the website and I will go to SEO, I will copy the link of this category and
4:37
I can paste the link here. Like this. So whenever someone click on this heading, it will go to the SEO category
4:48
So I can do the same with affiliate marketing here. So let's copy the link of affiliate marketing category here
4:56
and I will go to General tab, click on link setting and I will paste the link here
5:03
So let's hit enter. As you can see that the affiliate marketing link is added
5:08
So let's click on here and you can change the link style to underline on hover
5:15
And you can also do that here. So let's click on here, link style to underline on hover
5:21
Let me just preview it in a new tab. And as you can see that the section is added but here you need to add a little bit of padding
5:31
just after the heading otherwise it will not look good. So let me just quickly do that
5:36
So I will click on this heading here and here I need to find this padding option here so I will
5:42
go to advance here. So sorry we need to add the bottom margin here so let's add the bottom margin to like extra small
5:51
And I can do the same with the heading. Go to Advance, add the bottom margin to extra small like this
5:59
Now let me just preview it again and as you can see that there is a little bit of margin below
6:04
the heading and if I click on this button it will take me to the Applied Marketing category
6:10
But here we need to fix the settings because the underline is not showing in a proper aligned
6:16
so we can also fix that in Cadence Blocks plugin so I will click on the block here
6:21
Now I will scroll down here and I will search for that option, footer meta
6:29
And here you will see this option, force to align bottom like this
6:33
And I can also do the same with this block as well. I will click on footer meta here and I will click on force to align bottom
6:41
Like this, let me just preview it here and as you can see that this line is aligned to
6:46
the bottom. And you can also add pageination to this category if you want
6:51
So just click on here and let's scroll up here and as you can see that you will see this
6:57
option use pagination like this Now let again go to preview here and as you can see that it will show a pagination like this So you can easily explore different blog post in the same category like this
7:11
Now let's check how you can add a tab functionality like this
7:14
So for this you need to use the Cadence Blocks Pro plugin and if you want to get this plugin
7:19
then you can check the link in the description. So let's go to the post here and I need to add a tab functionality here
7:26
So I will click on here and I will add this. I will add a row layout first and I will add the single row layout and I will click on
7:33
plus here and I will click on Browse All. Now here again we are going to use the post grid or carousel here so let's click on here
7:41
and here in this case I will select this style here like this and here I will click on the
7:50
layout here and I will click the column to 1 and here I will go to the
7:58
image settings here so let's click on image settings here and here I will change the image
8:04
ratio to something like 16 is to 9 like this now we need to add the filter
8:11
option here so I will click on this display filter option here so let me just
8:17
enable it and let me just add the category option here and I will again click on the
8:24
display filter here and I will add something like blogging And again I will click on the display filter here and I will add more items like I will
8:36
add the blogger here. And again go to the display filter and let's add another category like I will add WordPress
8:48
Now let me just preview it in a new tab and as you can see that the tab functionality is now
8:54
working but you need to reduce the width so you can easily fix that just click on
9:00
the row layout here click on the huge theme content inner width like this and you
9:06
can also add a background color if you want in the row layout so let's keep it as full
9:12
width and let's add a background color here like this okay this one is looking
9:19
good so let me just preview it in a new tab and as you can see that that section is
9:24
added like this. So user can easily filter out with different category like this
9:29
And it will show the top 5, 1, 2, 3, 4, 5, 6, the top 6 post in this section
9:37
So you can increase the number of post here. So you can change the number of item to something like 10
9:43
So it will add the recent 10 posts in this section and it will filter that 10 post according
9:49
to its category like this. And you can also use the pagination if you want
9:54
If you don't want to use the tab, then you can use pagination or you can use the display filter
9:59
here like this. So I think the page is ready and if you want to add more sections like this, so let me just
10:08
add another category here. So I will click on here and I will click on insert after
10:16
I will again add the row layout here and I will click on the plus button and I will select
10:22
the post grid slash carousel. And here you will get multiple options
10:28
So in this case here I am choosing this one here and I will again click on the row layout I will click on use theme inner content width and after clicking on this block I can click on the layout setting here and I can add
10:44
three columns here like this and as you can see it is looking quite good and you can also add
10:50
multiple options here you can change the post container like you can change the text alignment
10:55
to center like this or you can keep it as left align you can also add a background color like
11:01
this so I don't want this background color so you can easily adjust the background color
11:07
according to your color in website and you can also add a container border here so you can
11:13
change it to a dark black color like this and you can also add a box shadow around
11:20
this box if you want and you can also change the header background you can change the content
11:25
settings like you can change the padding margin of the content you can change the footer
11:30
background here. You can change the image so you can change the ratio of this image
11:36
As you can see, the image is cropping here. So I am, I will use this option in edit or I can
11:42
use the landscape 16-9. That's what the image dimension using in my website. And you can also
11:50
show category above the title. And here you can change the link color, link hover color
11:56
So you will have complete control over the design in Cadence blocks
12:00
plugin and you can also show some below title meta like you can show date here, you can
12:07
show modified date here, you can turn off author or you can disable it from here, you can
12:15
disable the category here, and here you can add a Read More button just after it and you
12:21
can change the Read More border like this and you can change the Read More tags so
12:27
you can easily customize this section according to your choice and you can also add the
12:33
pageination as we have discussed above so let's click on use pagination and you can name it like
12:40
recent post so let me just preview it here again as you can see that the block page is ready
12:46
and you can easily fix this by adding a negative margin so let me show you in a minute so as you
12:51
can see we have added the category section like this and as you can see you can use
12:56
different style in your theme to show the categories or show the blog post in the blog page
13:02
So if you want to fix this gap then you can also add a negative margin here
13:07
So let's click on the whole row layout. Let's click on Advance tab here and here you can add the margin
13:16
So I will click on this button here and here I will add a negative margin of 25 like this
13:25
Now let's preview it again. As you can see, this gap is reduced and I can increase it to something like 28
13:33
Let's preview it. All right, the blog page is ready and in this way you can easily create a block page using
13:39
the Cadence Blocks plugin. And you can use the Cadence Block with other theme as well like in Generate Press or Blox theme
13:47
You can use the Cadence Blocks plugin in any theme in WordPress
13:51
So I hope this video is helpful to you and if you found this video helpful then makes
13:55
you to hit the like button and if you have any doubt regarding this, then you can ask me in the
13:59
comment section. And if you want to see more videos like this, then make sure to hit the subscribe button
14:05
And I will see you in the next video. Thank you
#Blogging Resources & Services
#How-To
# DIY & Expert Content
#Online Journals & Personal Sites