So erstellen Sie einen Slashing-Text-Scroll-Effekt in Divi

Das Erstellen eines Slashing-Text-Effekts ist eine unterhaltsame Möglichkeit, Ihren Inhalten Leben einzuhauchen. Die Idee ist, die Illusion zu erwecken, dass der Text in zwei Hälften aufgeschnitten wird und auseinanderbricht, wenn der Benutzer auf der Seite nach unten scrollt. In diesem Tutorial zeigen wir Ihnen, wie einfach dieses Design in Divi zu bauen ist!

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien 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.

HERUNTERLADEN

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 das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Teil 1: Gestaltung der Sektion

In diesem ersten Teil werden wir den Abschnittshintergrund für unser Abschnittslayout gestalten.

Hintergrundfarbe

Fügen Sie zunächst wie folgt eine Hintergrundfarbe zum Standardabschnitt hinzu:

• Farbverlauf Hintergrund links: #29c4a9
• Farbverlauf Hintergrund Rechte Farbe: #2b87da

Teiler

Fügen Sie unter der Registerkarte Design wie folgt eine obere Trennlinie hinzu:

• Top Divider Style: siehe Screenshot
• Teilerfarbe: weiß
• Teiler Flip: vertikal

Abstand

Um die Bildlaufeffekte für das Design zu testen, fügen wir oben und unten im Abschnitt einen temporären Rand hinzu. Wir können es jederzeit entfernen, wenn wir den Abschnitt zu einer anderen Seite hinzufügen. Wir müssen auch oben und unten gleich viel Polsterung hinzufügen.

• Rand: 80vh oben, 80vh unten
• Polsterung: 200px oben, 200px unten

Box Shadow für zusätzlichen Bodenraum

Um am unteren Rand des Abschnitts zusätzliche Designfarbe/-raum zu erhalten, ohne den tatsächlichen Raum des Abschnitts zu beeinträchtigen, können wir wie folgt einen Kastenschatten hinzufügen:

• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: 0px
• Vertikale Position des Boxschattens: 100px
• Schattenfarbe: #2b87da

Sichtbarkeit ausgeblendet

Setzen Sie dann den Überlauf auf ausgeblendet, damit unsere Scroll-Effekte nicht sichtbar werden, wenn Sie sich außerhalb des Abschnitts bewegen.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Teil 2: Erstellen des Slashing-Text-Effekts

In diesem nächsten Teil werden wir den Slashing-Text-Effekt erstellen. Wir werden zwei Zeilen übereinander stapeln, jede mit einem Textbaustein, der den gleichen Textinhalt enthält. Dann schieben wir mit einem negativen Rand den oberen Text nach unten und verstecken die untere Hälfte des Textes. Dann verwenden wir einen negativen Rand, um den unteren Text nach oben zu schieben und die obere Hälfte des Textes auszublenden. Sobald dies erledigt ist, können wir die obere Reihe/Spalte mit dem Scroll-Effekt verschieben, um die Illusion zu erzeugen, dass der Text durchgestrichen ist.

Zeile für die obere Hälfte des Textes hinzufügen

Zuerst fügen wir eine einspaltige Zeile hinzu.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

• Dachrinnenbreite: 1
• Padding: 0px oben, 0px unten

Spaltensichtbarkeit ausgeblendet

Öffnen Sie als Nächstes die Spalteneinstellungen und aktualisieren Sie den Überlauf auf ausgeblendet:

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Textmodul hinzufügen

Fügen Sie in der Spalte einen neuen Textbaustein hinzu.

Textinhalt

Fügen Sie im Inhaltsbereich das Wort „Slash“ hinzu.

Textdesign

Wechseln Sie zur Registerkarte Design und aktualisieren Sie den Textstil wie folgt:

• Textschriftart: B612 Mono
• Schriftstärke des Textes: Fett
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 150px (Desktop), 100px (Tablet), 60px (Telefon)
• Text Buchstabenabstand: 0.1em
• Textausrichtung: Mitte

Textrand

Hier müssen wir sicherstellen und einen unteren Rand hinzufügen, der genau halb so groß ist wie der Text.

• Rand: -75px unten (Desktop), -50px (Tablet), -30px (Telefon)

Zeile für untere Texthälfte hinzufügen

Doppelte Zeile

Wenn die erste Zeile mit dem Text vorhanden ist, duplizieren Sie die gesamte Zeile, um die untere Zeile zu erstellen.

Textmodulrand aktualisieren

Aktualisieren Sie dann den Textmodulrand in der doppelten Zeile mit einem negativen oberen Rand anstelle eines unteren Rands, um die obere Hälfte des Textes auszublenden.

