This article will show you how to change the default aspect ratio of the featured image in the Divi Blog module. Why does it matter for your web design? The primary reason is that the Divi Blog module forces to display the aspect ratio of the featured image to 16:10 (default), and Divi doesn’t have a feature to customize the aspect ratio by default.
Images that have different ratios have other effects and perspectives. For example, images in a 9:16 ratio and 16:9 have different orientations and compositions, giving different image perceptions. The first number in the ratio is the width, and the second is the height; a colon (:) usually separates it. Image ratio defines how the height of an image compares to its width.
Steps to Change the Default Aspect Ratio of Featured Image in Divi Blog Module
Step 1: Add the CSS Snippet
On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.
In this example, we will show you how to change the default aspect ratio of featured images in the Divi Blog module to a 1:1 ratio. So, the CSS snippet will be like as below:
.wpb-blog-image-ratio-1-1 .entry-featured-image-url {
padding-top: 100%;
display: block;
}
.wpb-blog-image-ratio-1-1 .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Note: You can use that CSS snippet to change the default featured image aspect ratio to any aspect ratio by editing the CSS classes and the percentage value of padding-top value.
Guidance of Edit the CSS Classes and Padding Top Value
- CSS Class
The CSS class you add to the CSS snippet depends on the featured image aspect ratio you want to display in the Divi Blog module.
An example CSS snippet that we gave you is for a 1:1 ratio, so the CSS class is .wpb-blog-image-ratio-1-1 , but if you want to change the default aspect ratio of the featured image to 16:9, the CSS class will be .wpb-blog-image-ratio-16-9. This also applies to other aspect ratios. You must replace the last two numbers with the aspect ratio you want to display as a featured image in the Divi Blog module.
- Top Padding Value
An example CSS snippet that we gave you is for a 1:1 ratio, so the value of the top padding is 100% , but if you want to change the default aspect ratio of the featured image to 16:9, the value will be 56.25%; why?
Here’s how to determine the value of top padding:
- A second number is divided by the first number (height divided by width).
- Move the decimal over two places to the right.
- Add a percent sign.
Examples:
- Aspect ratio 16:9 – 9 / 16 = 0.5625 = 56.25%
- Aspect Ratio 9:16 – 16 / 9 = 1.7778 = 177.78%
- Aspect Ratio 4:3 – 3 / 4 = 0.75 = 75%
- Aspect Ratio 3:4 – 4 / 3 = 1.3334 = 133.34%
Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.
Step 2: Add the CSS Class to the Divi Blog Module
Go to your Divi editor, and we will start everything from scratch, so create a section with a single column, select the Blog module, and insert that module into the column. Once you’ve added the Blog module, you can edit and style up the module to your preference.
Next, we will add the CSS Class to the module. On the module settings, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add a CSS class to the CSS Class field. In this example, we will show you how to change the default aspect ratio of featured images in the Divi Blog module to a 1:1 ratio. So, the CSS class will be like as below:
wpb-blog-image-ratio-1-1
Note: The CSS class you add to the CSS Class field must be identical to the CSS class you’ve added in the CSS snippet on Divi Custom CSS (step one).
As you can see from the image above, when the CSS class was added to the Blog module, the default aspect ratio of the featured image changed to a 1:1 ratio. Don’t forget to save or publish your project if you want to.
The Bottom Line
This article shows how easily you can change the default aspect ratio of a featured image in the Divi Blog module. Aspect ratio is essential to website content because each image aspect ratio has different uses and perspectives. Therefore, choose the aspect ratio that you use according to your needs.
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.
