Hören Sie auf, Zeit und Geld zu verschwenden!

Erstellen Sie ganz einfach Ihre Website oder Ihren Blog in wenigen Minuten

Elementor ist das einfachste und vor allem schnellste Tool, um jede Art von Website oder Blog zu erstellen. Es sind keine technischen Kenntnisse erforderlich und es ist perfekt für Anfänger oder professionelle Benutzer. Sie können es selbst tun, also tun Sie es!

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 den Transformationseigenschaften einen Stil zuzuweisen, aktivieren (oder deaktivieren) Sie diese Transformationseigenschaften dann per Mausklick. Dies eröffnet eine Menge einzigartiger Möglichkeiten, versteckte Inhalte aufzudecken, indem Sie Elemente per Mausklick verschieben, anstatt sie zu bewegen. Und es hilft auch, die Notwendigkeit zu reduzieren, viel CSS zu kennen.

Lassen Sie uns beginnen.

Was Sie brauchen, um loszulegen

Für dieses Tutorial benötigen Sie lediglich Divi. Gehen Sie zunächst zu Ihrem WordPress-Dashboard. Erstellen Sie eine neue Seite, geben Sie Ihrer Seite einen Titel und setzen Sie das Design auf dem Divi-Generator im Vordergrund fort. Wählen Sie die Option "Von Grund auf neu erstellen". Jetzt können Sie loslegen!

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.

Klappentext-Divi-Einstellungen

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.

Divi Hover Animation

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; }

Parameter der Divi-Seite

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.

Zusammenfassung der Parameter

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.

Divi-Transformationseigenschaften bei Klick

Gehen Sie dann zu Divi> Themenoptionen> Integration und fügen Sie dem Kopf Ihres Blogs das folgende jQuery-Skript hinzu:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Divi-Integrationsabschnitt hinzufügen

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.

Animationsaufnahme

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

In diesem Beispiel bleiben wir bei einem einfachen Klappentext-Beispiel, das oben verwendet wurde. Als Nächstes fügen wir einen zusätzlichen Klappentext dahinter hinzu, sodass jedes Mal, wenn Sie auf den oberen Klappentext klicken, dieser aus dem Weg geräumt wird und der zusätzliche Klappentext hinter dem oberen Rand angezeigt wird. Dokument.

Erstellen von Blurb-Modulen von vorne und hinten

Fügen Sie dann der 1-Spalte ein Präsentationsmodul hinzu.

Divi-Zusammenfassung modulierenAktualisieren Sie den Inhalt des Layouttexts so, dass er nur einen Titel enthält (entfernen Sie den Standardtextinhalt), und fügen Sie ein Präsentationssymbol hinzu.

Passen Sie das Divi-Zusammenfassungsmodul anAktualisieren 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

Ändern Sie den Abstand der Divi-Module

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.

Duplizieren Sie das Divi-Zusammenfassungsmodul

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

Ändern Sie die Divi-Schriftart und den Hintergrund

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%;

Divi-Transformationseigenschaften bei Klick

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

Passen Sie das CSS-Divi-Modul an

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%

Divi Transformation

Transformationsursprung: oben in der Mitte

Modifikation Transformation Divi

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.)

Divi-Transformationseigenschaften bei Klick

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; }}

Divi-SeiteneinstellungenSie 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');
    }); 
});

Divi-Integrationsabschnitt hinzufügen

Lassen Sie uns das Endergebnis sehen.

Animation Divi Modul Klappentext

Mit diesem Beispiel können Sie noch beeindruckendere Designs erstellen. Zögern Sie nicht, Ihre Meinung im Kommentarbereich mitzuteilen.

%d Blogger wie diese Seite: