Kadence Blocks 3.0 Overview and Tutorial [First Look!]

Kadence Blocks 3.0 is finally here! In this article, I’ll give you an overview and tutorial of the brand new Kadence Blocks version 3.0, show off new features, and explain many of the major changes that make Kadence Blocks the best Gutenberg plugin for WordPress.

Kadence Blocks continues to take the crown for ease of use and customization options.

With this release, Kadence Blocks has pulled a mile ahead of the competition and makes building landing pages and blog posts so much faster than before.

Without further ado, let’s get right into it.

Use the Kadence Blocks 3.0 overview and tutorial guide below to jump around as you need:

Kadence Blocks 3.0 Overview Video

For those of you who are visual learners, I created an entire Kadence Blocks 3.0 walkthrough video, which gives an overview of the new version and showcases the new features. Check it out below!

What is Kadence Blocks 3.0?

Kadence Blocks 3.0 is the next generation of Kadence Blocks, released in February 2023. It includes many updates and features, including new block settings, a revamped Row Layout block, ease of use improvements, and more.

Kadence Blocks continues to gain popularity as the go-to solution for those using the built-in WordPress block editor (also called Gutenberg). This is because using Kadence Blocks has many speed benefits to make your site load faster compared to using third-party page builders such as Elementor or Divi.

Start Blogging Blocks – Kadence Blocks 3.0 Templates

If you want to get started with Kadence Blocks 3.0 and save hundreds of hours building landing pages and affiliate blog posts that sell, check out Start Blogging Blocks.

Start Blogging Blocks is a set of predesigned Kadence templates built 100% with Kadence Blocks. They’re beautifully designed to save you a massive amount of time every year and make you more money by being conversion-focused.

The best part is that Start Blogging Blocks works perfectly with Kadence Blocks 3.0, so you won’t need to worry about any hiccups when upgrading to the new version.

Several block collections help you build a fast, profitable website no matter what your use case is:

• Page Building Collection – A collection of Kadence templates to help you build landing pages and sales funnels that convert. This includes hero/content sections, testimonials, pricing tables, FAQs, and more.
• Affiliate Collection – A collection of Kadence templates that allow you to create affiliate blog posts that sell. This includes templates such as table of contents, product boxes, pros/cons, alerts to call out important information in your blog post, and more.
• Social Collection – A collection of Kadence templates designed to help build your social presence. This includes templates for social proof (statistics, partner logos, etc.), social CTAs to drive visitors to your social channels, and Linktree pages so you can build a beautiful Linktree page on your website without having to pay Linktree anything.
• Full Pages Collection – This is the best collection of them all! This block collection includes entire full-page templates that you can import with 1-click on your website. This includes entire blog post outlines (product review, listicles, how-tos), core pages (home, about, contact, blog), and sales funnels.

There are 70+ free templates available and you can get connected to the Start Blogging Blocks library on your Kadence site in less than 1 minute.

Notable New Features With Kadence Blocks 3.0

First, let’s go over all the notable new features released with Kadence Blocks 3.0.

There are a LOT of them, so I want to make sure I highlight the most important features and changes that you can expect with the new version of Kadence Blocks.

100% Backward Compatible

The most common question being asked is, will Kadence Blocks 3.0 work with previous versions when I upgrade? The answer is yes! Kadence Blocks 3.0 is 100% backward compatible with previous versions of Kadence Blocks.

This means that anything that you have built with Kadence Blocks prior to version 3.0 will look the same and continue to work the way they always have. But you’ll have a whole new set of block settings waiting for you with new features!

Here’s an image of a hero section template imported on a site with Kadence Blocks prior to version 3.0. You’ll notice that all the Row Layout settings are listed in a single pane.

Here’s an image of the same exact hero section template imported on a site with the new Kadence Blocks version 3.0. You’ll notice that all of the settings for the Row Layout are updated and broken into three tabs which I’ll show a little later.

Most importantly, both hero sections look the same due to Kadence Blocks 3.0 being 100% backward compatible. Nice. 😎

New Row Layout Block With Grid CSS

One of the most notable new features with Kadence Blocks 3.0 is that the Row Layout block has been completely reimagined and revamped.

This is a highly welcomed change because the Kadence Row Layout block is the foundation of building any type of landing page or sales funnel in the WordPress block editor.

The Row Layout is used as the high-level container, which then gets broken down into columns (sections), and then you place your content in those sections.

