11 Mejores plugins para editar y modificar el CSS de tu plantilla WordPress

Actualizado: octubre 2018

En caso de que el aspecto de tu web no te convenza y quieras aprender a cómo editar y modificar el CSS de tu plantilla de WordPress para personalizar tu página, estás en el sitio indicado.

modificar css plantilla wordpress

11 Mejores plugins para editar y modificar el CSS de tu plantilla WordPress
4,8 (95,45%) 22 votes

Ya sea porque los colores CSS de tu plantilla no coinciden con los de tu marca.

El tamaño de la fuente es demasiado grande o pequeña.

O quieres eliminar o modificar una parte de tu web en concreto.

Lo que está claro es que para poder sacar el máximo partido a tu proyecto, es necesario que sepas cómo modificar el CSS de la plantilla de tu WordPress.

Antes de meternos en materia, vamos a ver información básica que necesitas saber antes de aprender cómo editar los archivos y el CSS de tu web en WordPress.

¿Qué es CSS?

CSS son las siglas de “Cascading Style Sheets” que traducido sería algo así como hojas de estilo en cascada.

Es decir, el lenguaje utilizado para dar forma y estilo a cualquier elemento o estructura en las páginas web creadas por HTML.

El lenguaje CSS es desarrollado por la comunidad internacional llamada World Wide Web Consortium (W3C).

Esta comunidad, unida para la creación y desarrollo de especificaciones del lenguaje CSS, se encarga de definir los estándares de CSS usados en todo el mundo.

La aparición de las hojas de estilo en cascada o CSS fue en el año 1996.

En resumen, el código CSS consiste en aplicar estilos visuales (colores, tipos de letra, tamaños etc) a los elementos HTML de una página web (párrafo, lista, pie de página …)

Para escribir código CSS, se suelen usar editores de código, por ejemplo:

Por suerte, los usuarios de WordPress, contamos con varios plugins para añadir CSS y personalizar tu web y editar o modificar tu plantilla con el fin de cambiar el aspecto o incluso la estructura.

Por otro lado, debido precisamente a esas múltiples opciones de plugins de CSS para WordPress, es que a veces resulta difícil saber cuál es el mejor o el que más nos conviene.

Y es por eso que en esta ocasión, os traigo un recopilatorio de los mejores plugins de WordPress para editar y modificar el CSS de tu plantilla WordPress …y además ¡Gratis!

Cómo editar CSS para personalizar una plantilla de WordPress

En la mayoría de ocasiones, es casi imprescindible modificar una plantilla WordPress, sea o no premium para adaptarla a las necesidades de tu proyecto.

Las posibilidades que ofrece la personalización con CSS son casi ilimitadas

editar css plantilla wordpress

Pero por supuesto es necesario saber lo que se está haciendo.

Aunque no es algo especialmente difícil, no todos tenemos el tiempo necesario para aprender los pasos necesarios para aplicar esos cambios en CSS o añadir determinados fragmentos de códigos (snippets) en nuestra web.

Y es que en caso de que nos decidamos a editar el CSS del theme para WordPress que usemos por la via tradicional, es necesario crear un child theme para no perder todos los cambios que personalicemos cuando actualicemos a una nueva versión, descargar un editor de código y subir los cambios mediante FTP.

Eso por no hablar de la peligrosa alternativa que sería editar el archivo style.css directamente desde el panel de administración de WordPress, con el riesgo que supone el no poder deshacer cambios y no poder recuperar el código de los archivos originales.

Mejores plugins para modificar y editar CSS de tu web en WordPress

Para evitar todo esto, y poder editar nuestras plantillas de WordPress con facilidad, una de las mejores soluciones que no requieren de código, crear un child theme o el uso de protocolos FTP es instalar alguno de los siguientes plugins.

Para mí, estos son los mejores plugins para editar y modificar CSS de tu plantilla WordPress.

Quédate hasta el final para ver los mejores plugins de este listado, además de otras opciones para añadir animaciones en CSS y un curso rápido para aprender CSS.

¿Qué mas se puede pedir?

07. Modular Custom CSS

Modular Custom CSS plugin WordPress

Modular Custom CSS tiene más de 1000 instalaciones activas y ofrece una experiencia algo diferente al resto de plugins.

