Plugins que te ayudan a editar el CSS en WordPress【Top 5】

---

Cuando diseñamos nuestra web con WordPress muchas veces, aunque hayamos seleccionado una buena plantilla o una plantilla que nos gusta, hay ciertas cuestiones de diseño que van más allá de los procesos de edición que te da la plantilla, pero que sin embargo cambiando o modificando el CSS de la plantilla sí lo podrías conseguir.

Lógicamente si eres un diseñador web que tienes conocimientos sobre CSS esto no será un problema para ti. Pero en cambio, si es la primera vez que te enfrentas a esto, quizás antes de meterte en harina necesitas saber qué es el CSS y que existen plugins que te pueden ayudar en esta tarea. .

---

Los 5 mejores plugins para editar el CSS de tu web en WordPress: nuestros recomendados

TABLA DE CONTENIDOS

• Qué es el CSS
• Requisitos previos para editar CSS
• SiteOrigin CSS
• Simple Custom CSS
• CSS Hero
• YellowPencil Visual Customizer
• Modular Custom CSS

---

A menudo la apariencia de nuestra web diseñada en WordPress nos genera preocupaciones, ya que todos queremos que nuestro sitio sea el más bonito y usable para que destaque frente a la competencia. Normalmente para ello escogemos una plantilla, ya sea gratuita o de pago, que se adecúe bien a nuestras necesidades en nuestra web pero incluso la mejor plantilla de todas, va a tener limitaciones en relación con el diseño. Pero esto no es un problema si tienes conocimientos de CSS. Pero qué pasa si no tengo conocimientos.

WordPress también ha pensado en esta serie de usuarios, de hecho se enfoca casi siempre en ese tipo de usuarios y es por ello que existen muchos plugins que pueden ayudarte a editar el CSS sin conocimientos técnicos ni de programación. Y es que WordPress es un CMS pensado especialmente para facilitarte la vida a la hora de diseñar tu web. Si estás en ese proceso, seguro que te interesa conocer nuestras ofertas en Hosting para alojar tu web.

Qué es el CSS

CSS son las siglas de Cascading Style Sheets y es el documento que recoge las reglas de estilo de cualquier web. En el mismo documento, encontrarás la info sobre los colores de tu web, el tamaño de los H1, H2 y demás etiquetas de tamaño de fuentes, tipos de letra, los márgenes y todo lo que engloba al estilo de diseño de un sitio web, creado en HTML.

Se trata de un documento que engloba las características fundamentales de diseño de una web, lo que favorece la limpieza y reducción de código y además tu propia gestión, ya que para cambiar los márgenes de la web solo tendrás que irte a esta hoja de estilos y modificarlos. Esto hará que este cambio se reproduzca en toda la web.

La Wordl Wide Web Consortium (W3C) es la encargada de generar los estándares CSS que se usan en todo el mundo. Los diseñadores web suelen crear esta hoja de estilos con editores de código tipo Notepad ++ o Sublime Text, pero para los menos duchos en la materia, WordPress cuenta con varios plugins que te van a permitar tocar el código CSS sin apenas conocimientos previos.

Requisitos previos para editar CSS

Editando la hoja de estilos CSS de la plantilla, vas a tener multitud de opciones de personalización pero antes de comenzar a cambiar el style.css, debes saber que hay una serie de requisitos que debes tener en cuenta. Lo más recomendable es que ante todo cambio grande que hagas, siempre cuentes con una copia de seguridad previa de tu web. Por si las moscas.

En caso de que vayas a lanzarte a la piscina y quieras editar la hoja de estilos CSS de forma tradicional sin usar ningún plugin, necesitarás crear un child theme de tu propia plantilla. ¿Para qué hacer esto? Para que cuando tengas que actualizar tu tema porque hay una nueva versión, no pierdas todos los cambios de personalización que hagas.

Pero para evitar todo esto, puedes editar el CSS gracias a los plugins que te ofrece WordPress. En el repositorio de WordPress vas a encontrar varios. Como siempre, lo más recomendable será probar varios y quedarte con el que mejor se adapte a tus necesidades. En Axarnet, te recomendamos estos cinco.

SiteOrigin CSS

