3 Dynamic Designs Using Kadence Blocks To Inspire Your Website

   Agnes Bury

How to

September 27, 2021
8

Toolset’s integration with Kadence Blocks allows you to use them with dynamic content like custom fields. We present three interesting designs for a real estate site created with Kadence Blocks and Toolset.

In this article, you will see both the free version and the pro version of Kadence blocks in action.

Our Setup

Our hypothetical demo site uses custom post types with custom fields and taxonomies for real estate properties. We have created all of them using the Toolset Types plugin.

Custom post type called “Properties” with some posts

Now, let’s see how you can combine the Toolset Blocks plugin with Kadence blocks to create completely bespoke templates, archives and lists of posts.

Our first design lists recent properties on the homepage.

The Toolset View block showing recent properties and using the Kadence Blocks for displaying property data

What’s Interesting About This Design

  • It’s a completely custom layout with dynamic data of your choice.
  • The layout uses custom fields combined with icons offered by the Kadence Info Box block.
  • The property image is a link to the single-property page which animates on hover.
  • For each property you can see a related agent with their contact number and a link to the single-agent page.

How The List Is Built

To create a list like this, you need to use the Toolset View block with the unformatted output. Set up the View to display the “Properties” post type and then, simply put Kadence blocks of your choice inside the View Loop.

The following image shows the View block in the editor and all Kadence blocks we used inside it.

Toolset View with Kadence blocks using dynamic sources

In our example, we used the Kadence Row Layout Block for the layout (3 columns in our case) and the following Kadence blocks inside it:

  • Image Overlay
  • Advanced Heading
  • Icon List
  • Info Box

Connect all of these blocks to dynamic data like custom fields, the post title, etc. The following image shows an example of connecting the Kadence Icon List block to the Address custom field created with Toolset.

Kadence Icon List block displaying dynamic information – the Address custom field 

Thanks to Toolset, you can also use Kadence blocks to display dynamic information coming from other post types, within the same View. In our example, we used the Kadence Info Box to display data coming from the “Agent” post type  (even though the View is set to display “Properties”). 

This is possible because we have created a one-to-many relationship between Properties and Agents. In other words, when we’re displaying a list of properties, we can easily display information about related agents that are assigned to each property.

The following image shows how this is easily set up using Toolset’s Dynamic Source options inside the Kadence Info Box block.

Using Toolset post relationships in Kadence blocks

Design #2 – Custom Archive Page Listing Properties For Rent

Our second design is a custom layout for a property archive. It uses a grid layout with the Kadence Split Content block inside, which makes the outcome unique and interesting.

Custom archive for properties designed using Kadence blocks and powered by Toolset dynamic sources

Here’s how the archive layout and structure looks like on the backend:

Structure of a custom WordPress Archive for properties made out of Kadence blocks

As you can see its unique design was possible thanks to nesting different Kadence blocks and combining these with dynamic data. You can use the Row Layout, Split Content, and Spacer/Divider blocks to lay out different pieces of property information in a custom way. 

The following Kadence blocks use Toolset dynamic sources:

  • Split Content (the image part)
  • Advanced Heading
  • Icon List
  • Advance Button

Check out our dedicated lesson to learn how to design custom archives with Toolset.

Design #3 – Single-Property Page with Modal and Tabs Blocks

Last but not least we present an interesting design for single-property pages:

Template for single-property pages created with Toolset and Kadence blocks

Kadence Modal Block

The custom template for properties uses the Modal Block from Kadence Pro. This block is great for hiding some less-important information and making it available only when a visitor is interested in seeing it. In our case, we use it to display the tenancy info:

Using the Kadence Modal block to display additional information when clicked

Here, it’s important to note that the tenancy info is dynamic and varies depending on the property page you are visiting. Again, this is possible thanks to Toolset’s dynamic sources:

Kadence Modal block along with the Advanced Heading block using Toolset’s dynamic sources

Tabs Block

Our property template also uses the Tabs block from Kadence. As you can see in the following image, we created tabs for property description, map with address, and agent info.

Kadence Tabs block using dynamic data – here the property address

You can put any other blocks inside each tab. In the second tab we use the Toolset Map block to display the location of the property on a Google Map:

Kadence Tabs blocks with the Toolset Map block

Wrapping Up

That’s it! We hope we got you inspired. As you can see, integration between Toolset and Kadence is powerful and gives you tools to build beautiful and dynamic websites.

Check out our demo site to see other dynamic designs using Kadence block and Toolset.

There’s More!

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

 