Ya que las funciones de navegación disponibles en este plugin facilitan enormemente la tarea de modificar tu theme de WordPress.

La mayoría de los plugins para personalizar CSS permiten hacer cambios en el tema de WordPress activo.

En el caso de Modular Custom CSS, además, cuenta con la funcionalidad de permitir hacer modificaciones en una plantilla de WordPress que no esté activa o usándose en este momento.

Esta es sin duda la característica más destacable del plugin Modular Custom CSS que lo hace destacar frente al resto.

Probar ahora →

06. TJ Custom CSS

AVISO: Este plugin ya no está actualizado y no ha sido probado con las últimas versiones de WordPress.

TJ Custom CSS plugin WordPress

TJ Custom CSS ha sido desarrollado por uno de los desarrolladores de temas de WordPress Theme Junkie y actualmente cuenta con más de 40.000 instalaciones activas.

Una vez activado TJ Custom CSS permite personalizar el CSS de tu plantilla de WordPress en vivo desde el apartado Apariencia del menú lateral de tu panel de administrador.

Por supuesto, también permite añadir fragmentos de código CSS o escribirlo a mano desde su editor incorporado.

Un aspecto positivo de este plugin es que es bastante ligero y no recarga tu web innecesariamente abusando de los recursos de tu servidor como otros plugins.

Probar ahora →

05. Customizer Custom CSS

Customizer Custom CSS plugin WordPress

Creado por el desarrollador Bijay Yadav, este plugin cuenta con más de 2000 instalaciones activas en estos momentos.

Te sugiero que no te dejes engañar por la primera impresión de este plugin ya que parece menos prometedora de lo que realmente es.

Tal y como indica la descripción de este plugin, Customizer Custom CSS permite sobreescribir fácilmente el CSS del tema de WordPress que estés usando y visualizar esas modificaciones antes de guardar los cambios.

Customizer Custom CSS no requiere configuraciones adicionales y es muy fácil de usar, por lo que no será necesario crear un child theme sólo para editar el CSS de tu web en WordPress.

La forma de uso no es muy diferente de otros plugins. Sólo tienes que ir a Apariencia > Personalizador y verás un nuevo elemento en el menú llamado Custom CSS, donde deberás añadir el código CSS que quieras modificar.

Probar ahora →

04. CSS Plus

CSS Plus plugin WordPress

El plugin CSS Plus ha sido creado por Paulo Calixto y cuenta con más de 10.000 instalaciones activas.

Este plugin cuenta con bastantes características diferenciadoras respecto al resto de opciones que existen en el repositorio oficial de plugins de WordPress.

La más destacada, para bien o para más posiblemente sea que CSS Plus comprime el código que añades para editar el CSS de tu plantilla WordPress, lo comprime, y lo incrusta en línea en el header o cabecera de cada página o post.

Esto tiene varias lecturas. Por una parte, es positivo porque permite personalizar de forma individual cada página o post con su propio código CSS.

Además, es un plugin ideal para añadir el CSS que permita visualizar la parte superior de la página tal y como requiere Google Page Speed Insights.

Por otro lado, esto tiene la parte negativa de que si añades demasiados estilos CSS en línea a tu header.php para modificar tu plantilla de WordPress, puedes correr el riego de conseguir el resultado contrario y ralentizarla en exceso.

Otras de las diferencias y ventajas de este plugin son:

Probar ahora →

03. Advanced CSS Editor

Advanced CSS Editor Plugin WordPress

El plugin Advanced CSS Editor cuenta ya con más de 10.000 instalaciones activas y ha sido creado por Hardeep Asrani, uno de los desarrolladores de la conocida firma de plantillas WordPress Tesla Themes.

Sin duda, tener a una de las casas más conocidas de la industria detrás de este plugin es sinónimo de calidad.

Una de las principales ventajas competitivas de Advanced CSS Editor respecto a otras opciones que sólo permiten añadir o editar el CSS de tu plantilla para WordPress de forma global, es que con este plugin, podrás personalizar el CSS de tu web de forma específica para móviles, tablets, portátiles y ordenadores de sobremesa.