The new Kadence Row Layout now uses CSS grid which unlocks a plethora of possibilities with layouts and designs.

Here are some of the main changes to the Kadence Row Layout block. I go into more detail on some of these later in the post:

• More layout options between devices (desktop, tablet, mobile)
• Easily swap section positions
• Add new sections to the Row Layout with the click of a button
• Column and a new row gap control to easily configure your grid layout

Needless to say, the new Kadence Row Layout block is extremely flexible and will be a very welcomed change for building any type of layout you can imagine within the block editor.

Kadence Design Library Templates Add at Cursor Location

If you use the Kadence Design Library to add predesigned Kadence templates to your pages and blog posts, this fix is going to save you a massive amount of time.

If you aren’t using Kadence templates to help massively speed up your workflow, what are you waiting for?

As mentioned in the Kadence Blocks 3.0 templates section, we have created an entire library of predesigned Kadence templates called Start Blogging Blocks, which help you build landing pages and affiliate blog posts so much faster than before.

There are 70+ free templates that you can start using on your website, and it takes less than a minute to get connected to our library.

Before Kadence Blocks 3.0, if you used the Kadence Design Library to add any template to your pages or posts, the template would always add to the end of your page or post, which was a pain because you would spend a lot of time repositioning the template exactly where you want.

Now, with Kadence Blocks 3.0, when you go to add any template from the Kadence Design Library, the template will now add right where your cursor is.

This makes it extremely easy to add predesigned sections, replace buttons, and much more to speed up your building workflow.

Custom CSS Modal

One of the most powerful features of Kadence Blocks is that you can add custom CSS to individual sections through either the Row Layout or Section block.

This allows you to make customized tweaks that you otherwise wouldn’t be able to do through the regular block settings.

It’s not very common that you would need to use custom CSS with Kadence Blocks because Kadence Blocks gives you a multitude of customization options so that you don’t have to use any custom code.

That being said, for those of you who know CSS, you can make some custom tweaks to blocks to further enhance what you build.

Before Kadence Blocks 3.0, the Custom CSS area in Row Layout or Section blocks was very small and hard to work with. It was difficult to see all of your code at one time and was a cumbersome process to add it.

Now, with Kadence Blocks 3.0, they have added a button that says “Edit in Modal” within the Custom CSS section.

When you click that, it opens an entire modal where you can enter your custom CSS into.

This gives you much more room to work with and is so much more convenient than before.

New “Block Defaults” System

With Kadence Blocks 3.0, the block defaults system was completely reworked.

Prior to Kadence Blocks 3.0, the block default system was a little awkward, and you weren’t able to choose defaults for every block.

Now, with the new block defaults system, you are able to save preconfigured settings for whatever block you want and use those as a default.

So, say that when you add a “Table of Contents” block to your blog post, you end up changing the exact same settings, tweaking the border and the font size, and you want it to stay like that every single time.

Now, once you have your block configured, all you have to do is jump into the “Advanced” tab, open the “Block Defaults” section, and click “Save as default.”

This will open up a confirmation message where you can confirm that you want your settings to be the new default. Don’t worry, you can always revert to the original settings whenever you want. :)

Now, whenever you add that block again, it will automatically come in with all your preconfigured settings.

How cool is that?!

This feature alone will save hundreds or thousands of clicks per month and vastly speed up your website development times.

If you think that’s cool, keep reading because this lays the framework for something even better…

I’m very excited about this new system because it builds the foundation for having an entire global design system which Kadence has said they’re planning on building.

With the new Kadence Blocks 3.0 block defaults system, it is able to store a single instance as your “default” for each block type.

However, imagine if they expanded on this feature… what if you chose preconfigured settings and then could save those settings as a “style” and have multiple styles?

Then, whenever you go to add a block (such as a button), what if you were able to choose from a list of your preconfigured styles that you have saved?

You could literally have an entire design system set up for your website and easily change the look and feel of your entire website based on global styles.

This is just the beginning of what is possible with Kadence Blocks.

I don’t know about you, but I’m absolutely stoked about the future of Kadence.

Kadence Blocks 3.0 Tutorial

Now that we have gone over all the notable new features with Kadence Blocks 3.0, let’s go into a tutorial to teach you how to build a hero section and content boxes with the new UI and block settings.

I’ll also point out a number of the UI/UX improvements that have come with the new Kadence Blocks that make building pages so much easier than before.

