• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Ancho Ampliado y Ancho Completo en Gutenberg

Ancho Ampliado y Ancho Completo en Gutenberg

Ancho Ampliado y Ancho Completo en Gutenberg

[ 11 junio 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

css funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Diferencia ancho ampliado y ancho completo

 

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:

ancho ampliado y ancho completo botones

Ten en cuenta que aún no veras ningún cambio en el front-end de tu sitio ya que falta aplicar código CSS.

 

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

Los márgenes laterales resultantes generalmente saldrán negativos cuando el ancho del navegador es mayor al ancho del contenedor.
Con este código CSS evitamos hacer modificaciones de estructura a los archivos del theme.

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Adaptar un theme WordPress a Gutenberg Adaptar un theme WordPress a Gutenberg
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Zona de widgets en el contenido de artículos en WordPress Zona de widgets en el contenido de artículos en WordPress
  • Clases CSS por defecto WordPress Estilos CSS por defecto que genera WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando…

Interacciones del lector

Comentarios

  1. Gina Flores

    3 octubre, 2019

    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 🙁

    • Jhon Marreros Guzmán

      4 octubre, 2019

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Únete a DecodeCMS

Recibirás como regalo:

Fundamentos de programación:
Guía base para entender la estructura de WordPress.

Mini curso en video de:
Cómo construir un plugin de entradas populares.

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Cómo internacionalizar un plugin en WordPress

Agregar un Slider al tema Storefront

Personalizar el formulario de login de WordPress

Crear un Widget para el dashboard de WordPress

Recientes

  • Configura el theme Twenty Twenty de WordPress
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Archivo HTML como página de inicio en WordPress
  • Configurar la papelera de WordPress
alojamiento wordpress

© logo decode pie Copyright 2019 | Todos los derechos reservados | Política de Privacidad