Esto es sin duda una gran funcionalidad, lo único que debes tener en cuenta es que si aplicas algún cambio específico para móviles por ejemplo, a la hora de visualizar dichos cambios, debes reducir la ventana del navegador a la resolución adecuada para ver esos cambios en la vista previa y poder guardarlos después.

Probar ahora →

02. Simple Custom CSS

Simple Custom CSS plugin WordPress

El primer paso para poder editar y añadir el css de la plantilla de tu web, es obviamente instalar y activar el plugin Simple Custom CSS o cualquier otro que elijas de la manera habitual.

Simple Custom CSS cuenta con más de 300.000 instalaciones activas, ha sido creado por John Regan y Danny Van Kooten y es perfectamente compatible con la última versión de WordPress.

Una vez activo, debes ir a la sección Apariencia en el menú lateral del panel de administración de tu web, y clicar en la nueva opción que ha aparecido llamada CSS personalizado.

Una vez dentro, verás lo simple y efectivo que resulta este plugin.

Como su propio nombre indica, es una solución bastante simple, ya que está libre de distracciones, pero a la vez muy potente y efectiva.

Cuenta con diferentes colores para facilitar la escritura de código y además cuenta con la funcionalidad de syntax highlight, que resalta los posibles errores a la hora de escribir el código para detectarlos y solucionarlos rápidamente.

Una vez añadido el código CSS necesario para editar la plantilla de tu theme a tu antojo, tan sólo tienes que darle al botón Actualizar el CSS personalizado e ir a tu sitio web para ver los cambios realizados.

Como hemos comentado al principio, la principal ventaja de este plugin no es sólo que te permita añadir código CSS para personalizar tu web, si no que este código no se perderá con las actualizaciones futuras de tu plantilla, es decir, Simple Custom CSS realiza la misma función que un child theme en este aspecto.

Probar ahora →

01. SiteOrigin CSS

SiteOrigin CSS plugin WordPress

SiteOrigin CSS es uno de los plugins más populares para editar el CSS de las plantillas en WordPress.

Cuenta con más de 200.000 instalaciones activas y ha sido creado (no te lo vas a creer) por SiteOrigin.

Sin duda, la principal ventaja del plugin SiteOrigin CSS son las 2 opciones que ofrece para modificar el CSS de la plantilla de tu WordPress.

Además de incluir el código CSS manualmente como con el resto de plugins, SiteOrigin CSS también permite modificar tu plantilla WordPress de forma visual, seleccionando cada elemento que deseas editar de una forma realmente sencilla y lo mejor de todo, sin necesidad de saber nada de CSS.

Para usar el método visual de este plugin, tan sólo es necesario hacer clic en el elemento del theme de WordPress que queramos modificar con CSS y a continuación, editar los atributos visuales disponibles como texto, diseño colores o tamaño.

En cuanto al método manual, al igual que con el resto de plugins que hemos visto, tan sólo hay que ir a la sección de apariencia en el menú lateral e incluir el código CSS necesario para personalizar nuestra web.

Probar ahora →

Otros plugins para personalizar tu plantilla de WordPress

Ya hemos visto los que para mí son los mejores plugins para personalizar tu web en WordPress mediante código CSS, pero por si no has tenido suficiente, aquí tienes otras opciones menos conocidas:

Simple CSS

La parte positiva de este plugin es que mediante metaboxes permite aplicar ciertos cambios únicamente a determinadas páginas o posts.

Visual CSS Style Editor

No os recomiendo este plugin a no ser que tengáis pensado ampliarlo a la versión premium, ya que es requerida para la mayoría de cambios importantes.

Custom CSS Pro

Este plugin creado por WaspThemes no tiene ninguna funcionalidad especial respecto a los plugins anteriormente citados, pero no por eso no es una opción a tener en cuenta.

Desventajas de los plugins para editar el CSS de los themes de WordPress

La única desventaja que presentan este tipo de plugins, es que es posible que no sea compatible con ciertos temas de WordPress.

Yo aún no he sido capaz de encontrar un sólo tema, del repositorio, premium o creado por mi que no sea compatible con estos plugins, pero según la documentación de la mayoría de ellos, puede darse el caso de que tengan ciertas incompatibilidades.

