Möchten Sie einen Neigungseffekt mit hinzufügen Divi auf irgendeinem Element Ihrer Seite?
Hinzufügen von Hover-Tilt-Effekten zu Ihrem Website ist eine dieser lustigen und ansprechenden Möglichkeiten, Ihre mitzubringen Website Divi. Normalerweise erfordert diese Art von Design ein Plugin oder einen fortgeschritteneren Code. 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 Hover-Neigungseffekte zu jedem Element von hinzufügen Divi. Mithilfe einer Kombination aus jQuery-Tilt.js-Snippets und dem Divi-Builder zeigen wir Ihnen, wie Sie einem Bild, einer Modulspalte, einer Zeile usw. tolle Hover-Tilt-Effekte hinzufügen.
Wir zeigen Ihnen sogar, wie Sie erstaunliche 3D-Parallax-Effekte hinzufügen können.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Überblick über das Ergebnis, das wir in diesem Tutorial erhalten werden.
Siehe auch: Divi: So zeigen Sie Inhalte an, wenn Sie den Mauszeiger über den Abschnittsteiler bewegen
Was Sie brauchen, um loszulegen
Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Fügen Sie Neigungseffekte beim Bewegen eines beliebigen Elements in Divi hinzu
Fügen Sie den Divi-Modulen einen Tilt-Hover-Effekt hinzu
Beginnen wir damit, dem standardmäßigen regulären Abschnitt eine dreispaltige Zeile hinzuzufügen.
Fügen Sie ein Bildmodul hinzu
Fügen Sie in der ersten Spalte ein Bildmodul hinzu.
Hinweis: Sie können jedes Modul Ihrer Wahl verwenden. Es muss überhaupt kein Bildmodul sein.
Laden Sie ein Bild Ihrer Wahl hoch.
Fügen Sie eine Image-Modulklasse hinzu
Unter der Registerkarte Fortgeschrittener, fügen Sie die folgende CSS-Klasse hinzu:
- CSS-Klasse: et-js-tilt
Diese Klasse wird später als Selektor für unsere Tilt-Funktion verwendet.
Vorheriges Bildmodul kopieren und einfügen
Kopieren Sie als Nächstes das Bildmodul und fügen Sie eines in jede der beiden verbleibenden Spalten ein.
Wenn Sie möchten, können Sie doppelte Bilder durch neue ersetzen. Stellen Sie einfach sicher, dass jedes Bildmodul zur CSS-Klasse gehört „et-js-tilt“.
Fügen Sie die JQuery-Bibliothek „tilt.js“ hinzu
Um die Bibliothek hinzuzufügen neigung.js und das Code-Snippet, das zum Verzerren unserer Bilder benötigt wird, verwenden wir ein Code-Modul.
Fügen Sie zunächst eine neue Zeile eine Spalte unter der vorhandenen Zeile hinzu.
Fügen Sie dann der neuen Zeile ein Codemodul hinzu.
Dann müssen wir auf die zugreifen tilt.js-Bibliothek indem Sie 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-Code in einem script-Tag, 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 zu importieren neigung.js bevor Sie den Code hinzufügen, der es verwendet. Also, nachdem das Skript darauf zeigt neigung.js, fügen Sie 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 980 Pixel ist. Dadurch wird sichergestellt, dass der Effekt nur auf einem Desktop-Computer auftritt.
Hier ist das Ergebnis.
Tilt-Hover-Effekt zur Linie hinzugefügt
Wie bereits erwähnt, können Sie diesen Hover-Tilt-Effekt jedem Divi-Element 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
Duplizieren Sie die Zeile und fügen Sie der Zeile eine eindeutige CSS-Klasse hinzu
Duplizieren Sie die vorhandene Reihe von Bildern und öffnen Sie dann die Einstellungen für doppelte Reihen. Unter der Registerkarte Fortgeschrittener, geben Sie der Zeile wie folgt eine eindeutige CSS-Klasse:
- CSS-Klasse: et-row-js-tilt
jQuery hinzufügen
Fügen Sie dann die folgende jQuery unter der vorherigen Skew-Funktion hinzu, um eine separate Skew-Funktion auf die Linie anzuwenden.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Beachten Sie, dass wir für diesen Neigungseffekt die Skalierung auf 1 reduziert und den Perspektivenwert erhöht haben, damit die Neigung subtiler ist.
Hier ist das Ergebnis.
Beachten Sie, dass die Zeile eine Neigungsfunktion hat, die aktiviert wird, wenn Sie mit der Maus über die Zeile fahren, und jedes der Bildmodule hat auch denselben Neigungseffekt, den wir zuvor hinzugefügt haben. So können Sie verschachtelte Neigungseffektinstanzen anwenden.
Fügen Sie einer Spalte mit mehreren Divi-Modulen einen Tilt-Hover-Effekt hinzu
In manchen Fällen ist es sinnvoll, einer Spalte von Modulen einen Skew-Effekt hinzuzufügen. Auf diese Weise können Sie mit Divi mehrere Module in einer Spalte entwerfen und dann alle diese Elemente als eine Einheit abgewinkelt haben.
Um Ihnen ein Beispiel dafür zu geben, fügen wir einer Spalte, die ein Bildmodul, ein Textmodul und ein Schaltflächenmodul enthält, einen Tilt-on-Hover-Effekt hinzu.
Fügen Sie eine neue Zeile hinzu
Erstellen Sie zunächst eine neue Zeile mit der folgenden Spaltenstruktur:
Fügen Sie ein Bildmodul hinzu
Fügen Sie in Spalte 2 (der mittleren Spalte) ein neues Bildmodul hinzu.
Laden Sie ein Bild in das Modul hoch.
Stellen Sie die Ausrichtung des Bildes auf die Mitte ein.
Fügen Sie ein Textmodul hinzu
Fügen Sie unterhalb des Bildmoduls ein Textmodul mit dem folgenden H2-Header hinzu:
<h2>Local Organic</h2>
Aktualisieren Sie als Nächstes die Stile der H2-Überschriften wie folgt:
- Schriftart: Berkshire Swash
- Textausrichtung: Zentriert
- Textfarbe: #000000
- Größe: 60px
- Zeilenhöhe: 1,2 cm
Schaltflächenmodul hinzufügen
Fügen Sie unterhalb des Textmoduls ein Schaltflächenmodul hinzu.
Aktualisieren Sie den Schaltflächentext so, dass er „Weitere Informationen...“ lautet.
Aktualisieren Sie die Personalisierungseinstellungen wie folgt:
- Tastenausrichtung: Mitte
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche
- Schaltflächentextgröße: 18px
- Textfarbe: #fff
- Schaltflächenhintergrund: #000
- Rahmenbreite der Schaltfläche: 0 Pixel
- Randradius: 100px
- Schaltflächenschriftart: Treibsand
- Schriftdicke: fett
- Polsterung (oben und unten): 16px
- Polsterung (links und rechts): 30px
- Box Shadow: siehe Screenshot
Spaltenparameter
Öffnen Sie nach Abschluss aller drei Module die Einstellungen für die übergeordnete Spalte dieser Module (Spalte 2) und aktualisieren Sie Folgendes:
- Hintergrund: #f5cee6
- Polsterung (oben und unten): 50px
- Polsterung (links und rechts): 20px
CSS-Klasse zur Spalte hinzufügen
Fügen Sie auf der Registerkarte „Erweitert“ die folgende CSS-Klasse hinzu:
- CSS-Klasse: et-column-js-tilt
jQuery hinzugefügt, um den Neigungseffekt auf die Spalte anzuwenden
Um der Spalte den Skew-Effekt hinzuzufügen, können wir ein weiteres ähnliches jQuery-Snippet hinzufügen, das auf die CSS-Klassenspalte abzielt.
Fügen Sie das folgende Code-Snippet unterhalb des vorherigen Code-Snippets ein, das auf die Zeile abzielt.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Hier ist das Endergebnis.
3D-Parallax-Effekt zu Interna hinzugefügt
Für einen fortgeschritteneren Schwebeneigungseffekt können wir den internen Säulenmodulen einen 3D-Parallaxeneffekt hinzufügen.
Mit einer Kombination aus Perspektive und transform:translateZ() können wir jedes Modul der Säule im 3D-Raum erscheinen lassen, wenn der Tilt-on-Hover-Effekt aktiv ist.
So geht's
Vorherige Zeile duplizieren
Duplizieren Sie zuerst die vorherige Zeile mit dem Skew-Effekt, der der mittleren Spalte hinzugefügt wurde.
Fügen Sie eine einzelne Spaltenklasse hinzu
Aktualisieren Sie dann die mittlere Spalte (Spalte 2) mit einer eindeutigen CSS-Klasse wie folgt:
- CSS-Klasse: et-column-js-tilt-3d
Benutzerdefiniertes CSS
Um sicherzustellen, dass die internen Module den 3D-Effekt beibehalten, fügen Sie das folgende benutzerdefinierte CSS zum Hauptspaltenelement hinzu:
transform-style: preserve-3d;
Fügen Sie jQuery und CSS hinzu
Fügen Sie als Nächstes einige weitere jQuery-Snippets unterhalb des vorherigen Skew-Funktions-Snippets hinzu, die wie folgt auf die Spalte abzielen:
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 eine weitere grundlegende Neigungsfunktion hinzu, genau wie im vorherigen Beispiel.
.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);
}
Jetzt sehen Sie das Endergebnis. Beachten Sie, wie die drei Module im 3D-Raum erscheinen, wenn sie sich während des Neigungseffekts drehen.
Lesen Sie auch: Divi: So zeigen Sie Inhalte an, wenn Sie den Mauszeiger über den Abschnittsteiler bewegen
Endergebnisse
Hier ist ein weiterer Blick auf die Endergebnisse für unsere Beispiele.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Die Hover-Tilt-Effekte, die von angeboten werden Tilt.js macht richtig Spaß damit zu experimentieren.
Obwohl wir in diesem Tutorial einige grundlegende Beispiele verwendet haben, können Sie ganz einfach einen großen Tag haben, indem Sie diese Hover-Neigungseffekte auf eines unserer vorgefertigten Layouts oder auf Ihre eigene Website anwenden.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen 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.
...
