Möchten Sie ein Bild ändern, indem Sie mit der Maus über einen Text fahren 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:

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

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

Entdecken Sie auch unseren Leitfaden zu:  So erstellen Sie eine Portfolio-Effektkarte mit Elementor

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.

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

In der Registerkarte Design lass es uns auswählen Hintergrundtyp en cliquant sur klassisch, dann ändern Sie die couleur von# F9F9F9

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

In der Registerkarte fortgeschritten, ändern Sie alle Interne Ränder von 25

Jetzt ändern wir die Spaltenbreite auf 40% für die linke Spalte und 60% für die rechte Spalte.

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

Lassen Sie uns in der linken Spalte a fallen Texteditor-Widget, fügen Sie dann einen Text ein und ändern Sie den Titelgröße Text an Titel 3.

In der Registerkarte fortgeschritten, geben Sie als ein Interne Ränder 10-25-10-30 jeweils für die oberer, rechter, unterer und linker Innenrand

Im Abschnitt Hintergrund Tab fortgeschritten, klicke auf ÜBERBLICK, wählen Sie dann die aus Hintergrundtyp von klassisch, geben wir es ein Farbe #DFF5FF et Übergangszeit von 0.5.

Wenn wir den Mauszeiger über den Text bewegen, haben wir die Möglichkeit, beim Schweben eine prächtige Hintergrundfarbe zu entdecken.

Kommen wir nun zum Abschnitt Bordures, und klicken Sie auf ÜBERBLICK, dann auswählen Fortfahren für Grenztyp et Lassen Sie uns die Verbindung zwischen Grenze deaktivieren fassen 4 für eine linken Rand. Lassen Sie uns die Farbe auswählen #002FA7 und fügen Sie eine Übergangsdauer hinzu 0.5

Wenn wir den Mauszeiger noch einmal über unser Textfeld bewegen, sehen wir eine markantere Animation mit einem Rand auf der linken Seite.

Im Abschnitt Grenze, kehren wir zum Tab zurück NORMAL, wählen wir den Randtyp aus Fortfahren, schalten wir die Bindung zwischen den Grenzen aus, greifen 4 für den linken Rand und machen Sie ihn sehr transparent.

Wenn wir den Mauszeiger noch einmal über den Text bewegen, sehen wir einen sehr fließenden Übergang.

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

Lassen Sie uns diesen Text zweimal duplizieren und jeweils den Text ändern Inhalt so was.

Ziehen Sie in der rechten Spalte a Bild-Widget, und fügen Sie ein Bild aus unserer Bibliothek ein.

Wir werden einen Raum um dieses Bild schaffen, indem wir zu gehen Registerkarte „Erweitert“. der Spalte und geben Sie 10 – 10 – 10 – 50 für alle inneren Ränder von Oben, Rechts, Unten und Links ein.

Lassen Sie uns das Bild auswählen und in der Registerkarte fortgeschritten von letzterem gehen wir zum Abschnitt Bewegungseffekte dann in Eingangsanimation, wählen Einblenden

Gehen wir in die Sektion fortgeschritten aus der Registerkarte „Erweitert“ und fügen Sie einige Klassennamen im Feld „CSS-Klassen“ hinzu. Also lass uns gehen all-img img-1

Lassen Sie uns unser Bild 2 Mal duplizieren.

Lassen Sie uns das zweite Bild auswählen und img-1 in img-2 ändern, dann ändern Sie das Bild in ein neues Bild.

Siehe auch: So erstellen Sie eine Bildergalerie mit Elementor

Für das dritte Bild ändern wir einfach img-1 in img-3 und ändern dann das Bild in ein neues Bild.

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

Wählen wir unseren Abschnitt aus und gehen Sie zu seiner Registerkarte fortgeschritten. Im Bereich Benutzerdefinierte CSS, kopieren Sie das folgende Code-Snippet und fügen Sie es ein:

selector .all-img{
    display: none;
}
selector .img-1{
    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.).

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

Wählen wir unseren ersten Texteditor aus und gehen Sie zur Registerkarte Erweitert und zum Abschnitt Attribute. Im Feld Attributes, kopieren Sie das folgende Code-Snippet und fügen Sie es ein:

data-showme|img-1

Tun Sie dies für andere Texteditoren, während Sie img-1 in img-2 oder in img-3 ändern

Lassen Sie uns nun ein HTML-Widget zu unserer Seite hinzufügen. Kopieren Sie das folgende Skript und fügen Sie es ein:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

Speichern oder aktualisieren Sie jetzt Ihre Seite und zeigen Sie sie in der Vorschau an.

Ändern Sie ein Bild, indem Sie mit dem Page Builder Elementor über einen Text fahren

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.

...