Comments 8 Responses

  1. Thanks for this! But I think it would be considerably more helpful to make some videos, or at least more detailed step-by-step tutorials, to show how to do this. Or, to the extent that each aspect of this has already been explained by a tutorial/video (relationships, using dynamic content in a 3rd party block), then just provide links to those resources.

    • Hi, Nick! Thanks for your comments. Just to confirm, the main idea behind these articles is to explore different things you can do with Toolset. We realized that often, Toolset users are not even aware of some really cool and advanced features our plugins already have. Also, when you’re designing a site, it’s often great to get some inspiration. Sometimes, you learn of things you didn’t even consider you could do.

      So, as our documentation already covers all the main how-to lessons, these tutorials are purposely more of walk-through articles, but still, with enough descriptions and images to understand how you would do this.

  2. Nevermind. It appears that you’ve provided links to various tutorials. I’m not sure why I missed them on the first read-through. Feel free to delete both of these comments.

  3. I received an email from OTGS stating that v3 of Stackable blocks will break compatibility with Toolset and there’s no ETA on when or if a fix will be made available.

    I’ve said it before and I’ll say it again, Toolset should NOT be relying on other block systems for advanced design features. You should be building your own FULLY featured block system and COMPETE. As themes like GeneratePress and block plugins like Stackable add dynamic data and conditional display and reduce or eliminate their cooperation with Toolset, your lead in this space will erode until Toolset becomes niche and is only needed for the most advanced sites.

    Don’t wait until most WordPress users are financially invested into other block plugins. Build your own today. Call it ToolBlocks or ToolBlox. Offer a non-dynamic version for free with an upgrade path to a dynamic version with more power than other block systems and then another upgrade path to the full Toolset experience.

    You have your orders soldier, get to it! 😀 hahaha

    • Hi, Peter! Thank you for your thoughts. These things are tricky and ultimately decided by the management. The situation with Stackable 3.0 is unfortunate indeed but on the other hand, it would be hard for us to provide all these sorts of blocks. And users always want more. Then you risk ending up with a bloated gallery of plugins with questionable usability. It’s similar to that age-old question “Why don’t you create your own Toolset theme?”. It would solve some things but add a pile of new problems and challenges. Not to mention alienate our partners which is definitely something we wouldn’t want to happen.

      However, I get what you are suggesting, and it’s an interesting angle to the story. I will share it with the team.

  4. My perspective seems to match PeterR-3.

    Up front let me say that Gutenberg doesn’t work for me. Not as a page builder, or a post designer, and the fact they want to expand it to themes is laughable. I’m not saying it doesn’t have potential, but I’ve yet to see anything exciting. Going so heavy on support for it seems like a mistake for that reason, but also because they’re coming after you guys with their currently inadequate query blocks. You’re trying to work with their system but they’ve essentially stated that their grand plan is to make plugins like Toolset obsolete. I wouldn’t be surprised if they announce custom post types and custom fields will be added next year.

    As for paid builders, I think it’d be rude for me to use names, so…

    I use REDACTED Pro. It’s a pretty incredible builder. It’s loaded with features, it’s easy to learn, everyone I’ve introduced to the builder, loves it. And yes, these same people have expressed their frustration Guttenberg. It’s night and day.

    More and more, REDACTED Pro is encroaching on Toolset’s territory. I’ve already stopped using Toolset Content Templates in favor of REDACTED’s dynamic templates for my custom post types. I’ve also replaced my less complex views with their dynamic content elements which can loop content conditionally. They’re not there yet… My work has a lot of complex routing and REDACTED Pro can’t handle that. The maps and filter functionality are also lacking. As of today though, I would argue they are already competing for half of your potential customer base, and they’re working to get that other half in their crosshairs. They already have a decent CCK they built for Joomla, and it’s probably just a matter of time before they rework that CCK for WordPress.

    The RPro builder installs as a theme package with API supported libraries. It’s not a straight plugin, and from what I can tell doesn’t have any plugins. Just the theme builder and powerful elements within. They have a system for 3rd party developers to make and sell new elements to be used with RPro within a marketplace on the REDACTED website. I don’t love that strategy, but it keeps them from getting bogged down with the smaller feature requests, so if that’s the big concern, look to their model.

    I’m not 100% committed to REDACTED or Toolset. If it gets to the point that REDACTED overlaps Toolset enough, I won’t keep using it. If Toolset took Peter’s suggestion, I’d definitely consider a Toolset Builder over REDACTED. Of course, that might be years away and who’s to say what all can change. But I can’t envision a scenario where I use Gutenberg regularly for anything.

    • Hi, Lloyd! Thank you for the comment. Actually, I don’t know why it would be rude to use plugin names and it would allow us to take a look ourselves (if we haven’t already), no harm in that.

      In general, everyone has their approach to marketing their stuff, but I don’t think this is the place to go into that, or that I’m the best person to comment. 🙂

      Related to Gutenberg, at this point it’s really hard to say where the project is going to go next. Apparently, even custom fields as a feature are not 100% safe in the WP future. We’re keeping our eyes and ears open.

  5. Nice to see you’re not concerned with such things. Usually when I mention a potential competitor in someone’s comments it’s not well received.

    Yootheme Pro

    Here’s a video from a few months back when they added a dynamic source Woocommerce builder…
    https://youtu.be/B_aLTjn69y8