YOOtheme Pro 5 – Cookie Consent Manager, Date Filter and On-Click Loading Videos

Today we're excited to introduce YOOtheme Pro 5! From cookie consent manager, lazy loading videos and date filter to bidirectional relationships, language switcher and scroll-driven animations – this release has something for everyone. There's a lot to cover. So let's get started!

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Cookie Consent Manager

First up, a topic that matters to everyone — privacy. We've completely reworked how cookie consent is handled in YOOtheme Pro.

Add a fully integrated consent manager with a cookie banner. Get consent for categories and single services, and show placeholders for embedded videos and maps – all without extra plugins and perfectly matching your site's design.

Handling cookie consent is quite a hassle, and a third party solution often adds extra costs. That is why YOOtheme Pro comes with a built-in consent management solution that is GDPR- and CCPA-compliant. Simply choose from prebuilt scripts like the Google Tag Manager or add your own custom scripts and load them either in the head or body of your website. Assign the scripts to one of the dedicated consent categories: functional, preferences, statistics or marketing. Functional cookies are always enabled to keep your site functioning properly, while users can allow or deny the other categories to protect their privacy until consent is given. They can even accept services individually, and change their preferences any time.

The cookie banner is seamlessly integrated to fit your site's design, no matter if you display it as a floating card, a notification, or as a full-width section at the bottom of your site. The consent manager modal is just as flexible. Show everything in a list, collapse single services with toggles or collapse all categories using an accordion. All with tons of layout options to suit your needs.

But there's more. If consent isn't given for embedded content from YouTube, OpenStreetMap or Google Maps, YOOtheme Pro will automatically show a placeholder image instead. Videos and maps will only load on click. And before that, no external requests will be sent to their servers, and no JavaScript will be loaded.

Thanks to the integration of the official WordPress Consent API, third-party plugins like WooCommerce register and respect user consent out of the box with no manual setup.

The YOOtheme Pro cookie consent manager is a smart, lightweight solution that covers all compliance needs — all built-in without any extra costs. Next up is our performance update for videos.

Lazy or On-Click Loading Videos

Load all videos on your site lazy as they enter the viewport, or, for standard videos with controls, load them only after clicking a placeholder image.

To speed up page loading times and decrease traffic, YOOtheme Pro loads videos lazy by default, no matter if it's a section background or a video gallery. They are loaded as they enter the viewport when scrolling. Eager loading, on the other hand, is best for videos in the initial viewport, as they load immediately when the page opens. But that's not all. You can also load videos on click. The video is first loaded after a placeholder image is clicked instantly replacing it with the video. This also works for embedded iframe videos from YouTube or Vimeo. Here, no external requests will be sent to their servers, and no JavaScript will be loaded until the placeholder image is clicked, which is great for privacy and GDPR.

But that's not all, as you know, you can use videos as animated images across all YOOtheme Pro elements. And now we've added even more options.

Videos as Animated Images

Bring your images to life with videos. Use them like animated images across your layouts, in hero sections, product galleries, or slideshow backgrounds. All loaded lazy for a great site performance.

Videos are everywhere on modern websites. They deliver immersive experiences and make your website more memorable. To make the videos look like animated images, they autoplay, loop, have no controls, and are muted. Optionally, pause playback when the video leaves the viewport and resume it again from the same spot when it re-enters. Or for more interactivity, only play the video on hover. Videos can be used across all builder elements, from panels and overlays to galleries and sliders. You can even create mixed galleries with images and videos using dynamic content. Simply map a custom field that includes both an image and a video, and YOOtheme Pro will automatically display whichever is set for the item.

We're really excited about this video update. Now you can use them anywhere without worrying about performance ever again. Next, let's talk about dynamic content. It's the most powerful feature of YOOtheme Pro — but when it came to building event websites, it just wasn't possible. Until now. Let's take a look at our brand-new date filter.

Date Filter

Easily filter and display dynamic content depending on any date field, including custom fields. Show posts from the past or future, relative to today, or within a fixed date range.

Do you want to show upcoming events, past matches, or movies from a certain year? Now you can! With the date filter, you can load any content based on the post's published date or any custom date field, like start and end dates of an event. Choose a date range relative to today — this can be any number of days, weeks, months or years. For example, show events in next 30 days starting tomorrow or from the last 30 days starting yesterday. You can also choose whether to include today in the range.

