Una marquesina es contenido que se desplaza continuamente en una dirección y nunca se detiene: sin flechas, sin puntos, sin límites de diapositivas. El viejo <marquee> La etiqueta HTML ha estado muerta durante años, pero el efecto se produjo alrededor de 2021 y ahora está en la mitad de los sitios de agencias que visitarás.
Tres formas de construir uno en Elementor: la gratuita Widget de control deslizante de logotipos para logotipos, el Ticker de noticias para texto, o unas doce líneas de CSS si lo desea en algo que los widgets no cubren. Una marquesina es realmente un widget carrusel con las paradas eliminadas, es por eso que dos de los tres métodos comienzan desde uno. Los tres siguientes, con el detalle que decide si el tuyo se repite de forma limpia o visible.
Lo único que hace que una marquesina parezca rota
Comience aquí, porque es la razón por la que la mayoría de las carpas construidas a mano se ven mal.
Una marquesina es una tira de contenido que se desliza hacia la izquierda hasta que sale de la pantalla y luego vuelve al principio. Si solo hay una copia del contenido, obtienes un espacio. La cola sale y hay espacio vacío hasta que la cabeza vuelve a girar.
La solución es duplicar la pista. Dos copias idénticas una al lado de la otra, animadas en el ancho de exactamente una copia. Cuando la animación se reinicia, la copia dos está exactamente donde estaba la copia uno y el salto es invisible.
Eso es todo. Esa es toda la técnica. Cada marquesina que has visto que se repite suavemente está haciendo esto, y cada una que tartamudea no lo hace.
Método 1: Marquesina de logotipo con el control deslizante de logotipo gratuito
Si está desplazándose por los logotipos de los clientes, que es para lo que sirven la mayoría de las carpas, el Widget de control deslizante de logotipo lo hace sin CSS. Está en el complemento gratuito.
- Arrastre el control deslizante del logotipo a la página y agrega tus logotipos en el repetidor, una fila cada uno, con un enlace opcional.
- Abra Configuración del carrusel y activa la reproducción automática, luego el bucle infinito.
- Establezca el retraso de reproducción automática en 0. Este es el interruptor que convierte un carrusel en una marquesina. Un retraso de cero significa que nunca se detiene en una diapositiva, por lo que el movimiento se vuelve continuo en lugar de escalonado.
- Establece la velocidad en algo lento, 4000 a 6000 ms. Las carpas se leen tan tranquilas cuando son más lentas de lo que cabría esperar. Los rápidos parecen un estado de error.
- Apaga flechas y puntos. La navegación en una marquesina es contradictoria; no hay nada a qué navegar.
- Desactive la pausa al flotar si lo desea realmente continuo, o déjelo encendido si se puede hacer clic en los logotipos.
La densidad de controles de diapositivas por vista. Seis en el escritorio, tres en la tableta y dos en el móvil mantienen los logotipos legibles. No caigas a uno, porque una marquesina que muestra un solo logotipo a la vez deja de leerse como una tira.
Más información sobre cómo diseñar tiras de logotipos, incluido el tratamiento flotante en escala de grises y cómo igualar tamaños de logotipos que no coinciden: el tutorial del carrusel de logotipos. Para saber qué más se encuentra en el nivel gratuito, consulte el desglose gratuito del widget del carrusel.
Método 2: Marquesina de texto con News Ticker
Para desplazarse por el texto (anuncios, titulares, una tira de ticker de stock), el widget News Ticker es la opción diseñada específicamente. Es un widget profesional.
Maneja las cosas que una marquesina de texto enrollada a mano se equivoca: puede extraer de una consulta de publicación en lugar de una lista estática, por lo que un ticker de “últimas noticias” se actualiza y tiene un bloque de etiquetas fijo a la izquierda que permanece colocado mientras el contenido pasa por él. Esa etiqueta es el detalle que hace que un ticker se lea como un ticker en lugar de como un texto a la deriva.
Establezca la dirección, la velocidad y el comportamiento de pausa en la configuración del widget. Dos cosas que vale la pena hacer:
- Pausa al flotar, encendido. Si los titulares son enlaces, la gente necesita un objetivo estacionario.
- Mantenga los artículos cortos. Un ticker con titulares de 90 caracteres tarda tanto en circular que nadie ve el elemento cuatro. Truncar a unos 50 caracteres.
Si lo que realmente desea es mover texto sin desplazarse, un titular donde las palabras giran en su lugar, el Widget de titulares animados es más ajustado que cualquier marquesina.
Método 3: cree uno con CSS
Para cualquier cosa que los widgets no cubran (una tira de citas testimoniales, una fila de íconos, contenido mixto), una marquesina consta de doce líneas de CSS. Coloque el marcado en un widget HTML y el CSS en el campo CSS personalizado de Elementor o en su tema secundario.
<div class="ma-marquee">
<div class="ma-marquee__track">
<span>Item one</span><span>Item two</span><span>Item three</span>
<span>Item one</span><span>Item two</span><span>Item three</span>
</div>
</div>Tenga en cuenta que el contenido aparece dos veces. Esa es la pista duplicada de antes, no un error de copiar y pegar.
.ma-marquee {
overflow: hidden;
}
.ma-marquee__track {
display: flex;
gap: 3rem;
width: max-content;
animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
animation-play-state: paused;
}
@keyframes ma-scroll {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ma-marquee__track { animation: none; }
}Cuatro cosas allí importan:
translateX(-50%)mueve la pista exactamente en el ancho de una copia, porque la pista tiene dos copias. Esto es lo que hace que el bucle sea invisible.linear, nuease. Una marquesina facilitada acelera y ralentiza cada ciclo, lo que parece un error.width: max-contentdetiene el envoltorio de la pista flexible.- La consulta de movimiento reducido no es opcional. El movimiento horizontal continuo es una migraña documentada y un desencadenante vestibular, y una marquesina es el delincuente más común en la web moderna. Honra el escenario.
Para invertir la dirección, animar desde translateX(-50%) a 0. Para vertical, cambie a translateY y establezca la altura del contenedor.
¿qué tan rápido debe moverse una carpa?
Más lento de lo que dice el instinto. Un buen punto de partida son 30 segundos para un ciclo completo de una pista de seis elementos, que se siente casi demasiado lento en el editor y se lee con tanta confianza en una página en vivo.
La prueba: ¿puede un visitante leer un elemento sin seguirlo con los ojos? Si tienen que seguir el movimiento, es demasiado rápido y toda la tira se convierte en algo de lo que apartar la mirada.
Los logotipos pueden ir más rápido que el texto, porque se reconoce un logotipo en lugar de leerlo. El texto necesita aproximadamente el doble de tiempo de permanencia. Un carrusel escalonado es el caso opuesto, donde la reproducción automática suele ser un error porque se puede hacer clic en los elementos.
¿una marquesina es mala para SEO o accesibilidad?
SEO, no. El contenido es texto real en el DOM, rastreable e indexable. Duplicar la pista significa que el texto aparece dos veces en la fuente, lo cual vale la pena tener en cuenta, pero no es un problema de contenido duplicado a esta escala, porque hay un puñado de palabras dentro de un elemento. Si te molesta, marca la segunda copia aria-hidden="true", lo cual deberías hacer de todos modos.
La accesibilidad es la verdadera consideración y hay tres cuestiones genuinas:
- Sensibilidad al movimiento. Manejado por la consulta de movimiento reducido anterior. No negociable.
- Mover objetivos de enlace. Si se puede hacer clic en los elementos, haga una pausa al pasar el cursor y al enfocarse. Un enlace que se desliza cuando alguien lo alcanza falla las expectativas del tamaño objetivo de WCAG 2.2 en espíritu, si no en letra.
- Lectores de pantalla leyéndolo dos veces. La pista duplicada se anuncia dos veces a menos que ocultes la segunda copia del árbol de accesibilidad. Un atributo lo corrige.
Nada de eso hace que una marquesina sea una mala idea. Hace que uno no configurado sea una mala idea.
Preguntas frecuentes
¿elementor tiene un widget de marquesina?
No en el núcleo. Elementor no tiene una marquesina dedicada ni un widget de teletipo ni en el complemento gratuito ni en el Pro. Obtienes el efecto de un complemento (el control deslizante de logotipo gratuito con retardo de reproducción automática establecido en cero, o el ticker de noticias para desplazar el texto) o escribiendo el CSS tú mismo. Aquí nada se vende como widget de marquesina; News Ticker (Pro) es lo más parecido a un propósito, ya que desplazarse continuamente es para lo que sirve, pero tiene forma de tiras de titulares en lugar de contenido arbitrario.
¿cómo hago que el texto se desplace continuamente en Elementor?
Dos opciones. El widget News Ticker lo maneja con configuraciones, incluida la extracción de titulares de una consulta posterior. O agregue un widget HTML con una pista de contenido duplicada y un marco clave CSS animando translateX a -50% en un bucle lineal infinito.
¿por qué mi marquesina salta o tartamudea cuando hace un bucle?
La pista no está duplicada o la distancia de animación no coincide con el ancho de una copia. Una marquesina necesita dos copias idénticas del contenido y una animación que se mueva exactamente el 50% del ancho total de la pista. Cualquier otra distancia y verás un chasquido visible en cada ciclo.
¿cómo detengo una marquesina al flotar?
Con el widget Logo Slider, se alterna en Configuración del carrusel. En CSS lo es animation-play-state: paused al pasar el cursor del contenedor. Añadir :focus-within al lado :hover entonces los usuarios de teclado obtienen la misma pausa.
¿puedo hacer una marquesina vertical en Elementor?
Da. Animar translateY en lugar de translateX, establezca una altura de contenedor fija y apile la pista duplicada en una columna en lugar de en una fila. Las carpas verticales se adaptan mejor a las tiras testimoniales y a los feeds de notificaciones que a los logotipos.
¿aún se admite la etiqueta de marquesina HTML?
Los navegadores todavía renderizan <marquee>, pero ha estado en desuso durante años, no está en la especificación HTML y no le brinda control sobre cómo facilitar, pausar o reducir el movimiento. Utilice animación CSS en su lugar: el mismo efecto, mejor comportamiento y no desaparecerá en una versión futura del navegador.
Qué método utilizar
Logotipos: el control deslizante de logotipo gratuito, retardo de reproducción automática cero. Hecho en dos minutos y maneja la densidad de respuesta para usted.
Ninguno de los veinte Creador de widgets designs es una marquesina, por lo que Logo Slider sigue siendo la herramienta para este trabajo. El página de precios muestra dónde se encuentra News Ticker si desea la versión diseñada específicamente.
Titulares que se desplazan: News Ticker, porque la fuente de la consulta y la etiqueta fija valen la licencia por sí solas.
Cualquier otra cosa: el CSS. Es corto, es tuyo y nada puede desaprobarlo. Los creadores de controles deslizantes independientes también pueden realizar pistas continuas y la comparación de complementos deslizantes cubre lo que le costaron a la página.
Todos los widgets del carrusel y del control deslizante, incluidos los que cumplen con las tareas de marquesina, se recopilan en el Widgets del carrusel Elementor página, junto con 20 diseños de carrusel y controles deslizantes importantes8 de ellos gratis. Si su marquesina se porta mal después de una actualización del complemento de almacenamiento en caché, se corrige la guía de solución de problemas del control deslizante Swiper aplica aquí también.