Build a Hero Section With Kadence Blocks 3.0

One of the most common sections for a website is the hero section.

This is the section at the top of a landing page that contains your main headline, call to action, and an image.

Here’s a screenshot of a number of the predesigned hero sections we have built in Start Blogging Blocks that can be imported with one click.

Let’s go over how to build a hero section from scratch with Kadence Blocks 3.0 and see how easy it is.

First, you’ll want to add a new page to your website by going to Pages → New.

Kadence Full-Width Page Settings

Before we start working with the block editor, let’s configure our Kadence page settings for a full-width page.

Click on the “Page Settings” icon in the upper-right corner of your block editor and set the following settings:

• Page Title – Disable
• Page Layout – Full Width
• Content Style – Unboxed
• Content Vertical Padding – Disable
• Show Featured Image – Disable

Now we have our page set up, and we’re ready to start building!

Hero Section Container

Let’s add a Kadence Row Layout block which, as I mentioned earlier, was completely reimagined and revamped.

A quick shortcut I use to add blocks to my editor is to type a forward slash ‘/‘ and then type the name of the block, so you can type “/row layout” and it will pop up. Click on it.

You’ll then be presented with a section that says, “Select Your Layout.”

For building our Kadence Blocks hero section, we’re going to choose two even columns (second option).

You’ll see two Section blocks get added, each taking up 50% of the space.

At the top-level Row Layout level still, you’ll see all of the new settings you have available to you.

There are three new tabs – Layout, Style, and Advanced which help organize your settings.

In the Layout tab, go to the “Content Max Width” section and enable the toggle that says “Inherit Max Width from Theme?“

This will condense your content (your two sections) to be the max width which is globally set for your site in the Kadence customizer.

With our background color set, the next thing we’re going to do is add top and bottom padding to the Row Layout block so that our content has plenty of “breathing room” and looks nicer.

Go to the Advanced tab and look at the “Padding” section.

You’ll notice a new feature with Kadence Blocks 3.0 – your paddings are set with sizes now (extra small, small, medium, large, etc.).

In the background, these sizes are using CSS variables which makes Kadence Blocks much more flexible now.

Let’s set our Top and Bottom padding to new variables. Click on each one and use the slider to set your desired padding.

I’m going to use 3XL for both the top and bottom padding.

One other really nice feature with Kadence Blocks 3.0 is that when you hover over those padding values in the block settings, you will see that the padding highlights in your block within the editor.

This is a really convenient feature that wasn’t there prior to Kadence Blocks 3.0. Now, you can easily visualize the space used by padding.

With the max width set correctly and padding added, the next thing we are going to do is set a background color for the Row Layout.

At the Row Layout level, go to the Style tab, and set the “Background Color” to the color of your choosing.

I’m going to set it to the 3rd color in my Kadence global color palette so that it has a dark background.

Next, go to the “Text Color Settings” still in the Style tab, and choose the text color you want.

Since I’m using a dark background, I’m going to set my text color to white using the 9th color in my Kadence global color palette.

Our hero section container is complete! Let’s add our headline.

Hero Section Headline

With the background color set, let’s focus on the first column of our hero section and build our headline, description, and call-to-action buttons.

Click on the ‘+‘ in the first column and add an “Advanced Text” block and make the following changes:

1. Click where it says “Write something…” and type what you want your main headline to say
2. In the General tab, change the HTML Tag from H2 to H1 since this will be the main heading for your page
3. In the Style tab, change the text color to your desired color (if it’s not already)
4. In the Style tab, change the Font Size to the size that works best for your heading
5. In the Style tab, set the Line Height to your desired value (if needed)

In doing the above steps, you’ll notice a few changes with Kadence Blocks 3.0 that weren’t there previously.

First, the Font Size control now uses sizes rather than specifying values such as pixels, ems, or rems.

You can still set a specific unit and value if you’d like by using the “Set custom size” button, which is the last button in the Font Size control.

That being said, these new sizes are an extremely nice change with Kadence Blocks 3.0.

These new font sizes are using CSS variables in the background, which are using rem values and also are using clamp.

If that sounds like a different language to you, don’t worry. There’s nothing you have to do on your end. It’s all working for you in the background.

But you will get some massive benefits from the new Kadence Blocks 3.0 font size variables:

