Elementor Loop Grid: Ganzen Container klickbar machen

In Elementor lässt sich ein kompletter Container nicht immer sinnvoll direkt verlinken.
Bei Loop Grids kann deshalb der Link eines vorhandenen Elements innerhalb der Karte
verwendet werden, um den gesamten äußeren Container klickbar zu machen.

1. CSS-Klassen vergeben

Dem äußersten Container des Loop-Items die Klasse
clickable-card geben.

Dem Element, das bereits korrekt zum Beitrag verlinkt ist
(zum Beispiel der Überschrift), zusätzlich die Klasse
card-link geben.

2. JavaScript

<script>
jQuery(window).on('elementor/frontend/init', function () {

    document.addEventListener('click', function (e) {
        const card = e.target.closest('.clickable-card');

        if (!card) return;

        // Vorhandene Links normal behandeln
        if (e.target.closest('a')) return;

        const link = card.querySelector('.card-link a');

        if (link) {
            window.location.href = link.href;
        }
    });

});
</script>

3. CSS

.clickable-card {
    cursor: pointer;
}

Funktionsweise

Beim Klick auf einen Bereich innerhalb von
.clickable-card wird nach dem Link innerhalb von
.card-link gesucht. Dessen URL wird anschließend für die
Weiterleitung verwendet.

Klickt der Benutzer direkt auf einen bereits vorhandenen Link innerhalb
der Karte, greift das Script nicht ein. Dadurch funktionieren normale
Links weiterhin wie gewohnt.

Warum nicht den Container direkt als Link definieren?

Elementor bietet für Container den HTML-Tag a (Link) an,
warnt dabei jedoch selbst davor, dass sich dadurch das Layout des
Containers verändern kann.

Diese Lösung lässt den Container als normalen Container bestehen.
Seine HTML-Struktur und sein Layoutverhalten werden nicht verändert.
JavaScript übernimmt lediglich die Weiterleitung beim Klick auf die
freie Fläche der Karte.