Verwenden der Faltanimation von Divi, um Blurbs zum Blühen zu bringen

Veröffentlicht: 2017-10-16

Willkommen zu Teil 4 dieser 6-teiligen Serie, die Ihnen beibringt, wie Sie die neuen Animationsoptionen von Divi verwenden, um tolle Seitenabschnitte zu gestalten. Ich werde Sie durch den Aufbau der verschiedenen Abschnitte unserer Live-Demo-Seite führen, um Ihnen Techniken zum Hinzufügen von Animationen zu Ihrer Website zu zeigen. Die Animationsfunktionen machen wirklich Spaß und sind einfach zu bedienen. Und mit dem Visual Builder können Sie sehen, wie Ihre Kreation in jeder Phase zum Leben erweckt wird. Kommen Sie und begleiten Sie mich, während wir die Kraft der Divi-Animationen erkunden.

In unserem letzten Beitrag habe ich Ihnen einige kreative Möglichkeiten gezeigt, um 4 Klappenmodule zu entwerfen und zu animieren, die für einen Schritt-für-Schritt-Prozess organisiert wurden.

Heute werden wir Abschnitt 6 unserer Animations-Demoseite erstellen. Dieser Abschnitt zeigt einige großartige Designs und Animationen zum Anzeigen von vorgestellten Produkten oder Downloads. Die Verwendung von Farbe und der Blooming-Effekt der Animation auf diesen Klappenmodulen heben den Abschnitt wirklich hervor.

Tauchen wir ein!

Hier ist ein kleiner Vorgeschmack auf das, was wir im heutigen Beitrag bauen werden

Animation

Verwenden der Faltanimation von Divi, um Blurbs zum Blühen zu bringen

Abonnieren Sie unseren Youtube-Kanal

Bauabschnitt 6

Fügen Sie Ihren Abschnitt hinzu und passen Sie ihn an

Beginnen wir mit dem Visual Builder, indem wir unserem Layout einen weiteren regulären Abschnitt hinzufügen. Fügen Sie dann Ihrem Abschnitt eine dreispaltige (eine Hälfte, ein Viertel, ein Viertel) Zeile hinzu.

Animation

Bevor wir unser erstes Modul hinzufügen, gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie Folgendes:

Unter der Registerkarte Inhalt…

Hintergrundfarbe: #00252d

Animation

Unter der Registerkarte Design…

Benutzerdefinierte Polsterung: 80px oben, 80px unten

Einstellungen speichern

Hinzufügen einer Kopfzeile mit dem Textmodul

Gehen wir nun zurück zu unserer dreispaltigen Zeile und fügen Sie in der linken Spalte ein Textmodul hinzu. Aktualisieren Sie die Texteinstellungen wie folgt:

Unter der Registerkarte Inhalt…

Fügen Sie im Textregister des Inhaltsfelds den folgenden h1-Header hinzu:

<h1>Build Like You Mean It</h1>

Animation

Unter der Registerkarte Design…

Kopfzeilenschrift: Lato, Fett (B)
Header-Schriftgröße: 38px
Kopfzeilentextfarbe: #ffffff
Höhe der Kopfzeile: 1,3 em

HINWEIS: Da unser Inhalt einen h1-Header hat, funktionieren nur die Header-Textoptionen, um ihn zu stylen.

Benutzerdefinierter Rand: 20 Pixel unten

Animationsstil: Folie
Animationsrichtung: Links
Animationsintensität: 16%

Animation

HINWEIS: Diese Animation lässt die Kopfzeile leicht nach links gleiten. Der Schlüssel hier ist, ihm eine geringere Intensität zu geben, damit die Folie nicht so viel Boden bedeckt oder zu lange dauert.

Einstellungen speichern

Text mit einem anderen Textmodul hinzufügen

Normalerweise würden Sie wahrscheinlich einfach den Rest Ihres Textes unter der Kopfzeile h1 im selben Textmodul hinzufügen. Da wir jedoch dem h1-Header und dem Text darunter einen anderen Animationseffekt hinzufügen möchten, müssen wir ein weiteres Textmodul erstellen. Fahren Sie fort und fügen Sie ein Textmodul unter dem gerade erstellten hinzu und aktualisieren Sie die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Inhalt: „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.“

Unter der Registerkarte Design…

Textfarbe: Hell
Schriftgröße des Textes: 18px
Text Textfarbe: rgba(255,255,255,0.66)
Textzeilenhöhe: 1.9em
Benutzerdefinierter Rand: 40 Pixel unten

