I am excited to introduce a host of new image settings for Divi 5.
First, we added new aspect ratio settings to all images. Elements with aspect ratios scale proportionally across different screen sizes.
Next, we added framing settings that allow you to reposition cropped images within a defined aspect ratio. Take any image, regardless of its size, and make it fit perfectly into your design! It’s a great way to make perfect-looking loops.
Finally, we enabled option presets for the image option group. That’s huge! Now you can manage the style of all the images in every Divi module using Divi’s preset-based design system.
There’s much to explore, so let me jump into the builder and give you the full tour. 👇
Brand New Image Settings & Preset Support
Images are a critical part of every website, and many Divi modules include image elements. You’ve probably spent a lot of time styling and cropping images for your websites, and now, Divi makes it easier than ever.
Aspect Ratio
Every module includes new aspect-ratio settings in the sizing option group.
When you define an aspect ratio, the element will adjust its height proportionally, maintaining that ratio as it scales up or down across different screen sizes. This is especially useful for images, allowing you to take a wide range of sizes and change their aspect ratio without an image editor.
Image Framing
When an aspect ratio, or an explicit width and height, is applied to an image, the image will stretch to conform to the size you defined.
You don’t want your images stretched or contorted, so how can you take a landscape image and make it square while resizing proportionally? That’s where Divi’s new framing settings come in: you can reposition an image within its frame and choose how it fills the available space.
Image framing is useful whenever you want an image’s rendered size to differ from its intrinsic size. That’s common when changing aspect ratio explicitly, but also when an image has a variable aspect ratio, such as when growing to fill its parent container.
Image Presets
Every image throughout Divi’s suite of modules now supports presets. Instead of styling your images over and over, create a set of shared styles you can reuse.
When you update the preset, every image that uses it is updated in a single step.
Image Settings Harmony & Composable Settings
Every image option group has been harmonized and supports the same set of design options. Furthermore, all images support composable settings, allowing you to leverage Divi’s entire design suite when customizing image sub-elements.
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 the new Variable Geneartor?
We recently released the Variable Generator for Divi 5.
At the core of Divi 5’s design system are variables and presets. With advanced units, you can create fluid, responsive sizing systems using clamp(). With relative colors, you can create mathematically beautiful color systems using HSL. When you set everything up correctly, it makes managing your website so much easier.
But setting up all your color and number variables takes time, and learning clamp() can be intimidating.
That’s where the new variable generator comes in, allowing you to spin up an entire sizing and color variable system automatically in a few clicks. It’s easy for beginners because Divi does the work for you, but it also offers all the controls you could ever ask for, allowing CSS experts to customize their systems fully.
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 and let us know 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. 😁
love this update! This will be particularly helpful building things for non-technical content contributors who upload all sorts of funky image orientations that previously would mess up a design.
A feature request would be to allow for selecting what image variant or sub-size you use for different modules that use images. for example on a blurb or blog module I would like to be able to select which image variant is used based on my design.
Looks great 👍
A future request would be to allow auto dropdown for child element in the links module to enhance menu creation.
Also add every wp native parameters to the loop builder like parent/child’s for example