Up next in 10
How to Create Affiliate Product Table in WordPress _ Kadence theme Tutorial
1K views
Jan 26, 2024
The video titled "How to Create Affiliate Product Table in WordPress - Kadence Theme Tutorial" provides a comprehensive tutorial on building an affiliate product table within a WordPress website using the Kadence theme. The tutorial guides viewers through the process of setting up and customizing an affiliate product table, allowing them to showcase and organize various products with affiliate links effectively. By leveraging the features of the Kadence theme, the video aims to help users enhance their affiliate marketing strategies by presenting products in a visually appealing and user-friendly table format.
View Video Transcript
0:00
Hello everyone, welcome to Key2 Blogging and in this video I will show you how you can create
0:04
an affiliate product table in your WordPress website using the cadence theme and cadence blog plugin
0:11
So previously I made a video on how to add affiliate product table in Blogger and WordPress and here
0:17
I have shown how to do it using the code method. But in this video I will show you how you can create
0:22
a affiliate product table without even doing any type of coding. So you can easily build an
0:28
Appellate Broward table like this using the Cadence blog plugin. But before that, if you are new to this channel, then hit the subscribe button and if you like
0:36
this content, then hit the like button. So let's start the video
0:49
So for this, you have to go to your WordPress dashboard and here click on Post section
0:53
Now let me just click on new post. And here you can give a title like affiliate product table
1:04
And to create this product table, you need to install the Cadence Block plugin
1:09
So now click on Plus icon and here click on the row layout option
1:14
Now click on this row layout. Now click on this setting. Now you have to click on this section icon
1:22
Now in the container style section scroll down and let's add a border width of
1:27
4 from top, right, bottom and left. Now let's add a border color and here I will click on the black
1:39
And as you can see, the border is added in this section
1:43
So you have to click on the section and then add the border color
1:48
Now you can enable box shadow and here let me just make the y-axis to 7
1:55
I will add a bluer of 20. Now click on the padding and margin section and here I will add a padding from all side
2:10
to 20. So I will add a top padding of 20 and then right padding of 20
2:19
From bottom it's 20 and left 20. Okay. Now we have set the padding, let's click on this section and let me just click on row layout
2:31
And here I will select the single row layout and then again I will click on this option
2:36
and click on row layout. And here in this case, I will select two equal row layout
2:42
Or you can select this option. So one is 33% and another one is 66%
2:51
Now you have to click on this section and let's add an advance. adding
2:56
And here you can type like top peak And let scroll down and here you can adjust the font size and line height So let me just make the line height to 5 and let add a heading background color
3:15
And here I will click on the black color and let's change the heading color to white
3:22
Now you can adjust the font size a little bit. So, let's adjust the font size
3:32
Now it is looking good. Now you have to click on the section icon just above the advanced setting
3:38
And let me just click on padding and margin. So here I will add a top margin of minus 45
3:48
And before that, let me just click on the align setting and make it to horizontal
3:53
Okay, now let's add a left margin of 20
4:03
And let's adjust the top margin to around 50 or this 60
4:14
Okay, let's adjust this setting again. So here I will click on the section above the advanced setting and here
4:23
here in the padding and margin section, let's make it to 65
4:29
Now it is looking quite good. Now let's add the product image
4:34
So for this I will click on this block and let's click on image section
4:40
And you can upload the product image. So just go to the Amazon and download the product image
4:47
And then you have to upload that image to your WordPress and select the image
4:52
And here click on image and here you can adjust the image dimension
4:58
So either you can select 25% or you can adjust the width and hide in this option
5:04
Now let's click on this section just above the image and let me just make it to align middle
5:13
Now click on the second block and let's add an advanced heading
5:19
And here I will add a heading like this. Apple MacBook Air and let's add it
5:29
Now click on Enter and let's add a short description about this product
5:34
So let me just copy the text from here and let's add it
5:44
Now click on Enter and let's add an advanced heading. So I will type slash and type Advanced
5:51
So, we have to add an advanced button. So click on the button and let's add the button text
5:59
So here I will type check price on Amazon And let click on button setting one and here you can change the text color So I will select the text color to white and change the background color to black
6:18
And here you can add a border. So I will add a border like black
6:23
Or you can skip this border. Now let's click on hover section and let's change the background color on hover
6:35
So, when I hover this, it will change the background color. And here you can add a hover border color
6:41
I will make it to red. Now scroll down and here click on icon settings
6:49
So here you can add a icon like this or you can search for icon like Amazon
6:57
And let's click on Amazon option. And here you can place the Amazon button at the beginning
7:04
So, for this, you can click on left position so that the Amazon icon will show at the left position
7:13
Now the button is added. Let's make it to left align. So just click on this button and here I will select it to left align
7:25
Now the section is added. Let's preview this in a new tab
7:33
Okay, now the section is looking good but you can adjust the position
7:39
So let me just click on this and let's select the whole row layout
7:45
And here let me just select this row layout and let's increase the widths a little
7:53
weight around 35 or 40. Now let's make it to align middle
8:02
Now let's click on this section and let's make it to align middle
8:11
Now you can adjust the top and bottom position. Now let's click on the second row layout option from here and let's click on padding and margin
8:22
So you have to remove the top and bottom padding and make it to zero and let's add the bottom
8:31
to zero. Okay, now let's adjust the top pick button. So for this, let's click on the button and let's click on the section
8:42
Now let's click on padding and margin and let's reduce this to around 50
8:53
Now it is looking good. So in this way you can adjust the button position
8:58
Just click on the section above the bottom. button and let's adjust the top margin
9:04
So you have to add the negative margin so that it will show at the top of the border Now let save this and let preview it in a new tab Now the product table is added
9:22
You can again reuse this product again and again. Just let me just click on the whole row layout and let's click on add to reusable block
9:34
So that you can add this same template multiple times. So let me just click on add to reusable block and let's click on
9:40
Let's add it like product table. And let's save this
9:50
Now it is changed to a reusable block and you can convert it to a regular block so that after
9:58
editing this block it will not affect the reusable block. So now you can add this same template again and again just click on this and let's click on
10:09
browse all. Now click on the reusable block and let's click on product table. Now the
10:15
reusable blog is added. You have to make it to a regular block so that if you change something
10:22
in this block it will not affect the other reusable block. So for this I will click on convert
10:28
to regular block and here I can change the text like this and I can change the button color
10:36
So, let me just change the button icon from here. Let's click on this icon and let's make it to write
10:47
Okay, as you can see, you can easily add multiple product affiliate table
10:52
So you just need to build this product table once and make it to reusable block
10:59
And you can use the same template in another block. So let me just show you
11:05
Let me just go back and let's create a new post again
11:12
And let's click on this icon and let's click on Browse All
11:16
Let's click on Reusible Block and let's click on Product Table. And as you can see, the Reusible Block is Edit
11:25
So here you can edit this section. So let me just delete this first
11:32
And here you can edit this section and publish it for later use
11:37
I hope you got the idea how to add a product affiliate table using the Cadence Theme and Cadence
11:43
blog plugin. And if this video helps, then make sure to hit the like button and if you have any doubt
11:48
regarding this, then you can ask me in the comment section. And if you want to learn more about Cadence Theme, then just go to the playlist section and
11:58
here click on the Cadence Theme tutorial. So here you will get all the cadence related tutorial
12:05
So here I have shown how to build home page, how to add contact form or how to add footer
12:10
so you can watch this video. And if you want to stay updated, make sure to hit the subscribe button and press the bell icon
12:18
And I will see you in the next video. Thank you
#Affiliate Programs
#Business & Industrial
#Shopping
#Web Services