Kadence Blocks Tutorial: 2026 Starter Guide for Beginners

I’ve used Kadence Blocks for over three years now, and now, I’m going to show you how to use Kadence Blocks step-by-step.

This Kadence Blocks tutorial will teach you how to get started with Kadence Blocks free and use its features to design content sections. You’ll also learn how to upgrade to Kadence Blocks Pro and use Kadence Pro features like custom icons and page-specific scripts.

Ready to learn? Let’s get straight to it.

How to use Kadence Blocks

All you need to follow this tutorial is a WordPress website with a free theme. If you don’t have a WordPress website, read my Cloudways tutorial to learn how to set one up for free.

As for the theme, you can use any block-based WordPress theme like Astra, GeneratePress, Neve, or even the Twenty Twenty-Three theme pre-installed in all WordPress sites.

Kadence Blocks builds on the core WordPress block editor and is compatible with all block-based themes. I’m using the Kadence Theme for this tutorial because it’s my preferred WordPress theme.

Once you have a WordPress website and free theme installed, follow my tutorial to get started with Kadence Blocks.

1. Install Kadence Blocks on your website

Search for “Kadence Blocks” in the search bar.

The first search result, Gutenberg Blocks by Kadence Blocks – Page Builder Features, is the one you need to install.

Select Install Now, wait for the installation to complete, and click Activate.

That’s it. You’ve successfully installed and activated Kadence Blocks on your website.

2. Explore the Kadence Blocks user interface

Kadence Blocks is ready to use. But before you do that, take a minute to explore the basics of Kadence Blocks.

Open the WordPress editor by selecting Pages > Add New from the admin menu.

The first thing you’ll notice is a small Kadence icon in the top bar of the editor. Click on the icon to launch the Blocks Control tab.

The Blocks Control tab contains the following global settings for Kadence Blocks:

Color Palette: Set and customize the default colors inside Kadence Blocks.
Block Visibility: Control visibility and access permissions for all Kadence Blocks.
Import/Export Block Settings: Import/export block settings between Kadence websites.
Reset Block Defaults: Resent custom block defaults and visibility settings.
Pexels Library Search: Enable or disable the Pexels Image Picker feature.

Next, click the plus icon at the top-left corner of the WordPress editor screen to launch the WordPress Block Inserter toolbar and view all the available block types with the free version of Kadence Blocks.

Kadence Blocks offers the following 23 block types for free:

Row Layout.
Section.
Accordion.
Gallery (Adv).
Buttons (Adv).
Text (Adv).
Countdown.
Count up.
Form.
Google Maps.
Icon.
Icon List.
Info Box.
Image (Adv).
Lottie Animations.
Posts.
Progress Bar.
Show More.
Spacer/Divider.
Table of Contents.
Tabs.
Testimonials.
Form (Adv).

Most block types extend the capabilities of core WordPress blocks like Paragraph, Row, and Columns. But some, like the Countdown, Progress Bar, and Show More, are unique to Kadence.

If you’re using Kadence Blocks to build an online store, I strongly recommend using Kadence Shop Kit. It adds 15+ useful features like custom product page templates and checkout fields.

And the best part is that it has virtually no impact on your website performance. Read my honest Kadence Shop Kit review to learn more.

Selecting a block from the Block Inserter tab will insert it into to your post/page editor. For instance, I selected the Row Layout block.

Pro tip

You can add a block to your post or page by typing forward-slash (/) followed by the block name and selecting the block. For example, type /row, hit Enter to add a row layout or /image, and hit Enter to add an image block.

Once the block is inside the WordPress editor, you can customize its layout, content, design, and other settings using the Block tab from the Page/Post Settings Sidebar on the right.

If you don’t see the settings sidebar after adding the block to your editor, click the sidebar icon in the top toolbar.

You’ll see three tabs in there:

Layout: Settings to configure the columns, layout, gutter, max width, and dividers.
Style: Settings to add manage backgrounds, borders, and text color.
Advanced: Settings to manage margin, padding, row/column height, z-index, device visibility, block defaults, CSS, and HTML anchor.

The Row Layout is where all the magic happens. It’s usually one of the first blocks you’ll use to design content sections on most pages. I’ll show you how to create a section using the Kadence Row Layout block.

First, let’s explore how to import pre-designed content sections into your WordPress editor.

3. Import a pattern from the Kadence Design Library

Kadence Blocks comes with a cloud-based library full of predesigned pages and sections. These collections of blocks, also known as Block Patterns, make it easy to design pages and content sections with a few clicks.

You can instantly import everything from contact forms to entire pages like home, about, or pricing pages. Let’s look at the steps to import a hero section from the Kadence Design Library.

