En el artículo anterior adaptar un theme WordPress a Gutenberg vimos una forma de dar la funcionalidad de ancho ampliado y ancho completo, sin embargo en este artículo veremos una forma alterna de realizar esto sin modificar la estructura del theme.
Generalidades
La funcionalidad de ancho ampliado y ancho completo lo obtenemos combinando código PHP y código CSS, el ancho ampliado ocupa un poco más del ancho del contenedor, mientras que el ancho completo ocupa la totalidad del ancho del navegador.
Código PHP
Puedes colocar el siguiente código al final de tu archivo functions.php de tu child theme
add_theme_support( 'align-wide' );
Colocando este código obtendremos los botones de ancho ampliado y ancho completo en Gutenberg, tal como se muestra en la siguiente imagen:
Código CSS
Si ya tienes tu theme configurado para mostrar una página en ancho completo, entonces simplemente puedes agregar el siguiente código CSS en el archivo style.css de tu child theme
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
}
.alignwide {
margin: 32px calc(25% - 25vw);
max-width: 100vw;
}
En el código anterior:
- Tenemos dos clases, ambas tienen un código similar, la primera de ellas alignwide especifica un ancho ampliado, la clase alignfull específica un ancho completo.
- Para el ancho completo, los márgenes laterales están dados por el ancho del navegador menos el ancho del contenedor divido entre dos, además como margen superior e inferior tenemos un margen fijo de 32px
- Para el ancho ampliado, los márgenes laterales están dados por el ancho del navegador menos el ancho del contenedor divido entre cuatro, además como margen superior e inferior tenemos un margen fijo de 32px
- Ambas classes tienen un max-width de 100vw que quiere decir que ocupan todo el ancho del navegador
Conclusión
Tal como hemos visto el código CSS nos permite especificar márgenes negativos ampliando el ancho de los bloques que usen ancho ampliado o ancho completo y con esto evitaremos hacer modificaciones a la estructura de los archivos del theme.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Hola. Sí tengo todos los pasos tal cual y aunque la imagen casi cubre todo el ancho de la página, sigue teniendo espacios pequeños a la derecha, a la izquierda y en la parte de arriba, porque quiero que sea un header… ¿Será algo de mi tema? Qué podría hacer para que me imagen sí me quedara cubriendo todo el ancho de la página? Te agradecería muchísimo tu apoyo. Tengo horas tratando de resolverlo y no puedo 🙁
Hola, tendría que ver la url de tu sitio, de manera general es posible que sea algún estilo de tu theme. Si sigues con problemas puedes comunicarte a través del formulario de contacto y enviarme detalles adicionales.
En el editor de la pagina todo funciona ok, pero al verlo en la pagina, no cambia el aspecto. jo-system.com/perfiles dejo el enlace para ver si me puede ayudar, gracias.
Hola, en la url que envías veo que usas Elementor, si usas Elementor deberías usar la funciones de Elementor para establecer el ancho completo de una sección.
Saludos.
Jhon, buenas noches
Requiero de su ayuda: en la url que le envío la imagen destacada se ajusta a la pagina, pero las demás imágenes no lo hacen y quedan con espacio. ¿Qué sugerencia me puedes dar?
De antemano, muchas gracias.
Hola Diego,
Sólo veo una imagen que no ocupa el ancho, podrías corregirlo con el siguiente código:
Saludos.
Hola, estoy probando en una copia local que tengo de mi tema, ya que mi constructor es antiguo WPBakery y quiero pasar a Gutemberg. Si he conseguido que me aparezcan los botones de ancho amplio y ancho completo. He puesto el codigo css en el style.css del tema child. Pero en la visualización de la pagina sigue en ancho normal ¿Me podrían ayudar? Muchas gracias
Ya me funciona, muchisimas gracias, su página es una autentica barbaridad de ayuda y conocimiento
Gracias Jose, qué bueno que lo solucionaste. Saludos.