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.

Modellvorlage divi

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.

Design Modification Section Divi

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.

Konfiguration der Breite des Divi-Linienmoduls

Wir müssen jedoch die restlichen Einstellungen wie folgt anpassen.

  • Margin: -24vw down
  • Y-Achse der Transformationsverschiebung: -24vw
  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt

Konfiguration der Divi-Leitungseinstellungen

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.

Konfiguration des Divi-Textmoduls

Fügen Sie dem Textmodul eine Animation hinzu

  • Animationsstil: Folie
  • Animationsrichtung: links
  • Animationsdauer: 10000ms
  • Animationsintensität: 100%
  • Animation der Geschwindigkeitskurve: linear
  • Animation wiederholen: Loop

Konfiguration der Divi-TextanimationEndgültiges Design

Überprüfen Sie nun das endgültige Design.

Angestellte AnimationsabteilungAbschließ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!