Cómo cambiar el color del tema en WordPress (6 maneras fáciles)

Háganos saber si esto le ha sucedido a usted.

Usted instalar un tema de WordPressy los colores no eran los que querías.

Bueno, cada tema viene con su paleta de colores por defecto que puede no encajar con el color de tu marca. Esto puede ser un poco frustrante, y puede que estés buscando el tema perfecto que capture tu marca.

Afortunadamente, no tiene por qué hacerlo.

WordPress te permite personalizar todos los aspectos de tu tema con unos sencillos pasos. Hay un montón de opciones disponibles para personalizar tu tema, así que deberías acabar teniendo exactamente lo que estabas buscando.

En este artículo, trataremos los métodos más fáciles y populares recomendados por nuestros expertos.

Pero antes de empezar, veamos cómo puede utilizar los colores al diseñar su sitio web.

Estadísticas de color del sitio web

Eche un vistazo a la infografía siguiente para obtener información crucial sobre las estadísticas de color de los sitios web.

La importancia del color en el diseño web

Antes de empezar con los colores de los temas de WordPress, entendamos primero cómo utilizar los colores en el diseño web.

Teoría del color

La teoría del color es un conjunto de estudio de los principios del diseño web que guían a los diseñadores en la creación de combinaciones de colores armoniosas.

La teoría del color implica encontrar la combinación adecuada de colores con el contraste y la viveza adecuados. Un buen contraste es esencial para captar la atención del usuario.

La vivacidad de los colores invoca las emociones que desea de sus usuarios. La elección de colores depende de múltiples factores como el sexo, la experiencia, la edad, la ubicación geográfica y la cultura.

Los diseñadores suelen utilizar una rueda cromática e investigan exhaustivamente los conocimientos existentes sobre la capacidad óptica, la psicología y la cultura humanas, entre otros aspectos, a la hora de formar la paleta de colores adecuada para una empresa.

Rueda de colores

Una rueda de color es una herramienta que contiene diferentes colores en una relación específica. Muestra cómo se relacionan los colores entre sí y representa visualmente la relación entre los colores primarios, secundarios y terciarios.

Los diseñadores utilizan la rueda cromática para desarrollar diferentes esquemas de color para cualquier trabajo de diseño gráfico.

• Colores primarios: Los tres colores primarios de la naturaleza son el rojo, el amarillo y el azul. Cuando estos colores primarios se combinan, forman colores secundarios.
• Colores secundarios: Los colores secundarios son una mezcla de dos colores primarios. Algunos ejemplos son el morado (mezcla de rojo y azul), el verde (mezcla de azul y amarillo) y el naranja (combinación de rojo y amarillo).
• Colores terciarios: Los colores terciarios se forman combinando colores secundarios con colores primarios. Algunos ejemplos son el amarillo-naranja, el rojo-naranja, el rojo-violeta, el azul-violeta, el azul-verde y el amarillo-verde.

Los tres grupos de colores se consideran colores puros. Son vivos y saturados. El blanco y el negro se conocen como colores neutros.

Los colores puros pueden aclararse u oscurecerse al combinarlos con blanco o negro para crear tintes o matices.

Los tintes se crean añadiendo blanco a un color puro, haciéndolo más claro y menos intenso. Los matices se crean añadiendo negro a un color puro y haciéndolo más oscuro.

Puede crear una paleta de colores personalizada para su marca utilizando diferentes combinaciones de colores puros y neutros, tintes y matices.

Psicología del color

Los colores evocan emociones y pueden influir en el comportamiento y la percepción. Nos sentimos atraídos por determinados colores porque controlan instintivamente nuestros sentimientos. Puede sonar un poco vago, pero es cierto.

Es similar a cómo se decide el sabor de la comida con sólo mirarla. Esto forma parte de un estudio más amplio conocido como psicología del color.

Utilizamos la psicología del color para influir en las acciones que realiza el público cuando navega por un sitio web. Esto hace de los colores una herramienta esencial y poderosa en el diseño y el marketing.

He aquí una lista de colores y las emociones que suelen influir.

• Rojo: representa la pasión, el amor, el peligro, el poder y la excitación
• Azul: representa la confianza, la competencia, la paz, la lógica y la calma
• Verde: representa la prosperidad, la salud, la naturaleza y la abundancia
• Negro: representa control, elegancia, sofisticación o incluso depresión
• Blanco: representa la pureza, la paz, la claridad, la limpieza, la perfección y la elegancia
• Amarillo: representa la felicidad, el optimismo y la creatividad
• Naranja: representa la diversión, la libertad, la calidez, la comodidad, el juego

