Elemento Marquee

¿Qué es el elemento Marquee?

El elemento Marquee se utiliza para crear el efecto de desplazamiento horizontal para una fila que contiene otros elementos.

A continuación se presentan algunas características clave del elemento Marquee que podrían haberse utilizado para:

• Destacar Promociones y Ofertas Especiales: Los sitios web de comercio electrónico podrían haber utilizado el elemento Marquee para destacar promociones especiales, descuentos u ofertas por tiempo limitado. El efecto de desplazamiento podría llamar la atención sobre estas ofertas, haciéndolas más visibles para los usuarios que visitan el sitio.
• Mostrar Asociaciones de Marca : Los sitios de comercio electrónico podrían haber utilizado el elemento Marquee para mostrar una lista de logotipos de socios en desplazamiento. Esto puede mostrar marcas relevantes y aumentar la credibilidad del sitio, generando confianza con los usuarios a través de logotipos reconocibles.
• Testimonios de Clientes en Desplazamiento : El elemento Marquee también podría haberse utilizado para presentar reseñas de clientes en desplazamiento. Esta visualización dinámica puede destacar comentarios positivos, mejorando la confiabilidad del sitio al mostrar experiencias de clientes satisfechos.
• Mostrar Llamado a la Acción: En algunos casos, los sitios de comercio electrónico podrían haber utilizado el elemento Marquee para mostrar llamados a la acción (CTA) en desplazamiento. Esto puede llamar la atención del usuario hacia acciones importantes como "Regístrese Ahora" o "Más Información", promoviendo el compromiso y mejorando las tasas de conversión a través de indicaciones claras y visibles.

Cómo agregar el elemento Marquee en GemPages v7

Paso 1: Vaya a la sección Editor V7 de GemPages y busque el elemento Marquee en la barra de búsqueda.

Paso 2: Arrastre y suelte el elemento en el área deseada.

Tenga en cuenta que:

• Puede agregar cualquier elemento dentro de un marquee excepto: Pestañas, Acordeón, Formulario de Contacto, Producto, Banner Principal, Lista de Productos, Lista de Artículos y Carrusel.
• Evite colocar más de 20 marquesinas por página para evitar problemas de rendimiento.
• En conexiones más lentas, el tamaño de la marquee puede ajustarse después de que las imágenes grandes terminen de cargarse.

Configurar la pestaña Configuración

Gestión de elementos  

En la sección Gestión de artículos, puede:

• Reordenar Elementos: Arrastre para reorganizar.
• Duplicar Elemento: Clone un elemento existente.
• Eliminar elemento: Elimine un elemento no deseado.
• Agregar elemento: Cree un nuevo elemento del marquee.

Espaciado de elementos

Ajuste el espacio entre los elementos usando el control deslizante (predeterminado: 60 px).

Estilo de elemento

1. Ancho máximo: El ancho máximo de un solo elemento en el marquee: todos los elementos en el marquee compartirán el mismo ancho máximo.

El valor predeterminado de ancho máximo es "Ajustar al contenido", lo que significa que el ancho de cada elemento de Marquee se ajustará automáticamente al contenido dentro de él. Existen XNUMX opciones de ancho:

Existen 3 opciones de ancho:

• Ajustar al contenido: ancho del elemento = ancho del contenido interior.
• Basado en la cantidad de artículos: ancho del artículo = ancho del marco / número de artículos.
• Personalizado: establecer ancho máximo fijo: el usuario puede ingresar manualmente el valor de ancho que desee en píxeles.

2. Fondo: Aplique un color o imagen de fondo.

3. Borde, Esquina, Sombra: Personaliza la forma y profundidad de cada elemento.

Separador

Active o desactive los separadores entre elementos para una mejor distinción visual.

Efecto Marquee

• Dirección: Establezca la dirección de desplazamiento (izquierda o derecha).
• Detener al Pasar el Cursor: Pause la animación cuando el usuario pase el cursor.
• Velocidad: Ajuste la velocidad de desplazamiento.

Tamaño

• Ancho: Ajusta el ancho de una marquesina. El valor predeterminado es 100%, lo que significa que la marquesina se ajustará automáticamente al ancho de la pantalla.
• Altura: Ajusta la altura de una marquesina. El valor predeterminado es Automático, lo que significa que la marquesina se ajustará automáticamente para adaptarse al contenido.
• Relleno: Ajuste el espacio desde el borde hasta el contenido dentro de cada elemento.

Fondo

Color: Aplicar color de fondo al marco.

Forma

Configurar bordes, esquinas y sombras.

Alineación

• La alineación se deshabilitará cuando el ancho sea del 100%.
• De lo contrario, la opción de alineación predeterminada es Alinear al centro.

Configurar la pestaña Avanzada

Consulte este artículo para obtener más instrucciones sobre cómo configurar la pestaña Avanzado del Elemento Marquee.

Mostrar en

Puede decidir en qué dispositivos se mostrará el elemento Marquee: Escritorio, Tableta y Móvil. Simplemente active o desactive cada opción para mostrar u ocultar el elemento en dispositivos específicos.

Espaciado (px)

Ajuste la margen más antigua y relleno Valores alrededor del elemento Marquee utilizando el modelo de caja visual:

