Sitio web: Bloque Hero
Añade texto y botones a cada imagen del Hero
¿Qué es?
Cuando el fondo del bloque Hero es un slideshow (varias imágenes que van cambiando solas), cada imagen puede tener su propio título, descripción, alineación y botones. Ese contenido solo se ve mientras su imagen está en pantalla y cambia a la vez que ella, así cada imagen puede presentar un servicio, una oferta o un mensaje distinto. El título, la descripción y los botones generales del Hero no cambian: siguen saliendo en todas las imágenes.
Consejo: Todos los campos son opcionales. Puedes dejar una imagen sin contenido propio: mientras se vea, solo aparecerá el contenido general del Hero.
Paso a paso
Paso 1
Activa el slideshow en el Hero
Abre la página en el editor y entra en el bloque Hero.
En «Block General Styles», elige «Image slideshow» en «Background Media».
En «Background image slideshow items» verás la lista de imágenes. Añade las que quieras con el botón «+» y cambia su orden arrastrándolas.
Paso 2
Rellena el contenido de cada imagen
Pulsa sobre una imagen de la lista. Debajo de «Image» e «Image Quality» encontrarás sus campos:
• Heading: el título de esa imagen. • Description: un texto más corto que va debajo del título. • Alignment: si el contenido va a la izquierda, al centro o a la derecha. • Actions: los botones de esa imagen. Pulsa «+» para añadir uno, dos o los que necesites, cada uno con su texto y su enlace.
Repite lo mismo con cada imagen. Las que dejes vacías solo mostrarán el contenido general.
Paso 3
Ajusta el tamaño y la etiqueta del título (opcional)
Junto a «Heading» y «Description» tienes los mismos botones que en el título general: cursiva, color y el menú «⋮».
En el menú «⋮» puedes cambiar el tamaño del texto en «Typography Style» y la etiqueta en «HTML Tag». Si no tocas nada, el título de la imagen usa el tamaño «Title Medium» y se publica como texto normal (P), para no competir con el título principal de la página. Si quieres que cuente como encabezado, elige H2.
Paso 4
Elige la alineación
Con «Alignment» decides si el contenido de esa imagen va a la izquierda, al centro o a la derecha. Cada imagen puede tener una alineación distinta.
Si la dejas sin marcar, la imagen usa la alineación general del bloque.
Paso 5
Guarda y revisa el resultado
Pulsa «Save». En la web, el contenido general del Hero se mantiene arriba y, debajo, aparece el contenido de la imagen que se está viendo. Cuando pasa a la siguiente imagen, su contenido cambia con ella.
La altura del Hero no cambia aunque unas imágenes tengan más texto que otras, y el slideshow se detiene mientras el visitante tiene el ratón sobre los botones de la imagen, para que pueda pulsarlos con calma.
Paso 6
Si tu Hero no tiene contenido general
Si dejas vacíos el título, la descripción y los botones generales del Hero, el contenido de cada imagen ocupa su lugar y aparece centrado en vertical. Es útil cuando cada imagen tiene un mensaje completamente distinto.
Paso 7
Así se ve en el móvil
En el móvil, el contenido de la imagen se coloca debajo del general y los botones pasan a la línea siguiente si no caben. La alineación de cada imagen se respeta también en pantallas pequeñas.
Preguntas frecuentes
¿Funciona si el fondo del Hero es una sola imagen o un vídeo?
No. El contenido de cada imagen solo aparece cuando el fondo es «Image slideshow». Si cambias el fondo a imagen o a vídeo, lo que hayas escrito en cada imagen se conserva, pero no se muestra.
¿Puedo quitar los botones generales y dejar solo los de cada imagen?
Sí. Borra los botones de «Actions» del bloque Hero y deja solo los de cada imagen. Si además quitas el título y la descripción generales, el contenido de cada imagen se mostrará centrado.
¿Qué pasa si una imagen no tiene contenido?
Mientras esa imagen esté en pantalla solo se verá el contenido general del Hero.
¿Cada cuánto cambian las imágenes?
Cada 5 segundos. El slideshow se detiene mientras el visitante tiene el ratón, o el foco del teclado, sobre el contenido de la imagen.
¿Afecta al SEO?
El título de cada imagen se publica por defecto como texto normal (P), así el título principal de la página sigue siendo el único H1. Si quieres que el título de una imagen cuente como encabezado, elige H2 en su menú «⋮».