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 2063 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=editO utilizando el inspector del navegador web:
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).
