Guías/Crear contenido/Medios/Dar estilo a un banner

Dar estilo a un banner

El bloque Portada incluye opciones para dar estilo a tu banner. En esta guía, aprenderás a añadir una superposición, ajustar la relación de aspecto, aplicar un borde y una sombra, y afinar el punto focal de imágenes y vídeos de tipo banner.

Vídeo tutorial

Añadir o ajustar una superposición

Una superposición añade una capa de color semitransparente sobre la imagen o el vídeo del banner, lo que mejora la legibilidad del texto y de otros contenidos. Para añadir o ajustar la configuración de la superposición, sigue estos pasos:

  1. Haz clic en el bloque Portada para seleccionarlo.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. Parece un círculo blanco y negro.
  3. En la sección «Color», haz clic en el color de Superposición para cambiar el color de la superposición.
  4. Ajusta el control deslizante de Opacidad de la superposición para controlar la transparencia del color de la superposición. Una opacidad de 0 significa que la imagen es completamente visible. Una opacidad de 100 significa que la superposición oculta la imagen por completo. Según tu diseño, una opacidad de superposición entre 25 y 75 suele funcionar bien.
The color and overlay opacity sections of the block settings sidebar for the Cover block.

Ajustar la relación de aspecto

Puedes controlar la forma de tu banner ajustando su relación de aspecto. Para ajustar la relación de aspecto del bloque Portada, sigue estos pasos:

  1. Haz clic en el bloque Portada para seleccionarlo.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. Parece un círculo blanco y negro.
  3. Localiza el ajuste de Relación de aspecto.
  4. Selecciona una relación de aspecto predefinida en el menú desplegable.
The "Aspect Ratio" drop-down menu expanded to display the options.

Añadir borde y sombra

Para añadir un borde o una sombra a tu bloque Portada, sigue estos pasos:

  1. Haz clic en el bloque Portada para seleccionarlo.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. Parece un círculo blanco y negro.
  3. Localiza la sección Borde y sombra.
  4. Ajusta el ancho, el color y el radio del borde con los controles disponibles.
  5. También puedes activar una sombra paralela haciendo clic en el icono ⋮ y activando los ajustes de Sombra.

Más información sobre los ajustes de Borde y sombra.

Habilitar fondo fijo

Un fondo fijo (efecto de paralaje) mantiene la imagen del banner en su sitio mientras los visitantes se desplazan. Aquí tienes un ejemplo:

Sigue estos pasos para crear una imagen de fondo fija:

  1. Añade un bloque Portada.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. Parece un círculo blanco y negro.
  3. Activa «Fondo fijo».

Si has subido un vídeo a tu bloque Portada, esta opción no estará disponible.

Habilitar fondo repetido

La opción Fondo repetido repite la misma imagen para formar un patrón en el bloque Fondo. Para repetir un fondo en el bloque Fondo, sigue estos pasos:

  1. Haz clic en el bloque Fondo para seleccionarlo.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. El icono de Estilos tiene el aspecto de un círculo blanco y negro.
  3. Activa «Repetir fondo».

Si has subido un vídeo a tu bloque Fondo, esta opción no estará disponible.

Establecer un punto focal

El punto focal determina qué parte de la imagen o del vídeo permanece visible cuando el banner cambia de tamaño. Esto es útil cuando tu imagen de portada se ve en una pantalla pequeña, como la de un teléfono móvil, y no puede mostrarse completa. En pantallas más pequeñas, la imagen se centrará en torno al punto focal que hayas elegido para garantizar que se vea la parte más importante de la imagen.

Para ajustar el punto focal, sigue estos pasos:

  1. Haz clic en el bloque Fondo para seleccionarlo.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. El icono de Estilos tiene el aspecto de un círculo blanco y negro.
  3. Busca el selector de punto focal.
  4. Arrastra el marcador para ajustar el área de enfoque.

Si has subido un vídeo como contenido multimedia de portada, también puedes establecer una imagen de póster para usarla como miniatura del vídeo.

Aplicar un estilo de onda

Para aplicar un estilo de onda en la parte superior o inferior de tu bloque Fondo, sigue estos pasos:

  1. Haz clic en el bloque Fondo para seleccionarlo.
  2. En la barra lateral de ajustes del bloque, haz clic en el icono de Estilos. El icono de Estilos tiene el aspecto de un círculo blanco y negro.
  3. Haz clic en la opción «Onda inferior» o «Onda superior» para aplicar un estilo de onda.
  4. Haz clic en Por defecto para quitar el estilo de onda.
Copied to clipboard!