Springe zum Hauptinhalt

So erstellen Sie einen Lauftext auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Text-Großbuchstaben bieten ein scrollendes Textfeld für Ihre Website, in dem die Leser nützliche Ausschnitte von Inhalten finden. Sie werden auch als Ticker (oder News-Ticker) bezeichnet und werden häufig verwendet, um einen stetigen Strom von News-Updates oben oder unten auf der Seite anzuzeigen. . Normalerweise wird die Bildlaufanimation mit einer einzelnen Inhaltszeile in einer Schleife ausgeführt, sodass die Informationen mehrmals angezeigt werden. Leider die <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

Divi Animationsvorschau

Was Sie brauchen, um loszulegen

Für den Einstieg benötigen Sie Folgendes:

  1. Divi Theme 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

Divi AnimationsvorschauIn 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Definieren Sie eine TeilzeileAktualisieren 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

Konfiguration im Divi-Linienstil

Fügen Sie den Textbaustein hinzu

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

Textmodul hinzufügen

Aktualisieren Sie dann den Textinhalt mit einer einzelnen 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.

Ändern Sie die Divi-Ausrichtung

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

Konfiguration des Divi-Textmoduls

Ergebnis

Lassen Sie uns jetzt das Ergebnis sehen.

Animationsergebnis divi 1Erstellen 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

Satz mit Divi 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.

Divi Phrase WordPress

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.

Animationsergebnis divi 2

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 :

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Animationswiedergabestatus: angehalten;

Anpassung der Divi-Hover-Animation

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.

Animationsergebnis Divi Animation unterbrochen

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

Dieser Artikel enthält 1 Kommentar

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren