YOOtheme Pro 4.4 – Blend Content, Pro Image and Pexels Image Libraries
Will it blend? That is the question! We are so excited about this YOOtheme Pro 4.4 release. We can hardly stand it! So many questions. What is it with all new blend options for the transparent header, sticky columns and other elements? What are the new image libraries? And what else is new? This is going to be a huge release, but the question is, Will it blend? Let's find out.
Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.
Blend Transparent Header
First up, there is a new blend mode option for the sticky transparent header. You know how it automatically changes its color depending on the section behind? Well, now you can blend it with the page content instead. Scrolling down the page, the transparent header will blend with section backgrounds, images and all the other content. This is perfect for artistic websites with a lot of images or, even better, videos.
Blend Sticky Columns
Next, you can also blend sticky columns including all their elements. The sticky content will look so cool while scrolling the page, especially as part of sticky parallax effects.
Blend Elements
But that's not all. Of course, you can blend each element separately as well. This is especially great for elements on top of videos and sticky backgrounds, or if they're absolutely positioned above other elements and even moving using the parallax animation.
Blend Text in Overlays
Some elements are perfect for blending just as they are. We are talking about Overlay, Gallery and Overlay Slider elements, which are basically image backgrounds with a text on top. Now you can blend the text with the background with just a click and create a nice effect.
When blending sticky columns and elements, make sure that the text color is always white, since it's best for blending.
That's all for our blend options. And the answer is, "Yes, it blends!". Next up is our library update.
Pro Image Library
Did you ever want to use an icon from one of our demo websites in your own website? Thanks to the new Pro image library you can download any icon right into your layout with just a click. Simply browse through all the handcrafted icons, images and illustrations we have ever created for our demo websites. You can either search for a specific icon or filter them by the website, size, format and type. Hovering an icon will show its title and size. A small ellipse icon in the bottom right corner indicates that the icon comes in more color variations. Clicking it will unfold all the variations. Pretty cool, right? To see how images look on different backgrounds, we even added a color switcher for light, white and black backgrounds.
We've also put some extra effort into refining all the SVG icons. With the inline SVG option, the icon will automatically adopt the colors of your website. For some icons you can enable the stroke animation so that the image looks as if it is being drawn. And others already come with a built-in parallax animation.
But that's not all. On top of images from all YOOtheme Pro demo websites, we also added all the other icons we created in the past, like our premium icon sets and even icons from the Warp themes. Since our premium icons are optimized for different sizes, the ellipse icon will show their size variations. Now, all YOOtheme icons are just a click away!
By the way, we found the color switcher so handy that we decided to add it to the thumbnail view in the media manger too. Now you can see the images in your media folder in their best light.
Integrated Pexels Library
But we have another exciting update for our media manager! In addition to Unsplash, YOOtheme Pro now integrates another image library - Pexels, offering you an even wider selection of high-quality, free-to-use images directly in YOOtheme Pro. The best part is, you can try out images without having to download them. And once you're happy with your choice, just click Save, and Pexels images will be downloaded to your media folder.
We already use Pexels for our demo websites, so just like with Unsplash, we have created dedicated collections for each demo package where you can find your favorite images and use them for your projects. Just click the YOOtheme tab to see all the collections.
To make navigating through tons of images and collections a breeze, YOOtheme Pro will remember your scroll position and the collection you were browsing. To get back to the top or leave the collection, just click the tab you are currently in.
So these are our new image libraries for YOOtheme Pro. Mind that as with Unsplash, the Pexels and Pro Image library will only be available for users with the Developer or Agency subscriptions.
Next up are some dynamic content improvements.
Assign Templates to Child Terms
When you assign a template in YOOtheme Pro and limit it by category, you need to manually select all the categories. This means the template does not apply to subcategories automatically, and new categories need to be selected manually every time they're added. Now it's all in the past. There is a new option to include child categories, exclude them or even only include child categories. This applies to Single Article, Single Contact and Category Blog pages in Joomla and Single Post Type and all hierarchical Taxonomy Archive pages in WordPress.
Filter Posts by Child Terms
When you load custom articles in Joomla or custom post types in WordPress, you can also filter them by category or any other hierarchical taxonomy. Here we added the same option, so you can now select whether to include child terms, exclude them or only include child terms. This is really convenient because if you add a new subcategory, you don't have to update the template assignment or custom source filter anymore.
That's it for dynamic content, let's move on to the builder updates.
Menu Active State for URL Fragments
In YOOtheme Pro you can create a page navigation with URL fragments which will jump to the corresponding section within the page. Now the same navigation will automatically show an active state depending on your scroll position. It works out of the box for any Joomla or WordPress menu and of course the Nav element in the page builder.
Expand Content and Image
In our latest YOOtheme Pro 4.3 release, we added an option to expand content in Grid and Panel Slider elements and push links to the bottom. To make it consistent through all the elements, you can now also expand the element image, just like you know from the Panel element. And there is an additional option to expand both, image and content, which we specifically added if they are positioned side by side.
Hover Video
Overlay, Gallery and Overlay Slider have a new option as well. As you know, they can show a different image on hover. Well, now you can show a video on hover instead. Pretty nice, right?
Overlay Slider
We also recently added an option for the Overlay Slider to show its overlay when the slide moves into the view. This looks especially nice in combination with the stepless parallax animation. Now instead of displaying the overlay of all visible slides at once, you can make only one item active and show the rest one by one.
Social Element
The Social element is usually used to display icons which link to social media profiles. But this is a very specific use case, and we wanted it to be used more generally to create any kind of image navigation. This is why we added an option to set the width and height for the images and style the navigation as an iconnav or a thumbnav. Additionally, you can set the column and row gap separately.
Module Element (Joomla)
Finally, you can now edit a Joomla module directly from the Module element. This shortcut is similar to the one in the Modules panel and allows you edit your module without having to leave the page builder.
These were our page builder improvements. Now to some technical updates.
API Key (Joomla)
YOOtheme Pro now uses the native Download Key feature from Joomla allowing you to add the YOOtheme API key in System → Update Sites. So if your API key is missing, you will be notified in the control panel ensuring YOOtheme Pro is always up to date. You can add it here, in Joomla, or, as usual, in the Settings panel in YOOtheme Pro.
The latest Widgetkit and ZOO versions also make use of the Joomla Download Key feature. So if all three, YOOtheme Pro, Widgetkit and ZOO, are up to date, you can uninstall the old YOOtheme Installer plugin to keep your Joomla installation clean.
Improved Google Fonts Storage
As you know, YOOtheme Pro stores Google fonts locally, so once you select your font, it will be downloaded to your webserver. But from time to time, Google updates the fonts to fix bugs or improve them. To make sure your locally stored Google fonts are up-to-date, when recompiling the CSS we check if they're older than a week and download them again. YOOtheme Pro automatically recompiles the CSS when you open YOOtheme Pro after an update, or you can recompile it manually in the style customizer.
Further Improvements
Of course, YOOtheme Pro 4.4 also comes with further improvements and fixes. For example, section and column background images have the parallax target and start and end options.
We improved accessibility in YOOtheme Pro by wrapping the pagination in a <nav> element, and by adding the <aria-current> state for the pagination item and breadcrumbs item of the current page. Additionally, we fixed the semantic structure for the Panel Slider, Overlay Slider and Slideshow elements.
The Countdown element now also shows labels on xsmall devices.
And finally, we added Bluesky to social icons.
As always, for the full list of features and fixes, check out the changelog.
Next Steps
YOOtheme Pro 4.4 brings some great improvements to different parts of YOOtheme Pro. You can give your site a more artistic look with the new blend mode options, browse the new Pro Images and Pexels libraries to refresh your images and optimize your dynamic content layouts.
But you probably know what's coming next, don't you? Of course, we will present all the new features in next theme release. So get ready for some blending action coming your way!
Now go ahead and take YOOtheme Pro 4.4 for a spin. As always, we are looking forward to your feedback, so let us know what you think in the comments below.
