Veamos como añadir un layout personalizado en Genesis con código y sobre todo qué hacer con él.
En Genesis Framework por defecto, tenemos 5 layouts (como máximo) donde elegir. En la mayoría de los casos, dos de ellas están deshabilitadas. En la mayoría de casos es debido a que las webs con dos barras laterales son casi exclusivas a algunos diseños muy específicos para prensa digital y algún otro nicho.
Pero, ¿Sabías que puedes crear la tuya propia? Es decir, una nueva opción de layout que podrás elegir con la libertad con la que eliges cualquier otra del propio Genesis. Es decir, en cualquier página, categoría, post, etc…
Los pasos son dos, si no contamos el CSS necesario para dar forma a esa nueva esructura. El primero crear, o más bien regsitrar ese layout o estructura. El segundo, definir en otra función el efecto que tendrá cuando esa nueva opción de layout sea habilitada.
Nuevo layout de contenido centrado
En mi caso he elegido crear una opción como la que traen los child themes Business Pro y Studio Pro. Además de la opción de full-width o ancho completo, trae una segunda opción de Contenido centrado. No es más que un layout sin barras laterales, en la que el contenido queda centrado con un ancho limitado.
Te dejo una captura de ejemplo, de como quedaría en theme que estoy desarrollando.
Mientras que en la opción de full-width o ancho completo hay una clara direcencia.
La primera función: Registro de layout
Veamos como implementarlo. Al final del archivo functions.php añadimos este snippet de código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Con esta función, Genesis añadirá automáticamente, cuando tengamos el layout seleccionado, una clase al elemento body del HTML con el nombre de registro, en este caso narrow-content.
Segunda función: Eliminamos los sidebars.
Muy bien, ya la hemos registrado, pero aún queda ver que queremos que ocurra cuando esta nuevo layout esté habilitado. Vamos a ver cómo conseguimos ese contenido centrado.
Copia y pega este snippet justo debajo del anterior en el archivo functions.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Lo que queremos crear en un layout de contenido centrado más estrecho que el full-width, así que no necesitamos las barras laterales.
El siguiente paso es dar estilos para conseguir centrar el contenido. Pega este código CSS al final de tu style.css.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusiones
Hay muchas posibilidades a la hora de mostrar el resultado de ese nuevo layout. También podríamos aplicar un template al contenido. Esto nos daría la libertad de hacer lo que queramos. Incluir contenido, darle formato, mostrar un CPT, un loop personalizado, etc…
Lo mejor de todo es que esas opciones de layout están para casi todo tipo de contenido en Genesis Framework.
Ya sabes para cualquier duda, puedes dejar un comentario en el formulario de abajo ;).