Animationsstil: Folie
Animationsrichtung: Links
Animationsintensität: 8%

HINWEIS: Beachten Sie, dass die Animationseinstellungen für diesen Text eine etwas geringere Intensität haben (8 %) als der Kopfzeilentext darüber (16 %). Das bedeutet, dass es sich schneller zu bewegen scheint, da es bei gleicher Dauer weniger Entfernung zurücklegt. Obwohl beide Textmodule die gleiche Zeit (Dauer) benötigen, um die Animation abzuschließen, bewegen sie sich mit unterschiedlichen Geschwindigkeiten, da sie mit unterschiedlichen Intensitätsstufen beginnen. Es ist, als würden zwei Rennfahrer das Rennen gleichzeitig beginnen und beenden, wobei einer von ihnen einen erheblichen Vorsprung hat.

Animation

Einstellungen speichern

Schaltfläche hinzufügen

Fügen wir nun unterhalb der beiden Textmodule in der linken Spalte ein Button-Modul hinzu. Aktualisieren Sie dann die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Button-Text: Alles herunterladen
Schaltflächen-URL [URL eingeben]

Unter der Registerkarte Design…

Benutzerdefinierte Stile für Schaltfläche verwenden: JA

Schaltflächentextgröße: 15px
Schaltflächentextfarbe: #01254c
Hintergrundfarbe der Schaltfläche: #ffcd1c
Breite des Tastenrahmens: 0px
Knopfrandradius: 65px
Tastenabstand der Buchstaben: 1px
Tastenschrift: Fett (B), Großbuchstaben (TT)

Animation

Benutzerdefinierte Polsterung: 10 Pixel oben, 30 Pixel rechts, 10 Pixel unten, 30 Pixel links

Animationsstil: Folie
Animationsrichtung: Links
Animationsintensität: 16%

HINWEIS: Dieser Animationseffekt entspricht der ersten Textmodulanimation.

Animation

Vergessen wir nicht, diesen wunderbaren Glüheffekt mit der CSS-Eigenschaft Box shadow hinzuzufügen. Suchen Sie das Feld Main Element unter Custom CSS und fügen Sie Folgendes hinzu:

box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

Einstellungen speichern

Fügen Sie Ihr erstes Blurb-Modul hinzu

Das war's für unsere linke Spalte. Fügen wir nun ein Blurb-Modul zur mittleren Spalte hinzu (das ist das erste Viertel der Spalte).

Animation

Aktualisieren Sie die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Titel: Divi
Symbol verwenden: JA
Symbol: [Symbol auswählen]

Hintergrund-Verlaufsfarben: #8b56ff, #5d3dff
Verlaufstyp: Linear
Steigungsrichtung: 140deg

Unter der Registerkarte Design…

Symbolfarbe: #ffffff
Textfarbe: Hell
Textausrichtung: Mitte
Header-Schriftart: Fett (B), Großbuchstaben (TT)
Kopfzeilenabstand: 10px

Benutzerdefinierter Rand: 12% untere
Benutzerdefinierte Polsterung: 40 Pixel oben, 30 Pixel rechts, 30 Pixel unten, 30 Pixel links

Animationsstil: Falten
Animationsrichtung: Links
Animationsverzögerung: 200ms

HINWEIS: Die Animationsrichtung der einzelnen Klappenmodule ist unterschiedlich. Dieser erste entfaltet sich nach links.

Unter der Registerkarte Erweitert…

Hier können wir unserem Modul diesen Glüheffekt hinzufügen und den Header nur ein bisschen einrücken.

Fügen Sie dem Hauptelement-Feld das folgende CSS hinzu:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);

Fügen Sie das folgende CSS zum Feld Blurb-Titel hinzu:

text-indent: 10px;

Animation

Einstellungen speichern

Duplizieren Sie das Blurb-Modul, um die nächsten drei Blurbs zu erstellen

Nachdem wir unser erstes Blurb-Modul entworfen und animiert haben, können wir das Modul duplizieren, um die restlichen Klappen zu erstellen.

Bewegen Sie den Mauszeiger über das Blurb-Modul und klicken Sie auf das Symbol des duplizierten Moduls. Aktualisieren Sie im neuen duplizierten Modul, das unten angezeigt wird, die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Titel: Bloom
Symbol: [neues Symbol auswählen]
Hintergrund-Verlaufsfarben: #ff56f9, #c43dff