• Valores externos (arriba, derecha, abajo, izquierda) controlan el margen (el espacio fuera del elemento)
• Valores internos controlan el relleno (el espacio dentro del contenedor del elemento)
• Haga clic en el botón icono de enlace en el centro para sincronizar/desvincular valores.

Forma

En la sección Forma, usted puede:

• Agregar un borde al elemento y seleccionar entre diferentes estilos (sólido, discontinuo, punteado).
• Personalizar el radio de las esquinas: elija entre esquinas cuadradas, redondeadas o estilo píldora.
• Habilitar una sombra para ayudar a que el elemento se destaque del fondo.

Posición

Cambie cómo se posiciona la Marquesina dentro de su sección o en relación con otros elementos, incluyendo:

• Estático
• Relativo
• Absoluto
• Fija
• Fijo

Opacidad

Ajuste el nivel de transparencia del elemento:

• 100% = totalmente visible
• 0% = totalmente transparente

Utilice el deslizador o el cuadro de entrada para ajustar con precisión la visibilidad. Útil cuando se superponen elementos o se crean efectos visuales sutiles.

Animación

Habilite esta opción para agregar una animación de entrada o al pasar el cursor al elemento Marquee. Una vez activado, puede personalizar el comportamiento de la animación con las siguientes opciones:

• Cuando Aparece/Al Pasar el Cursor: Elija si la animación debe activarse cuando el elemento aparece en la pantalla o cuando un usuario pasa el cursor sobre él.
• Tipos de animación: Puede elegir entre varios estilos de animación: Ninguno, Desvanecer, Deslizar, Zoom, Sacudir
• Velocidad: Ajuste la velocidad de la animación con el control deslizante. Al moverlo hacia la derecha, la animación se reproducirá más rápido.
• Mostrar más: Haga clic en este botón para acceder a efectos de animación adicionales (si están disponibles).
• Avance: Utilice el botón Vista previa para probar cómo se ve la animación directamente en el editor.
• Retraso: Establezca un retraso (en segundos) antes del inicio de la animación. Esto es útil si quieres escalonar las animaciones entre varios elementos.
• Facilitación: Elija cómo progresa la animación a lo largo del tiempo, las opciones disponibles incluyen: Entrada y salida gradual, Entrada y salida gradual, Lineal
• Avance: Haga clic en el botón Vista previa Botón para probar instantáneamente la animación en el editor.

El uso excesivo puede afectar el rendimiento y distraer a los usuarios.

Interacción

Cree comportamientos personalizados para su elemento Marquee sin necesidad de programar. Haga clic en Crear para abrir el panel Configuración de interacción.

Configurará:

• Trigger: Elija cuándo comienza la interacción – Haga clic en el elemento or Elemento flotante.
• Acción: Seleccione un elemento de destino en la página y defina lo que sucede, incluyendo cambiar el estilo del texto, cambiar contenido, mostrar/ocultar, or desplazarse a.

Clase CSS

Ingrese nombres de clases CSS personalizadas (separados por espacios) para aplicar sus propias reglas de estilo al elemento. Esto es útil si desea agregar estilos avanzados a través de CSS personalizado en su tema o dentro del Estilo Global de GemPages.

Preguntas frecuentes sobre el elemento Marquee

1. ¿Por qué la velocidad de desplazamiento de mi marquesina es inconsistente en todos los dispositivos?

Pueden producirse diferencias de velocidad cuando los elementos con muchas imágenes se cargan lentamente en ciertas redes. Una vez que todas las imágenes terminan de cargarse, el efecto de desplazamiento se estabiliza. Para evitarlo, optimice o comprima las imágenes grandes.

2. ¿Puede el elemento Marquee ralentizar mi página?

Sí, si agrega demasiados elementos o anida varias marquesinas en la misma página. Recomendamos usar menos de 20 elementos de marquesina por página para mantener el rendimiento y una animación fluida.

3. ¿Por qué mi marquesina cambia de tamaño después de cargarse?

Esto ocurre cuando los elementos contienen imágenes grandes que terminan de cargarse después de que comience la animación. El elemento recalcula su tamaño una vez que las imágenes se cargan por completo. Usar imágenes comprimidas o elementos con anchos fijos puede minimizar los desplazamientos.

4. ¿Puedo hacer que la marquesina se pause al hacer clic en lugar de pasar el mouse sobre ella?

La opción integrada "Detener al pasar el cursor" solo se pausa al pasar el cursor. Si necesita pausar el cursor al hacer clic, puede simularlo con Interacciones activando o desactivando el comportamiento o cambiando a una versión sin animación.

5. ¿Puedo crear un marco vertical en GemPages v7?

Actualmente, el elemento Marquee en GemPages v7 admite solo desplazamiento horizontal (de izquierda a derecha o de derecha a izquierda). Una marquesina de desplazamiento vertical (de arriba a abajo o de abajo a arriba) es no soportado de forma nativa.

Si desea crear un efecto visual similar, comuníquese con nuestro equipo de soporte para obtener más instrucciones.

6. ¿Cómo agrego una sombra al elemento Marquee?

• Haga clic en el elemento Marquesina en el Editor.
• Vaya a la Configuración .
• Abra la Forma .
• Active Sombra: , luego ajuste el tipo de sombra, el color, el desenfoque, la distancia y el tamaño según sea necesario.