Up next in 10
How to Add a Custom Author Box in Kadence theme _ ✸ Hook Element Tutorial ✸
201 views
Jan 27, 2024
In the video titled "How to Add a Custom Author Box in Kadence Theme | ✸ Hook Element Tutorial ✸," viewers will be guided through the process of enhancing their WordPress website, specifically in the Kadence theme, by adding a custom author box. The tutorial leverages the Hook Element feature to seamlessly integrate a personalized author box, providing step-by-step instructions for customization. Whether you're a WordPress user seeking to add a professional touch to your blog or a Kadence theme enthusiast looking to explore advanced customization options, this video offers practical insights into using the Hook Element to incorporate a unique and visually appealing author box on your website. Follow along to elevate the visual and informational aspects of your WordPress posts with this comprehensive tutorial.
View Video Transcript
0:00
Hello everyone, welcome to Kit Blogging and this video I will show you how you can create a custom
0:04
author box to your Cadence Theme. So let me just open a blog post and let's scroll down to the
0:12
bottom and here as you can see, this is the author box that we get by default in Cadence Theme
0:19
So you can replace this author box style and you can add your own custom author box to your
0:25
cadence theme. So for this we will use the Cadence Element feature
0:29
feature which comes with the Cadence Pro theme. So if you want to add a custom author in place of the default author, then you have to install
0:38
the Cadence Pro theme. And if you want to buy this, then you can use the link in the description
0:44
So let's go to the dashboard and let me just show you how you can turn this default author
0:50
box. So for this, go to the appearance section and here click on customize
0:57
And here you have to click on the blog post section. and click on single post layout
1:03
So let me just open that blog post and scroll down to the author box
1:11
Now you have to scroll down and here you will see this option, so post author
1:19
So we can turn this up so that the default author box will gone in this place
1:25
And you can also add a different style like if you click on the
1:29
normal option it will show the author box in this way. So you can also further customize
1:36
this look and fill of the default author box but we will create a new author box from scratch
1:44
So for this let me just close this author box and let's publish this. Now let's close this
1:53
customizer and here click on appearance section and click on cadence element
1:59
Now here we will add a new author box. So click on Add New and here we will choose default option
2:12
Now let me just add a title like custom author box. Now click on the plus icon and select the row layout option
2:25
So you will get the row layout functionality using the Cadence Blog plugin
2:29
So here I will add this fourth option. So click on it
2:35
And here you can add your own author image. So for this I will click on the image option and let me just select an image from the media library
2:44
So I will type profile and let me just select a image from here
2:51
So I will select this image. Now the image is added. me just make it to round corner and let reduce the file size so i will select it to 25 and let make it to align center and let click on this whole
3:12
section or you can select this section from here. Just select this section and make it to align middle
3:20
Now let's close this and here you can add a description. So let me just click on advanced heading
3:30
And here I will type about author. Now click on Enter and here you can add a short description
3:41
So for this let me just copy the description from here. So I will go to the dashboard and I will go to the profile section
3:56
And let me just copy the description. And I will add the description here
4:07
Now you can select the whole row layout and make a custom background
4:12
So I will add a background color like this. And here you can put a round border
4:19
So I will click on border setting and I will type the border radius of 5 or I will type border
4:27
radius of 15. Now you can add a border color if you want. So let me just add a border color
4:36
like this and I will set the border width from top it is one and from the bottom it is one
4:45
Or you can also add border in left and right position like this. Now you can add your own
4:54
social media icons. So for this I will type icons and click on the icon option
5:03
Now here you can add multiple icons. So I will type 3 or 4
5:10
So let me just add 4 icons here and let me just make it to left align
5:17
Now click on this icon 1 setting and let me just add a social media icon
5:22
I will type Facebook and I will take Facebook. I will select this icon. Now you have to select the icon 2. And let's change the icon from here
5:37
And I will type Instagram. And I will choose this option. Now let's change the icon 3 and make it to
5:48
Twitter. Now let's change the icon 4 and let's add a LinkedIn icon. Okay, now we have add the icon. So let's check the icon color. So you can either
6:06
use the official color or use your own brand color So to use the official color let me just search for the Facebook official color So I will type Facebook X code
6:23
And here you will get the official color of Facebook. Just copy this and let's go to the editor and let me just select the icon one
6:33
And here click on icon color and let's pay the head. hacks code and as you can see the official color of Facebook is here. So in the same way we can add
6:44
the Twitter color. So I will change the Facebook to Twitter. And let me just copy the official
6:52
color of Twitter. Now let's select the Twitter icon. So the Twitter icon is icon 3. So let me
7:01
just change the icon color here like this. So in this way you can add
7:06
different icons and here you can add the icon link. So just add the link in this position
7:15
So you can add links to all of the icon. Okay, now the author box is ready
7:21
You can display the author box in the post. So for this you have to select this icon and here in the placement option, you can set the placement
7:33
So I will select after content. content and here in the display setting you can display the author box in entire site but
7:45
i don't want that so i will select it in single post or you can also display it in any other
7:52
page but i will select the single post and here you can also assign it with individual author
7:59
so i will click on author and select the author profile so that it will only show in specific
8:06
speak author. Now you can also exclude some settings but I will not do that
8:13
Now click on user setting and here you can be visible to all users
8:18
Now click on device setting and make it to all. And you can also set an expiry date but I don't use the expiry date in author section
8:27
So I will leave this as default. Now let's publish this. Now let me just open a blog post from here
8:43
Okay, we have selected the wrong position. So you have to show the author box in this position
8:51
But now it is showing here. So for this I will go to the element section and here in the placement section, let me just
9:00
choose another placement. So here let me just scroll down and if you are using the placement
9:05
using a content and sidebar, then you can select this option. So here I am using the single inner content So let me just select this after entry content So let me just select this option And let update this Now let refresh this page Okay now the author box is showing in the
9:32
right position. So in this way you can create your own custom author box in the cadence theme
9:38
So let me just design this section. a little bit. So just click on this option and here click on huge theme inner width. Now let's
9:51
update this. Now let me just refresh this. Okay. Now click on this whole row layout and let me just
10:04
select the align to middle. I can also add a call to action button instead of the social media
10:11
button. So let me just delete the social media buttons from here. And here I will use the
10:18
learn more link as a button. So let me just delete this section from here and click on Enter
10:26
Now I will add an advanced button here. So just click on Advance button and let me just type
10:34
Like Learn More About Me or click on the button setting and here you can select the button
10:45
one setting and let me just change the button color to red or change the button text to white
10:52
and change the background to red. Now let's change the border color to something like that
11:01
Now let's add a border radius of 30. Now let's add an icon here
11:10
So I will choose this icon. Now I will make the button alignment to left
11:18
Okay, now the button is added in this author box. Let's update this
11:26
Now let's refresh this blog post. as you can see, the button is added to the author box
11:33
So in this way you can easily create your own custom author box in Cadence theme and you can easily
11:40
close the default author box section. I hope you got the idea how the Cadence Hook Element work and if you want to learn more
11:48
about Cadence Hook Element, just search for this Hook Element tutorial. I will type Hook Element and click on Enter
11:59
And here you will see this tutorial, Cadence hook element so that you will know more about how to use
12:04
the hook element. And if this video help you add a custom author box to your website, then make sure to hit the
12:12
like button. And if you want to learn more about Cadence theme or WordPress tutorial, then make sure to subscribe
12:18
this channel and I will see you in the next video. Thank you