Kadence Hooked Elements is a powerful feature that lets you add a content section to various parts of your website.
You can do cool things like adding a countdown timer for your Black Friday sale that magically disappears when the sale begins.
Even adding a newsletter signup form on select pages, just where you need it.
No extra work is needed from you once it’s set up. This is the kind of flexibility Kadence Hooked Elements offers!
Curious about how it works? You’re in the right place!
In this tutorial, I’ll share:
- How to set up Kadence Hooked Elements like a pro.
- Tips and tricks you need to know to use Kadence Hooked Elements correctly.
- Three practical examples of using Kadence Hooked Elements on your site.
Let’s get started!
What are Kadence Hooked Elements?
Kadence Hooked Elements is a feature that lets you create an element and place it exactly where you need it on a page.
For example, you can use Hooked Elements to add social media icons to your blog’s sidebar so that it’s easy for readers to share your articles.
You can also replace sections on select pages, such as building a unique header for your product or contact us page.
Kadence Theme supports four element types:
- Content Section.
- Fixed Section.
- Templates.
- HTML Editor.
You can use each element for different purposes, such as adding content blocks to pages or replacing part of the site like your footer or sidebar.
In the next section, I’ll explain more about each hooked element type as I explain how to use hooked elements.
How do you use Kadence Hooked Elements?
I’ll show you how to automatically add a Table of Contents to your blog posts for this Hooked Elements tutorial. That way, you won’t need to manually copy and paste the Table of Contents block in each blog post.
Sounds good? Let’s get started.
1. Upgrade to Kadence Pro
Kadence Hooked Elements is a premium feature only available to Kadence Theme Pro users.
You can skip to the next step if you’re already on a paid plan.
But if you’re using the free version of the Kadence Theme, here’s what you need to do:
Go to the Kadence website and select a plan:
- Kadence Theme Pro.
- Essential Bundle.
- Full Bundle.

The Kadence Theme Pro plan only gives you access to the Pro version of Kadence Theme. On the other hand, the Essential and Full Bundle include a wider range of premium Kadence products.
All plans let you use Element Hooks and come with a 30-day money-back guarantee.
In my experience, the Kadence Full Bundle is the best value plan that Kadence offers.
If you don’t know which plan is the best for you I suggest reading my Kadence Theme review where I breakdown everything Kadence Pro offers.

Once you choose a plan, fill in your email address, billing details, and payment information. Agree to the terms, and click Place Order.
After paying, you’ll get a confirmation email. Then, you can access Kadence Theme Pro in your account.
Sign in to your Kadence account and click Download Files.

Depending on your plan, you’ll see all the premium products you can use.
Find the Kadence Pro Plugin – Premium addon for the Kadence Theme listing, select Download, and save the file on your computer.

In your WordPress admin panel, go to Plugins > Add New.
Click Upload Plugin, then Choose File and upload the Kadence Pro zip file you downloaded.
Click Install Now. After it installs, select Activate Plugin to complete the installation.

You’ll see a message in WordPress admin notifying you that your Pro Kadence Theme needs to be activated. Click the link to go to the Kadence theme dashboard.
Enter your License Key and License Email, and click Activate. You can find your License Key inside your Kadence account under License Keys.
Your Kadence Pro status will change from INACTIVE to ACTIVE.

Now you’re ready to use Kadence Pro on your website!
2. Enable the Kadence Hooked Elements feature
Go to Appearance > Kadence from the WordPress dashboard.

Scroll down to the Pro Addons section and switch on the toggle for Hooked Elements.

Then
3. Open Kadence Elements and create a new element
Click the Customize hyperlink in the Hooked Elements box to go to the Elements page.
You can also access the Kadence Elements page by going to Appearance > Kadence > Elements from the dashboard.
Then, click Add New to add a new Kadence element.

You’ll see four element types:
- Content Section.
- Fixed Section.
- Templates.
- HTML Editor.

