Aprende con este tutorial a introducir una clase CSS personalizada a una página concreta en cualquier child theme de Genesis Framework mediante código.
WordPress ofrece varias clases CSS para ayudar a maquetar algunas páginas, por ejemplo:
- .archive
- .single
- .single-portfolio
- .post-type-archive-portfolio
Pero, ¿y si estas clases predefinidas no son suficientes y necesitas algo más específico?
En este caso, la mejor solución es crear una clase CSS propia para aplicar estilos determinados solo a una página.
¿Te interesa? Entonces, usa el siguiente código.
Snippet para insertar una clase CSS personalizada en una página de Genesis
Añade la siguiente línea en functions.php:
Para ver este código y los otros 777 snippets de esta web,
identifícate o suscríbete aquí.
Este fragmento te permite usar el selector CSS «.contacto» para aplicar estilos específicos a la sección de contacto. Por supuesto, puedes conseguir el mismo efecto en cualquier otra.
Es más, también tienes la posibilidad de utilizar la ID en vez del nombre para asegurarte de que no se ve afectada si cambias el título.
Para ver este código y los otros 777 snippets de esta web,
identifícate o suscríbete aquí.
¿No sabes cuál es? Descubre aquí cómo localizar la ID de tus páginas.
Conclusiones
Introducir una clase CSS personalizada en una página concreta puede resultar muy útil para maquetarla 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).
