Verwenden der Animationen von Divi, um Ihre Inhalte in die Ansicht zu bringen
Veröffentlicht: 2017-10-18Willkommen zu Teil 5 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 haben wir Abschnitt 6 unserer Animations-Demoseite erstellt. Ich habe Ihnen gezeigt, wie Sie ein Layout für die Anzeige von Produktdownloads mit leuchtenden Farben, leuchtenden Schatten und präzisen Animationen entwerfen.
Heute werden wir Abschnitt 7 unserer Animationsdemoseite erstellen, der ein perfektes Beispiel dafür ist, wie Sie den Rollanimationseffekt verwenden, um Ihren Inhalten lebensechte Bewegungen hinzuzufügen. Das Endprodukt wird den Eindruck erwecken, dass Text und Mobiltelefone gleiten und sich aus verschiedenen Blickwinkeln drehen, während Sie auf der Seite nach unten scrollen.
Dies ist eine meiner Lieblingsanimationen. Lass uns anfangen.
Hier ist ein kleiner Einblick in das Design und die Animation, die wir im heutigen Beitrag erstellen werden
Vorbereiten der Designelemente
Für dieses Tutorial benötigen Sie drei Bilder. Die vertikalen Bilder der ersten beiden Bilder sollten etwa 580 × 950 betragen und in einem Winkel von 10 % gegen den Uhrzeigersinn gedreht werden. Das horizontale Bild sollte 1250×608 groß sein (ebenfalls um 10 % gegen den Uhrzeigersinn gedreht) mit etwa 300px zusätzlichem transparentem Hintergrundbereich rechts neben dem Bild, damit es gut in die bereitgestellte Spalte passt. Stellen Sie sicher, dass die Telefonbilder im PNG-Format mit transparentem Hintergrund vorliegen. Hier sind die Bilder, die ich für den heutigen Beitrag verwendet habe.
Vertikales Telefonbild Nr. 1
Vertikales Telefonbild #2
Vertikales Telefonbild #3
Verwenden der Animationen von Divi, um Ihre Inhalte in die Ansicht zu bringen
Vertikales Telefonbild #3
Verwenden der Animationen von Divi, um Ihre Inhalte in die Ansicht zu bringen
Abonnieren Sie unseren Youtube-Kanal
Bauabschnitt 7 der Demo
Bevor wir mit dem Bauprozess beginnen, erhalten Sie hier einen Einblick in die Drahtmodellansicht des Schnittlayouts, das wir mit dem Visual Builder erstellen.
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 (ein Viertel ein Viertel eine Hälfte) Zeile hinzu.
Zeileneinstellungen aktualisieren
Bevor wir unser erstes Modul hinzufügen, gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:
Unter der Registerkarte Design…
Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 91%
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spalte 2 Benutzerdefinierte Polsterung: 5 % oben
Spalte 3 Benutzerdefinierte Polsterung: 24% Oben
Bild 1 hinzufügen
Fügen Sie in der ersten Spalte (ganz links) unseres Layouts ein Bildmodul hinzu und aktualisieren Sie die Bildeinstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [Bild hochladen #1]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Animationsstil: Rolle
Animationsrichtung: Rechts
Animationsintensität: 16%
Anfangsdeckkraft der Animation: 100 %
Einstellungen speichern
Animierten Text mit den Modulen Divider und Call-to-Action hinzufügen
Wechseln Sie nun zur mittleren (ein Viertel) Spalte, in der das Trennmodul verwendet wird, um eine kurze Trennlinie über dem Text hinzuzufügen.
Fügen Sie der Spalte ein Trennmodul hinzu.
Aktualisieren Sie dann die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Teiler anzeigen: JA
Unter der Registerkarte Design…
Farbe: #e0c48f
Teilergewicht: 3px
Breite: 60px (Sie müssen diesen Wert eingeben, da der Standardwert Prozentsatz ist)
Modulausrichtung: Standard (links)
Benutzerdefinierte Polsterung: 80 Pixel oben, 80 Pixel links
Animationsstil: Falten
Animationsrichtung: Rechts
Animationsdauer: 1200 ms
Animationsverzögerung: 50ms
Animationsintensität: 70%
Anfangsdeckkraft der Animation: 0%
Einstellungen speichern
Fügen Sie unter dem Divider-Modul ein Call-to-Action-Modul mit den folgenden Einstellungen hinzu:
Unter der Registerkarte Inhalt…
Titel: „1000 Wörter“
Schaltflächentext: „Weitere Informationen“
Inhalt: „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id.“
Verknüpfung: #
Hintergrundfarbe verwenden: NEIN
Unter der Registerkarte Design…
Textfarbe: Dunkel
Textausrichtung: Links
Header-Schriftart: Lato, Fett (B) Großbuchstaben (TT)
Header-Schriftgröße: 38px
Kopfzeilentextfarbe: #33454f
Kopfzeilenabstand: 0.2em
Höhe der Kopfzeile: 1,4 em
Körperschriftart: Lato
Schriftgröße des Körpers: 18px
Textkörperfarbe: #9b9b9b
Körperlinienhöhe: 1.8em
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 15px
Schaltflächentextfarbe: #f2733c
Hintergrundfarbe der Schaltfläche: rgba(225,225,225,0)
Breite des Tastenrahmens: 0px
Tastenabstand der Buchstaben: 2px
Tastenschrift: Lato, Fett (B), Großbuchstaben (TT)
Schaltflächensymbol: Pfeil nach rechts
Nur Symbol beim Hover für Schaltfläche anzeigen: NEIN
Schaltflächen-Hover-Buchstabenabstand: 0px
Animationsstil: Falten
Animationsrichtung: Rechts
Animationsdauer: 1200 ms
Animationsverzögerung: 50ms
Animationsintensität: 70%
Anfangsdeckkraft der Animation: 0%
Einstellungen speichern
Bild 2 hinzufügen
Fügen Sie als Nächstes ein Image-Modul unter dem soeben erstellten Call-to-Action-Modul hinzu. Aktualisieren Sie die Bildeinstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [Bild hochladen #2]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Animationsstil: Rolle
Animationsrichtung: Links
Animationsintensität: 13%
Anfangsdeckkraft der Animation: 100 %
Bild 3 hinzufügen
Das war's für unsere zweite (mittlere) Kolumne. Jetzt fügen wir Bild #3 in der dritten (ganz rechts) Spalte hinzu. Dazu können wir das soeben hinzugefügte Bildmodul am unteren Rand der zweiten Spalte duplizieren/kopieren und in die dritte Spalte einfügen. Da die Animationsstile gleich sind, müssen Sie für das neue Bildmodul nur die eigentliche Bild-URL aktualisieren.
Duplizieren und Anpassen des Teilers und des Call-to-Action-Moduls
Nachdem Sie die neue Bild-URL zum duplizierten Bild in Spalte 3 hinzugefügt haben, duplizieren/kopieren Sie sowohl das Trennmodul als auch das Call-to-Action-Modul, das Sie oben in der zweiten Spalte erstellt haben, und ziehen/fügen Sie die beiden Module unter Bild . ein #3 in der dritten Spalte.
Ändern Sie für das Trennmodul die Einstellung Animationsrichtung auf der Registerkarte Design auf „Links“.
Aktualisieren Sie für unser neues Call-to-Action-Modul die folgenden Einstellungen:
Unter der Registerkarte Inhalt…
Titel: Eine neue Art zu bauen
Unter der Registerkarte Design…
Benutzerdefinierte Polsterung: 80 Pixel rechts, 80 Pixel unten, 80 Pixel links
Animationsrichtung: Links
Schauen wir uns nun unser Endergebnis an…
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 namens Animation_Effects_Part_5.zip in unserem Download-Ordner. Entpacken Sie es, um die folgenden Importe anzuzeigen.
Animationseffekte Teil 5 (Abschnitt 1).json
Animationseffekte Teil 5 (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.
Einpacken
Dieses Layout ist ein bisschen schwierig zu ziehen. Aber sobald Sie die richtigen Bilder und den richtigen Abstand haben, bringt die Animation das gesamte Layout gut zusammen. Das lebensechte Rollen der Telefonbilder sieht fast so aus, als ob jemand sie auf einem weißen Tisch in unser Blickfeld schiebt, während wir auf der Seite nach unten scrollen. Dieses Beispiel einer Rollanimation ist definitiv eines, das auffällt.
In Kürze
Im nächsten Beitrag schließe ich unsere Serie mit Teil 6 ab. Ich zeige Ihnen, wie Sie die Folienanimation mit einigen benutzerdefinierten Bildern und CSS verwenden, um ein atemberaubendes Layout für die Präsentation von Kochrezepten zu erstellen. Das gleiche Layout könnte jedoch optimiert und für viele verschiedene Funktionen verwendet werden.
Ich freue mich von Ihnen in den Kommentaren zu hören.