Textgroßbuchstaben bieten Ihnen ein scrollendes Textfeld Website das die Leser mit hilfreichen Auszügen fesselt Inhalt. Sie werden auch Ticker (oder Nachrichtenticker) genannt und werden häufig verwendet, um einen stetigen Strom von Nachrichtenaktualisierungen oben oder unten auf der Seite anzuzeigen. . Normalerweise wird eine Scroll-Animation mit einer einzelnen Zeile erstellt Inhalt in einer Schleife, so dass die Informationen wiederholt angezeigt werden. Leider ist das <marquee>Da das HTML-Tag veraltet ist, verlassen wir uns heutzutage auf CSS und JavaScript, um Markisen zu erstellen. Mit Divi können Sie jedoch ein einfaches Auswahlrechteck erstellen, ohne sich um den benutzerdefinierten Code kümmern zu müssen.

In diesem Tutorial erklären wir, wie einfach es ist, mit Divi einen einfachen Auswahltext zu erstellen. Wir werden sogar sehen, wie Sie die Bildlaufanimation beim Schweben anhalten und wie Sie großen Bildlauftext als einzigartiges Gestaltungselement für Ihre Überschriften hinzufügen.

Lassen Sie uns beginnen.

Übersicht

Was Sie brauchen, um loszulegen

Für den Einstieg benötigen Sie Folgendes:

1. Le Divi-Thema installiert und aktiv
2. Eine neue Seite, die von Grund auf neu erstellt wurde (visueller Konstruktor)

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

Beginn der Konzeption

In diesem ersten Beispiel erstellen wir ein einfaches Textrechteck für eine Textzeile. Zu diesem Zweck geben wir einer Zeile eine maximale Breite, wobei der Überlauf ausgeblendet ist. Als Nächstes fügen wir einem Textmodul, das die Textzeile enthält, eine Folienanimationsschleife hinzu, sodass diese wie ein Rechteck wiederholt in die Zeile verschoben wird.

Hier ist, wie es geht.

Beginnen Sie mit der Erstellung eines regulären Abschnitts mit einer Spaltenzeile.

Aktualisieren Sie dann vor dem Hinzufügen eines Moduls die Zeile mit einer festen Breite, einem Schattenfeld und einem Radius wie folgt:

• Maximale Breite: 200px
• Polsterung: 10px oben, 10px unten
• Runde Ecken: 10px
• Box Shadow: siehe Screenshot
• Horizontaler Überlauf: versteckt
• Vertikaler Überlauf: versteckt

Fügen Sie den Textbaustein hinzu

Wenn die Zeile vollständig ist, fügen Sie der Zeile einen neuen Textbaustein hinzu.

Aktualisieren Sie dann die Inhalt des Körpers mit einer einzigen Textzeile. Stellen Sie vorerst sicher, dass die Textzeile nicht in eine andere Zeile aufgeteilt wird.

• Body: "Dies ist ein Satz"

Textmodul-Design

Aktualisieren Sie die Designparameter des Textbausteins wie folgt:

• Rand: -100% links, 100% rechts

Dadurch wird das Textmodul außerhalb der linken Zeile positioniert. Da die verborgene Sichtbarkeit der Linie ausgeblendet ist, wird das Modul ausgeblendet, bis wir eine Animation hinzufügen, um es sichtbar zu machen.

• Animationsstil: Folie
• Animationsrichtung: Richtig
• Animationsdauer: 5000ms
• Animationsintensität: 100%
• Animation Startopazität: 100%
• Animation der Geschwindigkeitskurve: linear
• Animation wiederholen: Loop

Ergebnis

Lassen Sie uns jetzt das Ergebnis sehen.

Erstellen längerer Textzeilen

Im obigen einfachen Auswahltextdesign haben wir die Breite der Textzeile auf die gleiche Breite wie die Linie begrenzt. Wenn wir jedoch eine längere Textzeile mit derselben Breite erstellen möchten, müssen wir die Einstellungen etwas anpassen.

Ersetzen Sie zunächst im Textmodul den Textkörper durch Folgendes:

Dies ist eine Phase mit einem Link

Fügen Sie mehr Breite und Rand hinzu, um der längsten Textzeile zu entsprechen

Wie Sie vielleicht bemerken, ist der Text in drei statt in eine Zeile unterteilt.

Daher müssen wir den Rand und die Intensität der Animation anpassen.

• Breite: 207%
• Rand: -207% links, 207% rechts
• Animationsintensität: 75%

Der Trick dabei ist, die Breite zu erhöhen und die Randwerte so zu aktualisieren, dass nur noch genügend Platz für eine einzelne Textzeile vorhanden ist. Passen Sie dann die Intensität der Animation so an, dass zwischen den Loop-Animationen keine großen Unterbrechungen auftreten.

Ergebnis

Hier ist das Endergebnis.

Unterbrechen Sie die Auswahl der Textanimation beim Hover

Da diese Auswahlrechteck einen Link enthält, ist es für Benutzer schwierig, während des Verschiebens auf den Link zu klicken. Wir können dem Textmodul jedoch ein kleines CSS-Snippet hinzufügen, das die Animation beim Hover anhält.

Fügen Sie ein CSS-Snippet hinzu, um die Animation beim Hover anzuhalten

Öffnen Sie zum Hinzufügen des CSS-Snippets die Einstellungen des Textmoduls und fügen Sie dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu unter der Registerkarte Hover :

Animationswiedergabestatus: angehalten;

Endergebnis

Überprüfen Sie nun das Endergebnis. Beachten Sie, dass die Textanimation angehalten wird, wenn sich der Cursor über dem Text befindet und der Benutzer auf den Link klicken kann.

Das ist alles für dieses Tutorial. Ich hoffe, es hat Ihnen gezeigt, wie Sie einen Bildlauftext auf Divi hinzufügen.