Dieses Tutorial kommt zusätzlich zu einem Tutorial, das wir vor ein paar Tagen erstellt haben. Wir haben Ihnen in der Tat gezeigt, wie Sie Lauftext in eine Spalte einfügen können Divi. Heute zeigen wir Ihnen, wie Sie dieselbe Technik anwenden, um einen „Superhelden“-Abschnitt hinzuzufügen (Ausdruck, der für dschreiben ein großer Bereich einer Webseite, der Aufmerksamkeit erregen und bestimmte Elemente hervorheben soll).
Lassen Sie uns beginnen.
Fügen Sie das vordefinierte Layout hinzu
Um das Layout zu Ihrer Seite hinzuzufügen, öffnen Sie das Einstellungsmenü unten im Builder Divi und klicken Sie auf das Plus-Symbol. Wählen Sie im Popup-Fenster Aus Bibliothek laden das Job Recruiter Layout Pack aus. Klicken Sie dann auf , um das Homepage-Layout zu verwenden.
Entfernen Sie zusätzlichen Inhalt mit dem Layout
Sobald die Präsentation auf die Seite geladen wurde, stellen Sie die Wireframe-Ansicht bereit und entfernen Sie alle Inhalt der Präsentation, mit Ausnahme der Kopfzeile in voller Breite und des Abschnitts direkt darunter.
Erstellen der Auswahltextanimation
Wie Sie sehen, wird das Wort "eingestellt" bereits im zweiten Abschnitt als großes Textgestaltungselement in einem Textmodul verwendet. Wir werden dieses Textmodul in ein responsives Textlautsprecher-Designelement verwandeln. Der Schlüssel, um das Textrechteck ansprechbar zu machen, besteht darin, sicherzustellen, dass die Linie und das Textmodul die gesamte Breite des Browserfensters abdecken. Wir können dies mit 100% Breite tun. Dann können wir die Längeneinheit vw für die Textgröße verwenden. Dadurch wird der Text gut an die Breite des Browsers angepasst. Danach wenden wir dieselben Prinzipien an, die wir zuvor verwendet haben, um unser einfaches Beispiel für einen Bildlauftext zu veranschaulichen.
Hier ist, wie es geht.
Aktualisieren Sie die Parameter der Linie
Wie bereits erwähnt, muss die Zeile 100% sein, damit das Design dieser reaktionsschnellen Textauswahl funktioniert. Dadurch kann unser Textmodul Längeneinheiten vw relativ zur Breite des Browsers verwenden. Da unser vordefiniertes Layout bereits eine Linie mit 100% Breite hat, müssen wir nichts tun.
Wir müssen jedoch die restlichen Einstellungen wie folgt anpassen.
- Margin: -24vw down
- Y-Achse der Transformationsverschiebung: -24vw
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
Der negative untere Rand dient zum Entfernen des negativen Leerzeichens, das jedes Mal verbleibt, wenn wir die Zeile mit dem Befehl transform translate verschieben. Und wir müssen den Zeilenüberlauf für unseren Auswahltexteffekt ausblenden.
Aktualisieren Sie das Textdesign des Textbausteins
Jetzt müssen Sie nur noch das Textmodul aktualisieren, um es in ein großes Textdesignelement zu konvertieren.
Öffnen Sie den Textbaustein und aktualisieren Sie Folgendes:
- Text Textfarbe: rgba (255,255,255,0.16)
- Text Textgröße: 36vw
- Rand: -100% links, 100% rechts
Die Textgröße verwendet eine Längeneinheit vw, sodass der Text gut zur Breite des Browsers passt.
Fügen Sie dem Textmodul eine Animation hinzu
- Animationsstil: Folie
- Animationsrichtung: links
- Animationsdauer: 10000ms
- Animationsintensität: 100%
- Animation der Geschwindigkeitskurve: linear
- Animation wiederholen: Loop
Endgültiges Design
Überprüfen Sie nun das endgültige Design.
Abschließende Gedanken
Textfelder können ein praktisches Werkzeug für das Webdesign sein. Sie sind nicht darauf beschränkt, nur als Ticker zu fungieren. Sie können Ihrem Webdesign auch ein interessantes Animationselement hinzufügen. Und das Beste daran ist Divi macht es einfach, allerlei schöne Dinge zu kreieren und zu gestalten. Ich hoffe, dieses Tutorial hilft Ihnen dabei, einfache Auswahltexte zu erstellen, wann immer Sie sie benötigen.
Ich hoffe, von Ihnen in den Kommentaren zu hören.
Ihrer Gesundheit zuliebe!
