So entwerfen Sie eine Textmaske mit Hintergrundanimation beim Scrollen in Divi

Textmaskendesigns lassen sich mit den integrierten Optionen von Divi überraschend einfach erstellen. Der Builder verfügt über alle Zutaten, um einen Textmaskeneffekt zu erstellen, einschließlich Optionen für Textstile, Hintergründe und Mischmodi. Tatsächlich haben wir bereits Textmaskendesigns mit Mischmodi erstellt. Aber mit Scroll-Effekten können wir Textmasken-Designs auf eine ganz neue Ebene heben.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi eine Textmaske mit Hintergrundanimation beim Scrollen entwerfen. Das Design ist einzigartig und der Scroll-Effekt macht es wirklich lebendig.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Designs, die 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.

Entwerfen einer Textmaske mit Hintergrundanimation in Divi

Zeile hinzufügen

Fügen Sie zum Auftakt eine zweispaltige Zeile zum standardmäßigen regulären Abschnitt hinzu.

Abschnittseinstellungen aktualisieren

Öffnen Sie vor dem Hinzufügen von Modulen die Abschnittseinstellungen und aktualisieren Sie die Hintergrundfarbe und den Abstand wie folgt:

• Hintergrundfarbe: #750046

• Padding: 0px oben, 0px unten

Zeileneinstellungen aktualisieren

Nachdem die Abschnittseinstellungen vorgenommen wurden, öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie die folgenden Designeinstellungen:

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten

Es ist wichtig, die Bundstegbreite auf 1 und die Breite auf 100 % einzustellen, da wir beim Erstellen des Textmaskendesigns die vw-Längeneinheit für unseren Text verwenden werden. Da die Längeneinheit vw auf der Breite des Browsers basiert, ist es wichtig, dass die übergeordneten Container (Abschnitt und Zeile) die gleiche Breite wie der Browser haben, also 100 %.

Einstellungen für Spalte 1 aktualisieren

Unsere Textmaske und unser Bild werden der linken Spalte (Spalte 1) hinzugefügt. Wir müssen der Spalte eine Hintergrundfarbe hinzufügen, damit die Mischmodi, die wir dem Bild und dem Text hinzufügen, diese Farbe mischen / anzeigen. Wir müssen den Überlauf auch auf versteckt setzen, damit wir beim Animieren des Bildes beim Scrollen das überlaufende Bild nicht außerhalb der Spalte sehen.

Öffnen Sie die Einstellungen für Spalte 1 und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #750046
• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Erstellen der Textmaske

Um die Textmaske zu erstellen, fügen Sie in Spalte 1 einen Textbaustein hinzu.

Der Textinhalt

Fügen Sie dann das Wort „divi“ zum Textkörperinhalt hinzu. Wir verwenden ein Wort mit 4 Buchstaben, damit es gleichmäßig für ein quadratisches Design gestapelt wird.

Texthintergrund

Als nächstes fügen Sie dem Textmodul eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Textdesign

Aktualisieren Sie dann auf der Registerkarte "Design" Folgendes:

• Textschriftart: Rubik Mono One
• Textschriftart: TT
• Text Textfarbe: #000000
• Text Textgröße: 25vw (Desktop), 50vw (Tablet und Telefon)
• Textzeilenhöhe: 0.8em
• Textausrichtung: Mitte

• Polsterung: 8vw oben, 8vw unten

Textmischmodus

Um das Design der Textmaske abzuschließen, fügen Sie den folgenden Mischmodus hinzu:

• Mischmodus: Bildschirm

Bisher sind die vier Hauptzutaten für diesen Textmaskeneffekt wie folgt:

1. Spaltenhintergrund
2. Weißer Texthintergrund
3. Schwarzer Text
4. Bildschirmüberblendungsmodus im Textmodul

Der Bildschirm-Mischmodus multipliziert die Ebenen und erzeugt eine hellere Version der Mischung. Mit dem Bildschirmmischmodus wird der schwarze Text vollständig transparent und zeigt, was sich dahinter verbirgt, in diesem Fall eine Hintergrundfarbe.

