Erstellen wir ein anpassbares Bild in Elementor

Ich setze das Thema der Arbeit mit meinem eigenen Code in der kostenlosen Version von Elementor fort. In diesem Artikel zeige ich Ihnen, wie Sie ein Bild mit anpassbarer Größe erstellen, wenn Sie verschiedene Optionen auswählen.

Diese Technik ist häufig in Produktkonstruktoren zu finden, wenn es verschiedene Optionen gibt und Sie demonstrieren müssen, wie es aussehen wird, ohne die Seite neu zu laden. Wenn Sie beispielsweise eine andere Farbe auswählen, ändert das Bild automatisch auch seine Farbe.

Lassen Sie uns also ein solches Bild erstellen, das seine Farbe je nach Auswahl des Benutzers automatisch ändert.

So erstellen Sie einen solchen Effekt mit der kostenlosen Version von Elementor

In der Elementor Pro-Version gibt es für jedes Widget separate Abschnitte, in denen Sie Ihren CSS-Code einfügen und Attribute zum Umschließen von Elementen festlegen können. In der kostenlosen Version dieses Editors können Sie jedoch auch mit Ihrem eigenen Code arbeiten.

Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie das obige Bild erstellen können.

1. Erstellen Sie einen Abschnitt, der aus zwei Spalten besteht. In der linken Spalte platzieren wir zwei (oder mehr) Bilder untereinander.
2. Legen Sie für jedes Bild auf der Registerkarte Erweitert im Feld CSS-Klassen dieselbe Klasse fest. In diesem Beispiel ist dies switch_content (ohne Punkt angegeben).
3. Legen Sie für jedes Bild auf der Registerkarte Positionierung die absolute Positionierung fest.
4. Im rechten Abschnitt wird im Beispiel ein Header erstellt, darunter platzieren wir das HTML-Code-Widget und fügen den folgenden Code in seinen Inhalt ein. Dies ist der Code für die Schalter selbst.

<div class="switch_block">
    <div class="switch_items">
        <div class="switch_item item_red switch_item_active">Red</div>
        <div class="switch_item item_yellow">Yellow</div>
    </div>
</div>

Diesem Block können auch die folgenden Codezeilen hinzugefügt werden. Wenn jedoch eine solche Funktionalität auf mehreren Seiten der Website verwendet werden soll, ist es besser, Stile und Skripte global festzulegen, z. B. mit dem Code-Snippets-Plugin

5. Installieren Sie also das Code-Snippets-Plugin.
6. Erstellen Sie ein CSS-Snippet und fügen Sie den folgenden Code darin ein:

.switch_block {
    display: flex;
}
.switch_items {
    padding-left: 26px;
}
.switch_item {
    margin-top: 10px;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    border-radius: 4px;
    transition: .3s all;
}
.item_red {
    background: red;
}
.item_yellow {
    background: yellow;
    color: grey;
}
.switch_item_active {
    border: solid 2px #fff;
}
.swt-show {
    display: block;
}
.swt-hide {
    display: none;
}
.swt-fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1;
    }
}

7. Erstellen Sie als Nächstes ein JavaScript-Snippet und fügen Sie den folgenden Code ein

window.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.switch_item'),
          switchContent = document.querySelectorAll('.switch_content'),
          switchParent = document.querySelector('.switch_items');

    function hideTabContent() {
        switchContent.forEach(item => {
            item.classList.add('swt-hide');
            item.classList.remove('swt-show', 'swt-fade');
        });
		buttons.forEach(item => {
            item.classList.add('switch_item_active');
        });
    }

    function showTabContent(i = 0) {
        switchContent[i].classList.add('swt-show', 'swt-fade');
        switchContent[i].classList.remove('swt-hide');
		buttons[i].classList.remove('switch_item_active');
    }

    hideTabContent();
    showTabContent();

    switchParent.addEventListener('click', (event) => {
        const target = event.target;

        if (target && target.classList.contains('switch_item')) {
            buttons.forEach((item, i) => {
                if (target == item) {
                    hideTabContent();
                    showTabContent(i);
                }
            });
        }
    });

});

Darauf ist der Block mit dem sich verfärbenden Bild fertig. Siege und Inspiration für alle!