Here’s a quick overview of each Kadence element type and what you can use it for.
Content Section
- Purpose: To create reusable blocks of content for different areas of your website.
- Placement: Can be inserted into posts, pages, sidebars, footers, or other widget areas using shortcodes or Kadence hooks.
- Examples: Call-to-action sections, testimonials, featured products, opt-in forms, and team member profiles.
Fixed Section
- Purpose: To create elements that stay fixed in a specific position on the screen, even as the user scrolls.
- Placement: Can be positioned at the top, bottom, left, or right of the viewport, or even within the content area.
- Examples: Announcement bars, header navigation menus, sticky sidebars, social media icons, and live chat widgets.
Templates
- Purpose: To replace parts of your website’s template with custom-designed content.
- Placement: Override default areas like headers, footers, single post layouts, archive pages, or custom post-type templates.
- Examples: Creating unique headers for different pages, designing custom footers, and building landing pages with distinct layouts.
HTML Editor
- Purpose: To create elements using raw HTML code to control your website structure and styling fully.
- Placement: In addition to being used as content sections in all areas of your site, HTML code can be placed as scripts before the heading, body, and footer tags.
- Examples: Embedding custom forms, integrating third-party widgets, building complex layouts, adding dynamic elements, and overriding default theme structures.
For this Kadence Hooked Elements guide, I’ll select Content Section because we’ll automatically insert the Table of Contents block into blog posts.
4. Design your element
Once you select an element type, add a title for the element where it says Add title.

Then, add the Kadence Table of Contents block to your WordPress post.
There are two ways you can add a Table of Contents block to your post:
- Click the + (Add Block) button, search for Table of Contents, and select the block.
- Or, type “/table” in your post. This shows all blocks that start with ‘Table,’ including the Table of Contents block.

Select the Table of Contents block of your choice and style it.
This detailed guide explains how to style and configure the Kadence Table of Contents block. Give that a read if you need help.
Also, if you want some stylish, ready-to-use ToC designs, grab our Kadence Table of Contents templates for your website. They’re free, import instantly, and save you the effort of designing one from scratch. 🙂
Here’s an example of one of our free Table of Contents templates:

After adding a Table of Contents block or choosing a design template, proceed to the next step.
5. Choose Placement for the element
Now that your Kadence Element is ready, let’s ‘hook’ it into a part of your site.
Click on the Element Settings icon in the upper-right corner of the Elements page to open the settings for your element.
In the Placement section, click the dropdown to view the different hook areas available for your element.

The placement options vary based on the selected element type.
If you’ve selected a “Content Section” element like I have, you’ll see 49 placement options.
If you want the Table of Contents block to show up before the first H2 heading, select Inside The Content > Before First Heading Tag.

Leave the Priority as the default value of 10.

Priority helps you set the display order of elements hooked to the same location. Setting a higher priority for an element will allow you to display it before another element with a lower priority.
6. Configure Display Settings
Display Settings allow you to choose where your element is displayed based on specific conditions.
Since I want the Table of Contents to show up on blog posts, I’ll select Posts > Single Posts from the Show On dropdown.

Under Select Post By: you’ll see these options for Single Posts:
- All: Show the element on all posts.
- Group: Add the element to posts based on “Categories” or “Tags.”
- Author: Add the element to posts by a specific author.
- Individually: Add the element to posts by individually selecting them.

You’ll only see the Select Post By option if you select either Single Pages or Single Posts.
You can also add more rules by clicking the Add Rule button and following the same workflow I’ve described above.

To hide the element on certain parts of your website or posts, use the Exclude Settings > Hide On option.

For example, choose Tag Archives from the Hide On dropdown to keep the Table of Contents block from showing in posts with certain tags. Then select the desired tag from the tags you currently have set up on your site.
7. Configure User Settings
Now, let’s decide which users can see your newly created element using User Settings.
When you expand the Visible to drop-down menu, you’ll find all the user groups and roles to whom you can show your element.
Here’s a list of the user groups and roles you’ll see on a standard WordPress install:
- All Users.
- Logged out Users.
- Logged in Users.
- Administrator.
- Editor.
- Author.
- Contributor.
- Subscriber.
I’ll select the All Users option for this Hooked Elements tutorial. This will allow everyone to see the Table of Contents element.

