How to Create a Custom Aspect Ratio for Elementor Gallery Widget

Introduction

In this tutorial, we will guide you through how to customize the aspect ratio of your Elementor Gallery Widget. By following the steps outlined below, you can easily adjust the aspect ratio of your gallery images to achieve a more visually appealing and professional appearance.

Elementor Pro’s Gallery Widget provides a selection of aspect ratios for gallery images, but it lacks some popular portrait ratios like 2:3, 3:4, and 5:7. On the other hand, the Basic Gallery widget doesn’t offer any built-in options to set the aspect ratio. Thankfully, we have a straightforward solution for both scenarios: Custom CSS. Keep in mind that it’s crucial to crop your images to the appropriate dimensions before uploading them to ensure they are displayed correctly.

Applying a Custom Aspect Ratio to the Pro Gallery Widget

The Gallery Widget is a feature exclusive to Elementor Pro. If you are using the Free version of Elementor, you can 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 insert all the necessary images.

Edit the gallery widget by going 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))));
}

Remember to replace the value "3 / 4" with your preferred aspect ratio.

The Pro Gallery widget applies images as background images, so we use padding to set a custom aspect ratio. The custom property (–aspect-ratio) determines the value of the padding-bottom for the div.

Applying a Custom Aspect Ratio to the Basic Gallery Widget

If you’re using only Elementor Free or prefer to use the basic gallery widget, there’s no native option to set a custom aspect ratio. Here’s how to achieve it:

Add the Basic Gallery widget to a section and insert all the necessary images.

Assign a CSS class name to the basic gallery under Advanced > CSS Classes.

Now, add the following custom CSS using your preferred method. You can add it under Appearance > Customize > Additional CSS, your child theme‘s style.css file, or use 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 sets the object fit to cover within the Basic Gallery widget. Remember to change the 3 / 4 with your preferred aspect ratio value.