• Rand: -75px oben (Desktop), -50px oben (Tablet), -30px oben (Telefon)

Scroll-Effekte zur Spalte in der obersten Zeile hinzufügen

Als Nächstes sind wir bereit, den Scroll-Effekt zur Spalte in der oberen Reihe hinzuzufügen. Wir können den Bildlaufeffekt nicht zum Textmodul hinzufügen, da der Text aufgrund des Überlauf-Verstecktwerts der Spalte, der den unteren Teil des Texts ausblendet, ausgeblendet würde.

Öffnen Sie die Spalteneinstellungen für die oberste Zeile und aktualisieren Sie Folgendes:

Unter der Registerkarte Vertikale Bewegung…

• Vertikale Bewegung aktivieren: JA
• Start-Offset: 0 (bei 0%)
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: -.02 (bei 75%)

Unter der Registerkarte Horizontale Bewegung…

• Horizontale Bewegung aktivieren: JA
• Start-Offset: 0 (bei 0%)
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: 0,2 (bei 75%)

Auf der Registerkarte Drehung…

• Drehen aktivieren: JA
• Startrotation: 0 (bei 0%)
• Mittlere Drehung: 0 (bei 50%)
• Enddrehung: 1deg (bei 75%)

Jetzt ist unser Slashing-Text-Effekt fertig!

Teil 3: Erstellen des beweglichen Teilers

Wenn unser Slashing-Text-Effekt komplett ist, können wir ein zusätzliches lustiges Element hinzufügen – einen kleinen fliegenden Teiler, der den Text durchschneidet! Um dies zu erstellen, verwenden wir ein Trennmodul, das sich über die Seitenmitte des Abschnitts genau an der Stelle bewegt, an der das Textmodul unterteilt ist.

So geht's.

Zeile hinzufügen

Fügen Sie unter der zweiten Zeile eine einspaltige Zeile hinzu.

Trennmodul hinzufügen

Fügen Sie in der Spalte ein neues Trennmodul hinzu.

Teiler-Hintergrund

Wählen Sie dann NICHT aus, um den Teiler anzuzeigen. Geben Sie dem Teiler stattdessen eine Hintergrundfarbe wie folgt:

• Hintergrundfarbe links: transparent
• Hintergrund mit Farbverlauf rechts: #29c4a9

Maßstab transformieren

Aktualisieren Sie dann die Höhe und verschieben Sie sie mit der Option zum Übersetzen von Transformationen nach links.

• Höhe: 4px
• Transformieren X-Achse verschieben: -100%

Scroll-Effekt

Fügen Sie nun den Scroll-Effekt hinzu, um den Teiler nach rechts zu verschieben.

Unter der Registerkarte horizontale Bewegung…

• Horizontale Bewegung aktivieren: JA
• Startversatz: -18 (bei 25%)
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: 13 (bei 75%)

Zeileneinstellungen

Um sicherzustellen, dass die Trennlinie durch die Mitte des Textes „durchgestrichen“ wird, müssen wir die Zeileneinstellungen wie folgt aktualisieren:

• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten
• Position: Absolut
• Ort: linke Mitte
• Z-Index: 9

Nun bewegt sich der Teiler von links nach rechts und streicht durch die Mitte des Textes.

Teil 4: Hinzufügen des Textkörpers

Für diesen letzten Teil werden wir einen Textblock hinzufügen, um das Layout zu vervollständigen.

Zeile hinzufügen

Fügen Sie unter der Zeile mit dem Trenner eine neue einspaltige Zeile hinzu.

Textmodul hinzufügen

Fügen Sie dann der Zeile einen neuen Textbaustein hinzu.

Textinhalt

Fügen Sie dann den folgenden HTML-Code in den Textbereich ein:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

Textdesign

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Text Textfarbe: #ffffff
• Linktextfarbe: #121212
• Linktextgröße: 20px

Zeileneinstellungen

Öffnen Sie die Einstellungen für die übergeordnete Zeile und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Maximale Breite: 400px
• Position: Absolut
• Ort: unten Mitte
• Vertikaler Versatz: 20 Pixel (Desktop und Tablet), -25 Pixel (Telefon)

Endergebnis

Hier ist das Endergebnis.

Abschließende Gedanken

Für dieses Design ist es wichtig, den Text auf allen Geräten in einer Zeile zu halten, damit Sie auf die Textmenge beschränkt sind, die geslasht wird. Diese Technik des Slashing-Scroll-Effekts kann jedoch nicht nur auf Text angewendet werden. Sie können auch ganz einfach Bilder durchschneiden!

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

Danke schön!