Una situación muy fecuente durante la maquetación del contenido es que necesitamos realizar modificaciones puntuales al diseño de la página o entrada con la que estamos trabajando. Los maquetadores visuales como Thrive Architect y Elementor nos permiten hacer la mayor parte del trabajo, pero muchas veces un pequeño ajuste manual es necesario.
Casi todos los temas de WordPress permiten añadir nuestro propio código CSS, pero esta es una opción global. Lo ideal es que dicho código se cargue únicamente en la página o entrada que los va a utilizar. Así además de lograr el resultado deseado, nuestra página será mas pequeña y cargará más rápido, por otra parte evitamos efectos colaterales que afecten al diseño del resto del contenido
Thrive Architect ya incorpora esta opción. Al acceder a la configuración, vermos una opción del menu que nos abre una ventana para añadir nuestro código CSS, el cual se cargará solo en esa página o entrada.
La versión gratuita de Elementor no tiene esa funcionalidad, aunque Elementor Pro si lo hace. ¿Qué podemos hacer entonces?
Diseño personalizado con CSS Plus
La solución que he encontrado es CSS Plus. Un plugin gratuito que podemos descargar desde el repositorio oficial de Wordpres.
Es un plugin ligero, del tipo activar y listo. Una vez que lo hayamos activado, tendremos a nuestra disposición un editor de CSS en nuestras páginas y entradas.
Es un editor especializado, resalta la síntaxis y nos evitará cometer errores y que comprime el contenido automaticamente.
Como nuestro CSS se cargará solo en la página que lo incluya, no tendremos que usar selectores complicados o crear identificadores específicos. En la imagen se modifica el espaciado entre los elementos de las listas para una página, mientras que el resto del contenido usará lo especificado en el tema activo.
Como utilizar CSS Plus
Todos los navegadores modernos, la opción de inspeccionar el código HTML de la página visualizada en pantalla. En Chrome, por ejemplo, accedemos mediante CTR+Mayus+I o haciendo click con el botón derecho y seleccionando Inspeccionar.
Veremos el código HTML y los estilos asociados correspondiente al elemento seleccionado:
Modificamos el CSS hasta que esté a nuestro gusto y luego copiamos nuestras modificaciones en el editor de CSS Plus. Cuando publiquemos nuestro contenido, veremos nuestras modificaciones activas. Tan simple como eso.
Conclusiones
CSS Plus es un plugin gratuito, que nos ahorrará mucho tiempo y trabajo en el diseño de nuestra web y que en mi opinión merece estar entre las herramientas recomendadas. Podemos utilizarlo con cualquier tema y plugin.
