As a web designer, consistency in designing contributes to a cohesive overall design and a positive user experience. There are several benefits of maintaining consistency in web design, as below:
- Efficiency in the development and maintenance of the website
- Enhanced aesthetics and user engagement
- Perception of credibility and professionalism among users
- Etc.
Well, talking about consistency, making the objects always fit into the container is one of the parts of keeping consistency in your web design. This article will show you how to set the object fit on the Divi Image module.
How to Set Object Fit on Divi Image Module
Setting the object fit on Divi Image is very easy; you only need to add a simple CSS snippet to the Page Settings of Divi Builder.
The “object-fit” property in CSS has several values. It defines how an image should fit within its container, such as cover, contain, fill, none, and scale-down. Those values can be applied using custom CSS in Divi.
In this example, we will show you how to cover an image to the entire container of the Divi Image module (“object-fit: cover“).
“object-fit: cover“:. This value scales the image proportionally to cover the entire container while maintaining its aspect ratio. The image will be cropped if necessary to fit within the container.
1. Add the Image Module
Alright, we are going to start with adding an Image module. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with three columns, select the Image module, and insert that module into the column. Afterward, put an image into a module, then edit and style up the module with your preference.
In this example, we add an image with landscape orientation and set the module height to 300px and the border to 150px of four rounded corners.
Once you’ve finished editing and styling your module, duplicate the column two times and then delete unused columns.
2. Add the Custom CSS
As you can see from the image above, the images look bad, right? So, our job is to make the images look proportionally to cover and fit within the entire container.
Go to the Page Settings by clicking the gear button (⚙️) on your Divi Builder editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.et_pb_image img{
object-fit: cover;
}
The Code Explanation:
CSS code above targets the elements (Image modules) on your specific page that have the class “.et_pb_image” and applying the “object-fit: cover” property to ensure that the image covers the entire container without distorting its aspect ratio.
That’s it. Now the images on your Image module look good, right? And if one day you want to change the images, the images still look proportionally to cover and fit within the entire container of the Divi Image module. Don’t forget to save your project or publish it if you want to.
The Bottom Line
This tutorial demonstrates how to establish object fit on the Divi Image module quickly and effectively. Every Image module on your page can have proportionate and consistent images by just adding some easy custom CSS. For further information on other “object-fit” values, see here.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.
