Cómo crear un efecto marquee (texto o logos en movimiento) en Elementor
Aprende a crear un efecto marquee en Elementor paso a paso: cinta de texto o logos en movimiento infinito y sin cortes con CSS. Incluye código listo para copiar y una versión para Elementor Free.
El efecto marquee esa cinta de texto, logos o mensajes que se desplaza sin parar de un lado a otro es un recurso que aporta dinamismo a una web y llama la atención sin resultar agresivo. Se ve muchísimo en secciones de "marcas que confían en nosotros", tiras de anuncios, titulares destacados o barras promocionales.
La buena noticia es que no necesitas ningún plugin para conseguirlo: con Elementor y un poco de CSS lo tienes montado en cinco minutos. En este artículo te enseñamos a hacerlo paso a paso, con el código listo para copiar y pegar.
¿Qué es el efecto marquee?
"Marquee" es el nombre que recibe cualquier contenido que se desplaza de forma continua por la pantalla, normalmente en horizontal. Antiguamente existía una etiqueta HTML <marquee>, pero está obsoleta y no debes usarla. Hoy el efecto se consigue con CSS puro mediante una animación, que es más limpio, más ligero y mucho más flexible.
Hay dos variantes principales, y elegir la correcta según tu caso es la clave del resultado:
- Marquee infinito sin cortes: el contenido gira en bucle perfecto, sin saltos ni huecos. Es el ideal para tiras de logos o mensajes que se repiten.
- Ticker de una línea: un texto que entra por un lado y sale por el otro. Más sencillo, perfecto para una barra de aviso o titular puntual.
Vamos a ver las dos, empezando por la mejor.
Método recomendado: marquee infinito sin cortes
Este es el que da un acabado profesional. El truco que casi nadie explica: para que el bucle sea perfecto y sin saltos, tienes que duplicar el conjunto de elementos dentro de la cinta y animar el desplazamiento justo hasta la mitad (-50%). Así, cuando la animación "reinicia", la segunda copia está exactamente en la posición de la primera y el ojo no percibe ningún corte.
Paso 1: Monta la estructura en Elementor
- Crea un Contenedor exterior (será el marco visible). En sus ajustes activa el desbordamiento oculto: Avanzado → Diseño → Overflow → Hidden. Esto recorta lo que se sale de la pantalla.
- Dentro, crea un Contenedor interior en modo flex horizontal (será la "cinta" que se mueve).
- Añade tus elementos (textos, iconos o imágenes de logos) dentro del contenedor interior.
- Duplica ese conjunto de elementos para tener exactamente el doble (si tienes 6 logos, deben quedar 12: la misma secuencia repetida dos veces).
Paso 2: Asigna la clase CSS
Selecciona el contenedor interior (la cinta) y ve a:
Avanzado → Disposición → Clases CSS → escribe marquee
Paso 3: Pega el CSS
En Avanzado → CSS Personalizado (o mejor aún, en los ajustes globales del sitio para reutilizarlo en varias páginas), pega esto:
css
/* El marco recorta el contenido que se sale */
selector {
overflow: hidden;
width: 100%;
}
/* La cinta que se desplaza */
.marquee {
display: flex;
width: max-content;
list-style: none;
animation: scrolling 40s linear infinite;
}
/* Los elementos de dentro NO deben encogerse */
.marquee > * {
flex-shrink: 0;
}
/* La animación: desplaza hasta la mitad para un bucle perfecto */
@keyframes scrolling {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
Un par de notas útiles:
- Ajusta la velocidad cambiando los
40s: más segundos = más lento, menos = más rápido. - El
flex-shrink: 0va en los hijos (.marquee > *), no en la cinta. Si lo pones mal, los elementos se aplastan y el efecto se rompe. - Si usas
selectordentro del CSS personalizado de Elemento, este se refiere automáticamente al elemento donde lo pegas; si prefieres, sustitúyelo por tu propia clase (por ejemplo.marquee-container).
Paso 4 (opcional): pausar al pasar el ratón
Un detalle que se agradece en las tiras de logos: que se detengan cuando el usuario pasa por encima.
css
.marquee:hover {
animation-play-state: paused;
}
Alternativa sencilla: ticker de una sola línea
Si solo quieres un texto corrido que entre por la derecha y salga por la izquierda (típico de una barra de aviso), no necesitas duplicar nada. Sigue los mismos pasos de Elementor, pero usa este CSS:
css
.marquee-container {
width: 100%;
overflow: hidden;
}
.marquee {
white-space: nowrap;
overflow: hidden;
width: 100%;
animation: scrolling 12s linear infinite;
}
@keyframes scrolling {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee span {
display: inline-block;
padding-right: 30px;
}
La diferencia: esta versión hace un recorrido completo y vuelve a empezar, por lo que verás un breve momento en que la pantalla queda "vacía" antes de que reaparezca el texto. Para un aviso puntual es perfecto; para una cinta continua de logos, quédate con el método anterior.
¿Shortcode/HTML o método nativo? El mejor enfoque
Puedes montar todo esto de dos formas, y no dan el mismo resultado en cuanto a mantenimiento:
- Método nativo de Elementor (recomendado): el que acabamos de ver. Montas los elementos con los widgets normales, les pones la clase
marqueey el CSS aparte. Ventaja: editas los logos o textos visualmente cuando quieras y el código queda limpio y reutilizable. - Puro código en un widget HTML (plan B): metes todo el HTML y el
<style>dentro de un widget "HTML". Solo tiene sentido si usas Elementor Free, donde el CSS personalizado por elemento no está disponible. Es más rígido de mantener porque tienes que tocar código cada vez que cambias algo.
Nuestra recomendación: usa el método nativo siempre que tu versión de Elementor lo permita.
Buenas prácticas para no fastidiar el SEO ni la experiencia
Un efecto bonito nunca debe ir en contra del usuario. Ten en cuenta:
- No abuses de la velocidad. Un marquee demasiado rápido marea y dificulta la lectura. Si es texto informativo, que se pueda leer con calma.
- Cuida el rendimiento. Las animaciones con
transform: translateXson ligeras porque las gestiona la GPU. Aun así, no llenes la página de cintas: cada animación suma. Si te preocupa la carga, revisa nuestro artículo sobre cómo la velocidad de carga impacta en tu SEO. - Accesibilidad. El movimiento continuo puede molestar a personas sensibles. Es buena idea respetar la preferencia del sistema con
@media (prefers-reduced-motion: reduce)y pausar la animación para quien lo tenga activado. - No metas contenido importante para el SEO solo en el marquee si depende de scripts; el texto plano en HTML se indexa sin problema, pero evita esconder información clave detrás de efectos.
En resumen
Crear un efecto marquee en Elementor es tan sencillo como montar tus elementos, asignarles una clase y añadir unas líneas de CSS. La clave está en elegir bien: método infinito con elementos duplicados para tiras de logos continuas, o ticker simple para un aviso de una línea. Y siempre desde el método nativo de Elementor, que te deja editar todo cómodamente.
En Chillypills diseñamos y desarrollamos webs con este tipo de detalles que marcan la diferencia. Si quieres una web cuidada al milímetro (y que además cargue rápido y posicione), échale un ojo a nuestros servicios de diseño web o cuéntanos tu proyecto.
