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:
- Le Divi-Thema installiert und aktiv
- 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.
Ich glaube, dass sich die Version seit diesem Tutorial zu stark verändert hat und dass man nicht mehr stolz auf Ihren Artikel sein kann
Ja glaube ich auch. Wir werden es aktualisieren.
Guten Tag,
Danke für dieses Tutorial, genau das brauche ich!
Allerdings habe ich an der Leitung und dem Modul genau die gleiche Konfiguration vorgenommen, aber leider funktioniert es nicht oder vielleicht mehr.
Ist dies auch der Fall?
Vielen Dank im Voraus für Ihre Rückkehr.
Alexis v
Vielen Dank für dieses Tutorial, super klar und präzise. Gut gemacht !