Por este motivo, si tras aplicar alguna personalización de CSS a tu web, no ves que los cambios se apliquen correctamente y tras asegurarte que el código añadido es correcto, simplemente tendrás que elegir algún otro plugin de este listado.

Animaciones y efectos CSS en WordPress

Animacion css wordpress

Estoy seguro que has visto animaciones o efectos CSS que te han llamado la atención en alguna de las principales páginas webs del momento.

Modificar el CSS de tu plantilla de WordPress está muy bien, pero ¿por qué no ir un paso más allá y añadir estas fantásticas animaciones?

Las animaciones de CSS dentro de una plantilla de WordPress permiten añadir movimiento a imágenes o elementos, o hacer que aparezcan repentinamente desde el lateral, hacer que el contenido cambie automáticamente cuando el usuario hace scroll etc.

Todo esto, añade interés al visitante, así como la posibilidad de destacar las partes más importantes de tu web.

Si te parece interesante, quédate conmigo ya que a continuación vamos a ver un fantástico plugin para añadir animaciones y efectos CSS a tu plantilla de WordPress sin tener conocimientos sobre este lenguaje.

Añadir animaciones CSS a WordPress con el plugin Animate It!

Animate It! Plugin WordPress

Antes de empezar a usar este plugin, obviamente es necesario instalarlo y activarlo como cualquier otro.

Lo encontrarás bajo el nombre de Animate It! en el repositorio oficial de WordPress, y como podrás ver, este plugin creado por eLEOPARD Design Studios, cuenta con más de 40.000 instalaciones activas.

Una vez activo, se puede usar directamente sin necesidad de hacer ninguna configuración directamente desde el panel de Ajustes en el menú de administrador.

Todo lo que tienes que hacer es simplemente crear una nueva entrada o página y en la sección visual del editor de WordPress, encontrarás una nueva herramienta en rojo etiquetada como Animate It!.

Una vez hagas clic en dicho botón, aparecerán las opciones del editor, donde añadir a tu WordPress las animaciones en CSS que desees.

Probar ahora →

Tipos de animación CSS para integrar con WordPress

El plugin Animate It! permite añadir 3 tipos diferentes de animaciones CSS a WordPress:

Entrada

El contenido animado permanecerá en esta página después de moverse.

Salir

El contenido animado saldrá o desaparecerá después de moverlo.

Otras opciones

En este último apartado, podrás personalizar completamente la animación CSS que quieres añadir a tu WordPress.

Estas son las opciones:

Como ya habrás podido imaginar si has instalado el plugin, haciendo clic en el botón de animar al final de la tabla, verás la animación que acabas de crear.

Si estás satisfecho/a con el resultado, sólo tienes que hacer clic en insertar para añadir esa animación de CSS a tu plantilla WordPress.

Con el plugin Animate It! no sólo podrás animar texto si no que también admite imágenes, videos o cualquier cosa que te imagines.

Una vez tengas todo listo, puedes ver el resultado final dándole al botón de previsualizar o directamente publicar o actualizar los cambios si quieres añadirlo directamente a tu web.

Como ves, con este plugin, hacer animaciones de CSS con WordPress es realmente sencillo y no requiere de ningún conocimiento técnico.

Tutorial para editar CSS en WordPress

Como ya hemos visto, las hojas de estilo en cascada (Cascading Style Sheets) permiten modificar la presentación de un documento HTML sin alterar su estructura, facilitando la presentación y mejorando el diseño y aspecto de los elementos HTML.

Para terminar este artículo, os traigo un tutorial básico pero muy completo con las principales

Cómo insertar CSS en HTML

Existen tres formas diferentes de aplicar estilos:

01. En línea: aplicando directamente el atributo style a cualquier elemento HTML:

<p style="font-family:Arial; font-size:14px; color:blue">texto</p>

02. Incrustados: Añadidos en la propia página o archivo HTML / PHP mediante la etiqueta <style> normalmente en la etiqueta <head>

<head>
 <style type="text/css">
  p {font-family: Arial; color: blue; font-size: 14px;}
 </style>
</head>

03. Enlazados: en una hoja de estilos externa, que es un archivo de texto plano con extensión .css que afecta a todos los documentos que lo enlacen.

