Diseñar Presentación con Hero Banner y Elemento Carrusel

Una presentación bien diseñada puede elevar la apariencia de su tienda en línea y mejorar la experiencia del usuario.  

Una de las secciones más populares para sitios web de comercio electrónico es la Presentación de Hero Banner, que muestra sus productos clave, promociones o mensajes de marca justo en la parte superior de su página de inicio.

¿Qué es una Presentación y Por Qué Usarla?

Una presentación es una serie rotativa de banners o imágenes utilizadas para mostrar múltiples mensajes, promociones o productos en una sola sección, típicamente en la parte superior de su página de inicio. Ayuda a captar la atención rápidamente y mantener a sus visitantes interesados sin abrumarlos.

Al usar un formato de carrusel, puede destacar:

• Productos destacados o de temporada
• Promociones u ofertas por tiempo limitado
• Mensajes de marca o nuevas colecciones

Una presentación bien diseñada puede elevar la apariencia de su tienda en línea y mejorar la experiencia del usuario.  

Cómo Diseñar una Presentación o Carrusel de Imágenes con GemPages

Con GemPages, crear una presentación es simple y flexible. Puede combinar los elementos Elemento Carrusel y Banner para construir diapositivas interactivas y llamativas que eleven la experiencia general del usuario e impulsen más clics.  

En esta guía, le mostraremos una guía paso a paso para diseñar una Presentación de Hero Banner utilizando estos elementos.

Paso 1: Acceder al Editor de GemPages

Vaya a la Panel de Control de GemPages > Páginas, y localice la página objetivo para abrir el editor.

Paso 2: Agregar el Elemento Carrusel a su página

Arrastre y suelte el Elemento Carrusel en la sección donde desea que aparezca la presentación.

Nota: El Elemento Carrusel viene con configuraciones personalizables para duración de diapositivas, efectos de transición y más. Si no está familiarizado con estas configuraciones, consulte este artículo.

Paso 3: Agregar el Elemento Hero Banner al Carrusel

Desde la barra lateral izquierda, arrastre y suelte un Elemento Hero Banner dentro del Carrusel.

El Hero Banner viene precargado con un imagen de fondo, título, bloque de texto y botón.

Puede enriquecer su Hero Banner con elementos adicionales como imágenes, íconos, listas de elementos, etc.

Paso 4: Personalizar su Hero Banner

Ahora, personalicemos su hero banner en la pestaña Configuración . Desde la barra lateral izquierda, puede modificar el elemento Hero Banner a su manera.

Por ejemplo:

• Cargar la imagen a su hero banner:

• Cambiar el color de fondo:

• Editar Titular, Bloque de Texto, Botón, etc.

Paso 5: Duplicar la diapositiva  

Regresar a la pestaña Configuraciones principal del elemento Carrusel principal. Configuración .

• Haga clic derecho en el Banner > selecciona “Seleccionar elemento padre" para volver a la configuración principal del Carrusel.

• Alternativamente, Haga clic en los puntos pequeños debajo del Carrusel para acceder a su configuración.

Desde la barra lateral izquierda, vaya a la sección Gestión de elementos y haga clic en el cuadro junto a Pedido para abrir el diálogo de gestión de elementos.

Pase el ratón sobre Artículo 1 y haga clic en el ícono de duplicar para duplicar el control deslizante 1.

El control deslizante duplicado (control deslizante 2) estará debajo Artículo 1, y automáticamente se nombra como Artículo 5.

Este consejo ahorra tiempo al permitirle reutilizar el mismo diseño. Simplemente actualice las imágenes y el texto en cada diapositiva duplicada.

Preguntas Frecuentes

1. ¿Puedo agregar vídeos a mi presentación de diapositivas en lugar de imágenes?

Actualmente, el elemento Carrusel admite diapositivas basadas en imágenes. Sin embargo, puede insertar manualmente un elemento Video en un Hero Banner dentro de cada diapositiva si desea simular una presentación de video. Tenga en cuenta que esto puede afectar la velocidad de carga.

2. ¿Cuántas diapositivas puedo agregar a un solo carrusel?

No hay un límite estricto para la cantidad de diapositivas que puede agregar. Sin embargo, para rendimiento y experiencia del usuario, recomendamos mantenerlo por debajo de 5 diapositivas.

3. ¿Puedo controlar la velocidad de transición y la animación de las diapositivas?

¡Sí! Desde las Configuraciones del Carrusel, puede ajustar la duración de la transición, el interruptor de reproducción automática, el tipo de animación (fundido o deslizamiento) y el comportamiento de bucle.

4. ¿Mi presentación será responsiva en dispositivos móviles?

Absolutamente. Los elementos Carrusel y Hero Banner en GemPages son completamente responsivos. También puede personalizar el diseño para vistas móviles y de tableta usando el modo Vista Responsiva en el Editor.

5. ¿Puedo agregar diferentes enlaces a cada diapositiva?

Sí. Cada diapositiva de Hero Banner puede incluir botones o imágenes clicables con enlaces únicos. Simplemente personalice el elemento de botón o enlace de imagen dentro de cada bloque de Hero Banner.

6. ¿Por qué mi carrusel no se muestra correctamente en la página en vivo?

Asegúrese de que Mostrar esté configurada correctamente y que el Elemento Carrusel esté colocado dentro de una sección visible en todos los dispositivos. Además, verifique dos veces su estado de publicación y limpie el caché de su navegador.