• Ir a navegación principal
  • Ir al contenido principal
Código Genesis

Código Genesis

Tutoriales para Genesis Framework y WordPress

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

Crear un nuevo diseño de «contenido estrecho» sin sidebars en Genesis Framework

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í:

esquema contenido estrecho

¿Quieres agregar este diseño personalizado de contenido más estrecho a cualquier otro child theme de Genesis?

seleccionar diseño nuevo Genesis editor de bloques WordPress
Nuevo diseño de «Contenido estrecho».

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 1239 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:

  • seleccionar diseño nuevo Genesis personalizador de WordPress
  • seleccionar diseño nuevo Genesis editor de bloques WordPress

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 1239 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.

Ancho completo CSS Diseño Genesis Framework PHP

Nahuai Badiola - CEO

Desarrollador web especializado en WordPress y Genesis Framework. Me encanta contribuir a la comunidad de WordPress y Genesis dando charlas en WordCamps, organizando eventos, traduciendo temas y plugins… más sobre mí.

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

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

¿Has olvidado tu contraseña?