Aunque ya sabrás que no me gusta usar el editor de bloques de WordPress para las entradas de blog, por otra parte estoy encantado de que – por fin – haya un maquetador nativo para WordPress, de modo que no sea imprescindible instalar un plugin o tema adicional para poder diseñar fantásticas páginas de aterrizaje o de inicio.
Y dentro del editor de WordPress hay bloques que tienen un potencial enorme, y el que más se parece a lo que habitualmente más se busca en los maquetadores es el bloque de fondo, que tiene unas posibilidades casi infinitas.
En esta guía vamos a ver muchas de las funcionalidades que puedes encontrar en el bloque de fondo, y seguro que alguna te sorprenderá.
¿Qué es realmente el bloque de fondo?
Me gusta ver al bloque de fondo más como un contenedor de otros bloques que como un simple bloque, pues su potencial se desata precisamente cuando lo percibes, y usas, de este modo, como un contenedor de otros bloques.
A primera vista parece simplemente un bloque al que puedes aplicar alguno de los colores de la paleta activa por defecto, o como mucho añadirle una imagen o vídeo, como indica, con un texto superpuesto.
Y eso es lo que parece cuando haces caso a las indicaciones por defecto.
Si no investigas más, tienes lo anterior, un bloque de fondo al que puedes configurar como de color, imagen o vídeo de fondo, y por defecto con un bloque interior de párrafo, que sería el texto superpuesto.
Está bien, es un recurso muy utilizado, pero limitado, al menos aparentemente.
El bloque interior
La magia empieza cuando te das cuenta de que ese bloque interno, de párrafo, es solo una idea, una sugerencia, pero que en realidad puedes cambiarlo por cualquier otro, añadir más bloques, lo que quieras, siempre dentro (sobre) el fondo elegido.
Puedes, para empezar, sustituir el bloque de párrafo por un bloque de encabezado, para poder aplicar estilos por defecto del tema y, lo mejor de todo, si olvidas que estás dentro de un bloque de fondo, te darás cuenta de que no solo puedes sustituir el bloque de párrafo por defecto por cualquier otro, sino que también puedes añadir otros bloques antes y después del anterior.
Fíjate tú qué bobada, pero con este simple cambio de perspectiva – olvidarse de que estás dentro de un bloque de fondo – ya puedes empezar a maquetar a tu gusto, sin límite alguno más allá del tamaño del fondo, y ni siquiera eso, como veremos más adelante.
Pero, de momento, podríamos añadir algunos bloques, antes y después…
¿A que ya parece otra cosa? Casi tendríamos el típico elemento «hero» o a pantalla completa, tan habituales en montones de webs actuales. Solo le faltarían algunos ajustes…
Bloque de fondo a pantalla completa o hero
Aunque ya te habrás dado cuenta de que, a medida que añades bloques, el bloque de fondo se va ampliando verticalmente para darles espacio, si haces una vista previa comprobarás que no ocupa la pantalla completa, o primer pantallazo de tu web.
Estarás conmigo que le faltan y le sobran cosas ¿verdad?
Pues tiene fácil solución, solo hay que hacer 2 clics:
- Altura completa
- Ancho completo
En esta capturas tienes dónde hacer estos dos clics…
El resultado, visto en la página, ya es notable…
Y lo mejor del todo es que la altura y ancho completo son totalmente adaptables, a distintos tamaños de dispositivos.
Efecto de paralaje o parallax en el bloque de fondo
Un efecto que seguro que vas a querer utilizar en algún momento será el de paralaje, o parallax, ese que hace que los elementos (bloques) se muevan sobre el fondo, que tanto gusta, y no hay nada más fácil.
Solo tienes que seleccionar el bloque de fondo y, en la barra lateral de ajustes, activar la característica denominada «Fondo fijo».
Bloque de fondo a pantalla completa con vídeo
No haría ni falta explicártelo, de puro fácil, pues simplemente tienes que cargar como medio del bloque de fondo un vídeo subido en vez de una imagen o color.
Magia con el bloque de fondo
A partir de lo que hemos visto, de los conceptos básicos de cómo funciona el bloque de fondo y sus posibilidades, se te pueden ocurrir montones de virguerías, el límite es tu imaginación y experimentación.
Alineando con columnas
Puedes, por ejemplo, alinear botones a la derecha usando el comodín del bloque de columnas, uno de los bloques que más usarás a la hora de maquetar prácticamente cualquier página.
En el siguiente ejemplo usaremos un bloque de columnas para alinear el texto y los botones a la derecha, dejando la columna de la izquierda vacía. Simplemente he añadido un bloque de columnas encima del separador y luego he movido el resto de bloques dentro de la columna derecha, dejando vacía la otra.
Bloque de fondo dentro de bloque de fondo
Lo que igual no habías imaginado es que también podrías meter un bloque de fondo, dentro de un bloque de fondo, pero ¿para qué?
Pues, por ejemplo, para crear efectos tan chulos como el siguiente…
Que queda realmente bien.
El truco está en que el bloque de fondo interno tenga parte que sea transparente, y activar el fondo fijo en el bloque de fondo principal, el resto es cuestión de acertar con la imagen y, si acaso, pequeños ajustes posteriores de diseño.
Varios bloques de fondo seguidos … con el mismo fondo
Otro efecto muy chulo es diseñar varias secciones a pantalla completa mediante bloques de fondo, pero usando el mismo fondo (imagen o vídeo), lo que resulta en un efecto realmente curioso.
El segundo bloque de fondo está creado así:
- Misma imagen de fondo pero mayor opacidad de superposición, para oscurecerlo un poco al hacer scroll
- Bloque de medios y texto
- Bloque de botones
El resultado es este…
¿Pillas la idea?
Lo que espero que hayas captado es la cantidad de posibilidades que ofrece el bloque de fondo nativo del editor de WordPress a la hora de maquetar y diseñar todo tipo de páginas para tu web, y así evitar que tengas que instalar plugins de maquetación para conseguir ofrecer un sitio web de aspecto totalmente profesional.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
