• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Ocupar el ancho completo de página en temas de Genesis de AsiThemes

Aprende en este tutorial cómo dar un diseño que ocupe el ancho completo en cualquier child theme de Genesis de AsiThemes mediante código.

A raíz del tutorial sobre cómo forzar el diseño de ancho completo en Genesis Framework, Ester, una suscriptora, me dijo que no conseguía el efecto deseado en el N Theme de AsiThemes.

Me sorprendió, porque ninguno de los temas de AsiThemes utiliza la barra lateral. Es decir, todos usan la plantilla de ancho completo.

Pero al recibir su segunda respuesta entendí lo que estaba pasando.

Ella quería que el contenido ocupara todo el ancho y para ello necesitas 2 cosas:

  • Usar una plantilla sin barras laterales mediante PHP.
  • Ajustar el diseño para que ocupe todo el ancho con CSS.

Si la primera ya viene por defecto en los temas de AsiThemes, ¿te imaginas qué faltaba para conseguir su objetivo? 😉

¿Tú también quieres que el contenido ocupe el ancho completo en child themes de AsiThemes?

Aquí tienes cómo conseguirlo:

Snippet para que el contenido abarque todo el ancho de página en AsiThemes

Añade este fragmento al final del fichero style.css:

Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.

Con este fragmento de código consigues que el ancho máximo de la página elegida no se restrinja a 700px (medida por defecto) sino que ocupe todo el ancho.

En este caso, la página elegida tiene el ID 83, por eso usas el selector .page-id-83. Pero puedes seleccionar la que quieras, ¡faltaría más! 😉

Recuerda que puedes saber el ID examinando la URL cuando editas la página:

http://codigogenesis.dav/wp-admin/post.php?post=83&action=edit

O utilizando el inspector del navegador web:

Inspector del navegador web muestra las clases de la página.

Este tutorial está basado en el N Theme, pero todos los temas de AsiThemes comparten elementos de diseño, por lo que con unas pequeñas modificaciones podrás adaptarlo a otros.

Conclusiones

¿Quieres mostrar una página que ocupe el ancho completo?

Entonces necesitas una plantilla de ancho completo (valga la redundancia) y aplicar los estilos de CSS necesarios.

Y ahora ya sabes cómo hacerlo para temas de AsiThemes.

Si tienes alguna pregunta o quieres darme una sugerencia para próximos tutoriales, déjala en los comentarios (opción exclusiva para suscriptores).

Ancho completo CSS Diseño Genesis Framework N Theme Página

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?