Verwenden von Divis Animationen zum Entfalten von Inhalten mit Schiebebildern
Veröffentlicht: 2017-10-12Willkommen zu Teil 2 dieser 5-teiligen Serie, die Ihnen beibringt, wie Sie mit den neuen Animationsoptionen von Divi tolle Seitenabschnitte gestalten können. 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 Teil 1 unserer Serie haben wir die ersten beiden Abschnitte der Animations-Demoseite erstellt. Das Design und die Animation der Kopfzeile im ersten Abschnitt zeigten eine einzigartige Möglichkeit, die Elemente eines Textmoduls innerhalb eines Vollbild-Standardabschnitts zu animieren. Beim Aufbau des zweiten Abschnitts haben wir eine Möglichkeit entdeckt, subtile und harmonische Animationen in Inhaltsreihen zu integrieren, die leicht verwendet werden können, um Inhalte auf einer Landingpage auf ansprechende Weise zu präsentieren.
Heute setzen wir unsere Reise fort, um Abschnittslayouts zu entwerfen, die beim Scrollen durch die Seite Animationen effektiv (und kreativ) einsetzen. Wir werden den dritten und vierten Abschnitt unserer Live-Demo-Seite erstellen, um die Leistungsfähigkeit der Animationsfunktionen von Divi zu demonstrieren. Beide Abschnitte haben Layouts, die leicht für Ihre eigenen Projekte übernommen werden können, um Produkte oder Dienstleistungen zu präsentieren.
Lass uns anfangen.
Hier ist ein kleiner Vorgeschmack auf das, was wir im heutigen Beitrag bauen werden
Sektion 3
Sektion 4
Vorbereiten der Designelemente
Bereiten Sie Ihre Bilder vor
Für den dritten Abschnitt benötigen Sie zwei Bilder. Die erste muss etwa 880 × 600 und die zweite etwa 790 × 880 groß sein. Diese Bildgrößen müssen nicht exakt sein. Ich füge diese Dimensionen nur ein, um Ihnen eine Vorstellung zu geben.
Beim Erstellen des vierten Abschnitts werden Sie auch zwei Bilder mit etwa 600 × 400 Pixeln erstellen.
Verwenden Sie den Visual Builder
Hier ist kein erweiterter Code erforderlich. Wir werden nur den Visual Builder verwenden, um die nächsten beiden Abschnitte unserer Seite zu gestalten, die wir in Teil 1 dieser Serie erstellt haben. Da Ihre Seite bereits eingerichtet ist, können Sie loslegen.
Verwenden von Divis Animationen zum Entfalten von Inhalten mit Schiebebildern
Abonnieren Sie unseren Youtube-Kanal
Bauabschnitt 3 der Demo
Abschnitt 3 ist ein großartiges Beispiel dafür, wie das Call-to-Action-Modul mit einem begleitenden Bild gestaltet und animiert wird.
Tauchen wir ein.
Fügen Sie mit dem Visual Builder einen regulären Abschnitt mit einer zweispaltigen Zeile hinzu. Fügen Sie in der linken Spalte ein Bildmodul hinzu.
Aktualisieren Sie die Bildeinstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [fügen Sie Ihr 880×600-Bild ein]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Animationsstil: Folie
Animationsrichtung: Links
Animationsintensität: 20%
Anfangsdeckkraft der Animation: 100 %
Einstellungen speichern
Trennmodul hinzufügen
In der rechten Spalte präsentieren wir unsere Inhalte mit dem Divider-Modul und dem Call-to-Action-Modul. Das Trennmodul wird verwendet, um eine kurze Trennlinie über dem Text hinzuzufügen.
Fügen Sie der rechten Spalte ein Trennmodul hinzu.
Aktualisieren Sie dann die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Teiler anzeigen: JA
Unter der Registerkarte Design…
Farbe: #e4ca77
Teilergewicht: 4px
Breite: 80px (Sie müssen diesen Wert eingeben, da der Standardwert Prozentsatz ist)
Modulausrichtung: Standard (links)
Benutzerdefinierter Rand: 60 Pixel oben, 0 Pixel unten
Animationsstil: Falten
Animationsrichtung: Rechts
Animationsdauer: 1200 ms
Animationsverzögerung: 50ms
Animationsintensität: 70%
Anfangsdeckkraft der Animation: 0%
Einstellungen speichern
Call-to-Action-Modul hinzufügen
Fügen Sie unter dem Divider-Modul ein Call-to-Action-Modul mit den folgenden Einstellungen hinzu:
Unter der Registerkarte Inhalt…
Titel: „Die perfekte Aussicht“
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, efficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi.“
Verknüpfung: #
Hintergrundfarbe verwenden: NEIN
Unter der Registerkarte Design…
Textfarbe: Dunkel
Textausrichtung: Links
Header-Schriftart: Lato, Großbuchstaben (TT)
Header-Schriftgröße: 38px
Kopfzeilentextfarbe: #0c0c0c
Kopfzeilenabstand: 0.2em
Höhe der Kopfzeile: 1,4 em
Körperschriftart: Lato
Schriftgröße des Körpers: 18px
Textkörperfarbe: #9e9e9e
Körperlinienhöhe: 1.8em
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 15px
Schaltflächentextfarbe: #000000
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
Klicken Sie nun auf , um die Zeileneinstellungen zu bearbeiten und Folgendes zu aktualisieren:
Unter der Registerkarte Design…
Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 1366 px
Unter der Registerkarte Erweitert…
Fügen Sie dem Feld Hauptelement von Spalte 1 das folgende benutzerdefinierte CSS hinzu:
z-index: 999;
Einstellungen speichern
Duplizieren Sie Ihre Zeile und aktualisieren Sie sie
Das war's für die erste Reihe. Um Zeit beim Erstellen der zweiten Zeile zu sparen, duplizieren Sie die gerade erstellte Zeile.
Bearbeiten Sie die duplizierten Zeileneinstellungen wie folgt:
Unter der Registerkarte Erweitert…
Nehmen Sie das benutzerdefinierte CSS im Hauptelement von Spalte 1 heraus und fügen Sie es dem Feld Hauptelement von Spalte 2 hinzu:
z-index: 999;
Da sich unser Bild in der rechten Spalte befinden wird, müssen wir diese Spalte über dem animierenden Text auf der linken Seite halten.
Einstellungen speichern
Aktualisieren Sie das Image-Modul und das Call-to-Action-Modul in der zweiten Reihe
Ziehen Sie als nächstes das Bildmodul in die rechte Spalte und ziehen Sie das Trennmodul und das Call-to-Action-Modul in die linke Spalte.
Dieser Abschnitt wird eine etwas andere Spaltenstruktur haben. Klicken Sie auf das Zeilensymbol der Spaltenstruktur ändern (neben dem Symbol für die duplizierte Zeile) und wählen Sie ein Zweidrittel-Eindrittel-Spaltenlayout aus.
Jetzt müssen wir nur noch jedes der Module innerhalb der Reihe aufrufen und ein paar Änderungen vornehmen.
Aktualisieren Sie zunächst die Einstellungen des Teilermoduls wie folgt:
Unter der Registerkarte Design…
Modulausrichtung: Rechts
Animationsrichtung: Links
Einstellungen speichern
Aktualisieren Sie als Nächstes die Einstellungen des Call-to-Action-Moduls wie folgt:
Titel: „Spricht für sich“
Textausrichtung: Rechts
Ausrichtung des Kopfzeilentextes: Rechts
Breite: 700px (geben Sie dies ein)
Animationsrichtung: Links
Einstellungen speichern
Als nächstes aktualisieren Sie das Bildmodul in der rechten Spalte mit Ihrem neuen 790×880-Bild.
Das war's für Abschnitt 3!
Sehen Sie sich Ihr Ergebnis an.
Bauabschnitt 4 der Demo
Abschnitt 4 hebt das Design des Image-Moduls mit einigen fortgeschrittenen CSS-Tricks auf eine andere Ebene. Und das Stapeln von Textbausteinen, um sie an einem Scharnier zu falten, lässt sich gut mit der Lieferung kombinieren. Tauchen wir ein.
Fügen Sie mit dem Visual Builder einen regulären Abschnitt mit einer zweispaltigen (halben halben) Zeile hinzu. Bevor wir unser erstes Modul hinzufügen, fügen wir unserem Abschnitt eine Hintergrundfarbe hinzu. Klicken Sie auf , um die Abschnittseinstellungen zu bearbeiten.
Wählen Sie unter der Registerkarte Inhalt die Registerkarte Hintergrundfarbe aus und geben Sie die Farbe #262938 ein.
Einstellungen speichern
Fügen Sie das erste Textmodul hinzu
Fügen Sie in der linken Spalte ein Textmodul hinzu und aktualisieren Sie die Texteinstellungen wie folgt:
Unter der Registerkarte Inhalt…
Geben Sie den folgenden HTML-Code in die Textregisterkarte des Inhaltsfelds ein:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
Unter der Registerkarte Design…
Textfarbe: Hell
Header-Schriftart: Playfair Display, Fett (B)
Header-Schriftgröße: 38px
Höhe der Kopfzeile: 1,3 em
Benutzerdefinierter Rand: 20 Pixel unten
Animation: Falten
Animationsrichtung: Nach oben
Fügen Sie das zweite Textmodul hinzu
Fügen Sie als nächstes ein weiteres Textmodul direkt unter dem aktuellen Textmodul hinzu. Aktualisieren Sie dann 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: Falten
Animationsrichtung: Unten
Animationsverzögerung: 150ms
Einstellungen speichern
Fügen Sie das Schaltflächenmodul hinzu
Fügen Sie unter dem letzten Textbaustein ein Schaltflächenmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:
Schaltflächentext: Erfahren Sie mehr
Schaltflächen-URL: #
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 15px
Schaltflächentextfarbe: #01254c
Hintergrundfarbe der Schaltfläche: #ffffff
Schaltflächenrandradius: 0px
Tastenschrift: Fett (B), Großbuchstaben (TT)
Benutzerdefinierte Polsterung: 10 Pixel oben, 30 Pixel rechts, 10 Pixel unten, 30 Pixel links
Animationsstil: Folie
Animationsrichtung: Unten
Animationsdauer: 1600 ms
Animationsverzögerung: 150ms
Animationsintensität: 20%
Einstellungen speichern
Bildmodul zur rechten Spalte hinzufügen
Das war's für diese Spalte. Jetzt müssen wir der rechten Spalte ein Bildmodul hinzufügen. Aktualisieren Sie dann die Einstellungen wie folgt:
Unter der Registerkarte Inhalt…
Bild-URL: [fügen Sie Ihr 600×400-Bild ein]
Unter der Registerkarte Design…
Volle Breite erzwingen: JA
Animationsstil: Folie
Animationsrichtung: Rechts
Animationsverzögerung: 800 ms
Animationsintensität: 20%
Einstellungen speichern
Zeileneinstellungen aktualisieren
Klicken Sie nun auf , um die Zeileneinstellungen zu bearbeiten und Folgendes zu aktualisieren:
Unter der Registerkarte Design…
Benutzerdefinierte Breite verwenden: JA
Benutzerdefinierte Breite: 1366 px
Benutzerdefinierte Polsterung: 27 Pixel oben, 0 Pixel rechts, 170 Pixel unten, 0 Pixel links
Spalte 1 Benutzerdefinierte Polsterung: 6% Oben
Unter der Registerkarte Erweitert…
Fügen Sie dem Feld Hauptelement von Spalte 1 das folgende benutzerdefinierte CSS hinzu:
z-index: 999;
Diese CSS-Adds sorgen dafür, dass der Text während der Animation über dem Bild bleibt.
Fügen Sie dann das folgende benutzerdefinierte CSS zum Feld Hauptelement von Spalte 2 hinzu:
transform: scale(1.3); transform-origin: top right;
Dieses CSS fügt ein cleveres Design hinzu, um die Größe von allem in Spalte 2 (dem Bild) zu vergrößern (zu vergrößern). Die Transformationsursprungseigenschaft weist die Spalte an, von oben rechts in der Zeile zu skalieren. Dadurch entsteht eine leichte Überlappung des linken Textes und des Bildes.
Einstellungen speichern
Duplizieren und aktualisieren Sie Ihre Zeile
Genau wie in Abschnitt 3 werden wir nun die Zeile duplizieren. Ziehen Sie nach dem Duplizieren der Zeile die 2 Textbausteine und das Schaltflächenmodul aus der linken Spalte in die rechte. Und ziehen Sie das Bildmodul aus der rechten Spalte nach links. Jetzt müssen wir nur noch einige kleinere Aktualisierungen an unserer duplizierten Zeile und ihrem Inhalt vornehmen.
Lassen Sie uns zunächst die Zeileneinstellungen wie folgt aktualisieren:
Unter der Registerkarte Design…
Benutzerdefinierte Polsterung: 40 Pixel oben, 0 Pixel rechts, 40 Pixel unten, 0 Pixel links
Spalte 1 Custom Padding: [Auf Standard zurücksetzen; löschen 6% Oben]
Spalte 2 Benutzerdefinierte Polsterung: 6% Oben
Unter der Registerkarte Erweitert…
Löschen Sie das benutzerdefinierte CSS aus dem Hauptelementfeld von Spalte 1 und dem Hauptelementfeld von Spalte 2. Dies wurde von der Vervielfältigung übernommen und wir brauchen es nicht mehr.
Bildmodul aktualisieren
Als nächstes aktualisieren Sie das Image Module (jetzt in der linken Spalte) mit den folgenden:
Unter der Registerkarte Inhalt…
Bild-URL: [fügen Sie Ihr neues 600×400-Bild ein]
Unter der Registerkarte Design…
Animationsrichtung: Links
Unter der Registerkarte Erweitert…
Wenn Sie dachten, dass dieses Bild bereits verschwommen ist. Denk nochmal! Alles, was Sie tun müssen, um diesen Unschärfeeffekt hinzuzufügen, ist, die folgende Zeile mit benutzerdefiniertem CSS zum Hauptelementfeld hinzuzufügen:
filter: blur(5px) opacity(.6);
Neben dem Unschärfe-Effekt macht dieses CSS das Bild auch halbtransparent mit einer Deckkraft von 60%.
Einstellungen speichern
Textmodul in der rechten Spalte aktualisieren
Wechseln Sie zur rechten Spalte und aktualisieren Sie den oberen Textmodulinhalt mit einer kürzeren h1-Überschrift:
<h1>Consectetur adipiscing elit</h1>
Einstellungen speichern
Und voila! Wir sind alle mit Abschnitt 4 fertig. Schauen wir uns 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_2.zip in unserem Download-Ordner. Entpacken Sie es, um die folgenden Importe anzuzeigen.
Animationseffekte Teil 2 (Abschnitt 1).json
Animationseffekte Teil 2 (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
Dieser Abschnitt macht mich nicht nur hungrig nach Kohlenhydraten, sondern zeigt auch kreative Möglichkeiten zum Anzeigen und Animieren von Bildern. Auch die an einem Scharnier ausklappbaren Textbausteine mit dem verzögerten Tastenschieber verführen den Nutzer zusätzlich zum Anklicken des CTA.
In Kürze
In Teil 3 dieser Serie zeige ich Ihnen eine schöne Möglichkeit, Klappentext-Module zu gestalten und zu animieren. Dieses Abschnittslayout kann für eine Vielzahl von Zwecken verwendet werden. Ich kann mir vorstellen, dass dies eine Möglichkeit ist, den Prozess Ihrer Dienstleistung oder eine Liste Ihrer Dienstleistungen oder Produkte zu präsentieren.
Sich auf etwas freuen.
Vergessen Sie nicht, sich in den Kommentaren unten zu melden!