En butiks header har ofte en enkelt linje med kampagnetekst (en grænse for fri fragt, et udsalg, en fragtbesked), og den er næsten altid statisk, så hver ny besked kræver, at nogen redigerer kode eller udskifter en hel tekstwidget i stedet for blot at tilføje en linje.
Hvorfor en tekstwidget ikke var nok
Elementors standard tekstwidget kan vise én besked, én gang, på en fast plads. At vise flere skiftende beskeder betod enten at bygge en JavaScript-slider fra bunden på en side eller, bedre, at pakke det hele som en rigtig, genanvendelig Elementor-widget, som hjemmesideejeren derefter kunne bruge overalt, konfigureret helt fra Elementors egen brugerflade.
Widgetten
Vi byggede Firefly Marquee Bar som en indbygget Elementor-widget med egne kontroller under fanerne Indhold og Stil, registreret på samme måde som Elementors egne widgets:
- En liste med beskeder, der kan gentages, hver med et valgfrit link til en URL.
- Indstilleligt rulleretning og hastighed plus en mulighed for at sætte på pause ved hover.
- Fuld kontrol over farve, skriftstørrelse, bogstavafstand og skrifttykkelse under fanen Stil, så der kræves ingen CSS-viden for at ændre udseendet.
Teknikken bag den sømløse løkke
Selve rulningen er en ren CSS-animation, ikke JavaScript: hele beskedlisten vises to gange efter hinanden i en flex-container, og hele sporet animeres med translateX fra 0 % til præcis -50 %. Fordi den anden kopi er identisk med den første, er øjeblikket, hvor animationen nulstilles til 0 %, visuelt umuligt at skelne fra midten af løkken. Det giver en uendelig, sømløs rulning uanset tekstmængden, uden JavaScript-timing, der kan gå galt.
Det vigtigste
- Når en kunde får brug for at gentage en tilpasning, slår en rigtig, genanvendelig widget et engangshack på sideniveau, selv hvis det umiddelbare behov er en enkelt header.
- Teknikken med dobbelt indhold plus en forskydning på 50 % giver en sømløs CSS-løkke uden JavaScript og uden timingfejl ved løkkens grænse.
- At give adgang til stilkontroller (farve, hastighed, afstand) via byggerens egen Stil-fane er det, der reelt gør en widget “redigerbar for kunden” frem for bare “bygget til kunden”.
Læs også: vores arbejde med UI- og UX-design, vores ydelse inden for WordPress-udvikling.
Støder du på en lignende begrænsning i din egen WooCommerce- eller WordPress-admin? Lad os tale — ArtinTech Solution bygger netop den slags skræddersyede værktøjer til webshops.