Robot, hand, cartoon, de rawpixel

Con el editor de bloques de WordPress, Gutenberg, disponemos de un gran conjunto de bloques con los que puedes crear grandes diseños de páginas y entradas. Entre ellos, uno de los bloques nuevos que nos abre muchas nuevas posibilidades de diseño es el bloque fondo (Cover en inglés).

Bloques comunes editor Gutenberg
Dentro del conjunto de bloques comunes del editor Gutenberg, se encuentra el bloque Fondo.

El bloque fondo te permite, como bien indica su nombre, meter una imagen de fondo. A esa imagen le puedes superponer un filtro de color que encaje con tu tema y puedes añadirle un encabezado, texto o incluso un botón. Se convierte así en un bloque muy útil para crear separaciones entre secciones de páginas.

Por ejemplo, a continuación te muestro una sección que puedes crear con un bloque de tipo fondo para separar una sección de una página. En este caso, el filtro de color naranja es de un 100% de opacidad, cubriendo de este color cualquier imagen que se hubiera cargado. Incluye un encabezado, un botón de llamada a la acción y un texto adicional.

Fideliza a tus lectores con Nelio Content

PRUÉBALO

El calendario editorial todo-en-uno para WordPress

Y es importante no confundir el bloque de tipo fondo con la imagen destacada de una entrada o página. Veamos primero las propiedades que nos vienen con la imagen destacada.

La imagen destacada

La imagen destacada de una entrada, también conocida como la imagen en miniatura de una entrada es la imagen que representa el contenido de una entrada. Es una imagen que se muestra al visualizar la propia entrada o al visualizar el listado de entradas, pero también la que visualizamos en los lectores RSS o en las redes sociales al compartir la entrada.

La imagen destacada es más importante de lo que crees ya que aparece en muchos sitios.
Tweet en @NelioSoft_ES.

Para añadir una imagen destacada a tu entrada, debes ir a la barra lateral de la entrada que estás editando, y en Documento encontrarás el apartado Imagen destacada donde debes darle al botón Insertar imagen que te lleva a la biblioteca de medios para que selecciones la imagen en cuestión.

Insertar imagen destacada en una entrada.
Insertar imagen destacada en una entrada.

Fíjate que nada te impide que la imagen que selecciones sea una imagen animada como la que te mostramos en la siguiente entrada.

Y la visualización de la imagen destacada en tu entrada viene totalmente predetermidada por el tema. Por ejemplo, si usas el tema Twenty Nineteen de WordPress que es totalmente compatible con el editor de bloques, Gutenberg, las imágenes se muestran por defecto con un filtro de color azul.

Imagen destacada de entrada.
Visualización de imagen destacada de una entrada con el tema Twenty Nineteen.

Este tema te permite cambiar el color de filtro de la imagen destacada. Para ello, en el menú lateral izquierdo del Escritorio, haces clic en la opción Apariencia » Personalizar para personalizar la apariencia del tema.

Personalizar apariencia del menú
Opción de menú para personalizar su apariencia.

Y en la opción Colores verás las distintas opciones que tienes.

Modificación de colores de tema
Opción de modificación de Colores del tema Twenty Ninenteen.

Por defecto, tienes el filtro de color azul que has visto en la imagen anterior.

Color por defecto de Twenty Nineteen
Filtro aplicado a las imágenes destacadas por defecto en el tema Twenty Nineteen.

Pero tienes la opción de seleccionar que no se aplique ningún filtro a las imágenes destacadas.

Imagen destacada sin filtro de color.
Deshabilitada la opción de aplicar filtro a la imagen destacada.

O personalizar el color primario de filtro que quieres que se aplique a la imagen destacada:

Filtro de color personalizado.
Selección personalizada del color de filtro a aplicar a las imágenes destacadas.

Destacar que estas opciones mostradas son las propias del tema Twenty Nineteen, pero dependiendo del tema que tengas instalado tendrás otras. Y finalmente, te recomiendo la lectura de la entrada de Toni, Cómo usar correctamente las imágenes destacadas en WordPress para aprender más a usar las imágenes destacadas.

El bloque Fondo

Como ya hemos comentado al principio de esta entrada, la nueva versión del editor de Gutenberg nos viene con un bloque Fondo con gran diversidad de opciones.

Al crear un nuevo bloque y seleccionar que es de tipo Fondo, nos aparecen las opciones de arrastrar una imagen (también puede ser una imagen animada), o de subir una nueva o seleccionarla desde la biblioteca de medios.

Creación de un nuevo bloque Fondo.
Creación de un nuevo bloque Fondo.

Una vez subida y seleccionada la imagen, el bloque fondo nos permite personalizar bastantes propiedades:

Personalización del bloque fondo.
Tras insertar una imagen, dispones de diversas opciones para personalizar el bloque fondo.

Como ves en la imagen anterior, la alineación puede ser como la de cualquier otra imagen: izquierda, centrada, derecha, más ancha u ocupando todo el ancho de la entrada.

Puedes ajustar el centro de la imagen de fondo, y añadirle un filtro superpuesto del color y nivel de opacidad que quieras. Aquí te muestro tres distintos ejemplos.

Curso de creación de contenidos con el editor de bloques Gutenberg

En la imagen anterior la imagen del bloque fondo no tiene ningún tipo de filtro aplicado.

Curso de creación de contenidos con el editor de bloques Gutenberg

La anterior imagen del bloque fondo incluye un filtro azul con una opacidad del 50%.

Curso de creación de contenidos con el editor de bloques Gutenberg

A la imagen anterior se le ha aplicado un filtro rojo con una opacidad del 100% de tal forma que no se ve la imagen seleccionada.

En una imagen de fondo también puedes indicar donde quieres que se focalice el centro de la imagen:

Además en las imágenes de tipo fondo puedes añadirle párrafos, encabezados y botones o cualquier combinación de todos ellos creando el diseño que más te guste.

No te esperes hasta Navidad.
¡Apúntate, ya al curso de
Creación de contenidos con Gutenberg!

Como ves, las imágenes de tipo fondo, con la opción de alineación de tipo ancho completo, son particularmente útiles para crear transiciones en páginas o entradas largas. Sólo tienes que pasearte por distintas partes de nuestra web para encontrarte con un montón de ejemplos en los que utilizamos el bloque fondo para crear páginas más atractivas.

Imagen destacada de rawpixel en Unsplash.

2 respuestas a «Diferencias entre el bloque fondo y una imagen destacada de WordPress»

  1. Avatar de Juan Carlos
    Juan Carlos

    Hola, yo estoy intentando usar este bloque de imagen de fondo. Cuando ya he subido la imagen y realizo los ajustes que me interesan, al ver la página, la imagen me ocupa como tres pantallas, y da igual el igual el ajuste que haga, ancho ampliado o ancho completo. Lo he probado con imágenes pequeñas, grandes, ya recortadas a una anchura determinada de pixels, y siempre ocurre que la imagen sale muy ampliada.

    1. Avatar de Antonio Villegas

      Eso es culpa del tema que usas, entiendo. Tendrás que tirar de reglas CSS adicionales para solucionarlo.

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.