Hinzufügen eines hover-effekts in divi builder

Wordpress

Es gibt viele Möglichkeiten, eine Webseite auf Ihrer Website attraktiver aussehen zu lassen. Eine davon ist, dass Sie einen Hover-Effekt zu einem bestimmten Element auf der Seite hinzufügen können. Wenn du eine WordPress-basierte Website mit Divi Builder erstellt hast, kannst du mühelos einen Hover-Effekt zu einem Element auf deiner Seite hinzufügen. Was ist Divi Builder eigentlich?

Falls du Divi Builder noch nicht kennst. Es ist ein Seitenerstellungs-Plugin für WordPress, genau wie Elementor (Elementor ist der beliebteste WordPress-Seitenersteller). Es kommt auch mit einem visuellen Editor, um Ihnen die Erstellung der Seite zu erleichtern. Divi Builder verfügt über einige integrierte Funktionen zum Hinzufügen von Animationseffekten, einschließlich derer, die Sie hinzufügen können, wenn ein Besucher über ein bestimmtes Element auf Ihrer Seite schwebt. Werfen Sie einen Blick auf den Screencast unten.

Die obigen Hover-Effekte wurden mit Divi Builder erstellt. Divi Builder selbst nutzt die CSS-Transformation für die Hover-Effekt-Funktion. Wenn du also technisch gesehen einen Hover-Effekt zu einem bestimmten Element in Divi Builder hinzufügst, implementierst du eine CSS-Transformation auf deiner Seite.

In Divi Builder gibt es drei Arten von Designelementen: Abschnitte, Zeilen und Module. Sie können einen Hover-Effekt zu diesen drei Elementtypen hinzufügen. In diesem Beispiel zeigen wir Ihnen, wie Sie einen Hover-Effekt zu einem Bildmodul hinzufügen können (wie Sie im Screencast oben sehen können).

Wie man einen Hover-Effekt in Divi Builder hinzufügt

Zuerst müssen Sie einen Abschnitt sowie eine Zeile auf der Arbeitsfläche von Divi Builder vorbereiten. Dazu klicken Sie auf die blaue Plus-Schaltfläche, um einen neuen Abschnitt hinzuzufügen (für dieses Beispiel können Sie einen normalen Abschnitt hinzufügen). Fügen Sie eine Zeile ein und wählen Sie die Spaltenstruktur, die Sie benötigen. In diesem Beispiel wählen wir die dreispaltige Struktur.

Wenn die Zeile hinzugefügt ist, klicken Sie auf das graue Plus-Symbol in einer der Spalten, um ein Modul hinzuzufügen. Da wir dem Bild den Hover-Effekt hinzufügen möchten, wählen Sie Bild, um das Bildmodul hinzuzufügen.

Das Einstellungsfeld für das Bildmodul wird direkt nach dem Hinzufügen des Bildmoduls angezeigt. Um ein Bild hinzuzufügen, können Sie auf den Bildhalter im Block Bild unter der Registerkarte Inhalt klicken.

Wenn das Bild hinzugefügt wurde, gehen Sie zur Registerkarte Design und öffnen Sie den Block Transformation . Klicken Sie im Block Transformation auf das Cursor-Symbol und dann auf die Registerkarte „Schweben“ (die ebenfalls mit einem Cursor-Symbol dargestellt wird).

Wählen Sie einen Transformationstyp aus, den Sie hinzufügen möchten, indem Sie auf eine der verfügbaren Registerkarten klicken und den Wert mit der Maus einstellen. Sie können den Transformationswert auch manuell festlegen, indem Sie den gewünschten Wert eingeben.

Das war’s. Sie können die Änderungen übernehmen, indem Sie auf das grüne Checklisten-Symbol in der unteren rechten Ecke des Einstellungsfeldes klicken.

Um Ihre Seite attraktiver zu gestalten, können Sie auch ein anderes Bild beim Hovern anzeigen. In diesem Artikel erfahren Sie mehr darüber.

Sie können den gleichen Weg gehen, um einen Hover-Effekt zu einem Abschnitt und einer Zeile hinzuzufügen. Öffnen Sie zunächst das Einstellungsfeld und gehen Sie dann zur Registerkarte Design . Auf der Registerkarte Design können Sie den Block Transformation öffnen. In diesem Block können Sie den Hover-Effekt einstellen, wie wir ihn gerade oben beschrieben haben.

YouTube video: Hinzufügen eines Hover-Effekts in Divi Builder


Rate article