El Bloque Imagen de Fondo de Gutenberg

[et_pb_dmb_breadcrumbs _builder_version=»4.16″ _module_preset=»6bf26f01-8d85-4787-879c-b67019428900″ module_alignment=»center» global_colors_info=»{}»][/et_pb_dmb_breadcrumbs]

WordPress es Mejor con Divi

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! 

Jorge B.

Jorge B.

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

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

4 Comentarios

  1. Emiliano

    Es posible cambiar las dimensiones de la imagen de fondo?

    • 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.

  2. Elisabet

    Hola! Gracias por tu artículo e información. Me gustaría preguntarte si conoces otro bloque que permita posponer una imagen con un fondo opaco, también con posibilidad de escribir texto encima y que se pueda modificar el ancho?

    Gracias de antemano!

    • Jorge Baffa

      Hola Elizabeth,

      Hasta donde sé es el único bloque de WordPress que permite hacer eso pero, para serte sincero, yo últimamente no uso mucho este editor sino Divi, ya que me resulta más práctico: https://www.aventura.digital/divi/