Introduction
In this tutorial, I’ll show you how to customise the aspect ratio of your Elementor Gallery Widget. By following these steps, you can adjust the proportions of your gallery images to create a more polished and professional look.
While Elementor Pro ‘s Gallery Widget provides a range of aspect ratios, it doesn’t include some popular portrait ratios like 2:3, 3:4, and 5:7. The Basic Gallery widget, on the other hand, doesn’t provide any built-in options for setting aspect ratios. Fortunately, there’s a simple solution: Custom CSS. Just remember to crop your images to the correct dimensions before uploading them to ensure they are displayed properly.
Applying a Custom Aspect Ratio to the Pro Gallery Widget
The Gallery Widget is only available in Elementor Pro . If you’re using the free version of Elementor, skip to the next section to learn how to customize the Basic Gallery Widget.
Add the Gallery Widget to your desired section or container and upload your images.
Edit the gallery widget by navigating to Advanced > Custom CSS, and add the following custom CSS:
selector .e-gallery-grid .e-gallery-image {
--aspect-ratio-value: 3 / 4;
/* Calculations */
--aspect-ratio: calc(100% * (1 / (var(--aspect-ratio-value))));
}Replace "3 / 4" with your preferred aspect ratio.
The Pro Gallery widget uses background images, so we use padding to set a custom aspect ratio. The --aspect-ratio property determines the padding-bottom value for the div.
Applying a Custom Aspect Ratio to the Basic Gallery Widget
If you’re using the free version of Elementor or prefer the Basic Gallery Widget, there’s no built-in option to set a custom aspect ratio. Here’s how to do it:
Add the Basic Gallery widget to a section and upload your images.
Assign a CSS class name to the basic gallery under Advanced > CSS Classes.
Add the following Custom CSS using your preferred method. You can place it under Appearance > Customize > Additional CSS, in your child theme‘s style.css file, or using a code snippet manager like Code Snippets Pro or WPCodeBox:
.dd-gallery .gallery-item img {
aspect-ratio: 3 / 4;
object-fit: cover;
width: 100%;
}This CSS snippet sets the desired aspect ratio and ensures the images are fit properly within the Basic Gallery widget using the object fit property. Don’t forget to replace 3 / 4 with your preferred aspect ratio.