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
(4 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.
Gracias por la ayuda, me ha servido un montón, solo que me ha descolocado las entradas 🙁
Los textos salen de los márgenes por la izquierda.
https://commspromerits.wpcomstaging.com/grado-en-psicologia/
¿Cómo podría arreglar eso?
Mil gracias.
Saludos.
Hola, el ancho completo sólo es válido cuando tu contenedor no tiene barra lateral ya que de otra forma no tiene sentido, en tu caso tendrías que quitar la barra lateral.
Estimados, como puedo eliminar el espacio que se crea entre bloques, necesito que al poner una imagen quede totalmente junta con la imagen del bloque de más bajo.
Debe ser algo que puedes corregir con CSS, revisa los márgenes de la imagen o del contenedor de la imagen, tendrían que estar establecidos a 0, lo mismo para los paddings.
Hola Jhon, gracias por la solución, me funciona pero solo para lo bloques de imagenes (wp-block-image alignfull size-full) para el resto de bloques no, por ejemplo un fondo con degradado (wp-block-cover alignfull has-background-dim), Se asigna la clase alignfull, carga el css, pero no tiene efecto. ¿Alguna idea?
Hola, posiblemente tengas que aplicar estilos adicionales, envían la url exacta de tu sitio en donde aparece eso que comentas.
hola Jhon, como estas. Realmente eres genial explicando. mi theme no acepta el full size en las fotos. por supuesto que segui los pasos y copie los codigos en el child theme. lo maximo que logre fue con el bloque background que trae gutemberg. Esto si bien aumenta un poco el ancho de la imagen, me desordena en el post cuando lo estoy editando. cuando elijo el tamaño de ancho completo, la imagen se pega contra la izquierda. en fin. te dejo el enlace. quizas solo sea un poco mas de codigo. solo me interesan las imágenes poder ponerlas algunas en ancho completo. Gracias!
Hola, depende de la estructura de tu theme, prueba agregando el siguiente código al menos las imágenes se verán más anchas:
Hola Jhon, genial tus explicaciones.
Quería preguntarte si se puede poner el ancho completo en las páginas y un ancho diferente en las páginas de producto.
Tengo el The7 theme y wp Bakery.
Modifiqué la Apariencia de 1250px a 1500px pero no me gusta como se ven los productos y ahora por más que lo reduzco a 1250 de nuevo, no me hace caso. Alguna sugerencia, por favor?
Muchas gracias.
Hola, creo que más que todo sería una modificación CSS que tendrías que hacer para las páginas de productos, definiendo un ancho máximo, por ejemplo en tu sitio con el siguiente código CSS: