El Hero es un gran banner con una imagen o un vídeo detrás de tu texto y tus botones. Va en tu página de inicio y suele ser lo primero que ven los compradores.
Añadir un hero
- Abre el constructor y elige Home page en la pestaña Pages.
- En la pestaña Sections, haz clic en Add new section y elige Hero en el grupo Content.
- Elige tus medios, escribe tu texto y haz clic en Publish.
El hero solo está disponible en la página de inicio, y puedes añadir uno por página. Para moverlo, copiarlo u ocultarlo, consulta Secciones y bloques
Medios y altura
- Mode: Single muestra una imagen o un vídeo. Split muestra dos, definidos en Media 1 y Media 2. Se colocan uno al lado del otro cuando la Direction del contenido es Vertical, y uno encima del otro cuando es Horizontal. En los móviles siempre se apilan.
- Media 1 y Media 2: una imagen o un vídeo de tu biblioteca de medios. Un vídeo se reproduce sin sonido y en bucle, como fondo en movimiento.
- Height: Small, Medium, Large, Fullscreen (ocupa toda la pantalla), Image (sigue la forma de tu primera imagen, para que no se corte nada) o Custom. Con Custom, Custom height define la altura como una parte de la altura de la pantalla. Los heros nuevos empiezan en Image.
Texto y botones encima
Selecciona el hero y haz clic en Add new block para añadir contenido sobre los medios: hasta 2 bloques Text, 2 Button, 2 Group y 2 Divider. Sus propios ajustes están en Bloques Group, Text, Button y Divider: ¿cómo funcionan los ajustes de los componentes de diseño?
En Layout, colocas este contenido:
- Direction: Vertical apila los bloques, Horizontal los pone uno al lado del otro. Con Horizontal, Stack vertically on mobile los apila en los móviles.
- Position y Alignment: mueven el contenido arriba o abajo y a la izquierda o a la derecha, por ejemplo abajo a la izquierda o en el centro. Space between separa los bloques.
- Content width: Page mantiene el contenido dentro del ancho de tu página, Full le deja llegar a los bordes de la pantalla. Los medios siempre ocupan todo el ancho.
Gap (en Spacing) define el espacio entre bloques, y Padding el espacio a su alrededor.
Colores y superposición
- Color scheme: los colores del texto y de los botones del hero. Consulta Esquemas de colores.
- Media overlay: añade una capa de color sobre los medios para que tu texto se lea mejor. Luego define Overlay color y Overlay style: Solid cubre los medios de forma uniforme, Gradient hace que el color se desvanezca. Gradient direction (Up o Down) define hacia dónde se desvanece.
La pestaña Custom CSS te permite añadir tu propio CSS solo a este hero.
Tareas habituales
- Encabezado sobre el hero: activa Transparent header en los ajustes del encabezado. Solo funciona cuando el hero está justo debajo del encabezado. Consulta Ajustes del encabezado.
- Título y botón centrados: Direction en Vertical, y luego Position y Alignment en Center.
- Texto blanco sobre una foto clara: activa Media overlay con un Overlay color oscuro y el estilo Gradient.
Bueno saberlo
- Si un vídeo del hero no se mueve, revisa Autoplay Videos en la pestaña de ajustes Automations. Cuando está desactivado, los vídeos de fondo se quedan quietos. Consulta Ajustes de automatizaciones.
- Si no se conoce el tamaño de tu primera imagen, la altura Image usa Medium en su lugar.
- ¿Necesitas un banner en otra página? El hero es solo para la página de inicio, pero la sección Image funciona en cualquier página. Consulta Secciones de texto, imagen y separador.