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 Erstellt diese Leiste für Sie Es ist ein Pro-Widget mit zwei Inhaltsquellen (eigene Beiträge oder ein RSS-Feed), drei Scroll-Typen und Styling für das Label, 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 Label, in der Mitte der rotierende Inhalt, rechts optionale Pfeile Items stammen von Ihren WordPress-Beiträgen (oder jedem anderen öffentlichen Post-Typ) oder von einem RSS-Feed, die Leiste kann wie ein Klassiker horizontal gleiten EilmeldungstickerVertikal rollen oder wie ein Festzelt ununterbrochen scrollen.
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.
- Eine Master Addons Pro-Lizenz, da News Ticker ein Pro-Widget ist und das Widget im Master Addons-Dashboard aktiviert ist.
- 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: Zieht Beiträge von der eigenen Seite Setzen Sie den Beitragstyp, Kategorien, Tags, Anzahl der Beiträge und Reihenfolge in der Briefabfrage Abschnitt.
- RSS-Feed: Fügen Sie eine RSS-Feed-URL ein und das Widget zieht automatisch die neuesten Elemente.
Die Demo verwendet Content, also nimmt der Ticker neue Beiträge auf, ohne dass jemand sie berührt Wenn Sie Schlagzeilen von außen eingeben, ist RSS Feed das schnellere Setup. Ein Heads-up auf RSS: Wenn der Feed ausfällt oder seine Struktur ändert, kann der Ticker leer werden, es lohnt sich also, ihn zu überprüfen, nachdem Sie ihn auf eine neue Quelle gelenkt haben.
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: Zeigen Sie den Titel oder den Auszug für jeden Artikel an.
- 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 Es erscheint nur, wenn News Type Titel ist.
- 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: Horizontale, vertikale oder horizontale Schriftrolle. Horizontale Folien einzeln, der Klassiker News-Ticker für Website Schauen Sie. Vertikal rollt Gegenstände nach oben und Horizontal Scroll bewegt sie ununterbrochen wie ein Festzelt.
- 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 den Inhaltstyp, 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-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 #
Kann ich einen Newsticker in Elementor ohne Codierung hinzufügen?
Ja. Ziehen Sie das Master Addons News Ticker Widget in Ihr Layout, wählen Sie eine Quelle aus und legen Sie das Design und die Animation aus dem Elementor-Panel fest Kein benutzerdefinierter Code beteiligt.
Welche Inhaltsquellen unterstützt das News Ticker Widget?
Zweitens: Content, der Beiträge, Produkte oder andere Beitragstypen von Ihrer eigenen Website abruft, und RSS Feed, der Elemente von einer externen Feed-URL anzeigt.
Kann der Ticker vertikal scrollen?
Ja. Im Bereich Animation Scroll Type auf Vertical setzen, Es passt zu Seitenleisten oder schmalen Spalten, wo einem horizontalen Balken der Platz ausgehen würde.
Wie zeige ich Post-Thumbnails im Ticker?
Schalten Sie das Miniaturbild im Abschnitt Entwurfsoptionen ein. Gehen Sie dann zur Registerkarte Stil, um die Miniaturansichtsbreite festzulegen und Platz oder Abgerundet auszuwählen.
Können Besucher den Ticker anhalten?
Ja. Im Bereich Animation Pause einschalten Mit dem Mauszeiger können Besucher auch durch Elemente mit den Navigationspfeilen gehen, wenn Navigation anzeigen eingeschaltet ist.
Einwickelnd #
Das News Ticker Widget ist eine schnelle Möglichkeit, einer Elementor-Seite Bewegung und frischen Inhalt hinzuzufügen Mit zwei Inhaltsquellen, drei Scroll-Typen und Styling für jeden Teil der Leiste deckt es alles ab, 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 um die News Ticker Widget Seite Für eine Demo News Ticker braucht Pro, also überprüfen Sie die Preisseite Planungen.
