L’en-tête d’une boutique affiche souvent une seule ligne de texte promotionnel (un seuil de livraison gratuite, des soldes, une information de livraison) et elle est presque toujours statique : chaque nouveau message oblige à modifier du code ou à remplacer un widget texte entier au lieu d’ajouter simplement une ligne.
Pourquoi un widget texte ne suffisait pas
Le widget texte standard d’Elementor affiche un message, une seule fois, dans un espace fixe. Afficher plusieurs messages en rotation obligeait soit à créer un carrousel JavaScript de zéro dans une page, soit, mieux, à empaqueter le tout comme un véritable widget Elementor réutilisable, que le propriétaire du site peut utiliser partout et configurer entièrement depuis l’interface d’Elementor.
Le widget
Nous avons créé la Firefly Marquee Bar comme un widget Elementor natif, avec ses propres onglets Contenu et Style, enregistré de la même manière que les widgets intégrés d’Elementor :
- Une liste répétable de messages, chacun pouvant renvoyer vers une URL.
- Sens et vitesse de défilement réglables, ainsi qu’une option de pause au survol.
- Des réglages complets de couleur, taille de police, espacement des lettres et graisse dans l’onglet Style : aucune connaissance en CSS nécessaire pour en changer l’apparence.
La technique de la boucle continue
Le défilement est une animation CSS pure, sans JavaScript : la liste complète des messages est affichée deux fois de suite dans un conteneur flex, et toute la piste est animée via translateX de 0 % à exactement -50 %. Comme la seconde copie est identique à la première, le moment où l’animation revient à 0 % est visuellement indiscernable du milieu de la boucle : on obtient un défilement infini et continu quelle que soit la quantité de texte, sans logique de synchronisation JavaScript susceptible de dérailler.
Points clés
- Quand un client aura besoin de répéter un modèle de personnalisation, en faire un vrai widget réutilisable vaut mieux qu’une astuce ponctuelle au niveau de la page, même si l’usage immédiat se limite à un seul en-tête.
- La technique du contenu dupliqué avec translation de 50 % produit une boucle de bandeau CSS continue sans JavaScript et sans bug de synchronisation à la jonction de la boucle.
- Exposer les réglages de style (couleur, vitesse, espacement) dans l’onglet Style du constructeur, c’est ce qui rend un widget réellement « modifiable par le client » et pas seulement « construit pour le client ».
À lire aussi : notre travail de design UI et UX, notre service de développement WordPress.
Vous rencontrez une limite similaire dans votre administration WooCommerce ou WordPress ? Parlons-en : ArtinTech Solution conçoit exactement ce type d’outils sur mesure pour les boutiques.