Click Design Library in the top toolbar to access the popup Design Library window. If you’ve added a row layout to your editor, you can click the Design Library button inside it.

Select the Patterns tab and choose a template, for instance, Hero 4, to import it into your WordPress editor.

From there, you can customize the block pattern using the Block settings sidebar and customize the text and images inside it.

Click on the Headline text to edit it. You can use ChatGPT to brainstorm catchy website copy. Do the same for the supporting text and call to action button text.

Then, select the right-side section and change its background image from Style > Background > Background Image > Edit Image.

Choose an image from your WordPress media library, upload one from your PC, or use the new Kadence-Pexels integration to download one directly from Pexels.

For this Kadence Blocks tutorial, I’ll show you how to use the Kadence Pexels integration.

Search the Pexels database of free images using the search box, select an image, and click Download Image. For example, I searched for the keyword “Fashion” and downloaded an image of a man wearing a gray hoodie.

Kadence automatically adds the image to your Media Library with alt text. From there, you can edit the image before adding it to your page or just select the image and click Select to add it as a background image for your section.

Use the focal point selector to adjust the image’s focal point so it displays correctly inside your section. You can also set the Background Image Size as Cover, Contain, or Auto, or set the width and height value manually using the settings button.

Here’s what the imported pattern looks like after I customized it:

4. Design a section using the Kadence Row Layout

Row layouts are the foundation of virtually all content sections you’ll build on your WordPress website.

Here’s how you use row layouts in Kadence: you add a row, select the number of columns for the row layout, and then add other content blocks inside them to design your website.

The row layout acts like a box that holds all your content, like text, images, icons, and videos. The columns basically act like organizers inside the box.

Once you understand this basic concept of how rows and columns work, you’ll find designing websites with Kadence super easy.

Now, let’s look at how to create a classic three-column feature grid using the row layout block.

There are a few different ways to do this, including using the Kadence Icon block. I’ll show you how to do it using just the Kadence Text (Adv) block to show you how versatile the Kadence advanced text block is.

Add a Kadence Row Layout by clicking the Block Inserter icon on the top right corner of your screen and selecting Row Layout.

Kadence lets you create row layouts with up to 6 columns and offers some preset options with varying column widths to help you design your sections quickly.

Select a three-equal column layout from the Select Your Layout section.

The first thing you need to do is set the row alignment and content width.

Click the Align icon and select Full Width. Then click the Inner Content Width icon and enable Use Theme Content Inner Width?. This setting will restrict the maximum width of the feature grid to match the width of your page as set inside your theme settings.

Next, click the Vertical Alignment icon and set it to Align middle.

Click on the Advanced tab in the Block settings sidebar, increase Padding for Top and Bottom to XL, expand Structure Settings, and enable Inner Column Height 100%.

Switch to the Style tab and select the color tab next to Background Color to set the background color for the entire row layout. With the basic settings of our row layout set up, let’s see how to create the feature grid.

Click on the plus icon in the first column of your row layout to add a content block to the first column. Use the search box to find the Text (Adv) block or click Browse all to launch the Block Inserter sidebar and add the Text (Adv) block.

Type “01”, set the Font Size in the Style tab to XL, set Color to your Accent color, and set Text Alignment to center using the General tab.

Click inside the text block and hit Enter to add an empty paragraph block. Type “/text” and hit Enter to add another Text (Adv) block to the column. This new block will act as the feature description text.

First, change the heading tag for the text by clicking H2 in the popup toolbar and selecting Paragraph. Optionally, set the Font Size in the Style tab to SM. Then, set the alignment to Center and type your feature description text.

Press Enter and add another Text (Adv) block.

Set the heading tag to Paragraph, Text Alignment to center, and Font Size to SM. Type in your call to action text, such as “Learn more”, and click on the General tab.

Expand Link Settings, set Link Color, assign Link Style to Underline, and enter your target link inside Text Wrap Link.

Now, you could repeat this process manually, but there’s a faster way to do it.

Click Shift + Alt + O to launch the Document Overview tab.

Expand the row layout and the first section inside it. Press and hold Shift and select the three blocks you just created.

Click the vertical ellipsis (⋮) icon and select Copy blocks.

Click the plus icon inside the second column and add an empty paragraph block inside it. Press Ctrl + V, or Cmd + V on Mac, to paste the three text blocks inside it.

Repeat the same process for the third column and go in and edit the text for both columns.

Once you’re done, click on the first column and choose its outer section by either using the Document Overview tab or clicking on Section in the footer navigation at the bottom of your screen.