• Your site will be more accessible (rem units are much better than pixels)
• With clamp being used in the background, your text elements are going to be way more mobile-responsive and won’t require you to manually set new sizes for each screen size. It’s automatically handled for you. Talk about a time saver!
• Since they’re using CSS variables, these sizes can be set globally, which changes the values throughout your entire site. Much more flexible!

The heading for our hero section is now complete.

Let’s move on and add a short description underneath the main heading.

Hero Section Description

Add another “Advanced Text” block after your main headline and make the following changes:

1. Click where it says “Write something…” and type what you want your description to say
2. In the General tab, change the HTML Tag from H2 to Paragraph since this is not a heading and simply body text
3. In the Style tab, change the text color to your desired color (if it’s not already)

Let’s keep moving!

Hero Section CTA Buttons

With our headline and description added, it’s time to add our call to action button(s).

Add an “Advanced Buttons” block after your description.

You’ll notice that a placeholder button shows in your primary accent color.

Before Kadence Blocks 3.0, the button didn’t automatically inherit your primary accent color right off the bat, so this is a nice change.

You can click directly on the button and type what you want your button to say.

For the sake of this Kadence Blocks tutorial, I’m going to type “Call to Action” inside the button.

In the toolbar above your button, you’ll notice you now have access to some very nice Gutenburg controls baked into the Kadence Advanced Buttons block.

You have the option to change the justification of the buttons both horizontally and vertically now.

Being able to change the justification vertically is new and is a very nice feature because now you can align buttons on the bottom of containers now, which is excellent for pricing tables, content boxes, and many other designs.

Let’s change the horizontal justification to “Justify items left,” which will move our button to the left-most side where we want it.

Over in the block settings, you’ll notice that the settings are all updated as expected.

In the General tab, you have the option to add a button link along with a number of options:

• Button Inherit Styles – Fill, Outline, or Theme
• Button Size – Small, Medium, Large, or Extra Large
• Button Width – Auto, Fixed, or Full

In the Style tab, you can change your button’s colors, add borders, box shadow, add an icon, and more.

You can also choose to give your button a gradient background which is using a newer gradient control that allows you to use more than two colors with your gradient. Yet another subtle but convenient change to improve the customization of buttons.

Right now, we only have one button. What if we want to add a secondary button to our hero section? It’s easy!

With the button chosen, you need to move up one level from the “Single Button” to the parent “Advanced Buttons” block.

You can do this by using the breadcrumb in the lower left corner of your editor or opening the List View, which shows a nice hierarchy of the blocks on your page.

Each button is its own block now, and the individual buttons are “contained” by a parent block called “Advanced Buttons.”

Once you move up to the “Advanced Buttons” level, you’ll notice that the toolbar above your button has a ‘+‘ icon that says “Duplicate Previous Button.”

Click that, and you’ll have an identical second button to the right of your first button.

Now you can click on your second button and style it differently from the first button so that it doesn’t stand out as much as your important call to action.

One last thing we’re going to do before adding our image is to vertically align the left section of our hero section to the middle.

Go to the “Section” level of the first section.

In the toolbar above the Section, click the “Vertical Align” option and choose “Align Middle” to vertically align your first section in the middle of the hero section.

Awesome! We have created our headline, description, and call to action buttons for our hero section, all built with Kadence Blocks 3.0.

We’re now ready to add our hero section image.

Hero Section Image

The last piece for our hero section is to add an image in the right column.

In the right section, click the ‘+‘ button and add an “Advanced Image” block.

For this tutorial, I’m going to add a placeholder image to my hero section.

After you have your image added, click the “Align” option in the toolbar above and choose the “Align center” option to horizontally center your image in the section.

We aren’t going to use the image caption for this image, so in the Advanced Image block settings, go to “Caption Settings” under the General tab and disable the toggle that says “Show Caption.”

This will clean up our image area a bit.

Now that our image is centered, I’m going to set a max width on the image to make the image a little smaller.

In this example, the image I uploaded has a resolution of 500×500, but I’m going to enter a “Max Image Width” of 375 px.

Congratulations! We have now officially built an entire hero section using Kadence Blocks 3.0.

Pretty easy, wasn’t it? ;)

Build Content Boxes With Kadence Blocks 3.0

With our hero section built, let’s build another section with three content boxes to show off even more Kadence Blocks 3.0 features.

Enter down in your editor from the hero section Row Layout to add a new block.

Let’s add another Row Layout like we did for the hero section. When it says, “Select Your Layout,” choose the option for three even columns.

