News-ticker

Ein Newsticker hält eine fleißige Homepage davon ab, sich in eine Wand aus Ansagen zu verwandeln, statt jedes Update zu stapeln, laufen die neuesten Titel über eine einzige Leiste Die News-ticker Widget in Master-Addons für Elementor Erstellen Sie diese Leiste für Sie: drei Inhaltsquellen, horizontales oder vertikales Scrollen und Styling-Kontrolle über das Etikett, den Inhalt, Miniaturansichten und Pfeile.

So richten Sie ein Elementor-News-Ticker„, vom Widget-Panel bis zur Live-Seite.

Was das News Ticker Widget macht #

Das Widget rendert eine kompakte Ansageleiste, Links ein farbiges Etikett, in der Mitte der rotierende Inhalt, rechts optionale Pfeile, Sie können den Ticker manuell füllen, aus einem RSS-Feed ziehen oder WordPress-Beiträge direkt abfragen, er kann wie ein Klassiker horizontal scrollen Eilmeldungsticker, oder senkrecht gehen, wenn das dem Layout entspricht.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Wenn Sie es noch nicht installiert haben, folgen Sie der Installationsführung.
• Das News Ticker-Widget ist im Optionsfeld Master Addons aktiviert.
• Optional: eine RSS-Feed-URL oder einige veröffentlichte Beiträge, wenn Sie diese als Quelle verwenden möchten.

Fügen Sie das Widget zu Ihrer Seite hinzu #

Öffnen Sie die Elementoreditor und durchsuchen Sie das Widgets-Panel nach “News Ticker” Ziehen Sie die Master-Addons News-ticker Widget in den Abschnitt, in dem Sie die Leiste haben möchten. Es wird mit einem roten Etikett „BREAKING NEWS“und einem einzigen rotierenden Element angezeigt, sodass Sie sofort sehen können, wie es funktioniert.

Wählen Sie die Tickerquelle #

Im Reiter Inhalt, dem Nachrichtenticket-Typ Dropdown entscheidet, woher die Artikel kommen:

• Inhalt: Fügen Sie jedes Tickerelement von Hand mit einem Titel, einem Link und einem optionalen Miniaturbild hinzu.
• RSS-Feed: Fügen Sie eine RSS-Feed-URL ein und das Widget zieht automatisch die neuesten Elemente.
• Postabfrage: Holen Sie sich Titel direkt aus Ihren WordPress-Beiträgen, Seiten oder benutzerdefinierten Beitragstypen.

Die Demo nutzt Post Query, so bleibt der Ticker aktuell, ohne dass jemand ihn berührt, wenn man Schlagzeilen von außen aggregiert, ist RSS Feed das schnellste Setup Und für Ankündigungen, die man Wort für Wort steuern möchte, wie bei einem zeitlich begrenzten Angebot, ist Content das, nach dem man greifen kann Ein Heads-up auf RSS: wenn der Feed ausfällt oder seine Struktur ändert, kann der Ticker leer hochkommen, also lohnt es sich, nach dem Zeigen auf eine neue Quelle zu prüfen.

Gestaltungsmöglichkeiten #

Die Designoptionen Abschnitt steuert, wie der Ticker aussieht und was jedes Element anzeigt:

• Label anzeigen? Schalten Sie die linke Beschriftung ein oder aus.
• Etikett: Der Labeltext Die Demo wechselt “BREAKING NEWS” zu “LATEST NEWS.”
• Nachrichtentyp: Wählen Sie aus jedem Artikel aus, was Sie ziehen möchten, wie zum Beispiel den Titel.
• Miniaturansicht anzeigen: Fügen Sie neben jedem Titel ein kleines Bild hinzu.
• Wörter hervorheben? Bestimmte Wörter im Tickertext hervorheben.
• Datum anzeigen: Setzen Sie das Veröffentlichungsdatum neben den Titel.
• Höhe: Die Balkenhöhe in Pixeln Die Demo nimmt diese von 50 auf 85.

Wenn Sie das Miniaturbild einschalten, fällt neben jedem Element ein kleines Bild. Dadurch wird die Leiste visueller, was auf medienlastigen Websites hilft, bei denen eine Klartextleiste tendenziell ignoriert wird.

Verwenden Sie den Höhenschieberegler, um die Leiste zu vergrößern. Stoßen Sie ihn hoch, sobald Sie Miniaturansichten einschalten, da sich sonst Bild und Text im Ticker verkrampfen.

Animationseinstellungen #

Die Animation Abschnitt steuert, wie sich der Ticker bewegt:

• Scroll-typ: Horizontal Scroll oder Vertical Horizontal ist der Klassiker News-Ticker für Website Schauen; Vertikal stapelt Gegenstände und schiebt sie nach oben oder unten.
• Autoplay: Drehung bei Last beginnen.
• Autoplay-intervall: Zeit zwischen den Artikeln, 3000 Millisekunden aus dem Kasten.
• Pause bei Hover: Den Ticker einfrieren, während ein Besucher darüber schwebt.
• Animationsgeschwindigkeit: Wie lange jeder Übergang dauert, standardmäßig auch 3000 Millisekunden.

