View Categories

Using Kadence Elements

Kadence Elements Hooks is a powerful feature of the Kadence Theme that allows you to insert custom content, code, or design elements into specific areas of your website without directly modifying the theme files. We use it on some of our websites and find it to be an excellent feature from Kadence, once you’re familiar with it, you’ll find it very easy to work with.

This feature uses “hooked elements,” placements that Kadence has built into its theme framework. You can insert content at these points using Kadence’s built-in options. With this feature, you can change custom layouts for archives and your blog page, add banners to headers and footers, and much more.

How to Use Kadence Elements Hooks

To customize elements in Kadence, you can use the Kadence theme options or Kadence Blocks plugin settings. Here’s a general guide on how to customize elements:

Enabling Kadence Hooked Elements:

If you can’t see Appearance > Kadence > Elements, you may need to install or activate Kadence Pro. For instructions on installing plugins, check out our plugin knowledge base.

kadence-pro-addons-hooked-elements

Accessing Kadence Hooked Elements:

To begin, go to your WordPress dashboard, navigate to Appearance > Kadence > Elements, and click “Add New” to create a new element.

Choose Element Type:

When your element is open, you will see different types of elements that you can create:

  • Content Section: To add custom content within a specific post or page.
  • Fixed Section: For elements that should be displayed in a fixed position, like sticky banners.
  • Template: To create a reusable design template.
  • HTML Editor: For coded content.
supported-kadence-element

Design the Element:

Use the Gutenberg editor to design your content. Utilize all available blocks, including Kadence Blocks, to bring your vision to life. Add text, images, buttons, forms, and any other necessary elements.

Select Hook Placement:

Once you have designed your element, simply scroll down to the Element Settings section and choose the Placement option to select where you want to hook your element. Kadence offers various hooks, such as:

  • Before Header
  • After Header
  • Inside Header
  • Before Footer
  • After Footer
  • After Title
  • Before Content
  • and many more locations throughout the theme.

Each hook placement represents a specific location where the element will appear on your site.

supported-kadence-element

Set Display Conditions:

Kadence allows you to control where and when the element should appear using Display Settings:

  • User Role: Show the element only to specific user roles (like Admins, Logged-in Users, Guests, etc.).
  • Device Type: Control whether the element shows on desktop, tablet, or mobile.
  • Post Type: Choose specific pages, posts, archives, or custom post types where the element should appear.
  • Time and Date: Schedule when the element should be displayed.

Additional Settings:

  • Expiration Settings: You can set an expiration date for the element to stop showing automatically after a specific time.
  • Custom Classes: Add custom CSS classes to your element if you need further styling or JavaScript interaction.

NOTE: Priority determines the display order of elements at the same location. A higher priority displays an element before one with a lower priority.

Configure User Settings:

Set it to the All Users option; this will allow everyone to see the element. To set this up, expand the Visible to drop-down menu, and you’ll find all the user groups and roles.

  • All Users
  • Logged out Users
  • Logged in Users
  • Administrator
  • Editor
  • Author
  • Contributor
  • Subscriber

Advanced User Settings: To show a promotional offer on your site only to logged-in users, select Logged-in Users and leave the rest unselected. To target multiple roles, click the Add Rule button and add other user roles.

NOTE: These advanced features are helpful if your site has free and paid plans with memberships.

Device Settings Option:

The option is handy if you need to show a promotional offer on your site only on specific devices. If no device preferences are set and it’s left as “All,” the element will display on all devices by default.

Setting An expiry date:

The option is handy if you need to show a promotional offer on your site that is time-sensitive. This is a handy feature because you don’t have to worry about manually removing your promotion offer.

To set your time, click the button; otherwise, this option can be left as is.

Publish the Element:

  • Once everything is set up, click Publish to make the element live on your website.

Example Uses for Kadence Elements Hooks:

  • Custom Call to Action (CTA) Banner: Add a promotional banner at the top or bottom of all pages.
  • Sticky Sidebar Widgets: Create a fixed element in the sidebar for newsletters or recent posts.
  • Custom Header or Footer Notices: Insert messages or disclaimers in the header or footer area.
  • Ad Placements: Use hooked elements for dynamic ad placements throughout your website.
  • Conditional Content Blocks: Show specific content blocks only to logged-in users or users with a specific role.

With our Glamsy Designs website, we created an alternative sidebar using Kadence Elements Hooks for our posts because we didn’t want the Table of Contents (TOC) in the content area. Also, with our Delicious theme, we used the Elements Hooks to create an alternative Post Title Area and a Film Strip above it which shows off content throughout the site. This can be seen in your knowledge base when logged in.

delicious post title and hero

NOTE: If your Hooked Element is out of place, check your Display Settings and clear your website cache to fix it, then recheck.

Tips for Using Kadence Hooked Elements:

  • Plan Your Hooks: Review the available hook locations and plan where you want your content to appear.
  • Use Dynamic Content: Kadence Elements support dynamic content tags, which can display dynamic data like post titles, author names, etc.
  • Minimize Clutter: Avoid overloading your pages with too many hooked elements, which may affect page performance.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.

Join The Party For Fun Updates & Big Discounts!