Wenn du in Elementor einen Lauftext erstellen möchtest, kannst du einen sogenannten Marquee Text verwenden. Dabei bewegt sich der Text automatisch über die Seite und eignet sich zum Beispiel für Hinweise, Angebote oder News-Banner. In diesem Tutorial zeige ich dir, wie du einen Lauftext in Elementor erstellst und welche Möglichkeiten es dafür in WordPress gibt.
Elementor Lauftext erstellen (ohne Plugin)
Du kannst in Elementor einen Lauftext erstellen, ohne ein zusätzliches Plugin zu installieren. Dafür nutzt du einfach das HTML-Widget und eine kleine CSS-Animation. Diese Methode ist leicht umzusetzen und funktioniert auf jeder Elementor-Seite.
1. HTML-Widget einfügen
Öffne die Seite im Elementor Editor und ziehe das HTML-Widget an die Stelle, an der dein Lauftext erscheinen soll.
2. HTML-Struktur für den Lauftext erstellen
Jetzt fügst du folgenden HTML-Code in das Widget ein. Dieser bildet die Grundlage für den Lauftext.
<div class="lauftext-container">
<div class="lauftext">
Dein Lauftext hier – zum Beispiel Angebote, Hinweise oder News.
</div>
</div>
3. CSS-Animation hinzufügen
Damit sich der Text bewegt, brauchst du eine kleine CSS-Animation. Diese kannst du zum Beispiel im Custom CSS Bereich deiner Seite (nur mit Elementor Pro*) oder im Customizer hinzufügen.
Klicke dafür auf das HTML-Widget und gehe zu:
Erweitert → Custom CSS
Trage folgendes CSS bei individuelles CSS ein:
.lauftext-container {
overflow: hidden;
white-space: nowrap;
}.lauftext {
display: inline-block;
padding-left: 100%;
animation: lauftext 15s linear infinite;
}@keyframes lauftext {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
Der Text läuft damit kontinuierlich von rechts nach links über die Seite.
Marquee Alternative
Früher wurde für Lauftexte oft das HTML-Element <marquee> verwendet. Dieses gilt heute als veraltet und wird nicht mehr empfohlen.
Du kannst es dennoch derzeit noch wie folgt verwenden:
<marquee>Hier kommt dein Lauftext rein</marquee>
Die Lösung mit CSS-Animation ist moderner und funktioniert zuverlässig in allen modernen Browsern.
Marquee Text in Elementor mit Plugin erstellen
Wenn du keinen eigenen Code verwenden möchtest, kannst du einen Lauftext auch über ein Elementor Marquee Widget erstellen. Dafür gibt es verschiedene Erweiterungen, die zusätzliche Widgets für Elementor bereitstellen.
- ✅ Der Vorteil: Du kannst den Lauftext direkt im Editor konfigurieren, ohne HTML oder CSS schreiben zu müssen.
- ❌ Der Nachteil: Du blähst deine WordPress mit weiteren (nicht zwingend notwendigen) Plugins auf und ermöglichst so potenzielle Sicherheitslücken.
Option 1: Marquee Addons for Elementor
Ein einfaches Plugin ist Marquee Addons for Elementor.
Plugin-Seite
https://de.wordpress.org/plugins/marquee-addons-for-elementor/
Nach der Installation findest du im Elementor Editor mehrere Marquee Widgets, die du wie jede anderen Widgets auf die Seite ziehen kannst. Es gibt sowohl einige kostenlose, als auch einige Premium-Widgets für die eine separate Lizenz notwendig sind.
Dort kannst du dann zum Beispiel einstellen:
- Text oder Inhalte des Lauftexts
- Geschwindigkeit der Animation
- Laufrichtung
- Abstand zwischen Elementen
Option 2: Unlimited Elements Marquee Widget
Eine weitere Möglichkeit ist das Plugin Unlimited Elements for Elementor. Dieses Plugin bringt viele zusätzliche Widgets mit, darunter auch ein Logo Marquee Widget und ein Text Marquee Widget.
Plugin-Seite
https://unlimited-elements.com/logo-marquee-widget-for-elementor/
Damit kannst du zum Beispiel:
- Logos als Laufband anzeigen
- mehrere Inhalte horizontal scrollen lassen
- ein endloses Marquee erstellen
Das wird häufig für Bereiche wie Texte, Kundenlogos, Partner oder Testimonials genutzt.
💡 Expertentipp: Wenn du nur einen einfachen Lauftext brauchst, ist die CSS-Lösung ohne Plugin oft die bessere Wahl. Deine Website bleibt dadurch schlanker und lädt schneller. Plugins lohnen sich eher, wenn du komplexere Marquee-Elemente wie Logo-Slider oder mehrere Inhalte im Laufband erstellen möchtest.
Lauftext in WordPress ohne Elementor
Auch ohne Elementor kannst du in WordPress einen Lauftext erstellen. Dafür gibt es drei Möglichkeiten: einen HTML-Block mit CSS, das alte Marquee-Element oder ein WordPress Marquee Plugin.
Lauftext mit HTML-Block erstellen
Wenn du den Gutenberg Editor nutzt, kannst du einen Lauftext über einen HTML-Block einfügen.
Gehe im Editor auf:
Block hinzufügen → Benutzerdefiniertes HTML
Füge dort folgenden Code ein:
<div class="lauftext-container">
<div class="lauftext">
Dein Lauftext hier – zum Beispiel Hinweise oder Angebote.
</div>
</div>
CSS Animation für den Lauftext
Damit sich der Text bewegt, musst du noch eine kleine CSS-Animation hinzufügen. Diese kannst du im WordPress Customizer einfügen.
Gehe dazu zu:
Design → Customizer → Zusätzliches CSS
Füge anschließend folgenden Code ein:
.lauftext-container {
overflow: hidden;
white-space: nowrap;
}.lauftext {
display: inline-block;
padding-left: 100%;
animation: lauftext 15s linear infinite;
}@keyframes lauftext {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
Der Text läuft danach automatisch von rechts nach links über die Seite.
WordPress Marquee Plugin verwenden
Wenn du keine eigenen Codes einfügen möchtest, kannst du auch ein WordPress Marquee Plugin verwenden. Diese Plugins erstellen einen Lauftext automatisch über einen Block oder Shortcode.
Typische Funktionen solcher Plugins:
- Geschwindigkeit des Lauftexts einstellen
- Richtung der Animation ändern
- mehrere Inhalte anzeigen
Diese Lösung eignet sich besonders für Nutzer, die ohne HTML oder CSS arbeiten möchten.
Typische Anwendungen für Lauftexte
Ein Lauftext wird häufig genutzt, um wichtige Informationen hervorzuheben oder Inhalte dynamischer darzustellen. Durch die Bewegung fällt der Text stärker auf als ein normaler Absatz und wird von Besuchern schneller wahrgenommen.
Typische Einsatzbereiche sind:
- Angebotsbanner auf Landingpages
Ein Lauftext kann aktuelle Aktionen oder Angebote anzeigen, zum Beispiel Rabatte oder besondere Hinweise. Gerade auf Verkaufsseiten wird so ein wichtiger Hinweis schnell sichtbar. - Hinweis- oder Informationsbanner
Viele Websites nutzen Lauftexte für wichtige Hinweise wie Wartungsarbeiten, Veranstaltungen oder kurzfristige Änderungen. - Kundenlogos oder Partnerlogos
Statt statischer Logos kann ein Laufband mit Partner- oder Kundenlogos über die Seite laufen. Das wird häufig im Bereich Referenzen oder Kooperationen eingesetzt. - Breaking News oder Updates
Ein Lauftext eignet sich auch für aktuelle Meldungen oder Updates. Besonders auf Startseiten oder News-Seiten wird diese Technik gerne genutzt.
💡 Expertentipp: Setze Lauftexte sparsam ein. Wenn zu viele Elemente auf einer Seite animiert sind, wirkt die Seite schnell unruhig. Am besten funktioniert ein Lauftext in Header-Bannern, Angebotsleisten oder Referenzbereichen.
Typische Probleme bei Lauftexten
Beim Einsatz eines Lauftexts kann es vorkommen, dass die Animation nicht so funktioniert wie erwartet. Die folgenden Probleme treten am häufigsten auf.
Animation ruckelt
Wenn der Lauftext ruckelt oder nicht flüssig läuft, liegt das meist an einer zu komplexen Animation oder an mehreren gleichzeitig animierten Elementen.
Achte darauf, dass:
- die Animation linear läuft
- nicht zu viele Animationen gleichzeitig auf der Seite aktiv sind
- der Lauftext nicht zu viele Bilder oder Logos enthält
Gerade bei älteren Geräten oder schwächeren Smartphones kann eine aufwendige Animation sonst schnell ruckelig wirken.
Lauftext läuft zu schnell
Wenn der Text zu schnell über die Seite läuft, können Besucher ihn kaum lesen.
In diesem Fall solltest du die Animationsdauer erhöhen.
Beispiel im CSS:
animation: lauftext 15s linear infinite;
Je größer der Wert (z. B. 20s oder 30s), desto langsamer bewegt sich der Text.
Mobile Darstellung
Auf kleineren Bildschirmen kann ein Lauftext schnell unübersichtlich werden, besonders wenn der Text sehr lang ist.
Achte darauf, dass:
- der Text nicht zu lang ist
- ausreichend Abstand zum Rand vorhanden ist
- die Geschwindigkeit auch auf Mobilgeräten angenehm bleibt
💡 Expertentipp Teste deinen Lauftext immer auf Desktop und Smartphone. Eine Animation, die auf dem großen Bildschirm gut aussieht, kann auf kleinen Displays schnell zu hektisch wirken.
WordPress & Elementor Lauftext erstellen: Kurz Zusammengefasst
Einen Lauftext in Elementor kannst du auf verschiedene Arten erstellen. Am flexibelsten funktioniert es über ein HTML-Widget mit einer CSS-Animation, weil du dafür kein zusätzliches Plugin benötigst. Alternativ kannst du auch ein Elementor Marquee Widget über ein Plugin nutzen, wenn du den Lauftext direkt im Editor konfigurieren möchtest.
Lauftexte eignen sich besonders für Hinweisbanner, Angebote oder Logo-Laufbänder. Wichtig ist, die Animation nicht zu schnell einzustellen und sie sparsam einzusetzen, damit die Seite ruhig und gut lesbar bleibt.
