Die Kopfzeile eines Shops zeigt oft eine einzelne Zeile Werbetext – eine Versandkostengrenze, einen Sale, einen Versandhinweis – und die ist fast immer statisch. Jede neue Botschaft verlangt also, dass jemand Code bearbeitet oder ein ganzes Text-Widget ersetzt, statt einfach eine Zeile hinzuzufügen.
Warum ein Text-Widget nicht reichte
Das Standard-Text-Widget von Elementor kann eine Nachricht einmal an einer festen Stelle zeigen. Mehrere wechselnde Nachrichten hätten bedeutet, einen JavaScript-Slider von Grund auf in einer Seite zu bauen – oder besser, das Ganze als echtes, wiederverwendbares Elementor-Widget zu verpacken, das der Betreiber überall einsetzen und vollständig über die Elementor-Oberfläche konfigurieren kann.
Das Widget
Wir haben die Firefly Marquee Bar als natives Elementor-Widget mit eigenen Reitern für Inhalt und Stil gebaut und genauso registriert wie die integrierten Elementor-Widgets:
- Eine wiederholbare Liste von Nachrichten, jede optional mit einer URL verlinkbar.
- Einstellbare Laufrichtung und Geschwindigkeit sowie ein Schalter für Pause beim Überfahren.
- Vollständige Einstellungen für Farbe, Schriftgröße, Zeichenabstand und Schriftstärke im Stil-Reiter – kein CSS-Wissen nötig, um das Aussehen zu ändern.
Die Technik der nahtlosen Schleife
Die Bewegung ist eine reine CSS-Animation, kein JavaScript: Die komplette Nachrichtenliste wird zweimal hintereinander in einem Flex-Container gerendert, und die ganze Spur wird per translateX von 0 % auf exakt -50 % animiert. Da die zweite Kopie identisch mit der ersten ist, ist der Moment, in dem die Animation auf 0 % zurückspringt, optisch nicht von der Mitte der Schleife zu unterscheiden – das ergibt eine endlose, nahtlose Laufschrift, egal wie viel Text in der Liste steht, ohne JavaScript-Timing, das schiefgehen könnte.
Die wichtigsten Erkenntnisse
- Wenn ein Kunde ein Anpassungsmuster wiederholt brauchen wird, ist ein echtes, wiederverwendbares Widget besser als ein einmaliger Hack auf Seitenebene – selbst wenn der aktuelle Anwendungsfall nur eine Kopfzeile ist.
- Die Technik aus doppeltem Inhalt plus 50-%-Verschiebung erzeugt eine nahtlose CSS-Laufschrift ganz ohne JavaScript und ohne Timing-Fehler an der Schleifengrenze.
- Stiloptionen (Farbe, Tempo, Abstände) im Stil-Reiter des Builders bereitzustellen, macht ein Widget erst „vom Kunden bearbeitbar“ statt nur „für den Kunden gebaut“.
Weiterlesen: unsere UI- und UX-Designarbeit, unsere WordPress-Entwicklung.
Stoßen Sie in Ihrem eigenen WooCommerce- oder WordPress-Adminbereich an eine ähnliche Grenze? Sprechen wir darüber – ArtinTech Solution baut genau diese Art von individuellen Shop-Tools.