Möchten Sie das Bild auf Knopfdruck mit dem wechseln Page Builder Elementor ? In diesem neuen Tutorial zeigen wir Ihnen, wie es geht.

Wenn Sie keine Ahnung haben, worüber wir heute sprechen wollen, laden wir Sie ein, sich das folgende Video anzusehen:

Dann lassen Sie uns zurückgehen, warum wir hier sind.

Lesen Sie auch: So ändern Sie mit Elementor ein Bild, wenn Sie mit der Maus über Text fahren

Um dieses Tutorial abzuschließen, benötigen Sie die Pro-Version von Elementor, da wir benutzerdefinierten CSS-Code verwenden werden, der nur von dieser Version von unterstützt wirdElementor.

Lassen Sie uns einen Abschnitt mit 2 Spalten erstellen und dann im Seitenbereich die definieren Hauteur von Mindesthöheund dann Mindesthöhe lass uns auf klicken VH und stellen Sie den Schieberegler auf ein 100.

Lassen Sie uns das Bild-Widget in die linke Spalte ziehen und ein Bild aus unserer Bibliothek einfügen.

Fügen wir in der rechten Spalte a ein Titel-Widget mit dem Titel Wählen Sie das Beste. Auf der Registerkarte Design lass uns auf klicken Typographie und ändern Sie die Zeilenhöhe bei 1.

Siehe auch: So ändern Sie ein BildBewegen Sie den Mauszeiger mit Elementor über den Text

Lassen Sie uns unterhalb des Titel-Widgets Folgendes hinzufügen: a Texteditor-Widget.

Lassen Sie uns über dem Titel-Widget ein Trenn-Widget in seiner Registerkarte ablegen Inhalt, greifen wir zu 270 für Breite. Klicken wir auf Text für Element hinzufügen und geben Sie dann ein Trend als Texte. Auf der Registerkarte Design, ändern Sie das Fett und die Lücke von 2.

Entdecken Sie auch: So zeigen Sie mit Elementor Text über einem Bild an

Klicken Sie im Bereich Text auf Typographie, ändern wir die Schriftart, die Größe von 18, das Fett von 600.

Unterhalb des Editor-Widgets Inhalt, lass uns einreichen Interner Abschnitt, löschen Sie eine der Spalten des internen Abschnitts und fügen Sie letztere ein a Button-Widget

Lassen Sie uns die Schaltfläche ändern, indem wir zum Seitenbereich und zur Registerkarte gehen Inhalt, klicke auf Icon-Bibliothek von Symbol und fügen Sie das Symbol ein Warenkorb, löschen wir auch den Inhalt der Schaltfläche on Text

Gehen wir zur Registerkarte Design der Taste und hinein Grenzradius, klicke auf % und ergreifen 50 für alle Bordsteinradien und innen Interne Ränder, greifen wir zu 20.

Lassen Sie uns die Farbe der Schaltfläche anpassen, indem Sie die Farbe der Schaltfläche ändern, indem Sie auf klicken klassisch für Hintergrundtyp und Lassen Sie uns die Farbe entsprechend der Hervorhebungsfarbe auf dem Bild ändern.

Klicken Sie dann auf die Registerkarte fortgeschritten unserer Taste, dann weiter Positionierung und Breite wählen Inline (automatisch). Im Abschnitt Erweitert vonRegisterkarte Erweitert, greifen wir zu 10 für eine rechter Rand.

Lassen Sie uns diese Schaltfläche viermal duplizieren und die Farben dieser Schaltflächen ändern.

Als Nächstes duplizieren wir unser Bild-Widget viermal und ändern dann die Bilder.

In L 'Registerkarte „Erweitert“, greifen wir zu alle Bilder auf dem Gebiet CSS-Klassen von jedem unserer Bilder.

Dann auf dem Feld CSS-ID Geben Sie red-image für das Bild mit roter Hervorhebung, green-image für das Bild mit grüner Hervorhebung und brown-image für das Bild mit brauner Hervorhebung usw. ein.

Wählen wir unsere aus Abschnitt und in derRegisterkarte Erweitert, im Feld Maßgeschneidert CSS kopieren Sie das folgende Code-Snippet und fügen Sie es ein:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Wenn Sie diesen Abschnitt nicht haben, haben Sie die Pro-Version nicht, wenn Sie fortfahren möchten, müssen Sie Ihre Version aktualisieren)

Lassen Sie uns als Nächstes ein HTML-Widget auf unserer Seite ablegen, das folgende Code-Snippet kopieren und in den Abschnitt „HTML-Code“ einfügen:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Lassen Sie uns die erste Schaltfläche im Feld auswählen Benutzerdefinierte Attribute von Abschnitt Attribute, kopieren Sie das folgende Code-Snippet und fügen Sie es ein:

data-showme|IMAGE-ID-NAME

Lassen Sie uns den IMAGE-ID-NAME-Teil durch die IDs Ihrer Schaltflächen ändern, dies sind die IDs für das rote Bild, das grüne Bild und das blaue Bild und so weiter.

Ändern wir also für jede Schaltfläche den IMAGE-ID-NAME-Code in die Farbe der entsprechenden Schaltfläche

Aktualisieren Sie Ihre Arbeit und zeigen Sie sie im Desktop-, Tablet- und Smartphone-Modus an, während Sie Ihre Schaltflächen testen.

Im Smartphone-Modus können Sie beispielsweise die Schaltflächen mittig ausrichten, die Ränder reduzieren und vieles mehr.

Los geht's, Sie haben diese Aufgabe gerade einfach erledigt.

Holen Sie sich jetzt Elementor Pro!

Zusammenfassung

Da ist es ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie ein Bild ändern, wenn Sie mit der Maus über einen Text fahren. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...