Verwenden von Divis Animationen zum Schweben und Bouncen von Bildern
Veröffentlicht: 2017-10-20Willkommen zu Teil 6 dieser 6-teiligen Serie, die Ihnen beibringt, wie Sie die neuen Animationsoptionen von Divi verwenden, um fantastische 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.
Im letzten Beitrag haben wir Abschnitt 7 unserer Animations-Demoseite erstellt, in dem ich Ihnen gezeigt habe, wie Sie Bilder mit dem Rollanimationsstil animieren, um Ihren Inhalten lebensechte Bewegungen hinzuzufügen.
Heute beschäftigen wir uns mit den Abschnitten 8 und 9 unserer Animations-Demoseite. Abschnitt 8 ist ein großartiges Beispiel dafür, wie Sie einen hervorgehobenen Artikel mit einer Kombination aus Folienanimation und Unschärfeeffekten hervorheben können. Abschnitt 9 ist eine einfache und elegante Möglichkeit, einem Teamabschnitt eine Animation hinzuzufügen, die Fotos Ihres Teams zeigt.
Lass uns anfangen.
Hier ist ein kleiner Vorgeschmack auf das, was wir im heutigen Beitrag bauen werden
Vorbereiten der Designelemente
Für dieses Tutorial benötigen Sie vier Bilder. Sie benötigen ein benutzerdefiniertes Hintergrundbild und drei Rezeptkartenbilder. Das Hintergrundbild ist 1280×936 groß und hat einen gelben Hintergrund mit 6 halbtransparenten weißen Rechtecken mit zusätzlichen Schatten für die Tiefe. Sobald der Hintergrund im Abschnitt mit Parallaxe verwendet wird, entsteht der Eindruck, dass Rezeptkarten im Hintergrund schweben. Die Rezeptkartenbilder sind jeweils 375×667. Hier sind die Bilder, die in diesem Tutorial verwendet werden.
Hintergrundbild
Rezeptkarte Bild #1
Rezeptkarte Bild #2
Rezeptkarte Bild #3
Verwenden von Divis Animationen zum Schweben und Bouncen von Bildern
Abonnieren Sie unseren Youtube-Kanal
Bauabschnitt 8
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 Zeile mit drei Spalten (ein Drittel, ein Drittel, ein Drittel) 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: 1366 px
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spalte 1 Benutzerdefinierte Polsterung: 6% rechts
Spalte 3 Benutzerdefinierte Polsterung: 8% übrig
Fügen Sie Ihrem Abschnitt einen Hintergrund hinzu
Als nächstes fügen wir das Haupthintergrundbild in unseren Abschnitt ein. Gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie Folgendes:
Unter der Registerkarte Inhalt…
Hintergrundbild: [Bild 1280×936 einfügen]
Verwenden Sie die Parallax-Methode: JA
Parallaxenmethode: Echte Parallaxe
Bild 1 hinzufügen
Jetzt werden wir gelesen, um unsere Module zu unserer Reihe hinzuzufügen. Fügen Sie in der ersten (linken) Spalte ein Bildmodul hinzu.
Aktualisieren Sie dann die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [Rezeptkartenbild eingeben #1]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Animationsstil: Folie
Animationsrichtung: Nach oben
Animationsintensität: 20%
Unter der Registerkarte Erweitert…
Hier werden wir benutzerdefiniertes CSS hinzufügen, um dem Kartenbild eine abgerundete Kante, einen Kastenschatten und einen Unschärfefilter zu verleihen. Geben Sie das folgende CSS in das Feld Hauptelemente ein:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(2px) opacity(.75);
Einstellungen speichern
Fügen Sie zwei Textmodule in der mittleren Spalte hinzu
Fügen Sie als nächstes in der zweiten (oder mittleren) Spalte ein Textmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Geben Sie im Textregister des Inhaltsfelds den folgenden h1-Header ein:
<h1>The Best Recipes for Success</h1>
Unter der Registerkarte Design…
Header-Schriftart: Playfair Display, Fett (B)
Header-Schriftgröße: 60px
Höhe der Kopfzeile: 1,3 em
Benutzerdefinierter Rand: 20 Pixel unten
Animationsstil: Falten
Animationsrichtung: Nach oben
Einstellungen speichern
Fügen Sie unter dem gerade erstellten ein weiteres Textmodul 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.
Unter der Registerkarte Design…
Schriftgröße des Textes: 18px
Text Textfarbe: rgba(0,0,0,0.56)
Textzeilenhöhe: 1.9em
Benutzerdefinierter Rand: 40px
Animationsstil: Falten
Animationsrichtung: Unten
Animationsverzögerung: 150ms
Einstellungen speichern
Bild 2 hinzufügen
Fügen Sie unter den beiden soeben erstellten Textmodulen ein Bildmodul hinzu.
Aktualisieren Sie dann die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [Kartenbild eingeben #2]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Animationsstil: Folie
Animationsrichtung: Nach oben
Animationsintensität: 10%
Unter der Registerkarte Erweitert…
Hier werden wir benutzerdefiniertes CSS hinzufügen (ähnlich dem ersten Kartenbild, außer ohne den Unschärfeeffekt), um dem Kartenbild eine abgerundete Kante und einen Kastenschatten zu verleihen. Geben Sie das folgende CSS in das Feld Hauptelemente ein:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
Einstellungen speichern
Bild 3 hinzufügen
Fügen wir unser drittes und letztes Kartenbild der dritten (oder rechten) Spalte hinzu, indem wir ein Bildmodul einfügen:
Aktualisieren Sie dann die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [Kartenbild #3 eingeben]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Benutzerdefinierter Spielraum: 20% oben
Animationsstil: Folie
Animationsrichtung: Nach oben
Animationsintensität: 30%
Einstellungen speichern
Unter der Registerkarte Erweitert…
Fügen Sie dieses benutzerdefinierte CSS im Feld Hauptelement hinzu:
border-radius: 10px; overflow: hidden; box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7); filter: blur(8px) opacity(.4);
Einstellungen speichern
Groß! Damit ist Abschnitt 8 unserer Demoseite abgeschlossen. Sehen Sie sich das Endergebnis an.
Die Animation ist überraschend lebensecht und nutzt die Parallaxe-Funktion, die den Hintergrund beim Scrollen mit einer anderen Geschwindigkeit nach unten bewegt als die darüber sitzenden Module. Die Tatsache, dass die Karten nach oben und der Hintergrund nach unten animiert werden, vermittelt den Eindruck, dass die Karten schweben. Ich muss sagen, dass der Inhalt in diesem Abschnitt wirklich knallt.
Bauabschnitt 9 der Demo
In unserem letzten Abschnitt werden wir einen einfachen Abschnitt „Unser Team“ mit einer kleinen Animation erstellen, die buchstäblich „knallt“. Hier ist, was wir bauen werden:
Hier ist ein Blick auf das Layout aus der Drahtmodellansicht.
Fügen Sie eine Abschnittsüberschrift hinzu
Fügen Sie zunächst einen regulären Abschnitt mit einer einspaltigen Zeile hinzu. Fügen Sie dann der Spalte ein Textmodul hinzu.
Aktualisieren Sie die Texteinstellungen wie folgt:
Unter der Registerkarte Inhalt…
Inhalt: Unser Team
Unter der Registerkarte Design…
Textschriftart: Raleway, Fett (B), Großbuchstaben (TT)
Schriftgröße des Textes: 15px
Text Textfarbe: rgba(0,0,0,0.32)
Text Buchstabenabstand: 5px
Textzeilenhöhe: 1.9em
Benutzerdefinierter Rand: 20px
Animationsstil: Folie
Animationsrichtung: Nach oben
Animationsdauer: 500 ms
Animationsverzögerung: 1000ms
Unter der Registerkarte Erweitert…
Einstellungen speichern
Fügen Sie unter dem gerade erstellten einen weiteren Textbaustein hinzu und aktualisieren Sie die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Geben Sie das folgende h1-Tag in die Textregisterkarte des Inhaltsfelds ein:
<h1>Highly Skilled Ninjas</h1>
Unter der Registerkarte Design…
Header-Schriftart: Raleway Light
Ausrichtung des Kopfzeilentextes: Mitte
Header-Schriftgröße: 48px
Kopfzeilentextfarbe: #3a3830
Höhe der Kopfzeile: 1,3 em
Benutzerdefinierter Rand: 20 Pixel unten
Animationsstil: Folie
Animationsrichtung: Rechts
Animationsintensität: 12%
Einstellungen speichern
Um nun die kleine grüne Trennlinie hinzuzufügen, fügen Sie ein Trennmodul unter dem Textmodul hinzu.
Aktualisieren Sie dann die Teilereinstellungen wie folgt:
Unter der Registerkarte Inhalt…
Teiler anzeigen: JA
Unter der Registerkarte Design…
Farbe: #7cda24
Teilergewicht: 3px
Höhe: 3px
Breite: 60px (geben Sie dies ein)
Modulausrichtung: Mitte
Animationsstil: Folie
Animationsrichtung: Unten
Animationsdauer: 500 ms
Animationsverzögerung: 1000ms
Animationsintensität: 200%
Einstellungen speichern
Hinzufügen der vier Teambilder
Um die Bilder unserer Teammitglieder hinzuzufügen, fügen Sie eine vierspaltige Zeile unter der Zeile mit der gerade erstellten Überschrift hinzu.
Fügen Sie in der ersten Spalte ein Personenmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Name: Nick
Bild-URL: [Geben Sie Ihr 150×150-Foto ein]
Unter der Registerkarte Design…
Header-Schriftart: Raleway Light, Bold (B), Großbuchstaben (TT)
Header-Schriftgröße: 13px
Kopfzeilentextfarbe: rgba(0,0,0,0.71)
Kopfzeilenabstand: 3px
Unter der Registerkarte Erweitert…
Fügen Sie im Feld Mitgliedsbild das folgende CSS hinzu:
border-radius: 100%; overflow: hidden; width: 180px; margin: auto auto 20px auto;
Dadurch erhält unser Bild einen schönen Kreisrand.
Fügen Sie der Mitgliedsbeschreibung das folgende benutzerdefinierte CSS hinzu:
text-align: center; display: block;
Dies zentriert den Namen.
Einstellungen speichern
Jetzt können Sie das soeben erstellte Personenmodul duplizieren, um die nächsten drei hinzuzufügen, um die nächsten drei Spalten zu füllen. Sie müssen lediglich das Image und den Namen für jedes der duplizierten Module aktualisieren.
Nachdem Sie alle vier Ihrer Personenmodule hinzugefügt haben, sind Sie bereit für den letzten Schritt in diesem Abschnitt, der darin besteht, die Zeile zu gestalten und zu animieren. Aktualisieren Sie dazu die Zeileneinstellungen wie folgt:
Unter der Registerkarte Design…
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 2
Benutzerdefinierte Polsterung: 60px Top
Animationsstil: Bounce
Animationsdauer: 700 ms
Animationsverzögerung: 1000ms
Damit ist Abschnitt 9 unserer Animations-Demoseite abgeschlossen. Und es schließt auch die sechsteilige Serie über die Verwendung von Animationen mit Divi ab.
Abschluss der Serie
Ich hoffe, Ihnen hat das Erstellen unserer Animationsdemo-Seite gefallen. Allein das Design ist eine große Inspiration. Und die durchgehende Verwendung von Animationen wird zweifellos als Referenz für zukünftige Seitenerstellungen dienen. Besonderer Dank geht an Kenny Sing, unseren Direktor, für die Erstellung dieses Layouts. Wir sind so stolz darauf, dass wir Ihnen dieses Layout kostenlos anbieten möchten, um Ihnen bei Ihrem nächsten Projekt zu helfen.
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 All_Animation_Effects_1.zip in unserem Download-Ordner. Entpacken Sie es, um alle Importe aus dieser Serie anzuzeigen – einschließlich der letzten beiden für diesen Beitrag.
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.
Ich freue mich, von Ihnen in den Kommentaren unten zu hören.
Danke schön!