Die eingebauten Transformationsoptionen von Divi haben sich als äußerst nützliches Design-Tool erwiesen, mit dem Sie jedes Element auf einer Seite mühelos in der Größe ändern, drehen, neigen oder positionieren können. Und Sie können sogar Gegenstände in den Schwebezustand versetzen, um fantastische Schwebeeffekte zu erzielen. Deshalb zeigen wir Ihnen heute, wie Sie diese Animationen mit einem Klick bereitstellen.
Diese Methode erfordert die Verwendung von jQuery. Das Tolle an dieser Technik ist, dass Sie die integrierten Designparameter von verwenden können Divi Um Transformationseigenschaften zu formatieren, aktivieren (oder deaktivieren) Sie diese Transformationseigenschaften dann per Mausklick. Dies wird eine Menge einzigartiger Möglichkeiten der Enthüllung eröffnen Inhalt Ausgeblendet durch Verschieben von Elementen beim Klicken statt beim Bewegen der Maus. Und es trägt auch dazu bei, den Bedarf an CSS-Kenntnissen zu reduzieren.
Lassen Sie uns beginnen.
Was Sie brauchen, um loszulegen
Für dieses Tutorial benötigen Sie lediglich Divi. Um zu beginnen, gehen Sie zu Ihrem WordPress-Dashboard. Erstellen Sie eine neue Seite, geben Sie Ihrer Seite einen Titel und fahren Sie mit dem Design im Divi-Builder im Vordergrund fort. Wählen Sie die Option „Von Grund auf neu erstellen“. Jetzt kann es losgehen!
Die Grundidee erklärt
Bevor ich in diesem Tutorial zu sehr ins Detail gehe, werde ich Sie in wenigen Worten durch die Funktionsweise dieser Technik führen.
Jedes Mal, wenn Sie ein Element (Abschnitt, Zeile oder Modul) in Divi anpassen, fügen Sie diesem Element im Hintergrund benutzerdefiniertes CSS hinzu. Mithilfe der integrierten Einstellungen von Divi können Sie beispielsweise einem Klappentextmodul eine Transformationsrotationseigenschaft hinzufügen, sodass das Modul um 20 Grad entlang der Z-Achse gedreht wird.
Hinter den Kulissen erstellen Sie jedoch ein benutzerdefiniertes CSS, das zu diesem Textmodul hinzugefügt wird und folgendermaßen aussieht:
.et_pb_text_0 {transform: rotateZ (20deg); }
Einfach genug. Angenommen, Sie möchten dieselbe Hover-Transformationsoption hinzufügen. Sie müssen nur die Transformationseigenschaft für den Schwebezustand in den Einstellungen von Divi Builder anwenden.
Und der Code sieht hinter den Kulissen ungefähr so aus:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
Wenn Sie die Transformationseigenschaft jedoch beim Klicken bereitstellen möchten, müssen die Dinge etwas anders funktionieren. Sie müssen einen Javascript-Code eingeben, um ein Klickereignis für das Element (oder das Textmodul) auszulösen.
In unserem aktuellen Beispiel besteht unser Hauptziel im Wesentlichen darin, die Transformationseigenschaft "transform: rotateZ (20deg)" beim Klicken ein- und auszuschalten. Eine einfache Möglichkeit, dies zu tun, besteht darin, eine benutzerdefinierte CSS-Klasse mit der Eigenschaft "transformator: none!" Zu erstellen. Wichtig “in den Einstellungen für die Seite (oder das externe Stylesheet). Es würde ungefähr so aussehen.
.toggle-transform-animation {transform: keine! wichtig; }
Mit diesem CSS an Ort und Stelle. Wir können die CSS-Klasse "toggle-transform-animation" zum Klappentext-Element hinzufügen, das unsere transform-Eigenschaft hat.
Dadurch wird die Transformationseigenschaft deaktiviert (überschrieben) und verhindert, dass sie anfänglich aktiviert wird, selbst wenn ihr der Stil der Transformationseigenschaft bereits hinzugefügt wurde.
Jetzt müssen Sie nur noch diese benutzerdefinierte CSS-Klasse aktivieren (hinzufügen und entfernen), wenn Sie auf das Element klicken. Jedes Mal, wenn wir auf das Element klicken, wird die Klasse gelöscht und die Transformationseigenschaften (die Sie mit Divi hinzugefügt haben) werden bereitgestellt.
Hier ist ein einfaches Beispiel dafür. Fügen Sie zunächst dem Klappentextmodul "transform_target" eine weitere CSS-Klasse hinzu.
Gehen Sie als Nächstes zu Divi > Theme-Optionen > Integration und fügen Sie das folgende jQuery-Skript im Kopf von hinzu Ihr Blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Das ist alles ! Jedes Mal, wenn Sie auf das Präsentationsmodul klicken, wird die Transformationseigenschaft, die Sie der Präsentation in Divi hinzugefügt haben, aktiviert oder deaktiviert.
Lassen Sie uns nun ein Beispiel erstellen, damit Sie sehen, wie nützlich dies für Ihre eigenen Projekte sein kann.
So schalten Sie die Umwandlungseigenschaften ein Klicken Sie auf, um Inhalte in Divi anzuzeigen
Für dieses Beispiel bleiben wir bei einem einfachen Klappentext-Beispiel, das oben verwendet wurde. Als Nächstes fügen wir dahinter einen zusätzlichen Klappentext ein, sodass dieser bei jedem Klick auf den oberen Klappentext zur Seite geschoben wird, um ihn anzuzeigen Inhalt zusätzlicher Klappentext hinter dem Dokument.
Erstellen von Blurb-Modulen von vorne und hinten
Fügen Sie dann der 1-Spalte ein Präsentationsmodul hinzu.
Aktualisieren Sie die Inhalt Fügen Sie den Klappentext so ein, dass er nur einen Titel enthält (entfernen Sie den standardmäßigen Hauptinhalt), und fügen Sie dann ein Klappentext-Symbol hinzu.
Aktualisieren Sie dann die Entwurfsparameter wie folgt:
Hintergrundfarbe: #4c5866
Symbolfarbe: #ffffff
Orientierung des Textes: Mitte
Textfarbe
: Leichte benutzerdefinierte Margin: 0px am unteren Rand
Benutzerdefinierte Polsterung: 15% oben, 15% unten, 10% links, 10% rechts
Wir werden später auf dieses Modul zurückkommen, müssen aber vorerst unser zweites Blurb-Modul erstellen, das als "Return" -Modul mit zusätzlichem Inhalt dient.
Dazu duplizieren Sie das soeben erstellte Präsentationsmodul.
Entfernen Sie dann im zweiten Modul das Präsentationssymbol (und das Standardbild) und fügen Sie dem Modul wieder Textinhalte hinzu. Aktualisieren Sie dann die Entwurfsparameter wie folgt:
Hintergrundfarbe: rgba (76,88,102,0.3)
Textfarbe: Schwarz
Benutzerdefinierte Polsterung: 20% oben
Positionieren Sie das Modul vor Zusammenfassung
Nachdem unsere beiden Klappentexte gestylt sind, müssen wir zu unserem vorderen (oberen) Klappentext zurückkehren und ihn über dem hinteren (unteren) Klappentext positionieren. Dazu geben wir ihm eine absolute Position mit einer Höhe von 100% und einer Breite von 100%.
Öffnen Sie zuerst die Einstellungen für das obere / vordere Präsentationsmodul und aktualisieren Sie Folgendes:
Höhe: 100%;
Breite: 100%;
Fügen Sie dann dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:
Position: absolut! wichtig; Übergang: alle .5s;
Aktualisieren Sie dann den z-Index wie folgt:
Z-Index: 2000
Die absolute Position, kombiniert mit 100% Höhe und Breite und dem Z-Index, stellt sicher, dass das Klappentext-Modul über dem Klappentext-Modul dahinter bleibt. Die Übergangseigenschaft ist tatsächlich die Dauer des Übergangs der Transformationsoptionen, die beim nächsten Klick bereitgestellt werden. Und der "Cursor: Zeiger" soll den Cursor so ändern, dass das Element für den Benutzer anklickbar erscheint.
Hinzufügen von Transformationsoptionen und benutzerdefinierten Klassen zum Front-Blurb
Jetzt ist es an der Zeit, unsere Transformationseigenschaften dem vorderen Klappentext hinzuzufügen. Anschließend fügen wir die benutzerdefinierten CSS-Klassen hinzu, die für unsere jQuery erforderlich sind, um diese Eigenschaften beim Klicken umzuschalten.
Fügen Sie unter den Front-Blurb-Design-Parametern die folgenden Transformationseigenschaften hinzu:
X- und Y-Transformationsskala: 20%
Transformationsursprung: oben in der Mitte
Denken Sie daran, dass das Transformationsdesign, das Sie an dieser Stelle sehen, beim Klicken ausgelöst wird. Wir nutzen einfach den Divi Builder, um das gewünschte Design zu erhalten. In diesem Fall zieht sich der vordere Klappentext zusammen und wird wie ein anklickbares Symbol oben zentriert.
Wenn Sie fertig sind, fügen Sie die beiden CSS-Klassen wie folgt hinzu, um das Front-Blurb mit jQuery zu steuern:
CSS-Klasse: toggle-transform-animation transform_target
(Achten Sie darauf, jeden Klassennamen durch ein Leerzeichen zu trennen.)
Fügen Sie dann das folgende benutzerdefinierte CSS-Code-Snippet hinzu, das zum Aktivieren und Deaktivieren von Umwandlungseigenschaften mit jQuery verwendet wird.
.toggle-transform-animation {transform: keine! wichtig; }}
Sie werden feststellen, dass die zuvor hinzugefügten Eigenschaften der Klappentransformation deaktiviert wurden, da diese Klasse auf sie angewendet wurde.
Gehen Sie nun zu Divi> Designoptionen> Integration und fügen Sie dem Kopf des Blogs das folgende jQuery-Skript hinzu:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Lassen Sie uns das Endergebnis sehen.
Mit diesem Beispiel können Sie noch beeindruckendere Designs erstellen. Zögern Sie nicht, Ihre Meinung im Kommentarbereich mitzuteilen.