<head>
 <link rel="stylesheet" type="text/css" href="archivo.css"/>
</head>

Salvo excepciones muy concretas (según el orden en el que se apliquen los estilos), las 3 opciones darán los mismos resultados en cuanto a la personalización de las plantillas de WordPress.

En cuanto a velocidad y optimización, la primera opción es la menos recomendada, la segunda es sólo para añadir pequeñas porciones de CSS, como por ejemplo los estilos responsables de modificar la parte visible de nuestro theme de WordPress sin hacer scroll, consiguiendo así una mayor velocidad de carga.

Por último, se enlaza externamente a los archivos .css que contienen la mayor parte de nuestro código CSS usado para modificar nuestra web.

Cambiar color en CSS

Estilizar listas con CSS

Cambiar el fondo con CSS

Editar Tablas con CSS

Estilos y alineación de textos en CSS

Comentarios en CSS

/* Todo lo que esté dentro de estos símbolos será un comentario y no se visualizará en la web */

/* Es útil para desactivar ciertos estilos o hacer anotaciones sobre el código */

Prioridad al aplicar estilos

Para evitar errores de configuración, cuando se aplican varios estilos CSS diferentes sobre un mismo elemento, estos se sobreescriben según su prioridad.

Es por eso que el CSS recibe el nombre de hojas de estilo en cascada.

De menor a mayor, estos son los factores de los que dependerá qué estilos se aplican:

Selectores CSS

Estos son la mayoría de los selectores existentes en CSS3:

Selector Ejemplo Aplica el estilo a… CSS
.class .intro Todos los elementos que tengan el atributo class=”intro” 1
#id #firstname El elemento que tenga asignado el atributo id=”firstname” 1
elemento p Todos los elementos <p> 1
elemento,elemento div,p Todos los elementos <div> y <p> 1
elemento elemento div p Todos los elementos <p> que se encuentran dentro de
los elementos <div>
1
:link a:link Todos los enlaces no visitados 1
:visited a:visited Todos los enlaces visitados 1
:active a:active Los enlaces cuando se seleccionan 1
:hover a:hover Cuando el puntero del ratón está encima del enlace 1
:first-letter p:first-letter La primera letra de cada elemento <p> 1
:first-line p:first-line La primera línea de cada elemento <p> 1
* * Todos los elementos 2
elemento>elemento div>p Todos los elementos <p> cuyo elemento contenedor (padre)
sea el elemento <div>
2
elemento+elemento div+p Todos los elementos <p> que se encuentran inmediatamentes
después de elementos <div>
2
[atributo] [target] Todos los elementos que tengan el atributo target 2
[atributo=valor] [target=_blank] Todos los elementos con el atributo target=”_blank” 2
[atributo~=valor] [title~=flor] Todos los elementos que contengan la palabra
“flor”
en el atributo title
2
[atributo|=valor] [lang|=es] Todos los elementos con el atributo
lang
cuyo valor comience con “es”
2
:focus input:focus El elemento input el cual tenga el foco 2
:first-child p:first-child Cada elemento <p> que sea el primer hijo de su padre 2
:before p:before Inserta contenido antes del contenido de cada elemento <p> 2
:after p:after Inserta contenido después de cada elemento <p> 2
:lang [lenguaje] p:lang [es] Cada elemento que tenga el atributo lang con el valor igual a “es” 2
elemento1~elemento2 p~ul Cada elemento <ul> que esté precedido por el elemento <p> 3
[atributo^=valor] a[src^=”https”] Cada elemento <a> donde el valor del atributo
src comience con “https”
3
[atributo$=valor] a[src$=”.pdf”] Cada elemento <a> donde el valor del atributo
src termine con “.pdf”
3
[attribute*=value] a[src*=”.w3schools”] Cada elemento <a> donde el atributo
src contenga la subcadena “w3schools”
3
:first-of-type p:first-of-type Cada elemento <p> que es el primer elemento <p> de su padre 3
:last-of-type p:last-of-type Cada elemento <p> que es el último elemento <p> de su padre 3
:only-of-type p:only-of-type Cada elemento <p> que es el único elemento <p> de su padre 3
:only-child p:only-child Cada elemento <p> que es el único hijo de su padre 3
:nth-child[n] p:nth-child[2] Cada elemento <p> que es el segundo hijo de su padre 3
:nth-last-child[n] p:nth-last-child[2] Cada elemento <p> que es el segundo hijo de su padre
contando desde el final
3
:nth-of-type[n] p:nth-of-type[2] Cada elemento <p> que es el segundo elemento
<p> de su padre
3
:nth-last-of-type[n] p:nth-last-of-type[2] Cada elemento <p> que es el segundo elemento <p>
de su padre, contando desde el final
3
:last-child p:last-child Cada elemento <p> que es el último hijo de su padre 3
:root :root La raíz del documento 3
:empty p:empty Cada elemento <p> que no es hijo
(incluidos nodos de texto)
3
:target #news:target El elemento #news activo actualmente (pulsado en una URL que contenga el nombre de ancla) 3
:enabled input:enabled Cada elemento <input> activado 3
:disabled input:disabled Cada elemento <input> desactivado 3
:checked input:checked Cada elemento <input> chequeado 3
:not[selector] :not[p] Cada que no es un elemento <p> 3
::selection ::selection La porción de un elemento que ha sido
seleccionado por el usuario