But that's not all, you can choose full calendar periods instead, which means the whole week, month, or year. For example, if today is mid-June, you can show the upcoming matches in July. And if you start today, it will include the current partial period, which are the remaining matches in June. Of course, you can also show matches from the current day, week, month or year.

If you want to display content from a specific time frame, like movies from 2015, simply set a fixed date range instead.

For even more flexibility set a PHP relative date format. This is especially useful to group events by month.

The date filter not only works with custom sources, but also with related sources, including from custom post types.

This is so powerful! You can create a website for events or matches, or any date-driven content, right out of the box. No third-party extensions needed!

We can't wait for you to get your hands on the date filter and see the amazing event websites you'll build with it. And to simplify how you manage relationships — for example, between events and organizers — we have a new feature for you.

Bidirectional Relationship

Save time with bidirectional relationships between content types. Simply connect them once, and load related content dynamically from both sides.

Let's say you have two content types — events and organizers. You'd want to show the organizer on the event page, and its upcoming events on the organizer page. By default, the relationship is unidirectional. So each content type has its own related field, and you need to pick the related items on both sides. With a bidirectional relationship, you only need to pick it on one side, and it will be related in the other direction as well.

In Joomla, we use the free Articles Field from Regular Labs to create a unidirectional relationship between content types. So related content is only selected on one side. This is where YOOtheme Pro comes in. When loading dynamic content, it fills the gap by automatically providing the corresponding related fields for the other side with all referencing items. So you get bidirectional relationship out of the box.

In WordPress, we use the Advanced Custom Fields plugin which offers a bidirectional relationship between post object fields. Simply enable the "Bidirectional" option on both sides and select the corresponding target fields. Now, when a related post is picked in one field, it's also saved in the other. In the layout, you can dynamically load each related custom field just as usual.

It's a real time-saver — especially when working with multiple related content types.

Additionally, you can now order items from the ACF post object field in WordPress by any field, including custom fields. And it now supports multiple post types.

That's it for dynamic content. Next up is our new language switcher.

Language Switcher

YOOtheme Pro is multilingual-ready. With its modern language switcher, building multilingual websites in Joomla or WordPress is easier than ever.

YOOtheme Pro supports multilingual websites out of the box, whether you're using Joomla's native language system or WordPress plugins like Polylang or WPML.

The language switcher integrates seamlessly into your main navigation or any other menu on your site. The active language is shown as a parent item, with all available languages listed as submenu items. This way, the language switcher looks and behaves just like any other menu item and has the same options. For example, you can add a globe icon next to the active language. And if you're only using a few languages, you can hide the active language and show the full list side by side. Of course, you can also add the language switcher to the footer.

In Joomla, just use the URL menu item type and enter #language-switcher as the link to add a language switcher to your menu. In WordPress, Polylang and WPML have their own language switcher menu items. Just add one to your menu, and you're done.

Finally, there's a nice-looking language switcher built right into your YOOtheme Pro menu. And speaking of menus, building one for a large category tree can be a tedious task. Worse yet, adding it to your page builder layouts usually means dealing with Joomla modules or WordPress widgets. That's why we've added another time-saving feature for you.

Menu Element

Display menus anywhere in your page builder layout with the Menu element – from sidebar and accordion menus to dropdown menus. Even render a menu for a taxonomy with just a click.

The Menu element offers an easy way to add menus to your site. Simply add it to your page builder layout and define exactly the menu structure you need. Select your Joomla or WordPress menu or, a taxonomy, for example, categories, which will be rendered as a menu. Optionally, pick a base item to always render its submenu items, no matter on which page you are on. Use the start and end levels to control which menu levels are shown, for example, display the first level as the main navigation and the second level as a sidebar menu. Show submenu items from all items or only the active item.

Now that you have the right menu structure, it's time to style your menu. Display it as a multi-level sidebar menu, a collapsible accordion menu or a horizontal dropdown menu. You can even make any navigation sticky with the page builder. Pretty powerful, right? With all these options combined, there's almost no menu you can't build.

