Springe zum Hauptinhalt

So erstellen Sie animierte Abschnitte durch Klicken auf Divi Builder

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Die integrierten Transformationsoptionen von Divi haben sich als äußerst nützliches Entwurfswerkzeug erwiesen, mit dem Sie jedes Element auf einer Seite problemlos in der Größe ändern, drehen, neigen oder positionieren können. Sie können sogar Elemente in den Schwebezustand versetzen, um beeindruckende Schwebeeffekte zu erzielen. Heute zeigen wir Ihnen, 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 Designeinstellungen von Divi verwenden können, um die Transformationseigenschaften zu formatieren und diese Transformationseigenschaften dann mit einem Mausklick ein- oder auszuschalten. Dies eröffnet eine Menge einzigartiger Möglichkeiten, versteckte Inhalte aufzudecken, indem Elemente mit einem Klick verschoben werden, anstatt mit dem Mauszeiger darüber zu fahren. Außerdem wird die Notwendigkeit verringert, viel über CSS zu wissen.

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 der Transformationseigenschaftsstil 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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Ö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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren