Every web designer has done this at some point. You add an image to a layout, notice the crop is wrong, open Photoshop, adjust the file, export it, upload it again, and move on. Then the client replaces the image. The crop breaks again, the visual rhythm disappears, and the same manual fix starts over.
Divi 5 gives you a better way to handle this with Image Group Presets. Instead of editing the image file itself, you save the way an image should behave in the layout. That includes its aspect ratio, how it fills the frame, where the focal point sits, and any other image styling you want to reuse. Apply that preset across your site, and every image follows the same visual rules while the original upload stays untouched.
In this post, we’ll show you how Image Group Presets work, why they reduce the need for external image editing, and how to use them in carousels, product loops, and team sections.
What Are Image Group Presets In Divi 5?
Divi 5’s design system is built around reusable decisions. Colors can be stored as Design Variables. Spacing values can become reusable presets. Borders, shadows, text styles, and other option groups can be saved and applied across different elements. Image Group Presets bring that same idea to images.
Before these image updates, you could style images in Divi, but the reusable system did not fully cover how an image should crop, frame, and behave inside its container. If an image needed a specific crop or focal point, the common workaround was to edit the image file outside the builder.
Divi 5 changes that with three related improvements. Aspect Ratio lets you define a proportional shape for an element in the Sizing option group. For example, you can set an image to 1:1, 4:5, 3:2, or 16:9. The image can still resize across screen sizes, but the proportion stays consistent.
Image Framing controls how the image behaves inside that frame. Object Fit determines whether the image covers, contains, fills, or otherwise fits the available space. Object Position lets you adjust the focal point so the most important part of the image stays visible.
Image Group Presets let you save those image settings as a reusable Option Group Preset. That means you can save a full image treatment once, name it clearly, and apply it to other images across the site.
A preset might include:
- Aspect Ratio: A consistent image shape, such as 1:1, 4:5, or 2:3.
- Object Fit: A rule for how the image fills the frame, such as Cover.
- Object Position: A focal point for the crop.
- Border: Rounded corners, shaped edges, or image frames.
- Box Shadow: A reusable shadow treatment.
- Filters: Hover effects, color adjustments, or visual treatments.
The important shift is that the styling lives in Divi’s preset system instead of inside the exported image file.
Why This Reduces The Need For Photoshop
Photoshop is still useful for real image editing. You might use it to remove objects, retouch a portrait, adjust lighting, or create a composite. But many layout problems are not true image-editing problems. They are framing problems.
A product image needs the same portrait crop as the rest of the grid. A team photo needs the face centered. A carousel image needs to match the shape of the other slides. A blog card needs a predictable thumbnail ratio. Those are design-system decisions, not file edits.
When those decisions live in Photoshop, they disappear as soon as the image changes. If a client uploads a new product photo, the crop has to be recreated manually. If a team member sends a replacement headshot, the new file needs to be edited again. If a layout changes from square images to portrait images, every exported image may need to be recreated.
Image Group Presets move those decisions into the builder. The uploaded file stays original, while the layout decides how the image should display. That means a new image can inherit the same crop behavior automatically. A preset can be updated once and reused across many images. A local focal point can be adjusted when one image needs a different crop without breaking the shared preset.
The result is less file editing, fewer duplicate exports, and a more consistent image system inside Divi 5.
3 Practical Image Fixes You Can Make In Divi 5
The examples below cover three common situations where designers often reach for Photoshop: inconsistent carousel images, uneven product grids, and team portraits with different focal points.
Each example uses the same core idea: define how the image should behave, save that behavior as a preset for reuse, and keep image-specific focal adjustments local when needed.
1. Make A Group Carousel Visually Consistent
Carousels can quickly look uneven when each slide uses a different image size or orientation. One slide might use a landscape photo. Another might use a square graphic. Another might use a vertical image.
The content may be correct, but the carousel feels unpolished because the images do not share the same visual structure.
Start with the first image in the carousel. Open the Image module settings, go to the Design tab, expand Sizing, and set the Aspect Ratio to 1:1.
This gives the image a square frame. The image can still scale responsively, but its proportion remains consistent.
Next, go to the Framing option group and set Object Fit to Cover. This makes the image fill the square frame without stretching. Anything outside the frame is cropped cleanly.
If the subject sits too far left, right, high, or low, adjust Object Position to move the focal point inside the crop.
Once the image looks right, save those settings as an Image Group Preset. Hover over the Image option group header, click the preset icon, choose New Preset From Current Styles, and give the preset a clear name.
Use a name that describes the behavior, such as:
- Image: 1:1 Cover
- Image: Square Crop
- Image: Carousel Square
Now apply the same preset to the other images in the carousel. You can do this manually from each Image option group, or use Extend Attributes when you want to copy the treatment across matching elements more quickly.
Right-click the styled Image module, choose Extend Attributes, and target the other Image modules in the carousel. The image treatment transfers across the selected elements.
At this point, every carousel image follows the same crop rule. The slide images feel intentional instead of mismatched.
You can also layer other presets on top of the image treatment. For example, you might add a shaped border preset for a top arch, then stack a hover filter preset for a tinted rollover effect.
That is the benefit of Divi 5’s modular preset system. One preset controls the image crop. Another controls the border. Another controls the hover treatment. Each decision stays reusable and independently editable.
Finally, open the Preset Manager and edit the image preset. Change the ratio from 1:1 to 2:3. Every image using that preset updates together.
That is the Photoshop-saving moment. You are not re-exporting three images. You are changing one reusable image rule.
2. Create A Product Loop With Consistent Image Sizing
Product grids are one of the easiest places to spot inconsistent image handling. A store might have product photos uploaded at different times, by different people, in different ratios. When those images appear together, the grid can look broken even when the product data is correct.
A looped product card fixes the layout structure, while an Image Group Preset fixes the way the product image displays inside that structure. Start by creating the product card layout. Add a Row, add a Column, then place a Group module inside the Column. Inside the Group, add:
- Image module
- Heading module
- Button module
Once the card is styled, open the Column settings and enable Loop. Set the query type to Products so the layout pulls from the WooCommerce product catalog.
Then open the Row settings, go to the Design tab, expand Layout, and enable Layout Wrapping. This lets product cards flow across multiple rows and respond more naturally on smaller screens.
Next, connect the modules to dynamic content.
On the Image module, set the image source to Loop Featured Image. On the Heading module, set the content to Loop Product Title. On the Button module, set the link to Loop Link so each card links to its own product page.
The loop now pulls the correct products, but the image dimensions may still be inconsistent. To fix that, open the Image module inside the loop item. Go to Design > Sizing and set an Aspect Ratio.
For product photography, a portrait ratio often works well. Try 2:3 or 4:5, depending on the style of your product images and the shape of the card. Then open Framing and set Object Fit to Cover. This keeps the product images filling the same frame without distortion.
Because this Image module is inside the loop item, the settings apply to every generated product card. You style the image once, and the loop repeats that image behavior for each product.
It is still worth saving the treatment as an Image Group Preset. You may need the same product image style on a featured products section, a single product template, a related products area, or a custom landing page. A preset keeps that treatment reusable outside the first loop.
3. Use One Preset With Different Focal Points
Some image systems need consistency and flexibility at the same time. A team section is a good example. You may want every headshot to use the same shape, border radius, and object-fit behavior. But each photo may need a different focal point because the subjects are not positioned in the same place.
One person might be centered. Another might be lower in the frame. Another photo may be landscape even though the layout needs a portrait crop. Start by applying the same Image Group Preset to each image. For example, use a preset with a fixed portrait ratio and Object Fit set to Cover. This gives every image the same overall structure.
Then adjust Object Position locally on any image that needs a different crop. Move the X and Y position until the face or focal point sits correctly inside the frame.
This is where presets and local overrides work well together. The preset controls what should stay consistent: ratio, fit, border, radius, shadow, or filters. The focal point can stay local because it depends on the individual image.
If you later update the shared preset, the reusable structure can still change across every image using it. The local focal-point adjustments remain available for the images that need them. That gives you the best of both workflows: a consistent image system and enough control to avoid awkward crops.
Best Practices For Image Group Presets
Image Group Presets are most useful when they stay clear, reusable, and tied to real layout patterns.
- Name presets by behavior: Use names like Image: 1:1 Cover, Image: Product Portrait, or Image: Team Headshot instead of names tied to one page.
- Separate reusable rules from local decisions: Save ratio, fit, border, and shadow in the preset. Adjust focal points locally when each image needs a different crop.
- Use Object Fit carefully: Cover is useful for clean crops, but it can crop important details. Always review the result.
- Choose ratios by content type: Use square crops for uniform grids, portrait ratios for people or product cards, and wider ratios for banners, thumbnails, or editorial layouts.
- Stack presets intentionally: Keep image crop, border shape, hover filter, and shadow treatments separate when you want to swap them independently.
- Update through the Preset Manager: When a shared crop style needs to change, edit the preset instead of touching each image module.
- Check responsive views: A crop that works on desktop may need review on tablet and phone, especially when the subject sits near the edge of the image.
Format Your Images Inside Divi 5
Image Group Presets in Divi 5 do not replace every kind of image editing, but they do replace much of the repetitive layout-based cropping work. A carousel with mixed image sizes can become consistent. A WooCommerce product loop can use a single image rule for every product. A team section can maintain a shared visual structure while still allowing each headshot to use its own focal point.
The file stays original. The layout handles the crop. The preset stores the rule. That is the real shift. Image behavior now lives inside the same system as your colors, spacing, typography, borders, and shadows. When the design changes, you update the preset. When the image changes, the preset still holds.
So the next time an image crop feels off, you may not need to open Photoshop at all. You may just need to open the Divi 5 Preset Manager.
Leave A Reply