A Horizontaler Newsticker in Elementor Funktioniert am besten als Ansageleiste oben auf der Seite Wechseln Sie zu Vertical, wenn der Ticker in einer Seitenleiste oder einer schmalen Spalte lebt, wo einem horizontalen Bildlauf einfach der Platz ausgeht.

Navigationspfeile #

Die Navigation Abschnitt fügt auf der rechten Seite der Leiste vorherige und nächste Pfeile hinzu Schalten Sie um Navigation anzeigen? Ein - oder aus und stellen die Navigationsgröße In Pixeln. Die Demo hat die Größe von 14 bis 21, sodass die Pfeile leichter zu treffen sind, was auf Touchscreens wichtig ist, wo ein 14-px-Ziel fummelig ist.

Handsteuerung der Pfeile für den Besucher, praktisch, wenn der Ticker Links hält, zu denen jemand zurückscrollen möchte.

Das Etikett stylen #

In der Stil Tab, die Etikett Abschnitt Stile das linke Abzeichen:

• Textfarbe: Beschriftungstextfarbe.
• Hintergrund: Etikettenhintergrundfarbe.
• Farbgebung des Bandwinkels: Der kleine dreieckige Akzent, der das Label mit dem Inhaltsbereich verbindet.
• Grenztyp und Grenzradius: Umriss - und Eckrundung für das Etikett.
• Winkelmarge: Abstand um den Bandwinkel.
• Typografie: Schriftart, Größe, Gewicht und Zeilenhöhe für den Beschriftungstext.

Die Demo rundet die oberen linken und unteren linken Ecken in eine Pillenform ab, indem der linke Randradius auf 50 Pixel eingestellt wird.

Stil des Inhalts und Miniaturansicht #

Die Inhalt Abschnitt stilisiert die rotierenden Titel Sie erhalten Textfarbe, Hover-Farbe, Hintergrund, Randtyp und Typografie Die Miniaturansicht Der Abschnitt regelt die Bildbreite und -form mit quadratischen und abgerundeten Optionen.

Geben Sie der Hover-Farbe etwas Kontrast, damit Besucher erkennen können, dass jeder Titel anklickbar ist. Mit der Formoption kann die Miniaturansicht mit dem Bildstil übereinstimmen, den der Rest Ihrer Website bereits verwendet.

Gestalten Sie die Navigationspfeile #

Die Navigation Stil-Abschnitt hat Normal und Hover-Registerkarten Textfarbe, Hintergrundfarbe, Randtyp, Randradius, Polsterung, und Abstand für die Pfeiltasten festlegen Je nachdem, was Sie auswählen, fügen sich die Pfeile entweder in den Ticker ein oder fallen als offensichtliche Bedienelemente auf.

Das Ergebnis auf der Live-Seite #

Am vorderen Ende wird der Ticker als sauberer Balken angezeigt: Etikett, Miniaturbild, rotierender Titel und Pfeile. Er beginnt von selbst zu animieren und hält beim Bewegen inne, wenn Sie diese Option eingeschaltet gelassen haben.

Häufige Anwendungsfälle #

• Aktuelle Nachrichtenbars: Führen Sie dringende Updates oben auf einer Nachrichten- oder Zeitschriftenseite aus.
• Ankündigungsticker: Oberflächenverkäufe, Veranstaltungen oder Starts, ohne Heldenraum zu verschlingen.
• Aktuelle Beiträge: Verwenden Sie Post Query, um die neuesten Blogtitel auf jeder Seite anzuzeigen.
• RSS-Aggregatoren: Schlagzeilen von externen Quellen auf ein Community- oder Industriezentrum bringen.
• Seitenleistenticker: Wechseln Sie zu Vertical scroll und lassen Sie das Widget in eine schmale Spalte fallen.

Für ein umfassenderes Blog-Layout kombinieren Sie dies mit dem Blog-Element-Widget. Für datierte Ankündigungen, schauen Sie sich die Zeitleisten-widget.

Video-Tutorial #

Bevorzugen, um zu sehen? dieses Video läuft durch das News Ticker Widget vom ersten Drag bis zur fertigen Leiste auf der Live-Seite:

Häufig gestellte Fragen #

Einwickelnd #

Das News Ticker Widget ist eine schnelle Möglichkeit, einer Elementor-Seite Bewegung und frischen Inhalt hinzuzufügen Drei Inhaltsquellen, horizontales oder vertikales Scrollen und Styling für jeden Teil der Leiste, sodass es alles abdeckt, von aktuellen Nachrichten bis hin zu Ihren neuesten Blog-Schlagzeilen Durchsuchen Sie den gesamten Satz von Master Addons Widgets und Erweiterungen Um zu sehen, was sonst noch mit dem Plugin ausgeliefert wird, und überprüfen Sie die Preisseite Für Pro-Funktionen.