Código CSS para maquetar

Tipos de borde CSS

Con el atributo border y sus diferentes valores, podemos modificar los bordes en CSS de los elementos de nuestra plantilla de WordPress.

Posicionar elementos con CSS

Alineación de bloques en CSS

Dar visibilidad u ocultar cosas con CSS

Fondos CSS

Imagen de Fondo

.imagen {
 background-image: url(fondo.jpg);
 background-repeat: no-repeat;
 background-origin: content-box;
 background-clip: content-box;
 background-size: auto;
}

Degradados CSS3

Si detectamos errores de compatilidad con algún navegador, debemos añadir su prefijo antes del valor que causa el conflicto

Cambiar tamaño y tipo de letra en CSS

La declaración de una tipografía se termina con la familia genérica como la última de las opciones alternativas.

p {font-family:"Times New Roman",Georgia,serif;}

Las familias genéricas son:

La compatibilidad de la tipografías depende del navegador y del sistema operativo

WOFF (Web Open Font Format)

Es un formato para usarse en páginas web. Fue desarrollado por la Fundación Mozilla, Opera Software y Microsoft, y está en el proceso de normalización por el W3C y convertirse en un estándar.

EOT (Embedded OpenType)

Estas fuentes son una forma compacta de OpenType para su uso como fuentes incrustadas en las páginas web y a su vez protegen los derechos de autor. Podemos vincular una tipografía sin que el usuario la tenga instalada.

SVG (Scalable Vector Graphics)

Es una especificación para describir gráficos vectoriales bidimensionales, estático o animado y fue creado como alternativa de formato abierto a Flash. se emplea como formato tipográfico en la web para dispositivos iOS (iPad, iPhone y iPod).

TrueType

Es un formato estándar de tipos de letra escalables desarrollado inicialmente por Apple a finales de la década de los ochenta. Es compatible con Firefox 3.5+ , Safari 3.1+, Chrome 4+ y Opera 10+.

Lánzate a editar y modificar el CSS de la plantilla de WordPress de tu web

Con todo esto que hemos visto en este tutorial para cambiar los estilos CSS de tu theme de WordPress ya estás listo para personalizar el 90% de los aspectos de tu web.

Puede que algo muy concreto requiera de más investigación por tu parte, pero con la información que acabas de recibir, podrás solucionar los principales problemas de un usuario medio.

Cómo modificar el estilo CSS de una plantilla WordPress

Video de Sergio Kolomiychuk

Espero que este listado con los mejores plugins para editar y modificar tu plantilla de WordPress te sea de utilizad, si es así, me ayudaría mucho si pudieses compartir este artículo en tus redes sociales.

Por si te has quedado con ganas de más, aquí te dejo un video en el que explica un método alternativo sobre cómo personalizar una plantilla de WordPress paso a paso.

Como siempre, muchas gracias por tu visita y espero verte pronto de nuevo por aquí.

¡Saludos!

¿Alguna pregunta?

Si tienes alguna duda, o si te ha gustado el post, te espero en Twitter: @TutorialWP_

¡Sigue leyendo!