Hintergrundbild hinzufügen

Um das Hintergrundbild zur Textmaske hinzuzufügen, erstellen Sie ein neues Bildmodul und laden Sie ein Bild hoch, das ungefähr 1700 x 2500 Pixel groß ist. Die Größe des Bildes ist wichtig, damit das Bild die Höhe und Breite der Spalte abdeckt.

Bildgestaltung

Aktualisieren Sie dann die folgenden Designeinstellungen:

• Volle Breite erzwingen: JA
• Mischmodus: Bildschirm

Dieser Mischmodus ist für den Textmaskeneffekt nicht erforderlich, aber er mischt das Bild mit der Hintergrundfarbe, damit es besser zum Design passt.

Bildposition

Als nächstes geben Sie dem Bild eine absolute Position und aktualisieren den Z-Index, sodass er hinter dem Textmodul sitzt.

• Position: Absolut
• Z-Index: -1

Bildlaufeffekte

Sobald das Bilddesign fertig ist, gehen Sie zur Registerkarte „Erweitert“ und aktualisieren Sie die Optionen für den Bildlaufeffekt wie folgt:

Auf der Registerkarte Vertikale Bewegung

• Startversatz: -1 (bei 0%)
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: 1 (bei 100%)

Auf der Registerkarte Horizontale Bewegung

• Startversatz: -0,5 (bei 0%)
• Mittlerer Offset: 0 (bei 50%)
• Endversatz: 0,5 (bei 100%)

Auf der Registerkarte Nach oben und unten skalieren,

• Startskala: 110% (bei 0%)
• Mittlere Skala: 125% (bei 50%)
• Endskala: 140 % (bei 100 %)

Ergebnis

Sie können dem Abschnitt einen oberen und unteren Rand hinzufügen, damit Sie das bisherige Ergebnis einchecken können.

Erstellen des Mock-Texts

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

Aktualisieren Sie den Hauptteilinhalt mit den folgenden Elementen:

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Aktualisieren Sie dann die Anzeige mit den Textdesign-Einstellungen wie folgt:

• Textfarbe: Hell
• Überschrift 2 Schriftart: Rubik
• Überschrift 2 Textgröße: 4vw
• Polsterung (Desktop): 16vw oben, 5vw links, 5vw rechts
• Polsterung (Tablet): 16vw oben, 16vw unten, 5vw links, 5vw rechts

Ergebnis

Optionale Optimierungen

Schwarzer Hintergrund / weißer Text

Wenn Sie einen schwarzen Hintergrund für die Textmaske verwenden möchten, müssen Sie nur die drei wichtigsten Optionen aktualisieren, aus denen der Textmaskierungseffekt besteht.

Öffnen Sie die Textmoduleinstellungen und ändern Sie Folgendes:

• Hintergrundfarbe: #000000 (schwarz)
• Text Textfarbe: #ffffff (weiß)
• Mischmodus: Multiplizieren

Und hier ist das Ergebnis…

Rotierendes PNG-Bild

Und Sie können das animierte Bild in eines mit transparentem Hintergrund (ein PNG) ändern, um einen weiteren coolen Effekt zu erzielen. Hier ist ein Beispiel für ein PNG-Bild, das ich mit einem hinzugefügten rotierenden Scroll-Effekt verwendet habe.

Endgültige Ergebnisse

Hier ist noch ein Blick auf alle Designs.

Abschließende Gedanken

Hoffentlich geben diese Textmaskendesigns mit Hintergrundanimation beim Scrollen den kreativen Vorteil, den Ihre Website benötigt hat. Sobald Sie die Grundzutaten zum Erstellen des Textmaskierungseffekts kennen, werden Sie kein Problem damit haben, unzählige Versionen dieses Designs zu erstellen, die Ihren Anforderungen entsprechen.

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

Danke schön!