| |

Introducing Kadence Blocks 2.4 and Kadence Blocks Pro 1.7

kadence flex section layout

The Kadence team is delighted to introduce new features in both Kadence Blocks free and Kadence Blocks Pro to help WordPress site owners create more effective websites with Kadence. The most impactful additions to the free version of Kadence Blocks include flex control layouts with Section blocks that can be used outside of the Row Layout block, a new Show More block, and an option to dynamically source gallery content. In Kadence Blocks Pro, you’ll now find a new capability for a Dynamic List block as well as support for dynamic content using Meta Box. 

Along with these new features, both Kadence Blocks free and Kadence Blocks Pro have a number of bug fixes and refactoring of various code components to ensure that Kadence Blocks plugins are the most efficient block-building plugins available for your WordPress site. The full changelog for both Kadence Blocks free and Kadence Blocks Pro are available on our site and within the plugins.

Flex Control Layouts

Flex control layouts offer the ability for site owners to use the Section block independent of the Row Layout block. Section blocks can be nested so that more than one Section can be contained within another section. By default these sections will be added with vertical alignment, however, they can easily be changed to horizontal alignment with the new Flex Align Settings in the Section block. These can be set independently for desktop, tablet, and mobile, adding granular control to how your sections are displayed. 

kadence section flex align settings

This new method of layout opens up the potential for greater creativity in site design. The Row Layout block is also still available with Section blocks within. This new change is an addition for greater flexibility. 

Flex control layouts with the new Section block can be used in tandem with the Kadence Design Library, allowing you to use Sections, Starter Packs, and Wireframes when building a new layout with Kadence Blocks. 

Using Nested Sections Versus Row Layouts & Sections

One of the biggest questions you might have with this new capability is when to use Row Layouts with Sections versus using nested Section blocks. When building content with columns, we recommend that you use a Row Layout block. Nesting Section blocks inside of Section blocks for the purpose of making columns provides possibilities that can’t be done with a Row Layout, but those are generally edge cases. Doing so can be more confusing and harder to control for users just wanting a standard layout.

There are two ways that using Section blocks can be of benefit: fixed section size and wrapping Sections together for a common treatment, such as a background, etc.

Fixed Section Size

Section blocks within Section blocks allows you to create a column with a fixed size, while forcing the other columns to adapt to the space left. For example, let’s say you want a three column layout and in the first column you want the width of that column always be 200px while in columns one and three you want those to evenly expand to fill the rest of the space.

section block fixed width
Section blocks can be set to fixed width when nested within a parent section.

This kind of layout isn’t possible in the row layout block because columns in the row layout block are always a percentage width.

row layout fluid width
Row Layout block sets each section as a percentage width.

Wrapping Section blocks together for common treatment

Nesting Section blocks can be a huge win when you just need to wrap a group of blocks together and give them a background, border, spacing, etc. Previously you needed to nest a Row Layout block with a single column and now just adding a Section block is all that is needed.

Using nested Section blocks is not a performance decision 

While a lot of you may have heard about flex box containers from Elementor and about how they are better for performance because they create a smaller DOM (Document Object Model) size, this is not the same situation with Kadence. The Kadence Row Layout block has always used flex box. In terms of DOM size, you would only optimize DOM performance if you are nesting a block directly inside of Section. Nesting Section blocks inside of Section blocks will create the same DOM size as using a Row Layout block with Section blocks inside.

So while Elementor layouts experience performance improvements with their new flex containers, our new block layout options aren’t fixing a previous issue. Kadence’s layout mechanisms were always optimized in this regard, so there is no performance improvement by changing the way you layout your content. 

Show More Block

The new Show More block allows site owners to collapse content within a maximum preview height upon initial display. Buttons allowing visitors to expand content are shown and a fade out preview option is available. The buttons used in the Show More block are Kadence Blocks Advanced Button, which allows you to style the Show More/Show Less buttons using any font, color, hover behavior, box shadows, borders, sizing and even add icons to your buttons.

kadence show more block settings

The Show More Block can contain numerous other blocks including the Section block, Advanced Image block, and many others. Expansion settings can be set differently for desktop, tablet, and mobile display.  The Show More block is available now in the latest version of Kadence Blocks free, available for download in your WordPress plugins dashboard or from the WordPress.org repository. 

