• 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

Añadir una clase CSS al conjunto de entradas en Genesis

Aprende con este tutorial a introducir una clase CSS personalizada que envuelva al conjunto de entradas en Genesis Framework mediante código.

Si quieres jugar con la forma en que se muestran las entradas, la mejor solución es crear una clase CSS propia que las contenga a todas.

Al crear un contenedor (div) que las envuelva puedes aprovecharte de CSS flexbox o grid para personalizar por completo su diseño.

De hecho, ya has usado esta técnica si has ejecutado alguno de los siguientes tutoriales para mostrar en formato rejilla:

  • Los post en el blog.
  • Las páginas de archivo.
  • O los resultados de búsqueda.

¿Te interesa? Entonces, usa el siguiente código.

Snippet para insertar una clase CSS personalizada que envuelva las entradas de Genesis

Añade la siguiente línea en functions.php:

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

Este fragmento utilizas el filtro genesis_before_while de Genesis para introducir un div con la clase CSS «.entry-wrapper» . Esto te permite crear un «envoltorio» para maquetar de forma específica el conjunto de entradas.

Conclusiones

Agregar una clase CSS personalizada que incluya el conjunto de entradas puede resultar muy útil para maquetarlas tal y como deseas.

Y ahora ya sabes cómo hacerlo con un simple snippet de código. 😉

¿Tienes alguna pregunta o quieres darme una sugerencia para próximos tutoriales de Genesis Framework? Cuéntamela en los comentarios (opción exclusiva para suscriptores).

CSS 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?