3 Dynamic Designs Using Kadence Blocks To Inspire Your Website
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.
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.
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.
Design #1 – Custom List of Recent Properties With a Related Real Estate Agent
Our first design lists recent properties on the homepage.
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.
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.
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.
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.
Here’s how the archive layout and structure looks like on the backend:
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:
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:
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:
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.
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:
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.
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:
- How Block Patterns Can Help You Build WordPress Sites Easily
- How To Let WordPress Users Create Their Own Profiles in Your People Directory
- How To Create a Custom WooCommerce Checkout Experience
- How To Create a Custom List of WordPress Pages
- 3 Tips For Creating Magazine-Like Layouts
- 3 Non-Obvious Applications of Post Relationships in WordPress
- Design Beautiful Headers and Footers For Your Toolset Site
- How To Build A Custom Category Tree With Toolset
- How To Build A Truly Custom WooCommerce Store
- 5 Advanced Uses of Toolset’s Conditional Block in WordPress