You’ll see three Section blocks get added, each taking up 33.3% of the space.

I didn’t mention this before, but you’ll see in your Row Layout settings that the Layout options have been updated and look a lot cleaner than they did before.

You can choose how many columns you want in your Row Layout and also see all of the various layout possibilities available to you, which can be changed per device (desktop, tablet, and mobile).

In the Layout tab, go to the “Content Max Width” section and enable the toggle that says “Inherit Max Width from Theme?” again so that the container’s max width matches the hero section.

In the Advanced tab, add top and bottom padding of 3XL, just like we did with the hero section.

Also, in the Advanced tab, open the “Structure Settings” and enable the setting that says “Inner Column Height 100%.”

This will ensure that all three sections stay the same height no matter how much content is in each one, which will help our content boxes look uniform.

Our content boxes section now looks like this, with highlighted top and bottom padding.

Now, let’s style the first section to look how we want, and then we’ll use the really handy Copy/Paste Styles option that comes with Kadence Blocks to make the other two sections look the exact same.

To select the first Section, open the List View and choose the first Section block nested in our Row Layout.

With our first section selected, the first thing we’re going to do to style it is to add padding.

Go to the Advanced tab. Since we want to add padding to all four sides of our section at once, we’re going to click the link icon, which will show a new padding slider and allow us to add padding to all four sides at once.

I’m going to add small 24 px padding to all four sides of our section.

Once again, a really nice feature is that the padding is now visualized in the WordPress editor once you hover over the padding slider in the block settings.

This makes it much easier to tell what is going on when building various layouts using Kadence Blocks.

With our padding added, let’s add a background color and border to our section.

Switch to the Style tab and set a Background Color if you like. I’m going to set the background color to my 8th global palette color, which is slightly off-white.

Then, open the “Border Styles” and do the following three things:

• Set a 1 px border that is set to the 3rd color in your global color palette
• Set a Border Radius of 8 px on all four sides
• Set a Box Shadow with an x value of 0, a y value of 14, a blur of 25, and a spread of -10. Set it to the 6th color in your global color palette

This gives our section a nice look with a background color, slightly rounded corners, and a border.

Now that we have our first section styled the way we want, we can use the Copy/Paste Styles option to copy the styles from this section and paste it into the remaining two sections.

Make sure you’re at the Section level for the first section. In the toolbar above the section, click the “Copy/Paste Styles” button and choose “Copy Styles.”

Now, select the second section (you can use the List View or the breadcrumb bar in the lower left) and choose “Paste Styles” to paste the style to the section. Do the same for the third section.

This is a really nice feature because we now have all three of our sections styled the same within a few seconds.

With our content boxes fully styled, it’s time to move on and create the content!

Once again, we’re going to only add content to the first section, and then we will copy all the content and paste it into the other two sections.

New Icon Picker

Let’s start by adding our icon.

Click the ‘+‘ in the first section and add a Kadence Icon block.

In the General tab, choose the icon you want to use for the first content box.

When you open the icon picker, you’ll notice a big improvement. The icon picker has been updated.

Prior to Kadence Blocks 3.0, the icon picker used pagination to go between all the icons. You would have to scroll through 81 pages of icons which took a long time and was cumbersome.

Now, with Kadence Blocks 3.0, the icon picker uses a scrollable pane of all the icons, so you don’t have to click through any pages.

You can also sort between line and solid icons, and searching for an icon name will break the categories into line and solid icons.

As someone who uses the Kadence icon block a lot, this is a really welcome change!

Add Content

With our icon added, let’s add the headline for our content box.

Insert a new “Advanced Text” block after your icon. The HTML tag for the headline defaults to H2, which is likely what you’ll want since these are the main headings you can use to showcase services or other important items on your site.

Type what you want your headline to say. For this example tutorial, I’m going to type “Content Headline.”

After you have your headline written, go to the toolbar, click the “Align” button, and choose “Align text center” to center your headline.

If you want to change the spacing between the icon and the headline, go into the Advanced tab of the Advanced Text block and change the Top Margin. For this tutorial, I’m going to use XXS top margin.

Our headline is done. Let’s add a text description within our content box.

Add another Advanced Text block after your headline. This time, we don’t want to use an H2 element. Let’s change the HTML Tag to a Paragraph.

I’m going to add some dummy text for this tutorial, but you can write the description you want for your first content box.

Just like we did for the headline, go up to the toolbar, click the “Align” button, and choose “Align text center” to center the description.

