I am excited to announce the Post Filter and Tooltip modules forย Divi 5!
Divi 5 has a very powerful loop-building system, and today that system becomes even more versatile. Now, users can search, filter, and reorder loops on the front end. You can build custom forms that query post content, taxonomies, and custom fields, adding an entirely new dimension to loops.
Additionally, we recently added a toolip module that I havenโt had a chance to cover on the blog so I will do that today as well!
Thereโs much to explore, so let me jump into the builder and give you the full tour. ๐
Let Useres Search, Filter, and Reorder Your Custom Loops
In Divi 5, anything can be a loop. You can enable looping on any element, including containers, and then plug in dynamic content from posts in the loop to create dynamic feeds. You can use loops to build custom blog feeds, product lists, testimonial sliders, and anything else.
The new post filter modules allow you to build custom forms that let users on your websiteโs front end query those loops. They can search, filter, and reorder the looped content to find what they are looking for.
The post filter module adds a whole new dimension to loops!
Build Custom Query Loop Forms
The post filter module is a form wrapper, and inside it, you can add one or more post field item modules:
- Text โ The text field allows users to input a search query and search the loop. You choose what post meta is queried in the search, such as the post title, content, and custom fields.
- Select โ Render post meta and taxonomies of your choosing in a select menu, allowing users to query specific content types in the loop.
- Radio โ Similar to the select menu, except the single-option UI is rendered as a list of items instead of as a menu.
- Checkbox โ Render post meta and taxonomies of your choosing in a series of checkboxes, allowing users to query specific content types using a combination of different data.
- Button โ Render submit and reset buttons that, when clicked, query the loop using the userโs configured form fields.
- Order โ Allow users to order the loop in ascending or descending order.
- Order By โ Allows users to choose how a loop is ordered, such as by price.
Easily Add Tooltips To Any Module
We also added a new tooltip module. You might have noticed this one show up a few weeks ago, but it was never officially announced.
The concept is simple: add a tooltip module inside any module, and when you hover over or click the parent module, the tooltip displays.
You have full control over the style, position, and content of the tooltip. You can nest any module inside tooltips, making them incredibly versatile.
You can even use them in loops, as shown below.
Try Divi 5 Today
Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.
We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.
Have You Tried Divi 5โs New Grid Editor?
Divi 5 embraces CSS Grid. It comes with tons of flexible grid templates and all the options you could ever need to build every grid layout imaginable.
Recently, we took things a step further by introducing an interface to visualize, edit, and build advanced CSS grid layouts. Itโs awesome!
Whether youโre new to CSS Grid or an experienced developer, you can use the new interface to build stunning layouts without getting lost in a maze of settings.
Furthermore, thanks to Divi 5โs unique grid offset editor, layouts built with the grid editor are housed entirely within the container, which means you donโt have to worry about editing child elements, and every CSS Grid layout built with Divi 5 works with loops.
Watch this video for all the details. ๐
More Divi 5 Updates Are On The Way
The features keep coming, and we arenโt slowing down anytime soon!
If you are enjoying these updates, do us a huge favor by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and itโs essential to feed the algorithm and spread the word.
Donโt forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. Iโll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. ๐
In terms of loops, is there any plans to configure them based on relationships between post types, i.e. child post linked to the current parent post?
While weโre at it, any sign of a fix for Toolsetโs Views implementation of this? They function in the builder but are still broken on the front end since late last year.
Hey, Stephen! ๐
Native relationship-based loops are not currently available, but Divi 5 now provides the API hooks needed to implement them properly. Said another way, the foundations are there for further evolving Divi 5’s looping capabilities – for native and third-party solutions alike. ๐
Great new features. Any chance to see masonry layout for the loops? (not grid that resamble masonry – real masonry – horizontally stacked cards)
Hey, Tomek, great question! ๐
Divi 5โs Grid system can already produce true masonry-style loop layouts because the positioning logic is handled at the parent grid container level, while individual loop items are targeted and sized through internal pseudo-class rules. That means youโre not limited to a simple uniform card grid that only imitates masonry; you can create horizontally arranged, staggered card layouts by defining the grid structure on the parent and then controlling how specific items span rows and columns.
Hope this helps!
Looks great would like to know how this works with pagination.
Also in Extra theme there is a super useful option in the blog module which Divi has never had which is to not show already displayed posts. This enables the ability to create newspaper type of sites where there are dozens on content blocks showing posts which have multiple categories and where offset wouldn’t cut it. Would be great if this function was added to Divi’s blog module and the loop builder.