Up next in 10
Kadence Theme Tutorial_ How to use Hooked Element in WordPress for customization_
550 views
Jan 28, 2024
The video titled "Kadence Theme Tutorial: How to Use Hooked Element in WordPress for Customization" is a comprehensive guide for WordPress users using the Kadence theme. The tutorial focuses on leveraging the Hooked Element feature to customize various elements of a WordPress website. Viewers will learn how to use hooks to add, modify, or remove content in specific areas of their site, providing them with advanced customization options. The step-by-step instructions make it accessible for users of varying technical expertise. By the end of the tutorial, WordPress users should have a clear understanding of how to harness the power of Hooked Elements within the Kadence theme to tailor their website to their unique preferences and requirements.
View Video Transcript
0:00
Hello everyone, welcome to Key to Blogging. I am WebSik Fadi and in this video I will show you how you can use
0:05
your Cadence hook element in your WordPress website. And as you can see the subscribe button is
0:12
used using the hook element. And when I click on the button, it will take me to the newsletter page
0:19
So in this way you can use hook element and customize your WordPress website dynamically. So let's
0:26
check how you can do that. So first of all, go to the website. So first of all, go to your WordPress dashboard and here you have to add the Cadence Pro Theme plugin to achieve
0:36
that. So once you install the Pro plugin you will see this option Pro Addons and here you have
0:44
to enable the hook element option. So just click on the toggle button and your hook element is added
0:51
in your Cadence Theme tab. So click on Element tab and here you have to add the
1:00
hook element. So here I have already added the call to action button in this website
1:07
So as you can see, the newsletter page has not showing the button, but when I click on the
1:13
home page, it will show the newsletter button. So in this way you can hook the element
1:19
in a specific page and exclude them in specific page. So let me just read this button first
1:28
Let's click on Add New. Now you have three options. One is default, another one is fixed and code
1:36
So in default option you can choose elements from any of the blocks like your Gutenberg
1:43
blocks or your WordPress block and hook it in the blog post
1:48
And if you want to add a button or something which is fixed when a user scroll down the page
1:54
then you can use the fixed button. So let me just click on the fixed button and here you can choose this plus icon and you can select
2:04
advanced button. Now name it like subscribe and you can design this button
2:13
So click on this dot button and click on show more and here you can select the button style So let me just change the button color like this
2:30
And let me just change the background color of this button. And you can also add a border color
2:37
So let me select white. And here switch to hover and I can change the hover color
2:45
So it is black. So let's change the border and the button is ready
2:53
Now you can add a link. So click on it and search for your page
2:59
So here I am selecting the newsletter. So select the page and the button is added
3:09
So all you have to do is select the hook position. So click on this button and you have to do
3:14
And here you have to select the placement where you want to hook this button
3:20
So here you have lots of options. So here I will choose fixed bottom after scroll and select the no space below footer
3:30
So click on it and leave this priority to 10 and scroll distance to 300 and here you have to
3:38
select the width to auto. Now you can select the position. If you want to add the button to the left or to the right, so I will click on the right
3:48
And you can select the x-axis and y-axis distance. So let me just select the x-axis distance to 80
3:56
So here type 80 and I can set the y-axis distance to 20
4:03
So you can always change the settings and select the position according to your website
4:10
Now select the display setting and click on this and here you have seen a lot of options
4:16
So I will click on the entire site and I will set exclude on the specific page
4:24
So I will select single page. Now you can select the all to individual and here click on items
4:33
And here you will see the list of pages. So I will exclude the news letter pages
4:38
And scroll down Now you can select the user setting So I will leave this to all user but if you want to show any promotional message then you
4:50
can select locked out users so that locked in user will not see this message
4:56
So here in this case I will select all users and here you have to select the device option
5:03
So you can specifically set the device option, so I will select the desktop option so that the
5:09
button will not show in the mobile device. So now click on Publish button
5:18
Now refresh this page and as you can see the button is show up here
5:24
So you can adjust the button position by clicking on the y-axis and x-axis as we said in
5:31
this settings. So let me just change this to 10. Now click on update
5:41
Now refresh this page. As you can see, the button is moved a little bit in the below
5:49
In this way you can hook a button in a specific page and in a specific location and it will
5:54
stick and when I scroll down the button will appear. So in this way you can use the hook element inside the Cadence Pro theme
6:03
And let me just add a different hook element. So let me just add a title here
6:10
So I will set this to call to action so that I can remember this hook element
6:16
So let's go back. Now let me add an affiliate hook element inside our WordPress website
6:24
So here in this case I will select the default and let me just add these two affiliate disclosure
6:33
and let me add an affiliate disclosure message. So I will select this and you can add a link like this and select the text and add the link
6:51
So search for the affiliate disclosure and select the page. Now the affiliate disclosure is added
7:00
So you have to choose the placement. So here you will get different settings As you can see you can set it to body or header or you can set it to the content So I will select single inner content and here I will select after inner content
7:21
or after entry content and set this priority to 10. Then I will set the display element to a specific
7:31
page, so I will select the single post and you can also exclude certain authors
7:38
So I will select to all and here in the user setting I will select to all users and here
7:47
in the device setting I will select to all. Now you have to publish this book element so let me
7:54
just publish it. Now let's go to the website and open a blog post
8:01
Now select a blog post. Now let me scroll down to the bottom and as you can see the Appellate Disclosure is hooked
8:12
So let me just open a different post and as you can see the affiliate disclosure is added
8:21
in our blog post. So in this way you can dynamically add any type of hook element to your WordPress website and
8:29
And if you want to add a different author box, then you can add an author box from scratch
8:34
and hook it inside your blog post. So in this way you can use the hook element in your cadence theme
8:42
And this doesn't come with the free theme so that you have to purchase the pro theme from
8:48
Cadence. And if you want to purchase the pro themes, then you can use the below link in the
8:54
description. I hope this tutorial will help you add a hook element in the
8:59
your WordPress website and customize it like a pro. And if you have any problem during this setup, then you can ask me in the comment section
9:08
or you can join our discussion group and the link of this Telegram discussion group is in
9:13
the description. And if you like this video, then hit the like button and subscribe to my channel for more upcoming
9:19
videos like this. Thank you. I'm