Our headline and description are done! The last piece of content we need to add before we copy everything over to our other sections is to add a call to action button.

Insert an “Advanced Buttons” block after your description.

As we saw while building our hero section, the updated Advanced Buttons block is very nice. It has our main accent color already chosen, and we can type what we want our button to say right off the bat.

I’m going to type “Call to Action” again, but type the call to action you want your visitors to take, whether it be “Learn More,” “Book Now,” or something else.

We’re already done with our call to action button unless you want to style it a certain way, but I love the simplicity of the default styling.

Copy Content to Other Sections

Now that we have all of our content built for our first section, there’s no need to rebuild it in the other sections.

We can simply copy all the content blocks in the first section and paste them into our other two sections.

To do that, click on the top icon block to select it. Then, hold the Shift key on your keyboard and click the bottom-most block in our content box, which is the button.

This should select all four of our content blocks (icon, headline, description, and button).

With all of our blocks selected, go to the vertical three-dot menu in the toolbar and choose the “Copy blocks” option.

You’ll see a message that says, “Copied 4 blocks to clipboard.”

To paste these blocks into our other two sections, click the ‘+‘ button on each section and first add a basic “Paragraph” block.

Then, you can use the paste shortcut (Ctrl + V on Windows or Cmd + V on Mac) to paste the blocks.

Once again, within a few seconds, we now have three content boxes!

All you have to do is change the icon, headline, description, and call to action button text to what you’d like, and you’re all done.

Looks great, doesn’t it? Kadence Blocks 3.0 makes it so easy to build beautiful sections like this.

Our Kadence Blocks 3.0 tutorial is now complete!

I hope this helped you learn how to use Kadence Blocks to build a hero section and content boxes. You can use all of these concepts to build basically any layout you can think of!

Let’s go over a few more amazing new features with this Kadence Blocks update.

Add Sections to Row Layout

The new Row Layout block that uses CSS grid opens up a whole world of new possibilities for building pages quicker and easier.

You can now add sections very easily to the Row Layout.

Using the three content boxes we just built, what if we wanted to add three more sections below those three to have a total of six content boxes?

Prior to Kadence Blocks 3.0, you would have to add another three-column Row Layout below the first one, which adds unnecessary elements and makes for more work.

Now, you’re able to simply add new sections to your Row Layout with the click of a button.

At the top-level Row Layout, click the “Add Another Section” button in the toolbar, and you’ll see a new section instantly added to your Row Layout below your first row.

If you click this button three times, you’ll have three new sections below your first row of sections, all without needing to add another Row Layout block.

That’s nice! 😎

You can then use the Copy/Paste Styles feature at the Section level from before to quickly give your three new sections the same style as your first row.

Then, if you copy the section content as we did before and paste it into the three new sections, you now have six full content boxes in no time.

This leads to the next epic feature that comes with Kadence Blocks 3.0!

Arrange Sections in Grid

One of the coolest new features of the new Row Layout block using CSS grid is that you can very easily swap sections in your grid with the click of a button.

One big pain point prior to Kadene Blocks version 3.0 was that if you wanted to swap two sections of content, you would have to copy all the content and paste it into the next one, and it was not a trivial task.

Now, if you want to swap the position of a section, it’s unbelievably easy.

Using the six content box example, what if we want to swap the second section with the first section?

All you have to do is select the second Section block and then click the arrow in the toolbar to move it in whichever direction you would like.

Easy peasy!

Column/Row Gutters

Although you always had the option for column gutters with Kadence Blocks prior to version 3.0, there’s now a new Row Gutter that is available if you have more than one row within your Row Layout grid.

Using the six content boxes example, as soon as we added that second row of sections, the new Row Gutter option appeared, which allows you to adjust the spacing between each row now along with the columns.

What’s even better is that both the Column and Row Gutter use the new sizes, which are CSS variables in the background.

If you have more than one row of sections in your Row Layout, the Row Gutter option allows you to create a super uniform look that matches the Column Gutter.

Oh man, I love CSS variables and the direction that Kadence is going with each update!

---

So, there you have it! A full Kadence Blocks 3.0 overview, tutorial, and a look at all of the best features that came with this massive update.

What do you think of the Kadence Blocks 3.0 update? Do you love it or hate it? Leave me a comment below and share your thoughts!

What do you wish Kadence would add next?

Until next time,
Jake ✌️