How to Use Kadence Hooked Elements Like a Pro in 2026

Written & Reviewed by: Indraneil Khedekar

Updated: January 5, 2026

Ecommerce Launcher is a reader-supported website. Our site may contain links which earn us a small commission at no extra cost to you. Learn more.
kadence hooked elements tutorial

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.
kadence theme pro plans

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.

buy kadence theme pro

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.

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.

download kadence theme pro plugin

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.

upload and install kadence theme pro

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.

activate kadence theme pro

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.

go to appearance kadence

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

activate kadence 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.

add new hooked element

You’ll see four element types:

  • Content Section.
  • Fixed Section.
  • Templates.
  • HTML Editor.
types of kadence elements

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.

add element 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.
add 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:

table of contents template by ecommerce launcher

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.

select element placement location

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.

set placement location before first heading tag

Leave the Priority as the default value of 10.

set element priority to 10

Note

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.

show element on single posts

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.
select post options

Note

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.

add display rule

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

exclude element setting

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.

set visibility to all users

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.

add rule button

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.

Note

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.

activate enable expires toggle

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.

turn off enable expires toggle

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.

publish kadence hooked element

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:

kadence table of contents in a blog post

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 author box example

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 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.