En este post os traigo una recopilación de plugin editores de CSS visuales para WordPress, que sirven para poder modificar código css de los temas de WordPress mediante interfaces fáciles y opciones sencillas a golpe de clics.

Para el usuario medio sin conocimientos de Css este tipo de editor css le solucionaran muchos dolores de cabeza cuando quieren modificar parte de sus plantillas y a los desarrolladores les ayudara a generar el código más rápido.

Qué es el CSS

Css “Cascading Stylesheets” (Hojas de estilo en cascada) es un tipo de código utilizado en la creación de páginas web.

Se utiliza para crear parte del estilo visual de los elementos y contenido que componen una página web.

Por ejemplo:

• Definir la tipografía y los colores de un texto.
• Determinar la posición de los elementos.
• Dar márgenes, relleno o bordes para los elementos.
• Definir la altura y la anchura.
• Crear el fondo de la web.
• Ocultar elementos.
• Otras muchas cosas.

Una de las ventajas de este código es poder dar un estilo al mismo tipo de elemento de forma sencilla. Por ejemplo, podemos dar el mismo formato a todos los títulos h1 de los post, con una sola línea de este código.

Antiguamente, el estilo se creaba íntegramente con etiquetas HTML para cada elemento, pero os podéis imaginar de lo tedioso que puede llegar a ser.

Temas de WordPress y CSS

En WordPress podemos usar temas que definen el estilo de nuestras páginas web.

Cuando utilizamos temas en WordPress el Css ya está creado y pensado para el tema que hemos elegido.

Muchas plantillas ya cuentan con paneles de control que nos permiten crear estilos personalizados y modificar parte del css a golpe de clic.

Estas plantillas suelen ser las mejores para los usuarios medios, ya que ayudan a una persona sin conocimientos de código a crear una web a su gusto.

Otras plantillas más sencillas (y normalmente más rápidas) no incluyen estas opciones y para editar el CSS tendremos que editar el archivo css correspondiente o crear un tema hijo que herede las propiedades del tema original y modificar el css desde el tema hijo.

Algunos temas también incluyen apartados para introducir css modificado sin tener que crear un tema hijo.

Modificar el css con plugin

Si tu tema no tiene opciones para personalizar los elementos de tu web o no quieres ponerte a crear código css existen plugin para modificar el CSS que pueden ayudarte.

Estos plugin son editores visuales de css que tienen opciones sencillas y varias ventajas para personalizar los elementos:

• Opciones sencillas: mediante botones y una interfaz podemos modificar los elementos.
• Cambios en tiempo real: puedes ver los cambios en tiempo real mientras los estas creando.
• Generan el código: muestran el código creado y podemos copiarlo y pegarlo en nuestro tema hijo o en el apartado de css personalizado de nuestra plantilla.
• Rapidez: se ahorra mucho tiempo cuando queremos generar códigos de personalización sencillos.

Los elementos y opciones más comunes que podemos personalizar con estos plugin editor css son entre otros:

• Personalizar los textos.
• Cambiar la posición de los elementos.
• Cambiar el tamaño de la caja que contiene el elemento.
• Modificar el margen y relleno de las cajas.
• Crear bordes.
• Crear efectos CSS: como sombras, filtros o degradados.
• Crear Animaciones sencillas CSS.

SiteOrigin CSS

SiteOrigin CSS es un plugin con bastantes opciones y controles visuales y además, es gratuito.

Es compatible con todos los temas de WordPress y muy sencillo de utilizar, aunque la interfaz de su editor css es un poco tosca.

Simplemente pulsas en el “ojo” que nos llevará a la parte visual de nuestra web con una interfaz que muestra las opciones para personalizar los elementos.

Podremos elegir con el ratón el elemento a modificar y personalizarlo con las opciones del menú de la izquierda.

Los links de los botones están desactivados por lo que, si queremos navegar entre las páginas en esta interfaz tendremos que pulsar la opción de abajo a la derecha.

Una vez creados los cambios pulsa el botón «tick» de arriba a la izquierda para guardar los cambios.

Para más información visita la web oficial de SiteOrigin.

CSS HERO

Css Hero es un plugin de pago con suscripción anual, pero es una maravilla, tiene muchísimas opciones y es muy completo, con una interfaz sencilla.

Es el plugin de este tipo que más opciones CSS contiene y también tiene otras características muy buenas:

• Vista y personalización para los diferentes dispositivos.
• Historial de cambios.
• Guardar configuraciones propias.
• Animaciones CSS
• Degradados de color CSS

En este editor Css también podemos encontrar “Skins” que son diseños sencillos ya creados que nos ayudan a personalizar el tema más rápido.

Lo único malo es que tiene tantas opciones que te puedes perder si no sabes lo que estás haciendo.

Cuenta con documentación y vídeo tutoriales en inglés, así que es un plugin para echarle unas horas de aprendizaje.

Es compatible con casi todos los temas, constructores visuales y plugin, aunque en algunos casos no funcionan todas las opciones avanzadas.

Puedes probar la demo en su página web y ver cómo se comporta con multitud de temas y plugin entre ellos, Genesis, Divi, X Theme, Avada, Beaver Builder, Revolution Slider, entre otros.

¡Venga, trastea un rato con el plugin y dime qué te parece en los comentarios!

CSS Hero Animator

CSS Hero Animator es una versión del plugin anterior pero únicamente sirve para crear animaciones CSS.

No cuenta con demasiadas animaciones pero es gratuito.

Es muy útil cuando quieres crear alguna animación ocasional en alguna página.

Por ejemplo, si quieres que una imagen rote al mostrarse o que un botón se agite para llamar la atención.

Yellow Pencil Visual Style Editor

Yellow Pencil Visual Style Editor es un plugin para editar el css visualmente en WordPress. Es una mezcla entre los anteriores pero tiene sus ventajas y sus inconvenientes.

Es de pago, pero a diferencia de Css Hero la licencia es de pago único de por vida con las actualizaciones posteriores incluidas.

La ventaja que más me ha gustado es su interfaz Drag And Drop con la que podemos cambiar la posición, el margen, el alto y el ancho del elemento arrastrando con el ratón. ¡Una maravilla!

Tiene entre otras cosas:

• Botón de deshacer y rehacer.
• Vista esquemática de los elementos.
• Versión responsive.
• Regla de pixeles.
• Filtros css para dar opacidad, brillo, saturación, brillo a los elementos.

No tiene tantas opciones de personalización como Css Hero, pero su interfaz es más fácil de utilizar.

Consejo

Si no quieres tener el plugin siempre instalado genera las personalizaciones que deseas con estos plugin, copia el código que generan ya que lo muestran en sus opciones y pégalo en tu tema hijo o en la caja de css personalizado de tu tema.

Desinstala el plugin de personalización de CSS y vive la vida loca.

Conclusión

Este tipo de herramientas visuales son una auténtica maravilla.

Para los usuarios medios sin conocimientos de CSS pueden ser una gran solución para poder personalizar los temas.

Para desarrolladores también pueden ser de gran utilidad, ya que detectar elementos y sus clases puede ser tedioso y utilizar estos plugin es mucho más rápido que pelearse con el código.

También  son buenas herramientas para la comunidad de WordPress, porque transforman algo que sigue siendo técnico y lo convierten en algo muy fácil.

Este tipo de editores visuales son lo que piden los usuarios sin conocimientos para crear sus web de manera muy sencilla y así se contribuye a que más personas utilicen WordPress.

Y además cubren algunas de las carencias de los temas, como por ejemplo la personalización del estilo de la barra lateral y footer, donde la mayoría de temas no tienen opciones sencillas para personalizar estos elementos.