But let’s say you want to show a promotional offer in the header only to logged-in users. In that case, you can select Logged in Users and leave the rest unselected.
To target multiple roles, you can click the Add Rule button and add other user roles.

For example, suppose you run an online community with Starter, Pro, and Premium subscribers. And you want to display a 10% discount offer in the header for Pro subscribers and a 20% discount for Premium subscribers. Here’s how you can set that up.
If you’re using a membership plugin that adds custom user roles, you can select “Pro” from the “Visible to” dropdown and then “Premium” after clicking “Add Rule.”
This feature is also helpful if your site has free and paid plans. For example, you can display ads only to users on free plans.
8. Configure Device Settings (Optional)
Device Settings allow you to specify the devices where your element will be displayed.
For example, choose Desktop from the dropdown menu if you want a sidebar Table of Contents block to show only for desktop users.
If you don’t set any device preferences and leave it to All, the element will display on all devices by default.

We have a detailed guide on setting up a sticky sidebar Table of Contents with Kadence. Feel free to give it a read if you want to learn how to set it up.
9. Set the expiry date (Optional)
Expire Settings allows you to set an expiry date for your element for time-sensitive content like promotional offers.
I think it’s a handy feature because you don’t have to worry about going in and manually taking the banner out once the promotion is over. It’s always good to have one less thing to do 🙂
You can toggle the Enable Expires setting to turn it on.

You’ll see a date/time field with a calendar. You can then select the date and time for your element to expire.
Since we’re creating a Table of Contents element that we want to display without expiry, we’ll leave Enable Expires turned off.

10. Publish the Hooked Element
At this point, you’ve added your Table of Contents block and configured its display settings. The only thing left to do is to publish it.
Before you do, double-check your settings to ensure everything is correct. Then, click the Publish button on your element to make it live.

That’s it! Your Table of Contents block will be added to your blog posts immediately.
Open a random blog post on your site to make sure everything is in order. Here’s how my Table of Contents looks:

Pretty cool, right?
If your Hooked Element isn’t in the right place, recheck your Display Settings and clear your website cache. That should fix things.
Examples of Kadence Hooked Elements
Looking for ideas on how to use Kadence Hooked Elements to customize your site?
Here are three examples to spark your creativity!
1. Affiliate Disclosure

The Points Guy includes affiliate disclosures at the top of their blog posts and in the footer.
You too can add affiliate disclosures to your site in the same way using Kadence Hooked Elements. Here’s a quick run down of how to set it up.
For the top of the blog post, use the following settings:
- Element type: Content Section
- Placement: Single Inner Content > After Inner Title Area or Before Entry Content
- Show on: Single Posts
For the footer disclosure, use these settings:
- Element type: Content Section
- Placement: Replace Footer
- Show on: Entire Site
2. Author Box

Cloudways features a simple author box at the bottom of their blog posts. It has a clean design and is easy to read.
You can recreate this using the “Info Box” from Kadence Blocks.
First, turn off the “Show post author box” setting in your WordPress Customizer and then configure the Element settings as below:
- Element type: Content Section
- Placement: Single Inner Content > After Inner Content
- Show on: Single Posts
- Select Post By: Author > Select Author
3. Mega Menu

Siteground has a modern, minimalist mega menu layout that combines media and text for easy navigation.
I’ve written a detailed guide on creating a Kadence mega menu using Hooked Elements and Ultimate Menu. Feel free to give it a read.
Also, remember to grab our free Kadence mega menu templates for your website as a bonus.
Final thoughts on Kadence Hooked Elements
That’s everything you need to know about using Kadence Hooked Elements!
I’ve covered how to use them correctly, with practical examples including a Table of Contents, an author box, an affiliate disclosure, and a mega menu.
What’s your take on Kadence Element Hooks? What features would you like to see added? Leave a comment below and let me know!
Have more questions? Get in touch with me. I’m here to help you make the most of your Kadence subscription.


