Aprende en este tutorial a crear un nuevo diseño de ancho completo pero más estrecho en cualquier child theme de Genesis Framework mediante código.
Genesis ofrece 6 modelos de plantilla distintos que combinan el contenido con las sidebars primaria y secundaria.
En la mayoría de ocasiones no los utilizas todos, por eso en Código Genesis tienes varios tutoriales para eliminar los diseños que no necesitas.
Pero a veces te puede interesar añadir un diseño personalizado.
¿Un ejemplo?
Algunos child themes de Genesis, como Corporate Pro (SEO Themes) o Mai Lifestyle Pro (Mai Themes), ofrecen un diseño sin barras laterales pero con el contenido más estrecho.
Algo así:
¿Quieres agregar este diseño personalizado de contenido más estrecho a cualquier otro child theme de Genesis?
Sigue leyendo. 😉
Pasos para crear un diseño personalizado de contenido estrecho en Genesis
1. Registra un nuevo diseño de plantilla
Añade el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 811 snippets de esta web,
identifícate o suscríbete aquí.
Con este snippet, por un lado registras un nuevo diseño llamado «Contenido estrecho», y por otro le indicas que tenga estructura de ancho completo, es decir, sin barras laterales.
Por supuesto, puedes darle el nombre que tú prefieras modificando el código anterior.
A partir de este momento, además de los diseños soportados por tu child theme, también te aparecerá el de «Contenido estrecho» (o como lo hayas llamado).
Podrás seleccionarlo tanto desde el personalizador de WordPress cómo desde la barra lateral del editor de bloques, en la pestaña de Genesis:
Ahora solo te falta el último paso para que luzca cómo quieres.
2. Da estilos al nuevo diseño de plantilla
Añade este fragmento de código al final del fichero style.css:
Para ver este código y los otros 811 snippets de esta web,
identifícate o suscríbete aquí.
Con esto consigues que el contenido de la entrada ocupe un poco menos del 65% en pantallas de más de 960px de ancho.
De nuevo, te invito a modificar tanto el porcentaje como a partir de qué resolución te interesa que se aplique.
Voilà!
Un diseño 100% a tu gusto. 😉
Conclusiones
¿Quieres crear un diseño de ancho completo pero más estrecho en Genesis Framework? Ahora ya sabes cómo hacerlo.
Si tienes alguna duda sobre este tutorial, déjala en los comentarios.
¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.
Todo ventajas de ser suscriptor.
