Elemento Carrusel

Acerca del Elemento Carrusel

La función Elemento Carrusel se refiere a una función o widget específico que permite a los usuarios crear y mostrar un carrusel de productos, imágenes o contenido promocional en su sitio web. A continuación se presentan varias características y beneficios clave del elemento Carrusel:

• Exhibición de Productos: Los carruseles de comercio electrónico a menudo exhiben productos del inventario de una tienda. Cada diapositiva puede mostrar un producto diferente con su título, imagen, precio y posiblemente una breve descripción.
• Banners Promocionales: El elemento Carrusel también puede mostrar banners promocionales o anuncios de ventas, descuentos o nuevas llegadas.
• Diseño Personalizable: Los usuarios generalmente pueden personalizar el diseño del carrusel, ajustando aspectos como el número de elementos visibles por diapositiva, los efectos de transición entre diapositivas y el estilo general para que coincida con la estética de su marca.
• Controles de Navegación: Esto típicamente incluye controles de navegación como flechas o puntos para permitir a los usuarios navegar manualmente por las diapositivas del carrusel.
• Diseño responsive: Como otros elementos en el diseño web moderno, los elementos de carrusel en los constructores de páginas de comercio electrónico están diseñados para ser responsivos, asegurando que se muestren correctamente en varios dispositivos y tamaños de pantalla.

Añadir el elemento carrusel en GemPages v7

Paso 1En el Panel de Control de GemPages, seleccione la página donde desea agregar el elemento Carrusel. 

Paso 2: Busque el elemento Elemento Carrusel, seleccione el tipo deseado y arrástrelo a su posición preferida en la página.

Paso 3: Darrastra y suelta cualquier elemento de GemPages (texto, imagen, botón, producto, etc.) para crear tu diseño libremente.

Para acceder al panel de configuración del Carrusel, simplemente haga clic en el elemento.

La barra lateral izquierda revelará entonces el Configuración y Avanzado pestañas, lo que le permite personalizar su comportamiento y apariencia.

Configurar la Pestaña de Configuración

Elementos por Diapositiva

Esta configuración controla cuántos elementos se muestran dentro de cada diapositiva del carrusel. Puede elegir entre las opciones de diseño preestablecidas o establecer un número personalizado para ajustarse a sus necesidades de diseño.

• Diseños preestablecidos: Seleccione rápidamente de 1 a 5 elementos por diapositiva utilizando las opciones de cuadrícula disponibles.
• Valor personalizado: Si desea mostrar más de 5 artículos, haga clic en el ⚙️ Icono de configuración e ingrese la cantidad exacta que prefiera. Esto es especialmente útil para carruseles de productos que muestran varios artículos en una sola vista.

Mostrar

Esta sección le permite ajustar cómo se muestran los elementos dentro de cada diapositiva del carrusel para lograr el diseño y el espaciado ideales para su empresa.

• Máximo de artículos: Defina el número máximo de elementos que pueden aparecer dentro de su carrusel. Puede mostrar hasta artículos 12 elementos por diapositiva.
• Espaciado: Controle el espacio entre cada elemento. Aumentar el espaciado crea un diseño más aireado, mientras que reducirlo facilita la inclusión de más contenido en diseños más compactos.
• Vistazo: Habilite esta opción para mostrar una pequeña parte de la diapositiva siguiente o anterior. Esta indicación visual indica que su carrusel contiene más elementos que los usuarios pueden explorar.

Gestión de Artículos

Esta sección le permite administrar sus elementos en el carrusel, incluyendo agregar o quitar diapositivas y reorganizar su orden como prefiera:

• Cuando pasas el cursor sobre un elemento, puedes rebautizar, duplicar el artículo, o eliminar él.

• Para agregar más elementos, haga clic en el “+ “Añadir artículo” .

Espaciado de elementos

Puedes ajustar el espacio entre los elementos (espacios) de tu carrusel. Por defecto, el espacio está configurado en 16 px.

Estilo de elemento

Esta sección le permite personalizar cómo aparece cada elemento (o diapositiva) dentro de su Carrusel.

Estas configuraciones le ayudan a mantener la consistencia visual y mejorar el atractivo general de su Carrusel.

• Relleno: Ajuste el espaciado interno de cada elemento del carrusel. Puede establecer valores diferentes para la parte superior, inferior, izquierda y derecha para asegurar que su contenido no toque los bordes del elemento.

• Fondo: Defina el fondo para cada elemento en su carrusel. Puede:
  • Seleccione un color sólido (utilizando el selector de color o ingresando un código HEX).
  • Subir una fondo de imagen si desea que cada elemento tenga un diseño visual único.
• Borde: Añada o personalice bordes para sus elementos del carrusel. Puede modificar el ancho, color y estilo del borde (sólido, discontinuo, etc.) para que coincida con el estilo de su marca.
• Esquina: Redondee las esquinas de cada elemento del carrusel para crear una apariencia más suave. El valor (en px) determina qué tan curvadas aparecen las esquinas.
• Sombra: Aplique una sombra proyectada a sus elementos del carrusel para hacerlos destacar del fondo. Ajuste el tamaño de la sombra, desenfoque, color y opacidad para obtener el efecto de profundidad deseado.

