Cómo añadir estilos de ancho amplio y ancho completo a bloques WordPress

El editor de bloques de WordPress, también conocido como Gutenberg, ha cambiado el modo en el que crear contenido con nuestro querido WordPress.

Pero también ha abierto nuevas posibilidades, como todo cambio.

Si hablamos de estilos, uno de los más interesantes es la posibilidad de añadir bloques en formato de «ancho amplio» o «ancho completo» a una página o entrada.

Esta característica permite a un bloque del editor romper el ancho por defecto del contenido de un tema, que no es cosa pequeña, y es algo que era prácticamente imposible con el editor clásico.

Y luego están las enormes posibilidades de diseño que ofrecen los bloques con ancho amplio o ancho completo, como por ejemplo crear nuevas secciones de página con un fondo a ancho completo con un texto o imagen superpuesto, lo más parecido a los famosos elementos Hero de los temas y maquetadores modernos.

Y solo hay un requisito: Tu tema tiene que ser compatible con bloques anchos.

Afortunadamente es algo bastante fácil de hacer, así que aquí  te traigo  un rápido tutorial sobre cómo añadir la compatibilidad con bloques conn ancho amplio y completo a tu tema WordPress, y de paso de cómo aplicar estilo a los bloques mediante CSS.

Añadir la compatibilidad del tema

Lo primero que tenemos que hacer es añadir  una única línea de código al archivo functions.php del tema activo.

Modifícalo con tu editor favorito, lo encontrarás en  /wp-content/themes/tu-tema/ (¿hace falta recordar que debes cambiar lo de «tu-tema» por el nombre de la carpeta de tu tema activo?. Lego copia y pega el siguiente código PHP:

Guarda los cambios.

Este pequeño código le indica al tema que quieres bloques con anchos amplios y completos. Sí, todo en esa simple línea de código.

Ahora, para comprobar que funciona, abre el editor de WordPress y comprueba si algunos bloques (fondo, imagen, vídeo, etc.) tienen las nuevas opciones de alineación llamadas «Ancho amplio» y «Ancho completo».

Estilos básicos en los bloques

Ahora que ya tenemos el tema compatible con los estilos de ancho amplio y completo tocaría darle un poco de estilo.

Hay muchas técnicas y formas de hacerlo, aquí tienes un ejemplo:

Date cuenta de que en el ejemplo estoy usando una media query de CSS solo para integrar este estilo cuando el tamaño de pantalla sea de 950 píxeles o más ancho.

Esto es debido a que normalmente no es  necesario este tipo de efecto en pantallas más pequeñas.

Además, en este caso he usado los mismos estilos para ambos anchos de bloque, aunque es totalmente posible aplicarles estilos diferentes para que cada ancho se muestre de manera diferente en la web.

También te debo avisar de un pequeño inconveniente, y es que en algunos diseños al usar esta técnica se verá una barra de desplazamiento horizontal (si no lo digo Ana me mata).

Si fuera el caso añade el siguiente CSS al elemento body:

¿Funciona?

Pues claro, y es uno de los recursos que más van a marcar diferencias en el inmediato futuro de WordPress, pues con este sencillo campo te adentras en el mundo, hasta ahora exclusivo, de los maquetadores.

Desde el momento en el que añadimos a los bloques la posibilidad de saltarse el ancho del contenido estándar del tema y aplicar anchos amplios y completos a los bloques, entramos directamente en una nueva fase de diseño sin salir del editor de WordPress.

Así, podrás crear fácilmente bloques de vídeo a ancho completo…

Y luego, cuando estén publicados los cambios, el bloque se verá como queríamos, ocupando el bloque todo el ancho de la página, mientras que el resto del contenido sigue el ancho predefinido del tema.

Y todo lo hemos conseguido simplemente con una única línea de código en el archivo functions.php  del tema y luego algo de estilo CSS, lo mínimo.

Y a pesar de este mínimo esfuerzo se nos abre un mundo de oportunidades de cosas que hacer con el diseño de nuestra web.

Si luego seguimos añadiendo CSS o nos centramos en aplicar estilos a bloques específicos, tendremos un enorme arsenal de posibilidades de diseño en nuestras manos.

Al menos de momento, en una instalación por defecto de WordPress, Gutenberg no ofrece todas las virguerías que encontramos en los maquetadores visuales, pero solo con añadir anchos amplios y completos entramos de cabeza en ese territorio.

Se acabaron los tiempos en que la estructura del tema limitaba tu capacidad de diseño desde el editor, y esto hará que WordPress sea más fácil para todos, especialmente para los nuevos usuarios, que ya no tendrán que decidir a la hora de diseñar el aspecto de sus páginas entre…

  • Cambiar de tema
  • Cambiar o añadir CSS
  • Usar un maquetador

Desde el primer momento el mismo editor de WordPress ya ofrece oportunidades de diseño que le permiten crear las tan populares secciones de ancho completo, algo que pronto todos los temas incorporarán, y sino aquí has aprendido cómo añadirle tú mismo esta funcionalidad a tu tema.

¿Quieres seguir aprendiendo?

Si te has animado y quieres seguir personalizando tu tema y sus estilos aquí te dejo un par de artículos de rabiosa actualidad:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado es un apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido