Align Elementor Image Box Title With Rest of Row

This has been bugging me recently with Elementor, in that you could have an image that would bring the text to not just possibly a different line, but flowing past the height of the image above it. It doesn’t have to be every x number of pixels, but rather varies depending on the image added.

Of course, you could simply edit the image so that it is at a certain size only. But there are still cases wherein the image would have to be at a different thumbnail size. One use case would be through centralising all slider logos.

Where cards would need equal height, you would adapt this to align based on the text rather than the image (easily editable through the JavaScript code snippet to be provided within this article).

jQuery(function ($) {
    /**
     * Elementor
     * Equalize the height of elements by their 'title'
     * @since 2.5.16 Elementor WordPress Plugin
     * @author Mic Sumner <[email protected]>
     * @link https://smnr.co
     */
    if ($(".elementor-image-box-img").length) {
        var boxesChildren = $(".elementor-image-box-img");
        var boxesParents  = boxesChildren.closest(".elementor-row");
        window.onload = function() {
            boxesParents.each(function() {
                var highestBox = 0;
                var boxParent  = $(this);
                boxParent.find(".elementor-image-box-img").each(function() {
                    if ($(this).height() > highestBox) {
                        highestBox = $(this).height();
                    }
                });
                boxParent.find(".elementor-image-box-img").each(function() {
                    $(this).height(highestBox);
                });
            });
        };
    }

})

This will be kept simple and the application will involve the JavaScript code presented above.

Code Explained

First off, like in most micro-optimisations for JavaScript DOM Manipulation through jQuery, check to make sure that the element exists before manipulating it. In this case check to see that there’s at least one element with the class selector .elementor-image-box-img available on the webpage. Afterwards you can begin the actual function.

You would need to group them up by their parent row. This would be the elementor-row element that was declared in the variable.

Now you can pass an IIFE to window.onload containing the necessary adjustments. Now loop through each and every .elementor-row, and within each and every .elementor-row, look for the tallest .elementor-image-box-img. If you would find a taller one, then update the highestBox variable. Once done looping, set the tallest height towards all the elements within their parent .elementor-row. Up one level, and by the time you realise it, you have passed through all .elementor-row elements by now and everything’s looking good.

Group of 3 Elementor cards with titles aligned regardless of image header size.

There will be CSS injected into the elements which need their height adjusted, so users may see that there is some adjustment going on. But if you are able to position these cards in a way that goes below their device’s fold (most possibly select the most common device and adjust through the fold from there) you would be able to hide the adjustment that is going on. Of course, you can still include different hacks like calling the entire Elementor image box to appear after the adjustment has finalised itself. This can be done through many ways — one of which through CSS opacity, or through JavaScript plugins.

If you guys are wondering about the CSS used to style up the Elementor Image Box widgets into cards, with their heights all aligned, please see the code below.

.elementor-widget-image-box {
    background: #FF4E50;
    /* fallback for old browsers */
    background-image: -webkit-linear-gradient(227deg, #F9D423, #FF4E50);
    background-image: linear-gradient(-137deg, #F9D423, #FF4E50);
    background-size: 150%;
    background-position: 50% 50%;
    box-shadow: 0 3px 5px 0 rgba(255, 78, 80, 0.24);
    border-radius: 8px;
    height: 100%;
    -webkit-transition: .3s;
    transition: .3s;
    cursor: pointer;
}

.elementor-widget-image-box:hover {
    box-shadow: 0 1px 3px 0 rgba(255, 78, 80, 0.08);
    background-position: 0% 100%;
}

.elementor-widget-image-box .elementor-image-box-img {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.elementor-widget-image-box .elementor-image-box-content {
    padding: 0 1rem;
    margin-bottom: 1rem;
}

Any questions please feel free to let me know!