Up next in 10
How to Add Pros and cons Table in WordPress _ Kadence Blocks
18 views
Jan 27, 2024
In the video titled "How to Add Pros and Cons Table in WordPress | Kadence Blocks," viewers will be guided through the process of incorporating a Pros and Cons table into their WordPress content using the Kadence Blocks plugin. The tutorial provides step-by-step instructions on leveraging the features of Kadence Blocks to create a visually appealing and informative table that outlines the advantages and disadvantages of a particular subject. Whether you're a WordPress user looking to enhance the presentation of your content or someone interested in utilizing Kadence Blocks for advanced block customization, this video offers practical insights into adding a Pros and Cons table to your WordPress posts or pages. Follow along to learn how to effectively use this feature for clearer content communication.
View Video Transcript
0:00
Hello everyone, welcome to Key2 Blogging and in this video I will show you how you can add a
0:04
pros and cons table like this in your WordPress website. So I have designed this pros and cons table
0:10
using the Cadence Block plugin. So if you don't know, Cadence Block is a free Gutenberg
0:16
base page builder that you can design your WordPress website. So here we'll see a lot of options
0:22
like row layout, form, advance gallery, space and divider, icons, advance button and lots more. So you
0:29
So you can add to your WordPress website by clicking on the Add New button and you need
0:37
to search for Cadence Block. And here you have to install this plugin
0:44
After that, you can add a pros and cons table like this to your WordPress website
0:49
So let's go to the post and click on Add New. Now let me just add a title like Pros and Cons table
0:58
And here I will add a row layout. So I will click on plus and click on the row layout
1:05
And here I can select two equal row layout. And in the first section I will add an advanced heading like pros
1:14
And in the second section I will add an advanced heading like cons
1:20
Now I will click on pros and let me just add a heading background
1:25
So let me just add a blue color heading like this. and I will add a spacing like 5 px so I will click on padding and I will set a
1:36
spacing like 5 px now I will click on second heading and I will add a heading
1:42
color so I will click on a color like red so let me just set it to a light red
1:49
color and let me just scroll down and I will click on spacing setting
1:54
then I will click on this setting so that it will added to the top, right, bottom and left
2:02
So I will click on it and I will add a 5 equal padding from all side
2:08
Okay, now the heading is added. Let me just click on this section
2:13
So I will click on the whole section Or you can access this by clicking on the section button And I will click on this plus icon and I will add a icon list So you can simply search for icon list and you can add icons one by one
2:29
So let me just copy this whole text from here and I will add it one by one
2:39
So let me just add it
2:52
Now the prose is added. Let me just add the cons. So here I will click on this section and I will click on the plus icon
3:00
So let me just add an icon list here and let me just copy the cons from here and I will
3:08
add it here. And I will click on this again icon and I will add the second cons here
3:19
So as we have less cons here, we have to add a spacer to fix this issue
3:24
So before that let me just add a border. So I will click on this section
3:29
So I will click on this section like this and I will click on content style
3:35
And here I can add a border color of black. and let me just add a border of 2 pixel
3:43
So I will click on this like this. And I can add a padding like 5 pixel
3:53
And I will click on the second section. So just click on the whole section and I will click on content style
4:00
And here I will add a border color of black. And let's add a border width
4:06
So I will add a border width of 2 and let's click on padding and margin and I can add a padding
4:13
of 5 from whole side. Okay. Now the pros and cons stability looks like we have to add a spacer to fix this width
4:23
So for this I will click on this section and I will click on the plus icon and I will
4:29
search for spacer slash divider. So just click on it and we can adjust this space So just click on it and let me just increase to 63 and let me just click on save draft and let me just preview this approach and con stable
4:49
Okay, I think we need to fix the margin from the top. So for this I will click on this
4:56
heading and let's click on spacing and settings. So let's add a top margin of zero
5:03
So, now click on Save Draft and let me just preview this
5:13
Now the approach and cons table is looking good and we can further customize it
5:19
So let me just show you. So I will click on this icon list and I will scroll down and I will click on this option
5:27
edit all icon style together. So here I will add an icon color of green
5:33
something like that. And I can select this icon here and I will again click on Edit All icon together and I can set
5:43
a icon color of red. Okay. Now click on the first section
5:49
So I will click on this section and I can select the container style and I can add a border
5:55
radius of something like 9 px or 10 px. So let me just set it to 5px and I will add a box shadow effect
6:06
And I will click on the second section. So just click on this section
6:11
Now click on container style and let's add a border radius of 5 pixel and let's add a box
6:17
shadow effect. Okay. Now the box shadow is added and we have added a round corner and we have changed the color
6:25
of the icon. So let's click on save draft. And let's click on preview
6:33
Okay, now the ProCentconstable is added. Let's check how it looks in mobile devices
6:44
So I will click on this option, click on mobile, and I can select this whole row layout
6:51
So just click on this row layout and you can set the mobile padding So I will set the padding from right to 20 and from left it is 20 like that
7:05
Or you can leave it by default. And let me just check it in mobile
7:15
So I will click on inspect element and as you can see it is not looking good
7:19
So we need to fix the left and right padding and margin
7:24
So let me just click on this option and I will click on hold row layout and I can set the padding
7:33
from the right to 20 and from the left to 20. Okay now click on save draft and let me just click on preview icon
7:47
Okay, now the pros and cons table is looking good in mobile
7:53
By the way, this table of content is generating by default before the first heading because
7:59
we have set the cadence hook element. So we can fix this by excluding the table of content to this blog post or you can set it
8:09
in a different place. So let's click on close and now the pros and cons table is added to your WordPress
8:17
website and you can further customize it like add a background color to this fast heading
8:23
or add different style so let me just click on the first section so let's click on
8:31
settings and I can add a background color so I will click on this first section and I
8:38
can add a background color like this and I will click on the second section like this
8:45
and I can select the container style and I can add a background color like this
8:51
So in this way you can customize your table of content according to your own choice
8:56
I hope this video help you add a pros and cons table to your WordPress website and if you
9:01
have any doubt regarding this then you can ask me in the comment section
9:05
And if you found this video helpful, then make sure to hit the like button
9:10
And don't forget to subscribe to our channel for more upcoming videos like this and I will
9:14
see you in the next video. Thank you