• 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 clases de CSS que ayuden a maquetar los bloques del editor de WordPress

Aprende con este tutorial cómo añadir clases CSS personalizadas en el cuerpo tu child theme de Genesis para poder personalizar los bloques del editor.

Los bloques del editor de WordPress ofrecen algunas clases de CSS para poder darles estilo.

Pero, ¿y si estos estilos predefinidos no son suficientes y necesitas algo más específico?

En concreto, las últimas versiones de Genesis Sample (>2.8) han introducido nuevas clases de CSS que permiten un poco más de personalización en los bloques, pensando sobre todo en otorgar estilos diferentes al primer bloque de cada tipo. 

¿Te interesa aplicar esa mejora a cualquier otro child theme de Genesis?

Aquí tienes cómo hacerlo:

Snippet para agregar clases de CSS que ayudan a dar estilos a los bloques del editor

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 otorga clases CSS al cuerpo:

  • Si no tiene bloques > has-no-blocks
  • Al primer bloque de cada tipo > first-block- + nombre del bloque
  • Al primer bloque de ancho amplio o completo > first-block-align- + alignwide o alignfull.

Esto te permite aplicar estilos específicos para estos tres escenarios y, de esta forma, personalizar de forma más granular los bloques de WordPress.

Puedes modificar el nombre de la función para adecuarlo al del child theme de Genesis donde quieras aplicarlo.

Por ejemplo, si lo quieres aplicarlo al tema Academy Pro sustituye genesis_sample_blocks_body_classes por academy_pro_blocks_body_classes.

Conclusiones

Genesis Sample (>2.8) integra unas clases de CSS muy interesantes para personalizar aún más los bloques del editor de WordPress.

¿Quieres adaptar a tu child theme de Genesis de la misma forma? Ahora ya sabes cómo. 😉

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.

CSS Entrada Genesis Framework PHP WordPress

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?