But that's not all. You can now map the active state for taxonomies like categories or tags when using dynamic content. This means that you can create a fully-functional menu using just the Nav and Subnav elements, which gives you even more flexibility.

So, menus? Check. Next we have a simple but really helpful feature — a new file field for Joomla.

File Field for Joomla

Add a dedicated file field to your Joomla articles and map the file URL, name, size and extension when using dynamic content in the page builder.

YOOtheme Pro adds a custom field plugin for Joomla. Just like the media field, you can pick files directly from the file system. But in the YOOtheme Pro page builder further file details are available when using dynamic content. Simply map the file URL, name, size, extension, and more in any YOOtheme Pro element. For example, use the Table element, to create a nice list of downloads. And in WordPress? Just use the File field from ACF.

And since often you want to show the file extension uppercased, we added a text transform option to dynamic content. Now you can uppercase, lowercase, or title case any content loaded dynamically. But now let's get into something more colorful.

Background Colors with Scroll-Driven Animations

Add some extra color to your website with custom background colors for sections and columns and bring them to life with scroll-driven animations.

Sections and columns in YOOtheme Pro use your site's global colors, but sometimes, you just need something more special. That's why you can set your own background colors or gradients for any page builder section or column. But there's more. You can add a scroll-driven animation that transitions background colors as you scroll. Set start, intermediate, and end color stops, position them along the animation sequence, adjust the easing, and define when the animation should start and end. This gives you full control to create colorful section and column backgrounds.

Did you notice the combination of background colors and transparent images? You can really create some beautiful, atmospheric mood sections. By the way, you can load the section style and background color dynamically. Next up are flexible column layouts.

Fill Available Column Space

Create perfectly aligned multi-column layouts in the page builder by expanding the height of elements or pushing content down to fill the available column space.

Multi-column layouts usually have different heights depending on their content. Often you want to align the content of the smaller column to match the height of the other columns. With YOOtheme Pro's flexible column layouts, you can align content across page builder columns with ease.

Elements styled as cards or tiles can expand their height to fill the available column space. Elements with an image or video can also stretch to match the column height. Even if they are followed by other elements, they still expand to take up the available space, pushing the elements down.

Alternatively, content can be pushed down using auto margins. Setting the bottom margin of an element to auto fills the remaining column space and pushes the following elements to the bottom. This option is also available for all content fields of an element, allowing the content itself to be pushed down to match the element's height.

This gives you so much flexibility for your layouts, whether you're building perfectly arranged bento grids or simply aligning the Read More buttons on your blog page.

We've already started to use this feature in our layouts and updated all our theme packages. Next up are search results in Joomla.

Joomla Search Ordering Element

Easily order Joomla search results in the page builder layout with the Search Ordering element. Sort results by relevance, date or title to enhance the overall search experience.

Search results in Joomla are usually sorted by relevance, but sometimes, you would want more control. Simply add a Search Ordering element to your search page builder layout. It adds a button that opens a dropdown with all available sort options. Optionally, add a sort icon or display a parent icon to indicate the dropdown. It's a simple way to improve the overall search experience. Mind that you first have to create a hidden Smart Search menu item in Joomla and define the sort fields in the advanced settings.

So, that's one for Joomla, next is one for WordPress.

WordPress Archive Templates

Take full control of every single WordPress archive separately – exclude posts from child categories, set the number of posts per page and define the post order.

In YOOtheme Pro, you can create templates for post type and taxonomy archives and display their posts dynamically in the layout. The template assignment has further options to fine-tune each archive page individually. Exclude posts from child categories in taxonomy archives so you can display them separately from posts in the current category, for example, grouped by the subcategories. Set the number of posts shown per page to fit your content and layout. Finally, change the post order from published date to title for archives where alphabetical sorting is more important, like service listings or team directories.

So these are the main features of YOOtheme Pro 5. We hope you enjoyed this new way of presenting them with dedicated trailer videos. But that's not all. We have even more improvements of existing YOOtheme Pro features.

Media Overlay Color

You know how you can recolor images in YOOtheme Pro using a blend mode and an overlay color? Up until now, in the Gallery, Overlay Slider, and Slideshow elements, this was only possible for each item individually, which wasn't very practical if you wanted to color all items the same. That's why we've added general options to recolor all items at once, and even to add a gradient overlay.

