So fügen Sie Hover-Tilt-Effekte zu jedem Element in Divi . hinzu

Das Hinzufügen von Hover-Tilt-Effekten zu Ihrem Webdesign ist eine dieser unterhaltsamen und ansprechenden Möglichkeiten, Ihre Divi-Website zum Leben zu erwecken. Normalerweise erfordert diese Art von Design ein Plugin oder fortgeschrittenen Code (wie in diesem Tutorial). Dieser Vorgang ist jedoch mit Tilt.js (einem leichten Hover-Tilt-Effekt für jQuery) viel einfacher. Mit Tilt.js können Sie in wenigen Minuten Hover-Tilt-Effekte auf alles anwenden.

In diesem Tutorial zeigen wir Ihnen, wie Sie jedem Element in Divi Hover-Tilt-Effekte hinzufügen. Mit einer Kombination aus Tilt.js-jQuery-Snippets und dem Divi-Builder zeigen wir Ihnen, wie Sie einem Bild, einer Modulspalte, einer Zeile und mehr beeindruckende Hover-Tilt-Effekte hinzufügen. Wir zeigen Ihnen sogar, wie Sie überraschende 3D-Parallax-Effekte hinzufügen können.

Lass uns anfangen!

Vorgeschmack

Eine Live-Demo der Funktionalität hinter diesem Tutorial finden Sie in diesem Codepen.

Und hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Die Grundlagen für die Verwendung von Tilt.js

Tilt.js ist ein leichter Parallax-Hover-Tilt-Effekt für jQuery. Mit nur ein paar Zeilen jQuery können Sie jedem Element auf der Seite Hover-Tilt-Effekte hinzufügen. Es kommt mit bis zu 10 Optionen (siehe Dokumentation), die einfach hinzugefügt werden können, um das Design und die Funktionalität des Neigungseffekts zu steuern, einschließlich Skalierung und einem schönen Blendeffekt .

Auf der grundlegendsten Ebene können Sie, sobald Sie auf die Tilt.js-Bibliothek zugreifen, eine CSS-Klasse zu dem Element hinzufügen, das Sie beim Hover neigen möchten, und dann ein einfaches jQuery-Snippet verwenden, um die Neigungsfunktion auf ein jQuery-Objekt mit derselben Klasse anzuwenden .

Angenommen, Sie fügen einem Bildmodul namens „et-js-tilt“ eine benutzerdefinierte CSS-Klasse hinzu.

Danach müssen Sie nur noch das folgende jQuery-Snippet hinzufügen, um dem Bild den Hover-Tilt-Effekt hinzuzufügen.

$(".et-js-tilt").tilt();

Dann können Sie zusätzliche Optionen für den Tilt-Effekt einstellen. Sie können beispielsweise mit dem folgenden Codeausschnitt einen Skalierungs- und Blendeffekt hinzufügen.

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

Das Ergebnis wäre dieses…

Für einen fortgeschritteneren Effekt können Sie transform:translateZ() zu jedem untergeordneten Element hinzufügen, um einen 3D-Parallaxeneffekt zu erhalten. Dazu später mehr.

Da wir nun ein grundlegendes Verständnis der Verwendung von Tilt.js haben, wollen wir uns ansehen, wie man es in Divi verwendet.

So fügen Sie Hover-Tilt-Effekte zu jedem Element in Divi . hinzu

Hinzufügen eines Tilt-Hover-Effekts zu Divi-Modulen

Fügen Sie dem standardmäßigen regulären Abschnitt eine dreispaltige Zeile hinzu.

Bildmodul hinzufügen

Fügen Sie in der ersten Spalte ein Bildmodul hinzu.

Hinweis: Sie können jedes beliebige Modul verwenden. Es muss kein Image-Modul sein.

Laden Sie ein Bild Ihrer Wahl hoch. Ich verwende einen aus dem Homemade Cookies Layout Pack.

Bildmodulklasse hinzufügen

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-js-tilt

Diese Klasse wird später als Selektor für unsere Neigungsfunktion verwendet.

Bildmodule kopieren und einfügen

Kopieren Sie als Nächstes das Image-Modul und fügen Sie eines in jede der verbleibenden beiden Spalten ein.

Sie können die doppelten Bilder durch neue ersetzen, wenn Sie möchten. Stellen Sie einfach sicher, dass jedes Bildmodul die CSS-Klasse „et-js-tilt“ hat.

