Ein Newsticker – auch Nachrichtenticker oder Lauftext genannt – ist eine effektive Möglichkeit, aktuelle Inhalte, News oder Hinweise prominent auf Deiner Homepage darzustellen. Besonders auf Startseiten sorgt ein Newsticker für Aufmerksamkeit, Aktualität und eine höhere Verweildauer Deiner Besucher.
Ein Newsticker kann unterschiedlich umgesetzt werden:
- als klassisches Laufband
- als Banner oder Infobox
- als Liste mit automatisch aktualisierten Nachrichten
- horizontal oder vertikal scrollend
Gerade in Homepagebaukästen, in WordPress oder bei statischen HTML-Seiten lässt sich ein Newsticker einfach integrieren.
Nachfolgend erhältst Du ein sauberes, einfaches und praxistaugliches Beispiel für einen JavaScript-Lauftext (Newsticker), das ohne externe Bibliotheken auskommt und per Copy & Paste direkt in eine WordPress-Seite (Block „Individuelles HTML“) eingefügt werden kann.
Die Lösung besteht aus:
- Quellcode (HTML + CSS + JavaScript)
- Lauffähigem Beispiel (identisch – sofort nutzbar)
1. JavaScript-Lauftext – vollständiger Code (Copy & Paste)
👉 Einfach komplett kopieren und in WordPress einfügen
<!-- Newsticker START -->
<style>
.newsticker-wrapper {
width: 100%;
overflow: hidden;
background-color: #111;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 10px 0;
box-sizing: border-box;
}
.newsticker {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: newsticker-scroll 25s linear infinite;
}
.newsticker span {
margin-right: 40px;
}
.newsticker a {
color: #ffd200;
text-decoration: none;
}
.newsticker a:hover {
text-decoration: underline;
}
@keyframes newsticker-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="newsticker-wrapper">
<div class="newsticker" id="newsticker">
<span>📰 <strong>News:</strong></span>
<span>Neue Webseite online – <a href="#">jetzt ansehen</a></span>
<span>Winteraktion: 20 % Rabatt auf alle Leistungen</span>
<span>WordPress-Tipp: Schneller mit Caching & SEO</span>
<span>Jetzt Newsletter abonnieren</span>
</div>
</div>
<script>
/* Optional: Pause beim Hover */
const ticker = document.getElementById("newsticker");
ticker.addEventListener("mouseenter", () => {
ticker.style.animationPlayState = "paused";
});
ticker.addEventListener("mouseleave", () => {
ticker.style.animationPlayState = "running";
});
</script>
<!-- Newsticker END -->
2. Lauffähiges Beispiel (Erklärung)
Was macht dieser Newsticker?
- Läuft horizontal von rechts nach links
- Ist voll responsiv
- Funktioniert ohne jQuery
- Kann Links enthalten
- Stoppt optional beim Mouse-Hover
- Benötigt keine Plugins
So sieht der Lauftext aus:
3. Einbau in WordPress (wichtig)
- Seite oder Beitrag bearbeiten
- Block „Individuelles HTML“ hinzufügen
- Kompletten Code einfügen
- Speichern / Aktualisieren
✔ Funktioniert mit Gutenberg
✔ Funktioniert auch im Classic Editor
✔ Kein Theme-Eingriff nötig
4. Anpassungen (häufig gewünscht)
Geschwindigkeit ändern
animation: newsticker-scroll 15s linear infinite;
→ kleiner Wert = schneller
Hintergrundfarbe ändern
background-color: #004aad;
Schriftgröße anpassen
font-size: 18px;
Inhalte dynamisch per JavaScript ändern
<script>
document.getElementById("newsticker").innerHTML +=
'<span>🔥 Neu: Kostenloses Beratungsgespräch</span>';
</script>
5. SEO-Hinweis (wichtig)
- Verwende echte Textinhalte (kein Canvas, kein Bild)
- Setze relevante Keywords in die Texte
- Verlinke sinnvoll intern
- Vermeide automatisch rotierende Inhalte mit zu kurzer Verweildauer
Fazit
Dieser JavaScript-Lauftext ist:
- leichtgewichtig
- WordPress-kompatibel
- SEO-freundlich
- wartungsarm
Vorteile eines Newstickers auf Deiner Website
- Erhöht die Aktualität Deiner Inhalte
- Verbessert die User Experience (UX)
- Steigert die Verweildauer
- Ideal für SEO, da regelmäßig neue Inhalte eingebunden werden
- Perfekt für News, Events, Angebote oder Hinweise
Newsticker-Generatoren & fertige Lösungen
Newsticker mit SMS- oder E-Mail-Update
Wenn Du Deinen Newsticker besonders flexibel aktualisieren möchtest:
- https://webdesign.weisshart.de/sms2web.php
→ Kostenloser Newsticker, der per SMS oder E-Mail aktualisiert werden kann
Fertige Newsticker zum Einbinden
Diese Anbieter stellen vorgefertigte News-Ticker zur Verfügung:
- https://rp-online.de/app/feed/jsnews.php
→ RP Online Newsticker zur Einbindung per JavaScript - https://www.weltflimmern.de/info.htm
→ Newsticker aus verschiedenen Themenbereichen - https://winfuture.de/ticker.html
→ IT-News-Ticker mit JavaScript-Integration
Eigenen Newsticker mit JavaScript oder jQuery erstellen
Wenn Du Deinen Newsticker individuell gestalten möchtest, ist jQuery eine gute Wahl:
- https://www.jqueryscript.net/slider/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box.html
→ Responsiver jQuery-Newsticker, ideal für moderne und mobile Webseiten
Newsticker für WordPress
Für WordPress stehen zahlreiche Plugins zur Verfügung, mit denen Du ohne Programmierung einen News-Ticker integrieren kannst:
- https://de.wordpress.org/plugins/tags/news-ticker/
→ Übersicht über aktuelle News-Ticker-Plugins für WordPress
Fazit
Ein Newsticker ist ein einfaches, aber wirkungsvolles Element, um Deine Homepage lebendig, aktuell und professionell wirken zu lassen. Egal ob per Generator, Plugin oder eigenem JavaScript – für nahezu jedes CMS und jede Webseite gibt es die passende Lösung.
Wenn Du regelmäßig Inhalte veröffentlichst, lohnt sich der Einsatz eines Newstickers in jedem Fall – sowohl für Deine Besucher als auch für Suchmaschinen.