Up next in 10
How to Create a social follow button in Wordpress using kadence Blocks
447 views
Jan 24, 2024
In this tutorial video, viewers will be guided through the process of creating social follow buttons in WordPress using Kadence Blocks. 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 boost your social media presence, this tutorial demonstrates the process of adding stylish and functional social follow buttons using the Kadence Blocks plugin. Learn how to seamlessly integrate social follow buttons into your WordPress site and enhance your audience engagement across various social platforms.
View Video Transcript
0:00
Hi guys, welcome to Ketub blogging and in this video I will show you how you can add a social follow section like this in your WordPress website
0:08
So for this we're going to use the Cadence Blocks plugin which is a Gutenberg based space builder that you can use in your WordPress website
0:16
So here you can use the Cadence block with any theme like Cadence theme or Bloxie theme or Generate Press theme
0:23
So you need to install the Cadence block to design a section like this
0:28
Or you can also do the same with you. do the same with other page builder plugin, but for this video we are going to use the
0:33
Cadence Block plugin. So let's start designing this social follow section in our WordPress website
0:41
And by the way, if you found this video helpful, then make sure to hit the like button
0:45
And if you want to design a contact of space, then I have already made a video on this
0:50
So you can check the link in the description. So let's go to the WordPress dashboard and let's install the Cadence Block plugin first
0:58
So for this I will go to the plugins here and let me just click on Add New here
1:05
Then I will search for the Cadence Blocks and here it is Gutenberg Blocks by Cadence Block
1:15
So let's install this plugin here. Now activate this plugin. Okay, now the Cadence Blocks plugin is installed in our WordPress website
1:28
Let's go to the pagesh and let's create a new page. And for this I can simply make a title like Social Follow button like this and I will click
1:46
on the plus icon and let's click on Browse All. With Cadence Blog you will get multiple sections like row layout section accordion, advance
1:54
gallery, advance button. So for this we are going to use the
1:58
row layout first to create the structure. And as you can see that there are 4 sections in this row So we can select the 4 section row here Here it is 4 equal row 4 equal section So let click on here
2:16
Now we need to add the info box in each of the section
2:20
So I will click on the first block here and I can search for info box
2:25
Now let's click on here and I can select the info box and let's copy the block and let's click
2:33
on here, let's click on paragraph and let's paste the... section. So I will do the same for all sections here
2:42
Like this. Now let's click on the fast section here and I will do some changes in the fast section
2:49
So first of all I will go to the style here and let's add a border of 3 pixel
2:56
And I will add the dark color border here. Now let's click on hover here and let's change the hover color to something like blue
3:05
And let's change it to 3 pixel. So whenever I hover the mouse, it will change from black to blue
3:14
Now let's click on here. Now let's close the contents settings here and I will click on the title setting here
3:23
And here you can change the size of the title here. So let's change it to something like Facebook
3:34
Now here you can change the font site according to the presets or you can click on here
3:38
and put the exact value in pixel. So I will leave the default here and let's close the title setting and I will click on the
3:48
text setting here and I can disable that text setting from here
3:53
Okay now our basic social follow button is ready. Now let's click on here and I will click on this here and I will click on the copy style
4:02
and I will do paste the style in all of the blocks like this
4:08
Okay, now our section is ready. Now I need to change the text and change the icon
4:14
So here I will change it to Twitter. Here I will change it to YouTube and here I will change it to LinkedIn
4:29
Like this. And now I will change the icon of each of the section
4:35
So I will click on fast section here and under the style let's click on media setting here
4:40
and I will select the icon from here and I will search for Facebook
4:46
Let's add the Facebook icon here. Now let's click on the Twitter section
4:53
Again go to Style Media Settings, change the icon to Twitter. Let's add this one
5:02
So let's do the same for YouTube as well. I can simply search for YouTube and let's add the YouTube and here I will add the LinkedIn
5:16
Let's add the LinkedIn like this. So our social follow section is added
5:24
Now it's time to add the link. So if you want to add the link in this box, then you can simply paste the Facebook link here
5:33
So as I don't have Facebook account, so I can leave it like that
5:37
Let's click on Twitter here and I can add my Twitter link here. So let's add the Twitter like this
5:44
Now let's add the YouTube link here. here and let's add the LinkedIn link here
5:55
Now I have added the links in all of the box. Now let me just publish this section here
6:02
Now let's click on view page here and as you can see that the social follow buttons is now ready
6:08
So if you want to add more than four box then you can also create five sections in the row
6:13
layout and add 5 box. Now let's change it to mobile view and as you can see that it will looks pretty good in mobile
6:22
as well. So it is fully responsive and if you don want to add the text and just want to add the icons then you can also do that So let me just go to the edit page here and if you go to the About Us page I have done the same here and here as you can see that I have removed the title and just add the icons
6:44
So if you have some limited area or you have narrow area then you can add the icons only
6:51
and exclude that text. So let me just show you. So I will select the row layout and let me just duplicate it
6:59
I will click on this first section here and I will go to the style and under the title I will disable the title
7:06
So let's do the same here. So let's title, disable that title here
7:13
Under the style, let's disable here. Okay, so if you want to add more than four sections then you can change the columns to five
7:29
and let's duplicate it here so let's copy it and I will paste it here and instead of
7:37
LinkedIn I can change the icon here so let's add something like Pinterest
7:45
okay as you can see five sections is added and if you want to reduce the width then
7:52
you can also reduce the width here so let's reduce the width like this
7:58
870 pixel. So it is quite looking good. And you can also select the content in edit max width from theme
8:07
So let's keep it like that. Now let me just update this page and let's view this page in a new tab
8:15
And as you can see that the social follow section is added
8:18
So here we are using the Cadence Block plugin and we have added the role layout and added
8:24
the info box blog to generate a social follow. button in WordPress
8:29
So I hope this video helps you add a social follow button in your WordPress website easily
8:34
And if you found this video helpful, then make sure to hit the like button
8:38
And if you want me to make more videos like this, then do let me know in the comment section
8:43
I will see you in the next video. Thank you
#Online Goodies
#Social Network Apps & Add-Ons