Con más de 200.000 instalaciones activas se trata de uno de los plugins más populares para edición de CSS del repositorio de WordPress. Con SiteOrigin CSS tendrás un editor visual para cambiar la apariencia de tu web en tiempo real. Enfocado tanto para principiantes como para usuarios más avanzados, aporta controles visuales simples y autocompletado de código que hace que escribir CSS sea más simple y cómodo.

El plugin te da una vista previa de tu web y haciendo clic en el elemento que quieres editar te ayuda a identificar qué selector CSS debes usar. A través de sus controles visuales puedes elegir los estilos, colores y medidas y combinado con la anterior herramienta, tienes los cambios de apariencia en pocos clics.

Para aquellos que les gusta escribir el código directamente, ofrece una función de autocompletado para selectores y para atributos CSS. Se trata de un plugin libre que además ofrece soporte técnico en los foros de SiteOrigin.

Simple Custom CSS

Como el anterior plugin también es bastante popular y cuenta con 200.000 instalaciones activas. Con Simple Custom CSS podrás añadir estilos de CSS personalizados y anular los predeterminados de tu tema. Algo interesante es que los estilos que creas con el plugin se mantienen incluso si cambias de tema, algo que no todos los plugins lo ofrecen.

Cuenta con una interfaz sencilla y como el anterior incluye una vista previa para que puedas ver los cambios introducidos y solucionar posibles incidencias. Lo interesante es que al no añadir funcionalidades innecesarias, apenas afecta al rendimiento de tu web. Esto cuando trabajas con bastantes plugins es muy útil porque tener en funcionamiento varios plugins puede mermar el rendimiento y la WPO de tu sitio web.

CSS Hero

Frente a los otros dos CSS Hero es un plugin de pago que aporta una interfaz muy intuitiva para cambiar el aspecto de tu web. Al ser un plugin de pago, incorpora funcionalidades muy interesantes para cambiar la apariencia de tu sitio. Por ejemplo, destaca el selector de color, para cambiar el fondo de tu web o hacer cualquier cambio de estilo relacionado con los colores. Incorpora también una gran colección de Fuentes de Google para cambiar la tipografía de tu web.

Editar los márgenes de tu sitio será tan fácil como arrastrar el control deslizante y ajustar los márgenes que quieras incluir. Incluye ediciones específicas dependiendo del dispositivo para que puedas personalizar el estilo de móviles y deskop. Una de las cuestiones interesantes que tiene el plugin es que no altera los archivos de tu tema, con lo que si te cansas del estilo o tienes miedo de haber hecho algo y destrozado la web, solo tienes que desinstalar el plugin y el aspecto de tu web volverá a ser el que era previo a usar CSS Hero.

Sobre el precio, ponen a tu disposición diferentes planes, pero el más económico (29 dólares al año) es suficiente para ti en caso de que solo tengas una web.

Visual CSS Style Editor

Como el resto de plugins Visual CSS Style Editor te permite hacer clic en un elemento de tu web y comenzar a editarlo visualmente para cambiar los colores, los tamaños y las fuentes. Incluye más de 60 propiedades diferentes de estilo.

Entre sus funcionalidades destacadas es que te permite editar cualquier página de tu sitio web, incluso la página de login y lo hace de forma sencilla gracias a elementos de arrastrar y soltar. Puedes editar el margen e incluye un historial de deshacer y rehacer.

El plugin incluye una versión pro con más funcionalidades donde podrás encontrar un generador de animaciones y degradados, entre otras cuestiones como el acceso a plantillas de Fondo, imágenes de stock y fuentes de Google.

Modular Custom CSS

Quizás el menos popular de los plugins de la lista que te ofrecemos. Cuenta con más de 900 instalaciones activas, y se trata de un plugin que te aporta lo suficiente para hacer cambios en el estilo de tu web. Los cambios que hagas además con Modular Custom CSS se mantendrán aunque cambies de tema.

Como el resto de plugins, funciona con vista previa online para que puedas ver exactamente cómo se ve tu sitio web tras el cambio de estilo. Además te permite hacer cambios en plantillas que no están activas en ese momento en tu web. Lo que hace es añadir un bloque de customización en el editor de WordPress.

Conclusión

Editar el CSS de tu web puede ser una tarea complicada si no tienes conocimientos técnicos pero en WordPress es más sencilla gracias a los plugins que comentamos en este post. No obstante, si no te ves sobradamente preparado, lo mejor es que acudas a un profesional que te ayude a customizar el estilo de tu web.