Click on the Style tab and set the background color to White (#FFFFFF) using the color picker tool. Select the Advanced tab, click the tiny link icon next to Padding, and set it to SM.

After that, click the Copy/Paste Styles icon from the popup toolbar inside the WordPress editor and select Copy Styles to copy the styling of the section.

Select the second column, click the Copy/Paste Styles icon, click Paste Styles to paste the styling into that section, and repeat the same for the third column.

Click the Preview button and select Preview in new tab to view your newly created featured grid.

Here’s how the three-column featured grid appears on my site:

Looks professional, right?

You can play around with the colors and fonts and even replace the numbers with icons or images to make the featured grid match your website styling. There are infinite possibilities to what you can do with the Kadence Row Layout block.

5. Set block defaults

Block defaults is one of my favorite features of Kadence Blocks. All you need to do is set it up once, and every time you create a new block, it automatically uses the same settings for every new block. How cool is that?

This simple feature has saved countless hours and made it a lot easier to maintain consistency across different pages and posts.

Let’s explore how you can set up block defaults for Kadence Blocks with a few simple clicks.

Add a new Kadence Block to the editor and customize its settings.

For instance, let’s say you add a Row Layout. You can set its Align to Full Width, Inner Content Width to Use Theme Content Inner Width?, and top and bottom Padding to XL.

After that, go to the Block Defaults section under the Advanced tab and click Save as Default.

That’s it! Kadence Blocks will use those settings for all future blocks you add to the WordPress editor.

If you need to change the block defaults in the future, you can update them from the same tab by clicking the Modify attributes button or reset it to its default values using the Reset defaults button.

6. Create a contact form using the Kadence Advanced Form block

Kadence Blocks offers two form blocks: a regular form block and an advanced form block. The Advanced Form block was introduced with Kadence Blocks version 3.1 and adds useful field types and design options to the standard form block.

Let’s explore how you can create a custom contact form using Kadence Blocks.

Add a row layout to your page by clicking the Block Inserter icon on the top right corner of your screen and selecting Row Layout.

Select a one-column layout, set Align to Full Width, and set Inner Content Width to Use Theme Content Inner Width?.

Go to the Advanced tab in the block settings and set your row layout’s top and bottom padding to XL.

Click inside the Add block area and add a Text (Adv) block.

Set the heading tag to H2, Text Alignment to center, and type in a descriptive heading for your contact form, such as “Contact Us”.

Press Enter to add an empty paragraph block. Set its alignment to Center and type in some text describing what the form is for.

After that, press Enter to add an empty paragraph block, type “/form” and select the Form (Adv) block.

Kadence will ask you to choose an existing form or to create a new one. If this is your first time using the Advanced Form block, select Create New.

The new form block comes with a three-step guided form creation process where you can visually configure the form’s layout, style, and title. If you don’t like the reconfigured layouts or just want to create one yourself, you can click Skip (blank) to create a blank form.

For this Kadence Blocks tutorial, we’ll use the guided process to create a contact form.

First, select the initial form layout from the available options. I’ve chosen Contact With Options.

Then, select the form style: Basic, Dark, Infield, or Underline. I’ve chosen Underline because I like its modern and minimalistic look.

Finally, enter a title for your form, add a short description, and click Create.

Kadence will save this form in its database, and the next time you launch the Advanced Form block, it will allow you to reuse it with a few clicks.

At this point, you have a good-looking form that’s ready to use. But you can take things further by adding fields, customizing the form styling, and configuring post-submission actions.

Let’s explore each of those, one at a time.

To add a new field to your contact form, hover over any field to reveal the add field button, click the add field icon, and choose a field.

For example, select the Accept field from the Advanced Fields tab to add a newsletter opt-in or terms and conditions acceptance checkbox.

Kadence lets you control everything from the input field, labels, and message styling to the form’s background color. You can access those settings from the Style tab in block settings and even use custom CSS to style your form by disabling Form Styles from the Advanced tab.

One of my favorite things about the new Advanced Form block is the Submit Actions list in the General tab. You can use it to configure actions such as redirecting visitors to a custom page or hiding the form after submission.

Explore the options the Kadence Advanced Form block provides and configure the form to your liking. Make sure you enter an email address to send the form submissions by going to General > Email Settings and entering an email address in the Email To Address field.

Once you’re done customizing the form, save and preview it. If the form layout looks too wide, you can set a maximum width for your form from the Advanced tab. Enter a pixel value or use the slider to increase or decrease the form width.

You can also use a different measuring unit, other than pixels, such as % to make the width responsive to its parent container width or vw to set the width as a percentage of the viewport width.

If you want to narrow down the width of your form, you can do it using the row layout.

Select the Row Layout containing the form, and click on the Inner Content Width icon.

Disable Use Theme Content Inner Width? and enter a pixel value for Custom Content Max Width, such as 600 or 700.

Remember to save your page to update the form settings after customizing the block.

7. Upgrade to Kadence Blocks Pro

Go to Kadence’s website and select a plan. You can choose from three options: Kadence Blocks Pro, Plus Plan, and Ultimate Plan.

Kadence Blocks Pro only gives you access to the Pro version of Kadence Blocks, whereas the Plus and Ultimate plans provide access to other 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, enter your email address, billing address, and payment information, agree to Kadence’s terms and conditions, and click Place Order.

You’ll receive a confirmation email and have access to Kadence Blocks Pro from your account as soon as your payment is complete.

To get started with Kadence Blocks Pro, 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 can access.

Find the Kadence Blocks Pro listing, select Download, and save the file on your computer.

Select Upload Plugin to open the plugin upload form. Click Choose File, upload the Kadence Blocks Pro zip file, and select Install Now. Once the plugin installs, choose Activate Plugin to complete the installation.

You’ll see a new banner in your WordPress admin notifying you that Kadence Blocks Pro needs to be activated. Select Click here to go to the Kadence License Activation page.

Enter your API License Key and API License Email, and select Activate. You can find both of those inside your Kadence account under License Keys.

Once you click Activate, you’ll see two confirmation messages, and the Status show as Active.

8. Explore Kadence Blocks Pro features

The first thing you should do after installing Kadence Blocks Pro is to explore the premium features and blocks that are now available to you.

Open the Block Inserter and scroll through the blocks listed under Kadence Blocks. You’ll notice ten new blocks in the list, such as Dynamic HTML, Dynamic List, Modal, and Portfolio Grid/Carousel.

Here’s a side-by-side comparison of the before and after of the Kadence Blocks section in the Block Inserter tab:

Next, open the Kadence Blocks Controls sidebar by clicking the Kadence icon in the top toolbar.

You’ll notice two new Components listed under the Block Visibility section and a new section called Page Scripts that lets you add CSS and JS to individual pages.

Besides these, Kadence Blocks Pro adds some settings to the Form and Countdown blocks.

Let’s see a few ways to use Kadence Blocks Pro on your site.

9. Add and use custom icons

Custom icons are a great way to improve your site’s user experience and add a unique touch to your online brand. Kadence lets you add custom icons to your website without code. Let’s explore how you can do it in a few minutes.

Create custom icons using a vector program like Adobe Illustrator or an online tool like Canva and save it in SVG format. You can also download ready-to-use icons from sites like UXWing and Flaticon.

Go to Icomoon, click Import Icons, upload the SVG files, click Generate Font, and then click Download on the next page.

Icomoon saves the icons as a zip file containing a bunch of different files. Unzip the file on your PC and find a JSON file named “selection” inside the folder.

Enter a descriptive title for your custom icon and select Upload an Icon file to upload the JSON file you downloaded from Icomoon.

If you want Kadence Blocks to show only the custom icons and not its default icons, set Show only these icons to True. I usually set it to False because I like having Kadence’s font selection accessible.

Finally, click Publish to save and add the custom icons to Kadence Blocks.

The next time you add any Kadence Blocks that support icons, your custom icons will display inside the Icon Picker tool. You can add and use them just like all the other icons in Kadence Blocks.

10. Add page-specific scripts

The Kadence Blocks page-specific scripts feature lets you add custom code to individual pages without affecting the rest of your site. Some ways you could use this feature include adding custom validation scripts for forms and custom styling for landing pages.

There are two main advantages of using page-specific scripts. Firstly, it prevents conflicts with existing code on your website. Secondly, it prevents unnecessary code from loading on every page, which ensures your website loads fast at all times.

To add a page-specific script, click the Kadence icon in the top toolbar, expand the Page Scripts section, and click on Custom CSS and JS.

Paste your custom code in the Custom CSS and JS popup and click Save/Close.

Wrapping up my Kadence Blocks tutorial for beginners

I’ve shown you how to get started with Kadence Blocks Free and Kadence Blocks Pro. I’ve also explained the basics of Kadence Blocks and how to perform some simple tasks. Now, it’s your turn to act. Grab your Kadence subscription using the link below and start building your site!

Kadence Blocks is a powerful WordPress plugin capable of some incredible things. Make sure you read my Kadence Blocks review to discover everything it’s capable of.

If you have questions about this Kadence Blocks tutorial, get in touch with me. I’m here to help 🙂