Dynamic List Block

In Kadence Blocks Pro, you’ll now find a new block called Dynamic List. This block is incredibly powerful for site owners working with dynamic content, or even if you’d like to use categories/taxonomies such as post categories within a dynamic list. The most easy to understand use case for the Dynamic List block is to use it within a Kadence Elements Template. Let’s say for example, you’d like to dynamically show all of the categories for a particular post underneath the headline. 

In the Dynamic List block settings on your template, you would select the List Source as the Current Post and then select Categories for the source type. 

kadence dynamic list block settings

Then, the styling opportunities available in the Dynamic List block are empowering. You can select how your list is displayed, how the link on that list item is shown, choose a list style with a divider of your choice between list items, or choose to display each list item as a pill. Text transformation (i.e., uppercase, lowercase, or capitalization) and text styling is all available in the Dynamic List block available now in Kadence Blocks Pro. 

If you’re working with any sort of dynamic content, such as with our Advanced Custom Fields guide, the Dynamic List block offers numerous methods of displaying categorization or other lists. As an example with the staff listing, you could easily display departments, availability, or types of clients a staff works with using Dynamic List blocks.  

Meta Box Support

Kadence Blocks Pro also offers site owners the ability to use Meta Box, a custom fields toolkit, with Kadence Elements Templates. If you’re already familiar with dynamic content and you’ve used Meta Box in the past, then using Kadence’s Meta Box support will be intuitively easy for you. You’ll now see Meta Box dynamic content available to you when you build a new template with Kadence Elements Templates. We’ll have a full guide for using Kadence and Meta Box in the coming weeks. Meta Box support is available in the Kadence Blocks Pro plugin, and Kadence Elements Templates is available in the Kadence Theme Pro plugin. 

If you’re using Meta Box and you’d like to explore building more effective layouts with Kadence, we highly recommend getting one of the Kadence Bundles to get both plugins. Getting the Kadence Full bundle provides even more features and capabilities, including Kadence Shop Kit for WooCommerce, Kadence Conversions for block-based effective popups, slide-ins, and banners, and much more. 

Kadence Continues to Innovate

Over the last few months, the Kadence team has continued to bring new features to the WordPress community to help site owners build more effective sites. These new capabilities join other innovations such as the Advanced Image block, the Lottie block, and the Google Maps block

The success of Kadence can be attributed to the vibrant Kadence community. It is your support of our work through purchasing a Kadence Bundle, your engagement with product development, and your product and feature requests that have helped our team create more efficiently and effectively. We are grateful for your support, and we look forward to creating more ways to help you create effective sites in the future. 

16 Comments

  1. This is brilliant. I am new to we design, I do it as a hobby. Since I discovered kadence I knew that I can trust and grow with them 110%. No regrets. Thank you for this now waiting for a multivendor theme to be produced soon, I hope 😉

  2. I use AFC for my client’s sites, not Metabox. Will dynamic content on Kadence also work with AFC? (Advanced Custom Fields)

  3. Always on top of things, good job guys. Also good to know that your row block doesn’t have the performance isdue as elementor.

    I’m yet again a very happy customer 😀

  4. We use Kadence for our main money site and I am so happy I switched to your theme.
    The site is much faster and I love the blocks.
    Keep up the good work!

    1. You could definitely do something like that layout with Kadence. Might take some planning and work with perhaps some custom post types, but completely possible especially with Kadence Elements Templates.

  5. Amazing! Glad to work with you guys!

    Kadence products have the best combination of performance and customization opp. to actualize ideas in design and deliver the best user experience. I didn’t see anything better for the past year working with WP. 👏

    Keep growing Kadence!✊

  6. This sounds great – it would be super useful to see some working examples / screen shots of these things alongside your block instructions for those of us that don’t understand the full implications of some of these enhancements.

  7. Interested to learn more about how to use the sections layout vs row layout? I am confused, lol!

  8. Kadence is a DREAM for WordPress designers and developers!!! And this latest UPDATE is another amazing step forward and becoming the best Theme of all time 🎖

    Loving the dynamic options, especially being able now to dynamically get Galleries created with ACFs.

    Bravísimo! In love with you guys ❤️ !!!

  9. I could not get the Dynamic List to work. Can you show a video tutorial how this suppose to work? Thanks!

Comments are closed.