Diferentes colores basados en un contexto diferente significarían otras cosas.

Por ejemplo, el rojo en un contexto puede invocar emoción y calidez (como la Navidad) o miedo y peligro (como una película de terror).

Si quieres que el color de tu sitio web represente una emoción específica, tiene que funcionar a la perfección con los demás elementos y el mensaje que utilices.

Combinaciones de colores

Ahora que ya conoce los colores y la psicología con la que se asocian, veamos las combinaciones de colores que puede utilizar en su sitio web.

Un esquema o paleta de colores es una combinación estratégica de colores incluida en un sitio web para resaltar el mensaje de la marca e influir en la psicología deseada.

En general, existen cinco grandes combinaciones de colores.

Esquema análogo

Los colores análogos se sitúan uno al lado del otro en una rueda de color. Los colores similares suelen encajar bien entre sí. Sin embargo, no hace que los elementos destaquen demasiado.

Ejemplo de esquema análogo: Academia Flux

Esquema monocromático

Los esquemas monocromáticos utilizan diferentes tonos y matices del mismo color. Estos colores tienen un bonito aspecto minimalista.

Ejemplo de esquema monocromático: Starbucks

Esquema de colores de la tríada

Un esquema de tríada es cuando la paleta contiene tres colores espaciados uniformemente de la rueda cromática. Esta combinación de colores aporta una cierta vitalidad, gracias a los colores complementarios.

Ejemplo de esquema en tríada: Bewakoof

Combinación de colores complementarios

Los colores complementarios utilizan varios tonos de dos colores opuestos de la rueda cromática. Esta combinación de colores crea un agradable equilibrio visual entre los colores, con colores específicos que destacan entre los demás.

Ejemplo de regímenes complementarios: Aéreo

Régimen Complementario Dividido

Un esquema complementario dividido es una paleta de colores que utiliza colores complementarios, pero un extremo del color complementario se divide en dos colores análogos. Este esquema es excelente para el diseño web, ya que hace que los elementos destaquen sin añadir demasiado ruido a la paleta.

Ejemplo de esquema complementario dividido: SwinkInc

¿Qué son los temas de WordPress?

Comprender los temas de WordPress es importante antes de empezar a editar ciertos aspectos de los mismos.

En pocas palabras, un tema de WordPress es un grupo de archivos que controla la apariencia de su Sitio web WordPress. Los temas controlan el diseño de su sitio web, los colores (incluidos los elementos temáticos, los colores de las fuentes y los colores de los hipervínculos) y las fuentes.

La mayoría de los temas permiten cambiar distintos aspectos del sitio web, como los colores, el tipo de letra y el diseño. Pero la mayoría están restringidos por la forma en que están desarrollados.

Por lo tanto, todos los temas vienen con algún tipo de personalización.

¿Se pueden cambiar los colores del tema?

Sí, puedes personalizar los colores del tema. Una de las mejores cosas de WordPress es que usted tiene la libertad de personalizar el aspecto de su sitio web de WordPress, así como su funcionalidad.

Aunque, después de instalar un nuevo tema de WordPressAunque los colores del tema rara vez coinciden con los de tu marca, puedes personalizarlos como quieras con un poco de trabajo.

Todos los temas permiten la personalización a través del personalizador de WordPress. Si está utilizando un constructor de páginas, puede cambiar los colores desde los ajustes preestablecidos del constructor de páginas, y también puede editar el código del tema si se siente cómodo con él.

En las siguientes secciones, visitaremos cada uno de estos métodos.

Temas hijo y personalización de WordPress

Si quieres personalizar tu tema de WordPress, deberías hacerlo en un tema hijo. Un tema hijo es un tema creado para trabajar en tándem con el tema padre (principal).

Editar los archivos del tema directamente crea problemas, ya que perderás cualquier modificación si los desarrolladores actualizan el tema padre. Pero, no te preocupes, los temas hijo al rescate.

He aquí algunas ventajas más crear un tema hijo:

• No se empieza de cero. En lugar de crear un tema completamente nuevo, se basa en el tema que utiliza actualmente. Puedes aprovechar el marco actual del tema y personalizarlo según tus necesidades.
• Puede actualizar el tema principal sin que ello afecte al aspecto actual de su sitio web.
• Si no estás contento con la personalización, puedes desactivar el tema hijo y volver al original.

Cómo crear un tema hijo listo para personalizar

