La cabecera de una tienda suele mostrar una sola línea de texto promocional (un umbral de envío gratis, una rebaja, un aviso de envío) y casi siempre es estática, de modo que cada mensaje nuevo obliga a editar código o sustituir un widget de texto entero en lugar de simplemente añadir una línea.
Por qué un widget de texto no bastaba
El widget de texto estándar de Elementor puede mostrar un mensaje, una vez, en un espacio fijo. Mostrar varios mensajes rotativos obligaba a crear un carrusel en JavaScript desde cero dentro de una página o, mejor aún, a empaquetar todo como un auténtico widget reutilizable de Elementor, que el propietario del sitio pudiera usar en cualquier parte y configurar por completo desde la propia interfaz de Elementor.
El widget
Creamos Firefly Marquee Bar como un widget nativo de Elementor con sus propias pestañas de Contenido y Estilo, registrado igual que cualquiera de los widgets integrados de Elementor:
- Una lista repetible de mensajes, cada uno con enlace opcional a una URL.
- Dirección y velocidad de desplazamiento configurables, además de la opción de pausar al pasar el ratón.
- Controles completos de color, tamaño de letra, espaciado entre letras y grosor en la pestaña Estilo: no hace falta saber CSS para cambiar su aspecto.
La técnica del bucle continuo
El desplazamiento es una animación CSS pura, no JavaScript: la lista completa de mensajes se muestra dos veces seguidas dentro de un contenedor flex y toda la pista se anima con translateX de 0 % a exactamente -50 %. Como la segunda copia es idéntica a la primera, el momento en que la animación vuelve a 0 % es indistinguible de la mitad del bucle, lo que produce un desplazamiento infinito y continuo sea cual sea la cantidad de texto, sin lógica de tiempos en JavaScript que pueda fallar.
Conclusiones clave
- Cuando un cliente va a necesitar repetir un patrón de personalización, crearlo como un widget real y reutilizable es mejor que un apaño puntual en una página, aunque el uso inmediato sea una sola cabecera.
- La técnica de duplicar el contenido y desplazar un 50 % produce un bucle de marquesina CSS continuo sin nada de JavaScript y sin errores de sincronización en el límite del bucle.
- Ofrecer controles de estilo (color, velocidad, espaciado) en la propia pestaña Estilo del constructor es lo que convierte un widget en algo «editable por el cliente» y no solo «hecho para el cliente».
Lecturas relacionadas: nuestro trabajo de diseño UI y UX, nuestro servicio de desarrollo WordPress.
¿Se encuentra con una limitación parecida en su panel de WooCommerce o WordPress? Hablemos: en ArtinTech Solution creamos exactamente este tipo de herramientas a medida para tiendas.