Navegación

En esta sección, puede personalizar cómo los usuarios se mueven a través de su carrusel usando flechas de navegación.

Posición: Elija si desea colocar los botones de navegación dentro o fuera del área del carrusel.

Icono de navegación: Seleccione el estilo de icono para sus botones de navegación, incluidos:

• Icono: La opción por defecto es la flecha, pero puedes cambiarla por otros iconos que se adapten mejor a tu diseño.
• Tamaño del icono: ajuste el tamaño del icono utilizando los botones más o menos, o escriba un valor exacto para un control preciso.
• Color del icono: elija un color para los iconos de navegación para asegurarse de que se destaquen sobre el fondo del carrusel.

Botón de navegación: Modifique los botones de navegación (las flechas izquierda y derecha) para que coincidan con el estilo de su página y mejoren la visibilidad.

• Tamaño del botón: Haga clic en Editar para ampliar la configuración completa y ajustar el ancho y la altura del botón de navegación. Aumentar el tamaño puede mejorar la accesibilidad en dispositivos móviles.
• Fondo: Agregue un color de fondo al botón para un mejor contraste con el contenido del carrusel.
• Borde: Aplique un borde para que el botón destaque. Puede personalizar su estilo, ancho y color.
• Esquina: Redondea las esquinas de los botones de navegación para lograr un estilo más suave o en forma de píldora.
• Distancia hasta el borde: Controle la distancia entre el botón de navegación y el borde del carrusel.
• Mostrar al pasar el cursor: Elija si los botones de navegación siempre estarán visibles (No) o solo aparecerán cuando los clientes pasen el cursor sobre el carrusel (Sí).

Puntos

La función Puntos le permite personalizar los puntos de navegación que se muestran en la parte inferior de su carrusel, ayudando a los visitantes a identificar qué diapositiva están viendo actualmente.

• Posición: Elija dónde aparecen los puntos en relación con el carrusel. Puede colocarlos interior or outside las diapositivas, dependiendo del diseño de su disposición.
• Color activo: : Seleccione el color para el punto que representa el actual (visible) diapositiva.
• Color inactivo: : Elija un color diferente para los puntos que representan hidden diapositivas
• Tamaño de los puntos: Ajuste el tamaño de los puntos utilizando los botones más/menos o escriba un valor exacto para la precisión de píxeles.
• Distancia al borde: : Define el espaciado entre los puntos y el borde del carrusel. Aumentar este valor puede mejorar la visibilidad o equilibrar el espaciado en diferentes tamaños de pantalla.

Interacción

Personalice la interacción en el elemento carrusel:

• Reproducción automática: Active este interruptor para avanzar las diapositivas automáticamente. Para una funcionalidad óptima, combine la Reproducción automática con la función de Bucle. Con ambas funciones habilitadas, las diapositivas avanzarán automáticamente y volverán a la primera diapositiva.
• Retraso: Establezca la duración (en ms) antes de cambiar de diapositivas.
• Pausa al pasar el cursor: Detenga la reproducción automática cuando los usuarios pasen el cursor sobre el carrusel.
• Dirección de la diapositiva: Elija el movimiento de diapositiva hacia la izquierda o derecha.
• Bucle infinito: Active este interruptor para permitir que el carrusel se repita desde el principio después de llegar a la diapositiva final. 
• Arrastrar/Deslizar: Habilite esta opción para permitir que los clientes deslicen a la siguiente imagen usando su mouse.  
• Velocidad de deslizamiento: Edite la velocidad de las diapositivas en el carrusel.
• AnimaciónElija el efecto de animación, como Ease In, Ease Out y Ease In & Out. Puede previsualizar el efecto de animación al aplicarlo en el elemento carrusel.

Tamaño 

Personalice el ancho y alto del elemento carrusel según su preferencia. Puede establecer el carrusel de ancho completo siguiendo estos pasos:

• Establecer Ancho a 100% or Ancho completo.
• Ve a Configuración > Alinear y seleccione Centro or Stretch.

Asegúrese de que la sección o fila del contenedor del carrusel también esté configurada en ancho completo en su estructura de diseño.

Fondo

Personalice el fondo general de su carrusel para que coincida con el diseño de su tienda. Puede Elegir un color sólido/degradado or subir una imagen para utilizar como fondo del carrusel.

Para obtener más detalles sobre cómo personalizar el fondo, consulte este artículo.

Forma 

En esta sección, puede ajustar el aspecto general de su carrusel personalizando sus borde, radio de esquina y efecto de sombra. Estas configuraciones ayudan a que su carrusel se integre perfectamente al diseño de su tienda o se destaque como una sección destacada.