Margins and Paddings

We've improved the general margin options across all builder elements. Previously, if you wanted different margins, you could only remove them in one direction. Now, you can set the top and bottom margins separately.

It's the same for paddings in builder sections, you can now adjust top and bottom padding individually as well.

These refinements give you more precise control over spacing in your layouts.

Updated Headline Element

The Headline element can now have an image or icon. For example, add a decorative icon at the start of the headline, or a chevron icon at the end to indicate that the headline is linked.

You can also add an outline effect to your hero headline to give it a modern, eye-catching style. And to adjust the stroke width, use the new text stroke option for the Text component in the style customizer.

Updated Subnav Element

Do your subnav items sometimes wrap into the next line on mobile devices? Finally, we have a new wrap option to force items into one line. Thanks to the new overflow fade effect from UIkit, items that extend beyond the container are subtly faded out and can be scrolled horizontally. It's especially smooth on touch devices, where you can easily swipe through the menu items. The same option is also available for the navigation in the Switcher, Grid and Gallery elements.

And, you can also add an image or icon for the items in the Subnav element.

More Rounded Borders

We added more rounded border options in the page builder. First, you can set a rounded border for builder columns if they have a background color, image or video.

We also streamlined image border options across elements by adding rounded, circle, and pill border to the Overlay Slider, Popover, and Slideshow elements.

Finally, for all YOOtheme Pro styles that didn't have a section overlap image, we've added rounded borders to create the look of overlapping sections. You can fine-tune the border radius directly in the style customizer.

With all these new border options, you can create a unique look that puts the focus entirely on rounded borders. Next are more element improvements.

Element Improvements

All multiple items elements now have name, id, class and attribute options for their items. We know you want this ;)

And here's another one! All link fields now have options for the rel attribute with nofollow and noreferrer values, as well as the download attribute.

We added a new overlay option to the card style across all elements. This semi-transparent card is specifically designed to look great on top of images.

The Countdown element can reload the page automatically once the timer expires, removing the element from the layout.

Additionally, you can set all the heading styles for the countdown and its labels individually, which makes styling the countdown in different sizes much more flexible.

Both slider elements now have an option to vertically center rows. For the Panel Slider element, this works great if items have different content lengths. And in the Overlay Slider, it's perfect for images with different orientations.

The background image in the Popover element has the same height options as the Image element. It can fill the available space in the column or adapt the height of the viewport and, optionally, subtract the header height.

The HTML element now has general settings so you can easier align it in the page builder layouts.

You can now set an xsmall margin in the general element settings.

Finally, you can change the link style for individual items in the Grid and Panel Slider elements, for example, if you have different card styles on a pricing page.

Restrict Access

We've removed the YOOtheme Builder button for creating new layouts in the Joomla article and WordPress post edit views. If an article or post already has a YOOtheme Pro layout, the YOOtheme button now opens the full customizer instead. This button is only visible to users who have permission to open YOOtheme Pro — the Edit Templates permission in Joomla or the Edit Theme Options capability in WordPress.

All other users will simply see a notice indicating that the page layout is locked.

Field Mapping Across Relationships

One feature sneaked into YOOtheme Pro 4.5 but didn't make it into the release blog post. It's pretty powerful, so here's a quick breakdown.

The field mapping UI has been completely reworked. Previously, all available fields were shown in a flat list grouped by content type. Now, you can drill down into related content types to access all their fields. For example, when mapping fields for an article, you can navigate into the related author or category to map one of their fields.

What really makes it powerful is that you can now navigate multiple levels deep through relationships. Imagine starting with an article, going into its category, and then accessing the parent category — all within the field mapping UI. You can then map fields from that parent category directly.

The same applies when selecting a multiple item content source. You can now navigate multiple levels deep through related single content sources to reach their multiple content sources. For example, starting from the article's category, you can go into its parent category and get its child categories, which are the sibling categories of the category the article belongs to.

This unlocks powerful new ways to work with deeply nested, relational content structures.

New Element Presets

Our Pro Preset library has grown with 10 new element presets. For the Grid element, there's a preset showing a filter in the pill style