Puedes crear un tema hijo en cuestión de minutos con el generador de temas hijo de Astra.

Estos son los pasos a seguir:

Para crear su tema hijo, visite el Generador de temas infantiles Astra página.

A continuación, haga clic en Opciones avanzadas.

A continuación, rellene el formulario que aparece.

Por último, haga clic en Generar para crear su tema hijo.

Este tema hijo funciona en tándem con nuestro propio tema Astra. Si quieres aprender a crear un tema hijo para su tema actual, consulte este artículo fuera.

Cómo personalizar los colores de un tema de WordPress

Existen múltiples formas de cambiar los colores de tu tema. En esta sección, cubrimos seis métodos diferentes para cambiarlos.

Cambio de colores con la paleta global Astra

Si utilizas nuestro tema Astra, te resultará muy fácil. Con Colores de Astra Globalpuede tener una paleta de colores uniforme para todo su sitio web.

He aquí cómo crear una paleta de colores global para su sitio web.

Paso 1: Visite el panel de control de WordPress > Personalizar > Global > Colores

Aquí verá tres opciones de paleta de colores por defecto.

Segundo paso: Haz clic en cualquiera de los colores para cambiarlos al color que desees.

Esto cambiará los colores en todo su sitio web.

Si desea cambiar los colores de los enlaces, haga clic en las opciones de color junto al color del enlace de abajo y ajuste en consecuencia.

Puede utilizar el mismo método para cambiar el color general del tema, el color de los botones o enlaces, etc.

Si quieres aprender a utilizar la paleta global con más detalle, consulte este artículo.

Cambio de colores con el personalizador de temas

Aunque Astra viene con su propia paleta de colores global para ayudarte a cambiar rápidamente los colores del tema, esta funcionalidad no está disponible en otros temas.

En tal caso, si los cambios que desea realizar son relativamente sencillos, es posible que pueda hacerlo a través del personalizador predeterminado de WordPress.

Este personalizador te ayuda a ajustar algunas cosas de tu tema, pero el grado de control de los colores dependerá del tema que utilices.

Así es como se hace en el tema por defecto de WordPress.

Paso 1: Visite el panel de control de WordPress > Personalizar > Colores y modo oscuro

Segundo paso: Haga clic en el botón Seleccionar color debajo del color de fondo, y seleccione el color que desee.

Aunque este proceso puede no ser exacto para todos los temas de WordPress, esto es bastante similar a lo que puede esperar.

Cambiar colores con un constructor de páginas

Constructores de páginas le facilitan la edición y personalización de su sitio web de forma visual y con sólo arrastrar y soltar. Casi todos los creadores de páginas vienen con sus sistemas de paleta de colores, y puedes usarlos para establecer los colores predeterminados de tu sitio web.

Elementor es uno de los constructores de páginas más conocidos del mercado. En este método, vamos a cubrir cómo se puede personalizar los colores del tema de WordPress en Elementor.

El proceso es bastante similar en la mayoría de los constructores de páginas.

Esto es lo que tienes que hacer para personalizar los colores del tema en Elementor.

Paso 1: Edite cualquier página en Elementor y haga clic en el botón Hamburguesa botón.

Segundo paso: Ir a Configuración del sitio > Colores globales.

Aquí puedes cambiar los colores primarios y secundarios, el texto y los colores de acento de tu tema.

Si desea cambiar otros elementos de su sitio web, como el color de fondo, el color de los botones o determinados colores de fuente, vuelva a Configuración del sitio y elija el elemento que desea cambiar.

Encontrará opciones de personalización del color dentro de cada opción.

Una vez que esté satisfecho con los colores, haga clic en Actualizar para que los cambios surtan efecto.

Cambio de colores con CSS

Más temas premium en WordPress le permiten personalizar los colores. Sin embargo, la diferencia viene en el nivel de personalización que obtienes con cada tema.

La buena noticia es que siempre puedes añadir los colores que desees añadiendo códigos de hojas de estilo en cascada (CSS).

Así es como puedes personalizar el color de tu tema con CSS. De nuevo, este proceso es similar para la mayoría de los temas pero puede variar dependiendo de tu tema actual.

Ir a Apariencia > CSS adicional

Aquí puede invocar el tema y el elemento y personalizar el color como desee.

También puede añadir plugins externos como CSS personalizado sencillo para añadir códigos CSS a su sitio web.

Cambio de colores mediante la edición de archivos de temas

También puede añadir CSS personalizado al tema hijo que ha instalado a través del archivo style.css del tema.

