El Bloque Imagen de Fondo de Gutenberg

Manual de Gutenberg

Aprende a usar y configurar todos los bloques del editor Gutenberg.

El bloque imagen de fondo de Gutenberg te permite crear un titular o frase con una foto de fondo. Es algo totalmente nuevo en WordPress, ya que no existe nada parecido en el editor clásico.

Manual de Gutenberg

Cómo funciona el bloque imagen de fondo

Cuando insertamos un nuevo bloque de imagen de fondo en WordPress lo primero que vemos son los botones para elegir la imagen desde la biblioteca de medios, o bien subir una imagen nueva desde nuestra computadora.

Luego la imagen se carga y aparece una leyenda encima de ésta que dice Escribe el título…, hacemos clic sobre la leyenda y reemplazamos por el titular que queramos.

El bloque de imagen de fondo de Gutenberg

Desde la barra de herramientas de este bloque podemos definir tanto la alineación del texto como así también la alineación del propio bloque.

De la misma forma que sucedía con otros bloques, si elegimos alineación centrada, éste ocupará todo el ancho del contenido. Si en cambio elegimos alineación izquierda o derecha, el bloque ocupa solo la mitad del ancho del contenido, dejando lugar para texto a su lado.

Por otro lado, la alineación del texto nos permite orientar el texto dentro del bloque, a la izquierda, centro o derecha de la imagen. El ejemplo de arriba es un bloque centrado con texto también centrado.

Además, cuando estamos escribiendo el título, aparece una segunda barra de herramientas que nos permite dar formato al texto: negrita, cursiva, tachado e insertar enlace.

Cómo configurar la imagen de fondo

El bloque de imagen de fondo tiene solo dos opciones de configuración en el sidebar de ajustes respectivo.

Fondo fijo

Configurar imagen de fondo GutenbergCuando está desactivada, la imagen de fondo se desplaza naturalmente con el resto del contenido al hacer scroll en la página.

Si en cambio esta opción está activa, la imagen de fondo se queda fija mientras se desplaza el resto del contenido produciendo un efecto de paralaje.

Opacidad del fondo

Esta opción te permite oscurecer u opacar la imagen cuando sea necesario para que se lea mejor el texto que está encima.

El color del texto siempre es blanco y no se puede modificar, excepto mediante CSS.

Transformación

El bloque de imagen de fondo de Gutenberg se puede transformar en los siguientes bloques:

Encabezado.
Imagen.

 

Tema relacionado

Manual de Gutenberg

 

¿Te sirvió esta (mini) guía sobre el bloque de imagen de fondo de Gutenberg? Entonces dame una mano para ayudar a más gente compartiéndola en las redes sociales. ¡Gracias! 

Manual de Gutenberg

Aprende a usar y configurar todos los bloques del editor Gutenberg.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

WordPress es Mejor con Divi

2 Comentarios

  1. Emiliano

    Es posible cambiar las dimensiones de la imagen de fondo?

    Responder
    • Jorge Baffa

      Hola Emiliano,
      La imagen de fondo ocupa todo el ancho de la columna de contenido. Excepto que cuando alieneamos el bloque a la izquierda o derecha, en cuyo caso se reduce a la mitad del ancho.

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *