¿Qué es un banner de héroe?
Un banner de héroe es una sección visual grande ubicada en la parte superior de una página web, que generalmente incluye un título, una imagen de fondo o un video y un botón de llamada a la acción.
Acerca del Elemento Banner de héroe
El elemento Banner Principal le permite diseñar una sección llamativa de ancho completo en la parte superior de su página web que capte la atención de los visitantes con imágenes impactantes. Además, puede superponer elementos como encabezados, bloques de texto y CTA para que su banner sea aún más atractivo.
Cómo crear un banner de héroe en Shopify usando GemPages
Siga estos pasos para agregar un elemento Banner de Héroer a su página creada con GemPages.
- Desde la aplicación Panel de Control de GemPages, localice la página objetivo para abrir el editor.
- En la pantalla barra lateral izquierda , navegue a la sección Medios de Comunicación y arrastrar y soltar el Banner elemento al lugar deseado.
- (Opcional) Arrastre otros elementos (por ejemplo, encabezado, botón, etc.) al banner para lograr mayor impacto.
- Haga clic en el Banner del héroe para revelar su panel de configuración, que incluye Configuración y Avanzado .
Configurar la Pestaña de Configuración
Diseño
Elija el diseño y la alineación del contenido:
- Posicion horizontal: Izquierda, Centro o Derecha
- Posición vertical: Superior, Centro, Inferior o Expandido (ocupa toda la altura)
Fondo
Puede configurar el fondo del banner utilizando una de tres fuentes:
- Color
- Imagen
- Vídeo
Fondo de color
Seleccione un color de la paleta o ingrese un código hexadecimal en el cuadro para establecer su color de fondo preferido para el banner.
Fondo de imagen
Existen tres opciones para cambiar la fuente de imagen del banner:
- Subir Imagen: Esta opción le permite seleccionar una imagen de su computadora para cargar.
- Entrada de Enlace: Esta opción le permite ingresar el enlace de la imagen para cambiar la fuente de la imagen del Banner del héroe.
- Navegar Galería: Puede elegir una imagen de la galería, que contiene todas las imágenes cargadas.
Consejo: Para una mejor visualización, puede consultar la información sobre herramientas que se muestra en la Imagen pestaña, debajo de la Fuente del banner sección, para encontrar las dimensiones más óptimas* para la imagen cargada en el banner Hero:
| Escritorio | 1920 × 800 px |
| Móvil | 375×200 px o 375×400 px |
| Tableta | 1024 × 500 px |
Para diseñar su Banner de Héroe en diferentes pantallas, consulte este artículo.
Fondo de video
Al configurar un fondo de video para su banner, puede elegir una de las siguientes fuentes de video:
YouTube: Puedes usar un video de YouTube como fondo. Esta opción es compatible con YouTube Shorts y videos estándar de YouTube, lo que te da flexibilidad para elegir tu contenido.
Para que GemPages muestre el video correctamente, recomendamos proporcionar sus dimensiones. Esta información permite a GemPages calcular el nivel de zoom y garantizar que el video se ajuste perfectamente al banner. Las dimensiones de vídeo más populares incluyen:
- 1600:900
- 400:300
- 2100:900
- 100:100
- 900:1600
Alojamiento de videos: Si prefieres alojar el video tú mismo, elige la opción de alojamiento de videos. Sube tu video a Shopify y pega el enlace en el... Weblink campo para usarlo como fondo.
Nota: Tenga en cuenta que el resultado debe verificarse en la página de resultados. Para obtener instrucciones paso a paso sobre cómo subir el video a Shopify, consulte este artículo.
Active el interruptor Vídeo en bucle para que el video se reinicie desde el principio una vez que llega al final.
Overlay
Haga clic en Mostrar más, luego pulsa "Añadir…" para configurar:
- Color: Elija un color de superposición
- Opacidad: Ajuste la transparencia (valores más bajos = más transparente)
Tamaño
Elija cómo se escala el banner:
- Como fuente de banner: Se ajusta automáticamente según las dimensiones de la imagen
- Personalizado: Establezca manualmente el ancho y la altura
Contenido
Configure:
- Ancho: Establezca el ancho máximo para el contenido interno
- Relleno: Agregue espaciado dentro del banner
- Alineación: Alinee el contenido horizontalmente (izquierda, centro, derecha)
Forma
Personalice la forma usando:
- Borde: Agregue estilos de borde
- Esquina: : Ajuste la redondez de las esquinas
- Sombra: : Aplique efectos de sombra para profundidad
Efecto
- Efecto al pasar el cursor : Agregue estilo interactivo al pasar el cursor
- Desplazamiento parallax (solo para imagen): Agrega profundidad con movimiento en capas mientras los usuarios se desplazan
Enlace
Una vez que active esta opción, podrá configurar la sección Enlace:
Después de hacer clic: Elija en el menú desplegable para decidir qué sucede después de que los visitantes hagan clic en su banner principal: Abrir página, Desplazarse a, Abrir ventana emergente, Enviar correo electrónico o Realizar una llamada telefónica.
Por ejemplo, , si elige el Desplazarse a opción, haga clic en el "Añadir…" para seleccionar la sección de destino de la lista.
SEO
En la sección SEO, puede agregar el texto alternativo de la imagen y el título de la imagen para mejorar el SEO de la página.
Alineación
Alinea la sección del Banner del Héroe en sí: Izquierda, Centro o Derecha.
Configurar la pestaña Avanzada
Para una personalización más avanzada, navegue a la Avanzado y siga las instrucciones de este artículo.
Preguntas Frecuentes
1. ¿Cómo agrego texto a una imagen usando el elemento Hero Banner?
Después de añadir el banner principal a tu página, simplemente arrastra y suelta un elemento de encabezado o texto sobre él. Puedes editar el texto, ajustar su estilo y colocarlo donde quieras sobre el fondo de la imagen.
2. ¿Puedo usar un fondo de vídeo en el Banner del Héroe?
Sí. Puedes usar un enlace de YouTube o un video alojado en Shopify. Simplemente pega el enlace en la configuración de Fuente de video. Opcionalmente, activa la opción "Reproducir video en bucle" para una reproducción continua.
3. ¿Puedo crear una presentación de diapositivas con el elemento Hero Banner?
El elemento Banner de héroe también se utiliza para diseñar una presentación de diapositivas en su página web. Al combinar el Banner con el Elemento Carrusel Con este elemento, puedes crear fácilmente una presentación impactante que capte la atención del cliente. Para aprender a hacerlo, consulta este video instructivo.
4. ¿Por qué mi texto o botón no se muestra en el móvil?
Asegúrate de que el elemento no esté oculto en dispositivos móviles. En la pestaña Avanzado, revisa la configuración de Visibilidad para confirmar que esté habilitado en todos los tamaños de pantalla.
5. ¿Cómo alineo el texto o el botón dentro del Banner del Héroe?
Utilice el Contenido > Alineación Ajuste para posicionar elementos a la izquierda, al centro o a la derecha. También puede usar el Relleno y Ancho controles para una colocación precisa.
6. ¿Cómo puedo hacer que mi página de inicio aparezca en pantalla completa para los visitantes?
7. ¿Por qué mi banner de héroe aparece más arriba o en una posición incorrecta en la página?
8. ¿Cómo agrego texto alternativo a un Banner de Héroe?
Para agregar texto alternativo a un Banner de Héroe, haz clic en el elemento Banner de Héroe para abrir su panel de configuración. Debajo de SEO sección, ingrese su texto en el Texto alternativo de la imagen campo. Este texto alternativo ayuda a mejorar la accesibilidad y el SEO al describir la imagen del banner para motores de búsqueda y lectores de pantalla.
9. ¿Puedo agregar un botón de "Comprar ahora" a un banner de héroe?
No, el banner principal no admite botones de compra dinámica (Comprar ahora). Estos botones requieren datos del producto, por lo que solo están disponibles dentro de los elementos Producto o Lista de productos. Si desea un efecto similar, puede agregar un botón normal en el banner principal y enlazarlo a la página del producto.
gracias por tus comentarios