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).
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
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.
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.
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.
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.
Y en la opción Colores verás las distintas opciones que tienes.
Por defecto, tienes el filtro de color azul que has visto en la imagen anterior.
Pero tienes la opción de seleccionar que no se aplique ningún filtro a las imágenes destacadas.
O personalizar el color primario de filtro que quieres que se aplique a la imagen destacada:
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.
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
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.
Una vez subida y seleccionada la imagen, el bloque fondo nos permite personalizar bastantes propiedades:
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.
Deja una respuesta