[Ad_1]
Gehen wir.
Übersicht
Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
Büro
Mobil
Laden Sie das Layout KOSTENLOS herunter
Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um auf den Download zugreifen zu können, müssen Sie unsere Divi Daily-Mailingliste über das abonnieren Formular unter. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Vorteile und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.
Beginnen wir mit der Neuerstellung!
2x Platzhalterabschnitte hinzufügen
Einen neuen Abschnitt hinzufügen
Beginnen Sie damit, der Seite, an der Sie arbeiten, einen Platzhalterabschnitt hinzuzufügen.
Sizing
Öffnen Sie die Schnitteinstellungen und ändern Sie die Höhe in den Größeneinstellungen.
Abschnitt klonen
Klonen Sie den Abschnitt einmal. Dadurch bleiben Ihnen zwei Platzhalterabschnitte auf Ihrer Seite. Diese Platzhalterabschnitte helfen Ihnen, den endgültigen Effekt nach dem Durcharbeiten des Tutorials zu sehen. Auf einer Live-Website werden Platzhalterabschnitte durch normale Abschnitte ersetzt, die Sie auf der gesamten Seite verwenden.
Neuen Abschnitt zwischen Platzhalterabschnitten hinzufügen
Sobald die Platzhalterabschnitte vorhanden sind, fügen Sie einen neuen Abschnitt zwischen den Platzhalterabschnitten hinzu.
Hintergrundfarbe
Öffnen Sie die Abschnittseinstellungen und verwenden Sie eine weiße Hintergrundfarbe.
- Hintergrundfarbe: #ffffff
Abstand
Wechseln Sie auf die Registerkarte Abschnittsdesign und ändern Sie die oberen und unteren Padding-Werte entsprechend:
- Obere Polsterung: 10vh
- Untere Polsterung: 10vh
Zeile # 1 hinzufügen
Säulenstruktur
Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Sizing
Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen, gehen Sie zu den Größeneinstellungen und ändern Sie die maximale Breite und Breitenwerte.
- Breite: 100%
- Maximale Breite: 100%
Fügen Sie der Spalte einen Textbaustein hinzu
Kopie hinzufügen
Das einzige Modul, das wir für diese Zeile benötigen, ist ein Textmodul. Fügen Sie eine Kopie Ihrer Wahl hinzu.
Texteinstellungen
Wechseln Sie in den Reiter Moduldesign und ändern Sie die Texteinstellungen entsprechend:
- Schriftart: Montserrat
- Schriftstärke des Textes: Ultra Bold
- Textschriftart: Großbuchstaben
- Textfarbe: # fff2ea
- Textgröße: 11vw
- Textzeilenhöhe: 1 em
- Textausrichtung: Mitte
Zeile # 2 hinzufügen
Säulenstruktur
Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:
- Benutzerdefinierte Bundstegbreite verwenden: Ja
- Dachrinnenbreite: 2
- Breite: 90%
- Linienausrichtung: Mitte
Bildmodul zur Spalte hinzufügen
Laden Sie ein Bild hoch
Fügen Sie der Zeilenspalte ein Bildmodul hinzu. Laden Sie ein Bild Ihrer Wahl hoch.
Ausrichtung
Wechseln Sie auf die Registerkarte Moduldesign und ändern Sie die Bildausrichtung entsprechend:
Sizing
Gehen Sie dann zu den Größeneinstellungen und erzwingen Sie die volle Breite des Moduls.
Fügen Sie der Spalte ein Schaltflächenmodul hinzu
Kopie hinzufügen
Das nächste und letzte Modul, das wir der Spalte hinzufügen, ist ein Schaltflächenmodul. Verwenden Sie eine Kopie Ihrer Wahl.
Tastenausrichtung
Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.
Tasteneinstellungen
Stylen Sie den Button dann wie folgt:
- Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
- Schaltflächentextgröße: 16px
- Schaltflächentextfarbe: # 000000
- Hintergrundfarbe der Schaltfläche: #ffffff
- Breite der Schaltflächenleiste: 0px
- Abstand der Tastenbuchstaben: 2px
- Schaltflächenschrift: Montserrat
- Schriftstärke der Schaltfläche: fett
- Schaltflächenschriftart: Großbuchstaben
Abstand
Verwenden Sie auch benutzerdefinierte Abstandswerte in den Abstandseinstellungen.
- Obere Polsterung: 20px
- Untere Polsterung: 20px
- Linke Polsterung: 5%
- Rechte Polsterung: 5%
Absolute Positionierung zu Zeile 1 hinzufügen
Wenn Sie die zweite Reihe abgeschlossen haben, kehren Sie zu Reihe 1 zurück. Öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Erweitert und machen Sie den Abschnitt absolut. Dadurch werden die Zeile und das darin enthaltene Textmodul unterhalb der Zeile mit dem Bildmodul platziert.
- Position: Absolut
- Ort: Zentrum
Klonen Sie Zeile Nr. 1 und platzieren Sie das Duplikat unter Zeile Nr. 2
Damit das Textmodul über dem Bild angezeigt wird, benötigen wir eine weitere Zeile mit einem höheren Z-Index-Wert. Klonen Sie die erste Reihe und platzieren Sie das Duplikat unter der zweiten Reihe.
Anwenden von Effekten auf Zeile 3
Z-Index erhöhen
Öffnen Sie die doppelte Zeile und ändern Sie den Z-Index auf der Registerkarte "Erweitert".
Textfarbe ändern
Öffnen Sie den Textbaustein in der Zeile und ändern Sie die Textfarbe.
Wenden Sie den Mischmodus auf die Linie an
Öffnen Sie dann die Zeileneinstellungen und ändern Sie den Mischmodus in den Filtereinstellungen.
Verwenden Sie den Scroll-Effekt auf dem Textmodul in Zeile # 3
Fügen Sie einen Ein- und Ausblendeffekt hinzu
Schließen Sie das Tutorial ab, indem Sie den Text-Pod erneut öffnen, zu den Bildlaufeffekten gehen und den Ein- und Ausblendeffekt aktivieren. Das ist es!
- Ein- und Ausblenden aktivieren: Ja
- Anfangsdeckkraft: 0%
- Mittlere Deckkraft: 0% (bis 26%)
- Endgültige Deckkraft: 100 % (bei 28 %)
- Bewegungseffekt-Trigger: Mitte des Elements
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Büro
Mobil
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit den integrierten Scroll-Effekten von Divi kreativ werden. Insbesondere haben wir Ihnen gezeigt, wie Sie das Scrollen von Kopien mischen können. Zunächst scheint die Kopie unter dem Bild zu sein. Nach dem Scrollen wird die Kopie über dem Bild sichtbar und verschmilzt mit dem Bild. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.
Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unbedingt unseren Newsletter per E-Mail und an unsere YouTube-Kanal Damit Sie immer zu den Ersten gehören, die diese kostenlosen Inhalte kennen und nutzen.
[Ad_2]