Animation

Unter der Registerkarte Design…

Animationsrichtung: Unten

HINWEIS: Die Faltanimation weist in diesem Klappentext eine Abwärtsrichtung auf.

Animation

Unter der Registerkarte Erweitert…

Ersetzen Sie das CSS im Feld Hauptelement durch Folgendes:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);

Einstellungen speichern

Erstellen Sie ein weiteres Duplikat des Klappenmoduls und ziehen Sie dieses Duplikat in die ganz rechte Spalte. Aktualisieren Sie dann dieses Blurb-Modul mit den folgenden Einstellungen:

Unter der Registerkarte Inhalt…

Titel: Extra
Symbol: [neues Symbol auswählen]
Hintergrund-Verlaufsfarben: #56ffda, #38d5ea

Unter der Registerkarte Design…

Animationsrichtung: Nach oben

HINWEIS: Die Faltanimation weist in diesem Klappentext eine Aufwärtsrichtung auf.

Animation

Unter der Registerkarte Erweitert…

Ersetzen Sie das CSS im Feld Hauptelement durch Folgendes:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);

Erstellen Sie ein weiteres Duplikat des soeben aktualisierten Klappenmoduls in der rechten Spalte, sodass es direkt darunter angezeigt wird. Aktualisieren Sie dann dieses Blurb-Modul mit den folgenden Einstellungen:

Unter der Registerkarte Inhalt…

Titel: Monarch
Symbol: [neues Symbol auswählen]
Hintergrund-Verlaufsfarben: #f2743a, #ff5656

Unter der Registerkarte Design…

Animationsrichtung: Rechts

HINWEIS: Auf diesem Klappentext läuft die Animation nach rechts ab.

Unter der Registerkarte Erweitert…

Ersetzen Sie das CSS im Feld Hauptelement durch Folgendes:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);

HINWEIS: Da diese 4 Klappen alle den gleichen Stil und die gleiche Verzögerung haben, erzeugt dies einen umgekehrten Blumenblüteneffekt, da alle 4 Module in unterschiedliche Richtungen ausgeklappt werden.

Animation

Einstellungen speichern

Lassen Sie uns nun den Abstand richtig einstellen, indem Sie Ihre Zeileneinstellungen wie folgt aktualisieren:

Unter der Registerkarte Design…

Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 1366 px
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 2

Benutzerdefiniertes Padding: 80 Pixel oben, 0 Pixel rechts, 160 Pixel unten, 0 Pixel links
Spalte 1 Benutzerdefinierte Polsterung: 140px Oben

Baue die zweite Reihe

Jetzt können wir die nächste Zeile für unseren Abschnitt erstellen. Um die Dinge zu beschleunigen, werden wir Designelemente aus unseren zuvor entworfenen Zeilen und Modulen duplizieren und kopieren.

Zuerst fügen wir unserem Abschnitt eine neue einspaltige Zeile hinzu. Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 1366 px
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 2

Einstellungen speichern

Kopieren Sie als nächstes den ersten Textbaustein in der ersten von Ihnen erstellten Zeile, der den h1-Titel enthält. Aktualisieren Sie dann die Einstellungen wie folgt:

Unter der Registerkarte Inhalt…

Ersetzen Sie das aktuelle h1-Tag durch Folgendes:

<h1>Don't Settle for Less</h1>

Unter der Registerkarte Design…

Textausrichtung: Mitte
Animationsstil: Flip
Animationsintensität: 70%

Einstellungen speichern

Kopieren Sie als nächstes das Schaltflächenmodul aus der vorherigen Zeile und fügen Sie es unter dem Textmodul ein, das Sie gerade in der zweiten Zeile aktualisiert haben. Aktualisieren Sie dann das Tastenmodul wie folgt:

Unter der Registerkarte Inhalt…

Schaltflächentext: Heute beitreten

Unter der Registerkarte Design…

Tastenausrichtung: Mitte

Animationsstil: Flip
Animationsintensität: 70%

HINWEIS: Die Schaltfläche und die Kopfzeile darüber haben beide dieselbe Animation.

Animation

Einstellungen speichern

Nun zu unserer letzten Reihe. Erstellen Sie eine neue Zeile mit einer halben halben Spaltenstruktur. Aktualisieren Sie die Zeileneinstellungen wie folgt, bevor Sie Ihre Module hinzufügen:

Unter der Registerkarte Design…

Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 2