Fügen Sie die Tilt.js-JQuery hinzu

Um die Tilt.js-Bibliothek und das Code-Snippet hinzuzufügen, die zum Neigen unserer Bilder erforderlich sind, verwenden wir ein Code-Modul.

Fügen Sie zunächst eine neue einspaltige Zeile unter der vorhandenen Zeile hinzu.

Fügen Sie dann der neuen Zeile ein Codemodul hinzu.

Als nächstes müssen wir auf die Tilt.js-Bibliothek zugreifen, indem wir ein Skript hinzufügen, das Tilt.js aus ihrem CDN importiert (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Fügen Sie das folgende Skript in das Codefeld ein.

Verwenden Sie den folgenden src innerhalb eines script-Tags, um die Bibliothek zu importieren:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

Es sollte so aussehen:

Es ist wichtig, Tilt.js zu importieren, bevor Sie den Code hinzufügen, der es verwendet. Fügen Sie also nach dem Skript, das auf Tilt.js zeigt, die erforderlichen Skript- Tags hinzu, um die JQuery zu umschließen, die wir hinzufügen müssen. Fügen Sie dann die folgende JQuery zwischen den script- Tags ein.

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

Beachten Sie, dass sich die Funktion Tilt() in einer if- Anweisung befindet, die ausgeführt wird, wenn die Browserbreite größer als 980px ist. Dadurch wird sichergestellt, dass der Effekt nur auf dem Desktop auftritt.

Hier ist das Ergebnis.

Hinzufügen eines Tilt-Hover-Effekts zur Zeile

Wie bereits erwähnt, können Sie diesen Hover-Tilt-Effekt zu jedem Element in Divi hinzufügen. Dies umfasst eine ganze Zeile. Außerdem können Sie einer Reihe einen Neigungseffekt hinzufügen, während Sie die Neigungseffekte für jedes der Module innerhalb der Reihe beibehalten.

So geht's.

Zeile duplizieren und Zeile eine eindeutige CSS-Klasse hinzufügen

Duplizieren Sie die vorhandene Bildzeile und öffnen Sie dann die Einstellungen der duplizierten Zeile. Weisen Sie der Zeile auf der Registerkarte "Erweitert" wie folgt eine eindeutige CSS-Klasse zu:

• CSS-Klasse: et-row-js-tilt

jQuery hinzufügen

Fügen Sie dann die folgende jQuery unter der vorherigen Neigungsfunktion hinzu, um eine separate Neigungsfunktion auf die Zeile anzuwenden.

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

Beachten Sie, dass wir für diesen Neigungseffekt die Skalierung auf 1 zurückgesetzt und den Perspektivenwert erhöht haben, damit die Neigung subtiler ist.

Hier ist das Ergebnis.

Beachten Sie, dass die Reihe eine Neigungsfunktion hat, die aktiviert wird, wenn Sie mit der Maus über die Reihe fahren, und jedes der Bildmodule hat auch den gleichen Neigungseffekt, den wir zuvor hinzugefügt haben. So können Sie verschachtelte Tilt-Effekt-Instanzen anwenden.

Hinzufügen eines Tilt-Hover-Effekts zu einer Spalte mit mehreren Divi-Modulen

In manchen Fällen ist es hilfreich, einer Modulsäule einen Tilt-Effekt hinzuzufügen. Auf diese Weise können Sie mit Divi mehrere Module innerhalb einer Säule entwerfen und dann alle diese Elemente als eine Einheit neigen. Um Ihnen ein Beispiel dafür zu geben, fügen wir einer Spalte mit einem Bildmodul, einem Textmodul und einem Schaltflächenmodul einen Neigungs-Hover-Effekt hinzu.

Neue Zeile hinzufügen

Erstellen Sie zunächst eine neue Zeile mit einem Sechstel, zwei Drittel, einem Sechstel unter der vorherigen Bildzeile.

Bildmodul hinzufügen

Fügen Sie in Spalte 2 (der mittleren Spalte) ein neues Bildmodul hinzu.

Laden Sie ein Bild in das Modul hoch und stellen Sie die Bildausrichtung auf Mitte.

Textmodul hinzufügen

Fügen Sie unter dem Bildmodul ein Textmodul mit der folgenden H2-Überschrift hinzu:

<h2>Local Organic</h2>

Aktualisieren Sie dann die Stile für Überschrift 2 wie folgt:

• Überschrift 2 Schriftart: Berkshire Swash
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 60px (Desktop), 32px (Tablet), 20px (Telefon)
• Überschrift 2 Zeilenhöhe: 1.2em

Schaltflächenmodul hinzufügen

Fügen Sie unter dem Textmodul ein Schaltflächenmodul hinzu.

Aktualisieren Sie den Schaltflächentext auf „Über uns“ und aktualisieren Sie die Designeinstellungen wie folgt:

• Tastenausrichtung: centerr
• Schaltflächentextgröße: 18px
• Schaltflächentextfarbe: #fff
• Schaltflächenhintergrundfarbe: #000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px
• Schaltflächenschrift: Treibsand
• Schriftstärke der Schaltfläche: Fett
• Padding: 16px oben, 16px unten, 30px links, 30px rechts
• Box Shadow: siehe Screenshot

Spalteneinstellungen

Sobald die drei Module fertig sind, öffnen Sie die Einstellungen für die übergeordnete Spalte dieser Module (Spalte 2) und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #f5cee6

• Padding: 50px (oben und unten), 20px (links und rechts)

Hinzufügen der CSS-Klasse zur Spalte

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-column-js-tilt

Hinzufügen der jQuery zum Anwenden eines Tilt-Effekts auf die Spalte

Um der Spalte den Tilt-Effekt hinzuzufügen, können wir ein weiteres ähnliches Snippet von jQuery hinzufügen, das auf die CSS-Klasse der Spalte abzielt. Fügen Sie das folgende Snippet unter dem vorherigen Snippet ein, das auf die Zeile ausgerichtet ist.

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

Hier ist das Endergebnis.

Hinzufügen eines 3D-Parallax-Effekts zu inneren Elementen

Für einen fortgeschritteneren Hover-Tilt-Effekt können wir den inneren Modulen der Säule einen 3D-Parallax-Effekt hinzufügen. Mit einer Kombination aus Perspektive und transform:translateZ() können wir jedes der Module innerhalb der Spalte im 3D-Raum ausblenden lassen, wenn der Hover-Tilt-Effekt aktiv ist.

So geht's.

Vorherige Zeile duplizieren

Duplizieren Sie zuerst die vorherige Zeile mit dem Tilt-Effekt, der der mittleren Spalte hinzugefügt wurde.

Eindeutige Spaltenklasse hinzufügen

Aktualisieren Sie dann die mittlere Spalte (Spalte 2) mit einer eindeutigen CSS-Klasse wie folgt:

• CSS-Klasse: et-column-js-tilt-3d

Benutzerdefinierte CSS

Um sicherzustellen, dass die inneren Module den 3D-Effekt beibehalten, fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement der Spalte hinzu:

transform-style: preserve-3d;

jQuery und CSS hinzufügen

Fügen Sie dann ein paar weitere Snippets von jQuery unter dem vorherigen Tilt-Funktions-Snippet hinzu, das wie folgt auf die Spalte ausgerichtet ist:

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

Diese jQuery fügt der Spalte wie im vorherigen Beispiel eine weitere grundlegende Neigungsfunktion hinzu. Der Code schaltet jedoch auch eine neue Klasse („tilt-active“) in die Spalte, wenn der Tilt-Effekt aktiv ist. Wir können diese neue Klasse verwenden, um einen transform: translateZ()- Wert auf jedes der Module anzuwenden, wenn wir mit der Maus über die Spalte fahren. Dadurch wird der Pop-Out-3D-Parallaxeeffekt erzeugt.

Fügen Sie dazu das folgende benutzerdefinierte CSS oben im Codefeld/Inhalt hinzu und stellen Sie sicher, dass das CSS in die erforderlichen Style- Tags eingeschlossen wird.

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

Sehen Sie sich nun das Endergebnis an. Beachten Sie, wie die drei Module im 3D-Raum herausspringen, wenn sie sich während des Kippeffekts drehen.

Endgültige Ergebnisse

Hier ist ein weiterer Blick auf die Endergebnisse unserer Beispiele.

Abschließende Gedanken

Es macht wirklich Spaß, mit den Hover-Tilt-Effekten von Tilt.js zu experimentieren. Obwohl ich in diesem Tutorial einige grundlegende Beispiele verwendet habe, können Sie diese Hover-Tilt-Effekte problemlos auf eines unserer vorgefertigten Layouts oder auf Ihrer eigenen Website anwenden. Genießen!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!