El style.css es un archivo de hoja de estilos (CSS) que controla la presentación, el aspecto y la sensación de su sitio web. En términos para desarrolladores, controla el diseño visual y la disposición de las páginas de su sitio web WordPress.

Para añadir códigos CSS personalizados al tema hijo, siga estos pasos.

Paso 1: Ir a Apariencia > Editor de temas.

Segundo paso: Seleccione el tema hijo en la esquina superior derecha.

Paso 3: Normalmente, el archivo style.css ya está seleccionado. Si no es así, seleccione Hoja de estilo (style.css).

Paso 4: Edita y pega el código en la parte inferior del archivo.

Paso 5: Actualiza el archivo.

Cambio de colores con plugins de WordPress

Si no sabes programar o no quieres editar la hoja de estilo de tu sitio web (style.css), puedes utilizar algunos plugins de terceros.

Estos plugins permiten crear y personalizar los elementos visuales del tema hijo.

Además, la mayoría de los temas te permiten añadir CSS personalizado a tu sitio web. En el caso de los temas premium, tienes más opciones de personalización.

Dependiendo de tu tema, puede que no obtengas los resultados que deseas. Algunos temas tampoco permiten añadir CSS personalizado en su versión gratuita.

No se preocupe. Esto tiene solución. Echa un vistazo a estos cinco plugins que te permiten personalizar el tema hijo como un profesional.

5 plugins para cambiar los colores de los temas de WordPress

Estos cinco plugins pueden ayudarte a personalizar los colores del tema si las demás opciones no te convencen.

Configurador de temas infantiles

Por lo general, si desea crear un tema hijo, tiene que comprobar los archivos de su sitio web a través de FTP y crear una nueva carpeta para su tema hijo. Si eres nuevo en esto, el proceso puede parecer un poco desalentador.

En el plugin Child Theme Configurator, puedes crear y configurar un tema hijo en unos pocos clics. También te permite crear tu propio tema hijo y personalizar sus colores, incluyendo colores de fuente, colores de fondo y mucho más.

Paleta central de colores

Con este plugin, puede gestionar una paleta de colores central para todo el sitio. Este plugin también le permite establecer sus propios colores en la paleta.

Guarda la paleta de colores que desee y la integra con su tema o plugin page builder para mostrar la paleta de colores como un color recomendado. Esto le ayuda a omitir la operación de selección de color cada vez. Está disponible de forma gratuita en el directorio de temas de WordPress.

Héroe CSS

CSS Hero le permite personalizar su tema de WordPress sin ningún tipo de codificación. Es un editor en vivo bastante fácil de usar que te permite personalizar cualquier parte de tu página web, incluyendo fuentes, fondos, formularios y mucho más.

Es más rápido y puede realizar cambios rápidamente en cualquier tema hijo.

Editor visual de estilos CSS

El plugin Visual CSS Style Editor te permite personalizar cualquier tema y cualquier página sin escribir una sola línea de código. Muestra todos los elementos de la página y te permite añadir colores personalizados a los elementos que desees.

El editor en línea incluye muchas funciones de diseño, como propiedades CSS para texto, fondos, colores, herramientas de diseño y activos. Estas herramientas te permiten personalizar cualquier cosa que necesites en tu tema de WordPress.

SiteOrigin CSS

SiteOrigin CSS es otro editor de CSS que viene con funciones de edición en vivo. Un editor intuitivo y fácil de usar para principiantes te permite editar el diseño general, las fuentes y los colores. Es compatible con cualquier tema de WordPress; por lo tanto, es un gran plugin para personalizar su sitio web.

Preguntas frecuentes sobre el color de los temas de WordPress

Empiece a personalizar su sitio web hoy mismo

Personalizar los colores del tema de tu sitio web WordPress puede parecer desalentador, pero es bastante sencillo. Todo lo que necesitas hacer es crear un tema hijo y empezar a poner tu creatividad.

La mayoría de las veces, es una simple cuestión de cambiar los colores a través del personalizador predeterminado de WordPress. Otras veces, puedes utilizar creadores de páginas o añadir códigos CSS a la hoja de estilos de tu tema hijo.

Si usted es un principiante, siempre recomendamos tomar la ayuda de los plugins de WordPress que hemos enumerado anteriormente. Te ayudarán a personalizar los colores sin que tengas que esforzarte mucho.

Mira con cuáles te sientes más cómodo y empieza a cambiar el color de tu tema a tu gusto.

Háganoslo saber en los comentarios. ¿Ya has empezado a personalizar tu sitio web?