And another one that justifies columns with different heights at the bottom when scrolling.

The Gallery element now showcases a brand-new product lightbox with a horizontal thumbnav with images and videos.

We've also added a new preset for the Overlay Slider with a parallax effect that centers the active slide when scrolling.

A Panel Slider with videos on hover.

A Slideshow element with autoplaying videos.

The Social element shows its two new styles: iconnav and thumbnav.

Finally, the Button element got two new presets that open dialog content in either an offcanvas or a modal window. Of course, you can load these and many more element presets into your layouts with just a click, or instantly transform your own elements to give your content a fresh new look.

Framework Updates

In this release, we focused on fine-tuning the PHP codebase through performance profiling and refactoring. YOOtheme Pro is now faster and lighter than ever before. We even could remove all internal cache files, ensuring that you always get fresh, up-to-date content. We achieved this by switching from JSON to PHP files for all element configurations and introducing lazy loading for GraphQL source types. And don't worry — everything remains fully backward compatible.

Additionally, we completely refactored image generation in YOOtheme Pro. Creating srcset images in multiple sizes and modern formats like WebP and AVIF is now much more efficient. The process is faster thanks to fewer file checks and smarter handling of image sizes, which also saves storage space. Best of all, cached images keep the same URL whether they're generated or not, ensuring perfect compatibility with any caching solution. Mind that cached images are now stored in dedicated cache folders — media/yootheme/cache in Joomla and wp-content/uploads/yootheme/cache in WordPress, and not in the theme folder.

Further Improvements

As always, YOOtheme Pro 5 also comes with further improvements and fixes.

We renamed the dynamic condition to display condition. Here you can now also use all the field options to manipulate the content of the field. This is especially useful for date fields allowing you to apply custom date format to simplify the condition.

Just like with pages, there is a Builder button to edit the template you're currently browsing. So no need to look through the template list any more.

We've optimized the delay when opening and closing navbar dropbars, making it easier to navigate, even with large mega menus.

In the Joomla link picker, you can now select categories, just like articles and menu items.

The Joomla highlighting of search word was missing in the search layouts created with the page builder. Simply add the js-highlight HTML class to the element that loads the search results dynamically, and the search word will be properly highlighted.

And finally, we have improved some components in the style customizer which we will show you with the upcoming theme packages.

As always, for the full list of features and fixes, check out the changelog.

Breaking Changes

YOOtheme Pro 5 introduces a few small breaking changes for both end users and developers.

For end users, support for Joomla 3 and 4 has been removed. Additionally, the Countdown element no longer has a dedicated style in the style customizer. Its appearance can now be adjusted directly through the new style options available within the element itself.

For developers extending YOOtheme Pro with custom elements or extensions, several important changes were made as part of our refactoring:

• The path alias ~yootheme pointing to TEMPLATE_DIR/packages has been removed. Use ~assets instead to link to files in TEMPLATE_DIR/assets.
• The YOOtheme\ImageProvider class has been removed. Use YOOtheme\Image::create() instead — examples can be found in YOOtheme Pro 5.
• The YOOtheme\Builder\Joomla\Fields\FieldsHelper class has been removed. Use Joomla\Component\Fields\Administrator\Helper\FieldsHelper::getFields() instead.
• The builder.template event in Joomla no longer receives the view as its first parameter. It now passes an event of type \YOOtheme\Theme\Joomla\LoadTemplateEvent instead.
• With the updated general margin settings, any third-party element using them must be updated accordingly. Refer to this example commit for guidance.
• To make your custom multiple items elements support the new id, class, and attribute options, see this commit and ensure the $attrs are passed in the template, for example <?= $el($element, $attrs) ?>.

Next Steps

Wow, what an update! YOOtheme Pro 5 brings a whole new cookie consent manager, a performance update with lazy and on-click loading videos, a date filter for events, and support for bidirectional relationships. There's also a beautifully integrated language switcher for multilingual sites, scroll-driven color animations, more flexible column layouts, a brand-new Menu element, and so much more.

Next, you can look forward to three new theme packages that will show you all these features in action.

Now go ahead and take YOOtheme Pro 5 for a spin. As always, we are looking forward to your feedback, so let us know what you think in the comments below.