How to Use Kadence Elements: The Ultimate Guide (with Screenshots)

You’ve heard of the “Kadence Elements,” right? But you are not sure what it is. Is it a theme or a plugin?

Kadence Elements is a feature in the Kadence Theme. Kadence is a WordPress theme that allows you to create beautiful, responsive pages with drag and drop. It is highly user-friendly and easy to use, making it an excellent option for those new to WordPress or website design in general. Kadence Elements is a great way to create custom sections or templates, and it includes a wide range of features and options that make it versatile and powerful.

What is Kadence Elements?

Kadence Elements is a no-code method of displaying content anywhere on the page. It allows you to take complete control over how your content looks on your website. There are a variety of different ways that you can use Kadence Elements to display your content, including templates and shortcodes. You can start creating Kadence Elements by clicking on the “Customize” link or navigating to the Elements link on the sidebar under Appearance > Kadence > Elements.

Kadence Elements is extraordinarily versatile and can be used for many purposes. It is perfect for those who want to create custom pages or sections without coding. The possibilities are endless!

Let’s look at how to use Kadence Elements to design your way.

You can use Kadence Elements to display:

• Affiliate disclosure text
• discount box
• author bio
• Call to action
• customize header
• styling elements
• and many more

What are the benefits/feature of using Kadence Elements?

Design your way

• You can use Kadence Elements to create custom pages or sections without knowing how to code.
• It includes a wide range of features and options that make it robust.
• Kadence Elements is perfect for those who want to control how their website’s content looks.
• Flexible shortcodes – Kadence Elements includes flexible shortcodes that allow you to display content anywhere on the page.

Theme Builder / Page Builder

Kadence Elements has a Theme Builder’s functionality, allowing you to create custom page layouts with drag-and-drop Gutenberg Blocks.

What are some example use cases for Kadence Elements Templates?

Building a custom blog layout: You can use Kadence Elements to create a customized blog layout without coding anything. Use Gutenberg Blocks to drag and drop your desired elements into place.

Customizing an individual blog post or category view: Kadence Elements allows you to customize the look of individual blog posts or categories.

Customizing the archive of a custom post type: You can use Kadence Elements to customize the archive page of a custom post type. It is perfect for those who want to control how their content looks on their website.

Styling individual posts in custom post type: Kadence Elements also allows you to style individual posts within a custom post type.

Making a custom page title/hero area: Kadence Elements allows you to create a custom page title or hero area without coding anything.

As you can see, Kadence Elements is universal and can be used for many purposes. It is the perfect way to take control of your website’s content and design.

How to get started with Kadence Elements?

Buy Kadence Pro

If you’re interested in using Kadence Elements on your website, you first need to buy Kadence Pro. Kadence Pro is the addon to the free Kadence theme that gives you access to all of Kadence Elements’ features.

Kadence Theme Pro is not available as a standalone plugin. You need to buy either the Essential Bundle or the Full Bundle. I recommend buying the Full Bundle since the price difference is not that big, and you get another premium plugin from Kadence.

Kadence Conversions is an excellent addition to the Elements functionality.

Kadence login

After you have purchased Kadence Pro, you need to log in to the Kadence member area and download the zip file.

Install the zip file by going to Plugins,

Once you have Kadence Pro installed on your WordPress site, you can begin using Kadence Elements to create beautiful, responsive pages and posts, Add New, Upload Plugins Button. Once uploaded, there is a new menu available under Appearance. Don’t forget to register Kdence Pro first by going to Appearance, Kadence.

Turn on Hooked Elements

How to use Kadence Theme hooks?

Go to Appearance, Kadence Elements on the left side of your WordPress dashboard.

Click the add new button; you will see four different element types

• content section
• fixed section
• template
• HTML editor

Content Section

You can design and build any sections you need using Gutenberg blocks, Kadence blocks, or even your page builder when you choose Content Section.

Fixed Section

In addition to Kadence Hooked Elements, Fixed Section Kadence Elements are insanely powerful. They allow you to create any section you want with Gutenberg blocks, Kadence blocks, or your page builder, except now you can fix them on your website, so they stay as users scroll.

Here are all the fixed placement options for a Kadence element:

• Fixed On Top
• Fixed Above Transparent Header
• Fixed Top After Scroll
• Fixed Bottom After Scroll (no space below footer)
• Fixed Bottom After Scroll
• Fixed On Bottom
• Fixed Bottom (no space below footer)

Template Kadence Element

Using the Template Kadence Element, you can build different templates for your pages, similar to theme builder features you find in Elementor or Divi.

Blog and archive pages can be customized entirely using this template element.

HTML Editor Kadence Element

Selecting HTML Editor for your element will present you with a slightly different screen that allows you to input code.

The editor allows you to input any HTML code you want for your site.

How to use Kadence Elements to create a custom layout?

You can create a custom layout with the Kadence Element type template. There are various scenarios of how to use a template. Here are a few placement conditions you can set in Kadence Elements.

• Replace Header
• Replace Footer
• Replace Sidebar
• Replace single post content
• Replace 404-page content

Kadence Elements offers a lot of display settings where you want to show the template on your website. For example, you can create a temporary section for a specific time and replace the default page.

How to use Kadence Elements to create a custom header?

When choosing the Element type Template, select “Replace Header” to place your custom header. If you want to show a different header on your website, set the display condition where it will appear.

How to use Kadence Elements to create a custom footer?

Choose the Element type Template to create a custom footer and choose “Replace Footer” for the placement. Set the display condition on where on your website you want to show a different footer.

What are other options of Kadence Elements available for your WordPress site?

How Are Kadence Element Hooks Different compared to other themes?

Several Kadence theme rivals on the market now offer element hooks well before the Kadence theme was available. Some of my favorite themes that include hooks are Astra and GeneratePress. However, no one can match the features and capabilities of the Kadence Element Hooks.

For example, even beginners may use Kadence hooks thanks to their straightforward user interface and functionality.

Most other themes don’t have the same hooks feature that Kadence offers.

Kadence Element Hooks also come with many other options such as placement settings, expiry settings, and more that you won’t find in any different theme’s hooks.

Therefore, if you want to use the true power of hooks, then be sure to use the Kadence Element Hooks feature found only in the Kadence Pro Theme.

How I use Kadence Elements

I’m writing tech blogs, and I’m also an Amazon affiliate. Kadence Elements are an excellent way to place my product recommendation in the text without disturbing the reader.

I set the display option to ‘single post’, and for placement, use ‘inside the content.’ There are several options to choose from. For example, after the ‘fourth paragraph.’

A user from the Kadence Facebook community wrote a code snippet to be more flexible for the placement of the section.

Just replace the _html_occurence 10 and the shortcode number 7602 with your shortcode number of the element.

add_filter( 'the_content', 'my_kt_insert_content_post');
function my_kt_insert_content_post( $content ) {
$insert_after_html = '</p>';
$insert_after_html_occurence = 10; // modify the number of the paragraph
$kt_element_shortcode = do_shortcode('[kadence_element id="7602"]'); // copy your element shortcode
if ($kt_element_shortcode ==='') {
return $content;
}
$kt_element_to_insert = '<div class="my_kt_insert_content_element">'; // add the classes that you need if any
$kt_element_to_insert .= $kt_element_shortcode;
$kt_element_to_insert .= '</div>';
return my_kt_insert_element_shortcode( $kt_element_to_insert, $insert_after_html,$insert_after_html_occurence, $content );
}
function my_kt_insert_element_shortcode( $kt_element_to_insert, $insert_after_html,$insert_after_html_occurence, $content ) {
$elements = explode( $insert_after_html, $content );
foreach ($elements as $index => $element ) {
if ( trim( $element ) ) {
$elements[$index] .= $insert_after_html ;
}
if ($insert_after_html_occurence== $index + 1 ) {
$elements[$index] .= $kt_element_to_insert;
}
}
return implode( '', $elements );
}

Credit goes to Fernando Vasco for this code snippet. He is a web developer and a member of the Kadence Facebook group.

You can add the code snippets from the WordPress repository with the Plugin code snippets. It is free. I published an article about Code Snippets in case you are interested.

The Kadence developer said there would be a solution in a later release, but until then, Kadence officially said a code snippet is a good option. Using this method, you are free to create more Kadence Elements and place them in your text.

FAQ

Conclusion

Kadence Element Hooks is one of the many outstanding features of Kadence Pro. The ideas are endless; what you can do with Kadence Elements, your imagination is the limit.

Please let me know how you are using Kadence Elements. You can also write me an email at info@edywerder.ch.