• BordeAñada o modifique el borde alrededor del carrusel. Puede definir su grosor, estilo (sólido, discontinuo, punteado) y color para que coincida con el estilo de su marca.
• Esquina: : Ajuste el radio de esquina para hacer que los bordes del carrusel sean redondeados o afilados. Por ejemplo, valores más grandes crean una apariencia más suave y moderna.
• Sombra: : Aplique una sombra paralela para dar a su carrusel una sensación de profundidad y separación visual del fondo de la página. Puede ajustar el desplazamiento, desenfoque y color de la sombra para efectos sutiles o dramáticos.

Consulte este artículo para obtener instrucciones completas sobre cómo modificar la forma con configuraciones de borde, esquina y sombra.

Alineación

En esta sección podrás elegir entre tres opciones: alineado a la izquierda, centrado o alineado a la derecha.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este vídeo artículo.

El carrusel es una herramienta versátil para añadir elementos visuales dinámicos e interactivos a tu tienda Shopify. Con GemPages v7, tienes control total sobre el estilo, la animación y el diseño de cada elemento, lo que facilita la creación de atractivas presentaciones de productos o historias de marca que captan la atención de los visitantes en todos los dispositivos.

Por ejemplo, para agregar un Efecto de transicion para tu carrusel, en el Configuración Avanzada En el elemento Carrusel, puedes cambiar el valor predeterminado. Deslizar:  transición a un Efecto de desvanecimiento para una apariencia visual más fluida y elegante.

Para aplicarlo, vaya a Avanzado , ubique el campo Animación , y seleccione Desvanecer del menú desplegable de tipo de transición.

El efecto de desvanecimiento funciona a la perfección con Reproducción automática y Loop, lo que permite que cada diapositiva se mezcle automáticamente.

Preguntas frecuentes sobre el elemento Carrusel

1. ¿Por qué mi carrusel no se muestra a ancho completo?

Para mostrar un carrusel de ancho completo en su página, intente lo siguiente:

• Compruebe que el el ancho esté configurado como 100% Configuración > Tamaño.
• Asegúrese de que el carrusel esté colocado en una sección o fila que También abarca todo el ancho.
• Establecer Alinear = Centrar o Estirar in Configuración > Alinear.
• Evite colocar el carrusel dentro de columnas estrechas o secciones anidadas.

2. ¿Por qué mi carrusel no se reproduce automáticamente?

Para configurar la reproducción automática del carrusel, siga estos pasos:

• Ve a Configuración > Interacción y asegúrate Reproducción automática se enciende
• Para mantenerlo en bucle, habilite también Bucle infinito: .

3. ¿Puedo mostrar productos dinámicamente en el carrusel?

En GemPages, el carrusel no extrae automáticamente los datos de los productos de Shopify como el elemento Lista de productos. Por lo tanto,necesitas Arrastre manualmente los módulos del producto en el carrusel para control personalizado.

4. ¿Por qué las imágenes se ven cortadas o desalineadas?

En caso de que sus imágenes se vean cortadas en el carrusel:

• Asegúrate de leer Relación de imagen, Relleno o Ancho de diapositiva .
• Usa Ajustar imagen en lugar de Rellenar imagen Si mantener la relación de aspecto es una prioridad.

5. ¿Admite GemPages Carousel un efecto de transición de fundido?

Sí. En GemPages v7, el elemento Carrusel incluye un Efecto de desvanecimiento bajo Configuración Avanzada > Animación. Habilitar Reproducción automática y Bucle infinito: para transiciones de desvanecimiento continuo entre diapositivas.

6. ¿Cómo cambio el tiempo de deslizamiento del carrusel?

Ve a Configuración > Interacción.

• Ajuste Retrasar para controlar cuánto tiempo permanece visible cada diapositiva.
• Ajuste Velocidad de deslizamiento: para controlar qué tan rápido ocurre la transición de diapositiva.

7. ¿Puedo arrastrar y soltar elementos en un carrusel?

8. ¿Por qué no se muestran las imágenes de mi carrusel?

Si las imágenes de su carrusel no se muestran, compruebe lo siguiente:

• Asegúrate de haber añadido un elemento de imagen dentro de cada elemento del carrusel.
• Verifique que la imagen se haya cargado correctamente y que no esté dañada ni falte.
• Comprueba la configuración de visibilidad para asegurarte de que la imagen no esté oculta en dispositivos específicos.
• Asegúrese de que el elemento del carrusel no esté vacío ni se haya eliminado accidentalmente.
• Haga clic en Guardar y Publicar para aplicar los últimos cambios.

Si el problema persiste, intente volver a subir la imagen o actualizar el editor.

9. ¿Cómo puedo reemplazar un vídeo en el carrusel?

Para reemplazar un video en el carrusel, abre el editor de GemPages y selecciona el elemento del carrusel que contiene el video. Haz clic en el elemento Video y luego sube un nuevo video o actualiza la URL del video en el panel de configuración.