This Kadence tutorial will teach you how to get started with the Kadence free theme, use its features to customize your site, upgrade to Kadence Theme Pro, and use Kadence Pro features.
I’ve used the Kadence Theme since it was first released in 2020. I’ve built over 50 websites using Kadence Theme, and now, I’m going to show you how to use Kadence WordPress Theme to design an attractive website.
Let’s get straight to it.
Kadence Theme tutorial: Steps to use the Kadence Theme
All you need to follow this tutorial is a WordPress website. If you don’t have one, follow my Cloudways tutorial to set one up for free.
Why Cloudways? Read my Cloudways review to learn why I recommend using Cloudways to host WordPress and WooCommerce sites.
Once you have a website, follow the instructions in this guide to get started with Kadence.
1. Install the free Kadence Theme on your website
Log in to your WordPress dashboard, go to Appearance > Themes, and select Add New.
Search for “Kadence” in the search bar.
Hover your mouse over the Kadence Theme thumbnail, select Install, wait for the installation to complete, and click Activate.
That’s it. You’ve successfully installed and activated the Kadence theme on your website.
2. Install Starter Templates and import a ready-made template
Once you activate Kadence Theme, you’ll see a banner in your WordPress admin asking you to install Kadence Starter Templates.
Starter templates are pre-designed website templates you can import into your website with one click. That’s one of the easiest ways to make your website look professional without hiring a WordPress developer.
You don’t have to import a starter template if you don’t want to. But doing it will speed things up for you.
If you’re installing Kadence on an website with existing content, skip to the next step.
Starter Templates are meant for use on new websites. Do not import Starter Templates on a site with existing data, as it will override your existing settings.
If you’re starting from scratch and want to use Kadence Starter Templates, click Install Kadence Starter Templates, or go to Plugins > Add New, search for “Starter Templates,” select Install, and then click Activate.
Once installed, go to Appearance > Kadence > Starter Templates.
Browse the theme template options and select one for your website.
Use the filters provided to choose Free only themes. You can also switch from Gutenberg-based theme templates to Elementor-based templates using the dropdown menu in the top right corner.
Select your preferred template to launch the template import page.
For this Kadence tutorial, I’ve selected the Single Product template, a free, Gutenberg-based, WooCommerce-ready Kadence theme template.
At this stage, you can customize the colors and fonts in the template or import the site as it is and configure it later. I like how the site looks by default, so I’ll import it as is.
Depending on the theme template you select, you may also see a message notifying you that Kadence will install any missing plugins required for that template.
Select Full Site to import the website template and pages.
Kadence will need a few seconds to install missing plugins and import all the content to your website. Once it’s done, you’ll see the following message.
Click Finished! View your site to view the front end of your website.
Kadence imports all the images and content and configures basic WordPress settings like setting the homepage and blog page for you.
All you need to do after that is customize the design and content to your liking and go live.
3. Define your site identity
Open the WordPress customizer by going to Appearance > Customize or selecting Customize from the top WordPress admin bar.
Kadence extends the default WordPress customizer functions and adds a bunch of its own tools to help you take control of your website design.
Here’s an image comparing what the WordPress customizer looks like before and after installing Kadence Theme:
As you can see, Kadence adds many options to help you customize your site colors, fonts, headers, and layouts. I’ll explain how to use each of those tools. First, let’s set up your website’s site identity.
Select Site Identity from the WordPress customizer menu and click Site Title and Logo Control.
Upload your brand logo using the Change Logo option and set a max width for the logo using the Logo Max Width slider.
Next, use the Logo Layout section to define how your Logo, title, and tagline display in the site header.
You can also customize your site title using the Site Title setting.
Currently, my website displays the default URL as the site title. But I can easily edit it to use something like “My Cool Store“.
If you’re using a tagline in your Logo Layout, enter a Tagline.
Then, choose Site Icon and click Select site icon to upload a favicon file for your site.
A favicon is the logo you see in the browser tab. Like this:
Go back to the Site Identity section and select the Design tab.
Here, you can customize your Site Title Font, Site Title Hover and Active Colors, and add Padding around the logo and site title.
You can also toggle between the Desktop, Tablet, and Mobile preview options to view how your design changes appear on different devices.
Once you’re happy with the layout of your logo, select Publish to make your changes live.
Social media is also a crucial part of your brand identity, and Kadence gives you an easy way to add social media links to your website from the WordPress customizer.
Go to General > Social Links and paste your social media profile links for Facebook, Twitter, Instagram, and 33 other social media platforms. You can also add up to 3 custom links.
Click Publish to save your social media profile links.
After that, Kadence will automatically add social media links to related icons when you use social media widgets in the header or footer of your site.
You won’t have to set them up manually each time, and you can update all links from a single place in the WordPress customizer.
4. Set and fine-tune your website color palette
Next, let’s look at how to set a global color palette and use it to change colors across your site.
Go to Colors & Fonts > Colors to access your site’s global color palette.
The Global Palette is a collection of 9 colors used across your site. The first two colors are accent colors, the following four are contrast colors, and the last three are base colors.
If you hover your mouse over any of the nine color options, you’ll see a tool-tip describing its purpose, such as:
- 1. Accent.
- 2. Accent – alt.
- 3. Strongest text.
- 4. Strong Text.
- 5. Medium Text.
- 6. Subtle Text.
- 7. Subtle Background.
- 8. Lighter Background.
- 9. White or offwhite.
Clicking on the small folder icon under the colors launches a popup with eight pre-configured color palettes and an import/export tool to bring colors from other sites.
Feel free to create custom color palettes to give your site a unique look, or use a preconfigured color palette if you’re in a rush.
No matter which palette you choose, make sure it’s accessible. You can use a tool like WebAIM’s contrast checker to test color contrasts to ensure your site and link text are readable.
Scroll down to the Backgrounds section and configure the background colors for Site Background, Content Background, Title Above Content Background, and Title Above Content Overlay Color.
You can even set custom background colors based on the device by selecting the Computer, Tablet, and Mobile icons and setting background colors for each device.
Scroll to the Content Links section, set the Link Style for your website, and choose the color palette for your site links. The first color option sets the default link color for all links on your site, and the second color sets the link color for hover.
Finally, click Publish to update your color palette settings.
5. Manage site-wide typography
Like with colors, you can manage the typography settings across your site from Colors & Fonts > Typography.
The Typography section allows you to set and manage the base font for your site and individually control the font color, family, weight, and size for each heading type.
And if that’s not enough, you can adjust the font size, line height, and letter spacing for desktops, tablets, and mobiles individually. That’s extremely helpful.
First things first, set up the Base Font for your site. If you imported a Starter Template, you’ll have one set up for you. But you can change its color, family, weight, and size by selecting the available font configuration buttons.
Now, what if you haven’t imported a Starter Template? You can click the little folder icon to access preconfigured font pairings in that case.
The Headings section allows you to set and customize the typography for your H1 to H6 heading tags. Set a base font family and then individually configure the colors and font sizes to your liking.
You can also click the down arrow icon to preview what the text will look like.
If you don’t like the updated font styling, click the reset value icon to reset the typography values to the default settings.
Next, scroll to the Title Above Content section and configure the H1 Title and Breadcrumbs settings.
The H1 Title setting, by default, uses the H1 text settings from the Headings section.
Assigning color and font styling here overrides the H1 title settings for page and post titles.
On the other hand, Breadcrumbs are the small text path, usually at the top of a post or page, that describe where a user is on your website.
For instance, here’s the breadcrumb of this page:
You can also toggle Enable Font Smoothing to remove any pixelation or jagged edges from the font on your website. Leave it disabled if everything looks fine as is.
The final section of the Typography settings lets you add Google font subsets for regional languages. You only need to select subsets if your website uses a language like Arabic, Chinese, or Korean.
Skip this if you only use English on your site and click Publish to update your typography settings.
6. Style your buttons
The Kadence Theme allows you to customize button styling across your website. That way, you can add buttons to your posts and pages without worrying about styling them manually or creating an inconsistent look.
To style buttons in Kadence, go to Colors & Fonts > Buttons.
From there, use the Text Colors option to configure the color of the button text. The first color tab sets the initial color for your button text, and the second tab sets the color for when you hover your cursor over the button.
Next, configure the Background Colors, aka the color of your button. The first tab sets the default color of the button, and the second sets the button’s color when you hover over it.
Make sure you choose text and background colors with enough contrast to ensure readability. I strongly recommend using WebAIM’s tool to check and meet accessibility requirements.
Kadence also lets you add a border to your buttons and assign colors to the border for both the initial and hover states.
First, select the X icon under Border and choose a border style: solid, dashed, dotted, or double-lined.
Then, enter a pixel value for how thick you want the border to be — for example, 2.
You can manually set border settings for different devices by selecting the Desktop, Tablet, and Mobile icons. If you don’t assign any values, Kadence will use the Desktop value for other devices.
Next, select Border Colors. First, set the initial border color and then the hover state color.
After that, go to Border Radius and enter a numerical value for the border radius, or use the slider to manually increase or decrease the default border radius for your buttons.
Use the Font setting to assign a custom font family, weight, and style to your buttons, or use the default value to inherit your base font.
Next, add Padding to your button. Generally, you want the left and right padding to be more than the top and bottom. Play around with different values and see which combination fits your needs best.
Kadence also lets you add shadows to your buttons in the initial and hover states.
First, set up the initial state shadow using the Button Shadow Color, X, Y, Blur, and Spread settings. Then, do the same for Button Hover State Shadow.
I prefer using no shadow in the default state and adding a hover state shadow to make the button pop when someone hovers over it.
If you’re using shadow in the initial state, I’d recommend choosing a darker color for the hover state and increasing the spread to get the same effect.
Once you’ve set up your button settings, click Publish to make your changes live.
7. Create your website header
The Kadence Theme adds a header builder to your website, giving you complete control over your website header. You can customize it fully with custom navigation, buttons, and even add above and below header banners with special messages.
Let’s see how to set up headers in Kadence.
Open the WordPress customizer and select Header to launch the Kadence header builder.
The Header settings area consists of the following five components:
- General tab: Lists widgets currently in your header and items available to drag and drop into the header.
- Design tab: Controls the header background and the screen size to switch to a mobile header.
- Transparent header: Allows you to set up a transparent header.
- Sticky header: Lets you configure sticky header settings.
- Header builder: Lets you drag and drop and configure header layout and settings.
Let’s explore each of those. First up is the General tab.
The first few items represent widgets inside your header. You can click on them to access the settings for each widget.
For example, selecting Logo will take you to the Site Identity settings or launch the Primary Navigation setup area if you click on Primary Navigation.
The Available Items section lists widgets you can add to your header. You can click and drag the widgets one at a time into the header builder area.
Next up is the Design tab.
Click on Design to access the header design region. Here, you can set the Header Background color for your site and set the screen width at which you want Kadence to switch from the desktop menu to a mobile menu.
The Transparent Header button opens the configuration area where you can enable Transparent Header for your store and customize its settings.
Enabling transparent header adds new settings to the customizer, allowing you to selectively enable the header for desktop and mobile, disable the transparent header on specific pages, and use a different logo for the transparent header.
Switching to the Transparent Header Design tab lets you fully customize your header design with various color options and border settings.
The last item inside the Header customizer settings is Sticky Header, which allows you to enable a sticky header on your website for desktop and mobile.
Enabling a sticky header adds more configuration options to the customizer, such as main row shrinking, custom logo for sticky header, and scroll-up header reveal.
You can also customize the colors for the sticky header using the Design tab.
Finally, the main component of Kadence’s header customization tool is the Header builder, which is extremely intuitive and easy to use.
The header is divided into three parts: the top, main, and bottom rows.
Each row is further divided into three sections where you can either drag and drop widgets or add available widgets by clicking on the section.
Selecting the gear icons next to each header row opens the settings area for that row in the customizer. You can then assign a layout such as standard, fullwidth, or contained, set a minimum height for the row, and use its Design tab to customize the colors.
Make sure your logo, primary navigation menu, and any CTA buttons are placed in the main row to maximize the screen real estate available to them. The top row is perfect for placing secondary menus, and the bottom row is ideal for adding notices to grab customer attention.
The Tablet/Mobile tab lets you access the header and menu settings as they appear on smaller screens. I strongly recommend double-checking colors and layout options in the off-canvas menu.
Once you configure your header, select Publish to make your changes live.
8. Customize your website footer
With your website’s header fully designed, let’s turn our attention to the footer.
Like header customization options, Kadence gives you complete control over your website footer with similar footer-building workflows.
The Footer customizer works just like the Header customizer but only consists of three main areas: the General tab, Design tab, and Footer builder.
You can customize the widgets inside your footer by selecting the widgets from the General tab and drag-and-drop more widgets into the Footer builder from the Available Items area.
WordPress allows you to customize widgets using blocks, just like you would for posts and pages. That makes it super easy to design custom footer layouts without coding skills or adding more plugins.
Drag and drop a widget into the footer builder and click on its settings icons to launch the block editor. You can also customize the existing widgets to add social icons and personalize the Copyright message at the bottom of the footer.
The Footer Design tab is far simpler than the Header Design tab. You can only set a Footer background and toggle a setting to keep the footer on the bottom of the screen.
But that doesn’t mean you can’t customize the footer as much. The row settings inside the Footer builder will allow you to configure each row’s columns, layouts, spacing, colors, link styles, and borders.
Once you’re done designing your footer, make sure you click Publish to update your new footer design.
9. Set up page layouts
Kadence Theme lets you set up your website layout in the following ways:
- Site-wide layout.
- Pages layout.
- Post layout.
- Archive layout.
Let’s set each of those up one at a time.
First, let’s set up the default site layout. To do that, go to General > Layout in the WordPress customizer. From there, you can set up basic layout settings for the site content, single post pages, and archive pages, aka category pages.
Set the max width for your site using the Content Max Width setting option and add spacing on both sides of the page using the Content Left/Right Edge Spacing setting.
Use the Content Top and Bottom Spacing option to set the amount of spacing added to the top and bottom of your page. Anything from 2 to 5 rem works well for this.
After that, set the Narrow Layout Content Max Width for your site. By default, it’s set to 842px. However, you can narrow it to 700px to make text-heavy pages easier to read.
The Single Post Boxed section controls the layout and appearance of the boxed layout for single posts. Single Post Boxed Spacing determines the amount of padding around your blog posts in a boxed layout.
The Single Post Boxed Shadow controls the shadow around the boxed content area. You can tweak the color settings or remove the shadow entirely by setting all values to 0.
You can also add a border radius to the single post box area using the Single Post Boxed Border Radius option.
The Archive Grid Boxed area lets you create a similar look on the archive pages. Set the spacing, shadow, and border radius as needed and click Publish.
Post and archive boxed layouts aren’t enabled by default. You can enable them from the Posts/Pages Layout settings area.
Speaking of which, let’s see how to configure pages, posts, and archive layouts in Kadence.
Open the WordPress customizer and go to Posts/Pages Layout to access the layout settings for pages, single posts, and archives. You’ll see those listed separately if you use custom post types on your website.
Select Page Layout to access the page layout settings.
The General tab controls the Page Title and Default Page Layout settings.
You can disable page titles from displaying on your site pages using the Show Page Title? Toggle.
Disabling it clears all page title settings from the customizer, whereas enabling it allows you to set the Page Title Layout, Title Container Width, Page Title Align, Title Container Min Height, and Title Elements.
The Default Page Layout section lets you configure the layout for the page, select a sidebar, set the content style as boxed or unboxed, set vertical padding, display featured image, and show comments.
Generally, I recommend using either a Normal or Fullwidth page layout with an Unboxed content style for most websites. I also recommend enabling Content Vertical Padding and leaving the featured image and comments settings disabled.
Switch to the Design tab to customize the colors, borders, and backgrounds of your page elements. Ignore the design settings if you want to use the colors and typography settings you configured earlier.
Click Publish to update your page layout settings.
Use the back button to go to the previous page and select Single Post Layout.
The Single Post Layout settings are similar to the Page Layout settings, with more options for blog post-specific elements such as post tags, related posts, and post navigation. Let’s look at those one at a time.
Enable the Show Post Title? toggle and choose a Post Title Layout for your blog posts. I generally recommend using the In Content layout for blog sites and Above Content layout for product and service websites.
Select a Container Width — I generally go with Standard for blog posts — and select the Post Title Align setting. Choose Left Align if you’re using an In Content layout and Center if you’re using Above Content.
Then, set a Container Min Height value. Anywhere for 350 to 400 px works well.
After that, enable, disable, and configure Title Elements like Breadcrumb, Categories, Title, and Meta.
Use the downward arrow next to different Title Elements to customize each element.
The Default Post Layout section lets you customize the settings for the content of the blog posts.
Select a Default Post Layout. I recommend going with Narrow or Right Sidebar to make the text easier to read.
If you’re using a Right or Left Sidebar layout, select a sidebar using the Post Default Sidebar menu.
Choose a Boxed or Unboxed Content Styles and assign Content Vertical Padding to the post pages.
The next few setting options let you control featured images, post tags, author box, post navigation, and related post settings.
Enabling featured images, post author boxes, and related posts will introduce more options to configure each element.
You can also choose to show or hide off comments on your posts using the Show Comments? toggle.
Scroll to the top of the customizer and switch to the Design tab to access the color and font options for the different elements on your post page.
You can use the default values or set custom styles as needed. Once you finish configuring the settings, click Publish to save your single post layout settings.
10. Add a scroll-to-top button
Scroll to top is a helpful feature that lets visitors quickly scroll to the top of your website with a single click. Kadence enables you to add a scroll to top button on your website with a few clicks. Here’s how to set it up.
Go to General > Scroll To Top in the WordPress customizer. Select the Enable Scroll To Top toggle to enable the feature.
Choose your preferred Scroll Up Icon and set an Icon Size value.
You can make and preview changes to the Scroll Up button in real time by scrolling down on your preview page.
By default, Kadence Scroll To Top aligns to the right side of the page. However, you can set it to Left using the Align setting.
In my experience, most websites place it on the right. Placing it in the same location will provide visitors with a familiar user experience.
Next, set the Side Offset and Bottom Offset. By default, it’s set to 30px. But you can increase or decrease the value as necessary.
Kadence enables the Scroll To Top button for Desktops and Tablets by default. You can also enable it for mobile devices using the Visibility setting to selectively enable Scroll To Top for different devices.
After that, go to the Design tab and select your Scroll Button Style.
The Colors setting lets you set the initial and hover state colors for the scroll-up arrow, and the Border Colors setting controls the colors for the outer border.
Use the Border and Border Radius settings to style your scroll-up button border. Then, set the Scroll Button Padding to increase or decrease the spacing between the scroll arrow and its borders.
Click Publish to update the Scroll button settings.
11. Improve performance with a few tweaks
One of the biggest strengths of the Kadence Theme is its performance capabilities. Not only is Kadence fast out of the box, but it also gives you a few options to improve your website performance and user experience.
You can access those settings by going to General > Performance.
You’ll see four performance settings there:
- Enable Scroll To ID.
- Enable Lightbox.
- Load Google Fonts Locally.
- Enable CSS Preload.
Scroll to ID and Lightbox improve the user experience of your website, whereas loading Google fonts locally and enabling CSS preload improves page load speeds.
Generally, enabling Lightbox might impact your website performance. But Kadence Theme’s Lightbox feature uses modern JS and CSS over jQuery which allows you to use the feature without hurting your website performance.
So, you can enable Lightbox and Load Google Fonts Locally without worries.
When you enable Load Google Fonts Locally, you’ll see a new option to Preload Local Fonts. Enable Preload Local Fonts and click Publish to save your Kadence theme performance settings.
You can also turn on Enable CSS Preload to improve your website performance. However, you should only do this IF you aren’t using any other optimization plugin. If you’re using a WordPress optimization plugin like Autoptimize, I’d recommend leaving this turned off.
12. Customize your sidebars
Kadence offers an easy-to-use sidebar customization tool that you can access from the WordPress customizer by going to General > Sidebar.
Use the Kadence Sidebar settings to set the Sidebar Width, Widget Spacing, and Enable/Disable Sticky Sidebar.
When you enable Sticky Sidebar, you can turn on the Only Stick Last Widget option. This setting is useful if you have multiple widgets in your sidebar but want your customers to focus on one specific widget.
The Design tab lets you control the styling of the sidebar.
Set the color and font styling for the Widget Titles and Widget Content.
Then, use the Link Style and Link Colors settings to set up how you want links to appear in the sidebar.
After that, set the Sidebar Background color and add a Sidebar Divider Border. Finally, set the Sidebar Padding values or leave it blank to use the default padding.
Once you’re done customizing the sidebar design, click Publish to update your settings.
That takes care of the overall sidebar design and layout. To customize the sidebar widgets, go to your WordPress admin and select Appearance > Widgets.
The Widgets page lets you customize different Sidebars and Footers using the WordPress block editor.
Select a sidebar, such as Sidebar 1, and then click on any of its elements to edit them.
You can also add new blocks to the sidebar using the Add block button at the bottom.
Once you’re done customizing the sidebar, click Update on the top-right corner to save your settings.
After that, you can assign the sidebar to posts or pages from the WordPress customizer’s Posts/Pages Layout settings page.
From there, you can select either Posts, Pages, or Archive Layout settings and set them up to use your preferred sidebar by following the steps described in the ‘Set up page layouts‘ section of this Kadence Theme tutorial.
13. Customize your WooCommerce store appearance
If you’re using WooCommerce with WordPress, you’ll love the extra setting options Kadence adds to the WordPress customizer.
Here’s a side-by-side comparison of the default WooCommerce options and Kadence WooCommerce settings in the customizer:
Kadence adds new settings and extends the existing ones. So, you have a few extra tools to fine-tune how everything works. Let’s explore how to use Kadence Theme’s WooCommerce features.
To access Kadence WooCommerce settings, open the WordPress customizer and select WooCommerce.
Select Store Notice to add a site-wide notice to your website, configure the notice text, and enable it.
Then, use the Store Notice Placement setting to set where you want to display the store notice and, optionally, toggle Disable Dismiss Button? to make it a static site-wide banner.
Select the Design tab to customize the Notice Font and Background Color. Once you customize the settings, select Publish to update it on the front end.
Click the back button to return to the WooCommerce settings page and select Product Catalog.
The Product Catalog settings page lets you completely customize the Product Catalog page design and layout, just like we did for the blog posts archive page.
Make sure the Show Archive Title? toggle is active, and choose an Archive Title Layout option that matches your theme design. I prefer using the Above Content layout.
Set the Container Width, Product Archive Title Align, and minimum height for the archive title container using Container Min Height.
Choose which Title Elements you want to display. Click the “eye” icon to show or hide elements.
After that, scroll down to the Archive Layout section to set up the layout settings for the product catalog.
Select an Archive Layout from the available options. I recommend choosing the Right Sidebar layout so you can add a custom sidebar to promote best sellers and related products.
Selecting a layout with a sidebar adds the Product Archive Default Sidebar setting that you can use to assign a sidebar.
You can set up custom sidebars from the Appearance > Widgets page in the WordPress admin and assign them to the catalog page here.
Next, select a Content Style and turn on/off optional settings like the catalog page results count, sorting dropdown, and grid/list switcher.
Use the Product Image Hover Switch to set the transition effects for when visitors hover over the product images on the catalog page. This setting only works if you have multiple images per product. If you don’t, then feel free to ignore it.
Set the CTA button style to Bottom Slide Up or Always Visible. The slide-up option offers a cleaner look, but customers won’t see the Add to Cart button unless they hover over the image. So consider that as you choose an action style.
Choose a Button Style for the CTA and enable Align Button at Bottom? so that the button doesn’t overlap with the price or product title on smaller devices.
Next, there’s a series of dropdowns to configure the following product catalog settings:
- Shop page display: Set this to Show products.
- Category display: Set this to Show products.
- Default product sorting: Select a default sort order for catalog pages.
- Products per row: Set this to 3 or 4 depending on the width of your catalog pages and whether you’re using a sidebar.
- Rows per page: Set this to 3 or 4.
Choose a Mobile Columns Layout style. One Column is great if you want to showcase your products, whereas Two Columns is good if you have a lot of products.
Scroll up and select the Design tab. From there, you can set colors, fonts, and borders for the different elements on your catalog pages.
You can also add an initial or hover state shadow for the Add to Cart buttons. Once you’re done designing your product catalog, click Publish to save your changes.
Use the back button to return to the WooCommerce customizer menu and select Single Product Layout.
The Single Product Layout settings are similar to the single post settings with a few key differences. Follow these steps to customize your product page layout with Kadence.
Set the Above Content Layout to Breadcrumbs.
Breadcrumbs are helpful to both humans and search engines, and they’re super important for sites with deep navigation. So make sure you set up breadcrumbs on your product pages if you’re building an online store with multiple nested categories.
Set the Product Layout setting for your product page. I recommend using Normal because you want the product to be the hero on this page. Avoid using sidebars that distract customers from the products.
Choose a Content Style for the page. I prefer using Unboxed because it offers a cleaner look.
Set Content Vertical Padding to Enable to add padding at the top and bottom of your product page.
Select which Product Elements to display on the page. Click the eye icon to show or hide the element on the page, and use the down arrow to configure extra settings for each element.
If you’ve enabled Breadcrumbs, you can hide the Category and Product Meta elements. I recommend using the Extras and Payments elements as trust signals.
Enable Use Custom Quantity Plus and Minus. This setting adds a plus and minus icon to the product quantity input field, making it user-friendly and visually appealing.
For the Product Variation Display setting, choose Horizontal if your products have many attributes and set Tab Style to Center.
Enable Show default headings in tab content, Show Weight and Dimensions in Additional Information tab?, and Show Related Products?.
Set Related Products Columns to 3 or 4, and then scroll up and select the Design tab.
Customizing the Design settings of your product page is optional. You can change Breadcrumb Colors, Breadcrumb Font, and Product Title Font to customize your product page design.
Once you’re done customizing the design settings, click Publish to save your product page layout changes.
At this point, we’ve covered most of the features of the free Kadence Theme. But if you want to take your website to the next level and make it stand out, I recommend trying Kadence Theme Pro.
I’ve written a detailed review of Kadence Theme that you can read to learn more about its features and whether it’s a good choice for you.
Kadence also has a 30-day refund policy, so you can try its pro features and cancel your plan if it isn’t for you.
Follow the rest of this Kadence tutorial to learn how to use Kadence Theme Pro.
14. Upgrade to Kadence Theme Pro
Go to Kadence’s website and select a plan.
Kadence Theme Pro only gives you access to the Pro version of Kadence Theme, whereas the Plus and Ultimate plans offer more premium products from Kadence.
All plans work with unlimited websites and are covered by Kadence’s 30-day satisfaction guarantee.
Once you select a plan, add your email address, billing address, payment information, agree to their terms and conditions, and click Place Order.
Once you complete payment, you’ll receive a confirmation email, and you’ll have access to Kadence Theme Pro inside your account.
Log in to your Kadence account and select Download Files.
Depending on your plan, you’ll see a list of all Kadence premium products you have access to.
Find the Kadence Pro Plugin – Premium addon for the Kadence Theme listing, select Download, and save the file on your computer.
Log in to your WordPress admin panel and go to Plugins > Add New.
Select Upload Plugin to open the plugin upload form. Click Choose File and upload the Kadence Pro zip file you just downloaded. Select Install Now to install the Kadence Theme Pro plugin. Once the plugin installs, select Activate Plugin to complete the installation.
You’ll see a new banner in your WordPress admin notifying you that your Pro Kadence Theme has not been activated. Select Click here to go to the Kadence theme dashboard.
Enter your License Key and License Email and select Activate. You can find your License Key inside your Kadence account under License Keys.
Once you click Activate, your Kadence Pro status will update from INACTIVE to ACTIVE.
You’re now ready to start using Kadence Pro to customize your website.
15. Enhance headers with header addons
Let’s start by exploring the Kadence pro header addons.
Go to your Kadence dashboard, enable Header Addons, and click Customize to launch the header builder tool in your WordPress customizer.
You’ll see 12 new items in the Available Items list:
- Account.
- HTML 2.
- Third Navigation.
- Fourth Navigation.
- Divider.
- Divider 2.
- Divider 3.
- Search Bar.
- Widget area.
- Contact.
- Button 2.
- Toggle Widget Area.
Drag and drop an element into the header builder area to add it to your website header.
Once you add an element, you can customize its design by clicking on the gear icon of that element.
For example, you can add the Contact element to the upper right corner of the Top Row to display your contact information and business hours on all pages, as I have here.
Then, click on the element’s gear icon to configure it.
Let’s say you want to customize the contact element. In that case, you can add your support email address, edit the font size and styling, and add extra margins around the element.
Kadence Pro header add-ons give you full control over the design of every element.
16. Set up conditional headers for your site
Beyond customizing the header with additional elements, Kadence Theme Pro also allows you to set up conditional headers that display on different pages or parts of your website. Here’s how you can set them up on your site.
Go to Appearance > Kadence in your WordPress admin, enable Conditional Headers, and click Customize.
By default, Kadence displays the standard header used on your website. You can add more headers using the Add Header button and preview any of them using the Current Previewing Header dropdown menu.
When you select an extra header using the preview menu, Kadence will ask you to save your settings before entering the preview mode.
Select Confirm, Save Settings to preview the extra header.
The WordPress customizer will reload with a new header in the preview panel and a message in the customizer stating, “Previewing Header: Extra Header“.
From there, you can customize the header display however you like using Kadence’s header builder tool. You can change the logo layout, add or remove navigation menus, and even enable transparent and stick headers.
Once you create a custom header, you need to configure its display settings.
Go to Header > Conditional Header in the WordPress customizer.
Enable the Extra Header toggle and select the Down arrow to access its configuration options.
Enter a descriptive Header Label to identify the header.
Expand Display Settings and select where you want to display the header using the Show On dropdown menu — for instance, Blog Page or Author Archives.
Use the Add Rule button to add the extra header to other pages. Optionally, use the Exclude Settings dropdown to exclude the header from specific pages.
Expand User Settings and use the Visible to setting to define who you want the header to be visible to. For example, All Users, Logged In Users, or roles like Administrator or Editor.
Add more user types using the Add Rule button. Optionally, use Exclude Visibility Settings to hide the header from specific users.
Kadence even allows you to set Expires Settings to automatically turn off the header at a specific time. This is useful when creating a header for a seasonal promotion like Christmas.
Select the Enable Expires toggle to activate it, and select an expiry Time and Date for the header.
If you don’t want the header to expire automatically, leave the Enable Expires toggle disabled.
Once you configure all the settings, click Publish to activate the conditional header.
17. Create dynamic pages with Hooked Elements
Hooked Elements is one of my favorite features of Kadence Theme Pro. It allows you to build elements using a WordPress builder and then “hook” it into any part of your site.
For example, you can add elements before or after content, replace the footer entirely, or add content blocks to your sidebar without writing a single line of code.
To use Kadence Element Hooks, go to Appearance > Kadence, enable Hooked Elements, and click Customize to launch the Elements page.
Kadence supports four element types:
- Content Section: Ideal for content sections like banner, header, and footer elements.
- Fixed Section: Ideal for sticky sections like signup forms and ad banners.
- Template: Ideal for custom post types and dynamic elements.
- HTML Editor: Ideal for adding HTML, CSS, and SVG code to your site.
Let’s explore how to use Kadence Element Hooks to add a temporary promo banner under the site header.
Click Add New on the Elements page.
Then, select Content Section from the Element Setup popup and enter a descriptive title for the element, such as Christmas Promo.
Design your banner using a WordPress block builder like Kadence Blocks or any other Kadence-compatible block builder.
I use Kadence Blocks because it’s a fast and feature-rich block builder. Read my Kadence Blocks review to find out if it’s the right choice for you.
For example, I’ve created this store-notice-style banner advertising a limited-time promo:
Click the Element Settings button and configure the following settings:
- Placement: Choose After Header.
- Display Settings: Select Entire Site.
- User Settings: Set as All Users.
- Device Settings: Select All Devices.
- Expires Settings: Activate Enable Expires and set a date and time for the element to expire. Alternatively, leave it disabled to use the element without an expiry date.
Click Publish to save the element, and go to the front end of your website to check the element.
Here’s how the store banner appears on my demo store:
Kadence elements are a powerful tool that you can use to add and replace elements across your site. I strongly recommend experimenting with it on a test site to fully understand what it’s capable of.
For now, let’s continue with our Kadence Theme tutorial.
18. Improve website navigation with a custom mega menu
Mega menus are expandable menus that show multiple options and information at once, usually in a grid or column format. They help people find what they’re looking for without clicking through lots of pages.
In other words, mega menus are super-sized menus that make navigation simpler.
Kadence Theme Pro includes an add-on that allows you to design attractive, user-friendly mega menus in minutes. More importantly, Kadence’s mega menu builder can also hook elements on your site, allowing you to design virtually any type of mega menu without code.
Let’s explore how to use Kadence Ultimate Menu and Hooked Elements to build a mega menu for our store.
First, create a Hooked Element by going to Appearance > Kadence > Elements and click Add New.
Select the type as Content Section and enter a descriptive title for the element, such as Shop Mega Menu.
Then, design your mega menu content using a Kadence-compatible WordPress builder like Kadence Blocks, Elementor, or Beaver builder for this. I’m using Kadence Blocks because it’s super easy to use.
Here’s the sample mega menu element I designed using a two-column row layout for this Kadence Theme tutorial:
Once your element is ready, set the Display Settings to Entire Site, User Settings to All Users, and click Publish.
Next, go to Appearance > Kadence in your WordPress admin, enable Ultimate Menu, and click Customize.
Choose your primary menu using the Select a menu to edit dropdown.
Then, use the Custom Links section to add a link item to your menu. Enter “#” in the URL field and enter Link Text. Click Add to Menu to add it to the menu items on the right.
Drag and drop the custom link item under the menu item for which you want to create a mega menu. For instance, I’ve nested it under the Shop item.
Click Save Menu to update the menu. Once it saves, Kadence will add a new Menu Item Settings button to the newly created menu item.
Expand the parent menu item and select Menu Item Settings.
In the Label Settings tab of the Menu Item Settings pop-up, activate the Disable Link toggle.
Select the Mega Settings tab and configure the following settings:
- Enable Mega Menu Dropdown: Enable the toggle.
- Mega Menu Width: Set it to Content.
- Mega Menu Columns: Set it to 1.
- Dropdown Background: Set this to White or any other color of your choice.
- Click Save and Close.
Expand the nested menu item and click Menu Item Settings.
Switch to the Mega Settings tab, activate the Enable Custom Content toggle, choose your newly created element from the Use a Custom Element dropdown menu, and click Save and Close.
Finally, click Save Menu to save your changes.
Now, go to the front end of your site and hover over the menu item to preview your mega menu. Here’s what my mega menu looks like:
If anything seems out of place, you can always edit the custom element you created to fix your design.
19. Add custom scripts to headers and footers
Whether it’s Google Analytics or a Trustpilot widget, you might need to add a custom script or two to your website every now and then. Kadence Pro simplifies adding custom scripts to the header and footer with its Header/Footer Scripts tool.
To use it, go to Appearance > Kadence, enable Header/Footer Scripts, and click Customize to open the Custom Scripts section in the WordPress customizer.
Now, paste your custom script in any one of the three available script sections.
For example, if you’re adding Google Analytics to your website, you’ll paste the script in the Add scripts right after opening body tag section, like in the image below, and click Publish.
That’s it! Your script will now load on the front end, and you managed to set it up in less than 30 seconds without using the command line. It doesn’t get easier than that.
20. Extend WooCommerce functionality
I described earlier how the free version of Kadence Theme extends WooCommerce’s capabilities. Kadence Theme Pro takes that a step further and adds unique features that give you an edge over your competitors. Let’s explore how to use them.
Go to Appearance > Kadence, activate WooCommerce Addons, and click Customize to launch the WordPress customizer.
Kadence adds three new setting options to WooCommerce settings and extra options to the Single Product Layout and Product Catalog settings.
Select Single Product layout and scroll to the bottom. You’ll find a new section called Sticky Add To Cart.
Click the Enabled Sticky Add to Cart toggle to activate the feature and configure its settings. Select a Sticky Placement location. Optionally, activate Enabled for mobile and select the Mobile Placement location.
Click the back button to go back to the WooCommerce settings page and select Product Catalog.
Scroll to the bottom and you’ll see three new settings:
- Custom Shop Page.
- Archive Active Filters.
- Off Canvas Sidebar.
Enabling Custom Content For Shop Page? replaces the default WooCommerce product archive loop with the page content of your Shop page. You can customize it by going to Pages > All Pages and editing the content using a WordPress builder.
You can also enable the Add Active Filters to top of Shop? and Show Button to Remove all Filters? toggles to customize the active filtering function of your product category pages.
Off Canvas Sidebar lets you activate the Add Off Canvas Widget Area? setting to create a custom off-canvas sidebar and customize its label and icon. You can manage the widgets in the off-canvas sidebar using the Add Widget Items setting.
Another way to customize the off-canvas sidebar for the Catalog page is to use the Catalog Off Canvas Sidebar and Catalog Off Canvas Sidebar Settings options that Kadence adds to the WooCommerce customizer menu.
Catalog Off Canvas Sidebar lets you add and manage widgets for the sidebar, whereas Catalog Off Canvas Sidebar Settings lets you customize the font, spacing, and colors of the widgets.
Once you create and customize your off-canvas sidebar, click Publish to save your changes.
Kadence Theme Pro has some useful WooCommerce features. But if you want complete control over your store design, I strongly recommend using Kadence Shop Kit.
Shop Kit 2.0 adds 15+ unique features to improve WooCommerce functionality. It allows you to design custom product page layouts, add conditional cart banners, and even adds multiple WooCommerce-specific blocks to your site.
Read my honest Kadence Shop Kit review for the inside scoop on everything it offers and to discover how it scores on my performance tests. Spoiler alert: it aces my tests 🙂
21. Add infinite scroll to your site
Infinite scrolling is a great way to boost user experience and engagement by allowing customers to view more products by scrolling a page instead of clicking through to the next page. And Kadence Theme Pro lets you set it up with a few clicks.
What I love about Kadence Theme Pro is that it even updates the URLs as you scroll down the page to ensure your website remains SEO-friendly. Let’s quickly go over the steps to set it up.
Go to Appearance > Kadence, enable Infinite Scroll, and click Customize.
Use the toggles to turn on/off Infinite Scroll for your Blog archive pages, search results page, catalog pages, and any other custom post types you may have on your site.
You can also add a custom End of Content Text message like “That’s all for now” or “That’s all we have for you”.
Once you finish configuring infinite scroll, click Publish to save your changes.
That’s it! Your website will now use infinite scroll without negatively impacting your SEO.
22. Set up dark mode
According to a 2020 survey by Android Authority, 81.9% of Android users used dark mode on their phones. That number is likely to be higher in 2026.
If you’re looking for an easy way to offer an accessible and user-friendly online browsing experience, implementing a dark mode option on your website is the way to go.
Don’t worry. Setting up dark mode on Kadence is effortless. Here’s how you can do it in under 2 minutes.
Go to Appearance > Kadence, enable Color Palette Switch (Dark Mode), and click Customize.
Toggle Enable Color Palette Switch (Dark Mode)? to activate the Kadence dark mode feature on your site.
Select a Default Color Palette for your site. I recommend using Light and leaving Dark as an opt-in mode. Enable the OS Aware setting, so Kadence will automatically use the mode detected from the visitor’s browser.
Choose a Dark Color Palette for your website and toggle the Different Logo for Dark Mode? switch to upload a different logo to use when Dark Mode is active.
Activating Kadence Dark Mode does not automatically create a dark mode color palette for your site. You need to manually select colors for the dark mode using the Global Color Palette and assign the palette.
You can allow your users to choose their preferred mode in the following ways:
- Fixed switch.
- Header toggle.
- Footer toggle.
Enable the Show Fixed Switch? Toggle to display a switch in the corner of the screen. You can customize its type, style, positioning, colors, and icons using the rest of the settings.
If you don’t want a fixed switch on the screen, you can add a Dark Mode Toggle element to the header and footer of your site. That way, customers still have access to the toggle, but it doesn’t take up your screen real estate.
Once you’ve configured the color and dark mode switch settings, click Publish to activate dark mode on your website.
It’s worth mentioning that Kadence Dark Mode doesn’t generate dark mode CSS and may not work with any custom plugins you’re using. It’s only meant to work with the Kadence global color palette and offer a lightweight dark mode feature that doesn’t impact your website performance.
Keep that in mind when you’re implementing dark mode on your website. And make sure you thoroughly review every page to ensure everything works correctly.
23. Enable Local gravatars to improve performance
WordPress websites use Gravatars — short for “Globally Recognized Avatars” — to provide users with a consistent and globally recognized profile image across websites and platforms.
Gravatars are linked to users’ email addresses and automatically displayed on WordPress websites for author images and comment avatars.
The only problem is that Gravatars add external requests to pages where they load, which can affect your website performance. To help you overcome that issue, Kadence lets you set up local Gravatars that load from your servers.
To enable Local Gravatars on Kadence, go to Appearance > Kadence and enable Local Gravatars. That’s it! Kadence will automatically save a local copy of your gravatar image and display that on all relevant pages.
You can verify it by right-clicking on an avatar image on the front end and opening it in a new tab. The image URL path should point to a file on your server under wp-content/gravatars.
24. Configure custom archive display settings
The custom archive display setting is another cool Kadence feature that lets you add a touch of uniqueness to archive pages. You can assign background images to the archive header and set column layouts for categories or tags. Here’s how to set it up.
Go to Appearance > Kadence and enable Archive Custom Settings.
Then, edit any taxonomy like a tag or category by going to Posts > Categories and selecting Edit.
Find the Above Header Background Image setting and click Add Image. Upload a file or choose one from your media library.
Optionally, select an Archive Columns setting option or use the Default selection.
Click Update to update the archive settings. Then, click View Category in the WordPress admin bar to view the category page on the front end. You’ll see the uploaded image behind the category title.
You can customize the background overlay color, category title color, and container height by going to Posts/Pages Layout > Archive Layout in the WordPress customizer.
Wrapping it up: Getting started with Kadence Theme in 2026
There you have it. This Kadence Theme tutorial has covered everything you need to know about getting started with Kadence. I’ve explained how to use Kadence Theme, how to upgrade to Kadence Theme Pro, and how to use Kadence Theme Pro features.
It’s your turn now. Follow the steps I’ve demonstrated and start designing your Kadence website.
If you have questions about this Kadence Theme tutorial, feel free to get in touch with me. I’m here to help!