Einstellungen speichern

Kopieren Sie als nächstes das violette Blurb-Modul „Divi“ aus Ihrer vorherigen Zeile und fügen Sie es in die linke Spalte Ihrer neuen Zeile ein. Aktualisieren Sie dann die folgenden Einstellungen:

Unter der Registerkarte Inhalt…

Titel: Baumeister
Symbol: [neues Symbol auswählen]
Hintergrund-Verlaufsfarben: #ff568e, #ff3d5d

HINWEIS: Die Animationsrichtung sollte bereits „links“ sein, wenn Sie das richtige Klappenmodul kopiert haben. Wenn nicht, vergewissern Sie sich, dass dies der Fall ist.

Unter der Registerkarte Erweitert…

Ersetzen Sie das CSS im Feld Hauptelement durch Folgendes:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);

Einstellungen speichern

Kopieren Sie als nächstes das blaugrüne Klappmodul „Extra“ oben in der Spalte ganz rechts in die erste von Ihnen erstellte Zeile. Fügen Sie es dann in die rechte Spalte Ihrer neuen dritten Zeile ein.

Aktualisieren Sie dann die Klappeneinstellungen wie folgt:

Unter der Registerkarte Inhalt…

Titel: Gelassen
Symbol: [neues Symbol auswählen]
Hintergrund-Verlaufsfarben: #3da4ff, #385eea

HINWEIS: Die Animationsrichtung sollte bereits „oben“ sein, wenn Sie das richtige Klappenmodul kopiert haben. Wenn nicht, vergewissern Sie sich, dass dies der Fall ist.

Unter der Registerkarte Erweitert…

Ersetzen Sie das CSS im Feld Hauptelement durch Folgendes:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);

Einstellungen speichern

Das ist es.

Bonus: Laden Sie diese Abschnitte für den einfachen Import herunter

Als Bonus haben wir die Abschnitte des heutigen Tutorials in einen kostenlosen Download gepackt, den Sie mit dem untenstehenden E-Mail-Anmeldeformular erhalten können. Geben Sie einfach Ihre E-Mail-Adresse ein und der Download-Button wird angezeigt. Machen Sie sich keine Sorgen über das „erneute Abonnieren“, wenn Sie bereits Teil unseres Divi-Newsletters sind. Die erneute Eingabe Ihrer E-Mail-Adresse führt nicht zu weiteren E-Mails oder Duplikaten. Es wird einfach den Download enthüllen.

Genießen!

Laden Sie das Layout-Paket 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.

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 diese Downloads zu verwenden, suchen Sie zunächst die gezippte Datei Animation_Effects_Part_4.zip in unserem Download-Ordner. Entpacken Sie es, um die folgenden Importe anzuzeigen.

Animationseffekte Teil 4 (Abschnitt 1).json

Animationseffekte Teil 4 (Abschnitt 2).json

Navigieren Sie in Ihrem WordPress-Admin zu Divi > Divi Library > Import & Export. Wenn das Portabilitäts-Modal angezeigt wird, klicken Sie auf die Registerkarte Import und die Schaltfläche mit der Bezeichnung Datei auswählen.

Wählen Sie die gewünschte json-Datei aus und klicken Sie auf „Divi Builder-Layouts importieren“. Navigieren Sie nach Abschluss des Imports zu dem Beitrag oder der Seite, zu der Sie einen der obigen Abschnitte hinzufügen möchten.

Aktivieren Sie den visuellen Builder. Navigieren Sie zu dem Teil der Seite, zu dem Sie einen der obigen Abschnitte hinzufügen möchten. Wenn Sie auf das Symbol zum Hinzufügen eines neuen Abschnitts klicken, wird die Option "Aus Bibliothek hinzufügen" angezeigt. Wählen Sie diese Option und wählen Sie das gewünschte Layout aus.

Abschnitt-aus-Bibliothek hinzufügen

Einpacken

Ich hoffe, es hat Ihnen Spaß gemacht, diesen atemberaubenden Abschnitt zusammen zu bauen. Die Kombination aus Farbe, leuchtenden Schatten und kreativen Animationen macht dies zu einem hervorragenden Layout für die Präsentation Ihrer eigenen Downloads oder Produkte.

In Kürze

In Teil 5 zeige ich Ihnen, wie Sie den Roll-Animationsstil erfolgreich in Mobiltelefone in Ihre Abschnitte integrieren können.

Animation

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

Danke schön!