Cómo personalizar los colores de tu sitio web de WordPress

Los colores juegan un papel importante en hacer que tu sitio web sea visualmente atractivo y en establecer su identidad de marca. Afortunadamente, WordPress facilita mucho la personalización de colores en todo tu sitio.

Esto es esencial para crear una apariencia única y proporcionar consistencia y claridad.

Hemos utilizado con éxito el color para construir una fuerte identidad de marca en nuestros sitios web. Por ejemplo, el color naranja se ha convertido en una parte definitoria de la marca WPBeginner. Hace que nuestro sitio sea memorable para los lectores y, al mismo tiempo, crea un diseño estéticamente agradable.

Este uso reflexivo del color ayuda a garantizar que nuestra marca sea fácilmente reconocible, mejorando la experiencia del usuario y la lealtad a la marca.

En este artículo, te mostraremos cómo personalizar fácilmente los colores en tu sitio web de WordPress, incluyendo los colores de fondo, encabezado, texto y enlaces.

¿Qué es la teoría del color?

Antes de que puedas comenzar a personalizar los colores en tu sitio web de WordPress, es importante entender la teoría del color.

La teoría del color es el estudio de los colores y cómo funcionan juntos. Ayuda a los diseñadores a crear combinaciones de colores que se complementan entre sí.

Al diseñar un sitio web, necesitas elegir colores que se vean bien juntos. Esto hará que tu sitio web sea más atractivo para tus visitantes, lo que puede mejorar la experiencia del usuario y aumentar la participación.

Diferentes colores pueden provocar diferentes emociones y sentimientos en las personas, y la teoría del color puede ayudarte a elegir la combinación adecuada para tu sitio web.

Por ejemplo, el rojo se usa a menudo para representar comida y restaurantes. Por otro lado, el azul se usa generalmente en sitios web bancarios y financieros.

Eso se debe a que el rojo puede crear sentimientos de calidez, energía y pasión, mientras que el azul significa confianza, seguridad y calma.

Además de complementar colores, también puedes usar el contraste de color para llamar la atención sobre áreas importantes de tu blog de WordPress.

Esto te permite hacer que tu contenido sea más legible, establecer una identidad de marca sólida y crear un estado de ánimo específico en el sitio web.

¿Qué son los temas de WordPress y puedes cambiar los colores del tema?

Los temas de WordPress controlan cómo tu sitio web se ve para el usuario. Un tema de WordPress típico es un conjunto de plantillas prediseñadas que instalas en tu sitio web para cambiar su apariencia y diseño.

Los temas hacen que tu sitio web sea más atractivo, fácil de usar y aumentan la participación.

También puedes crear tus propios temas desde cero usando plugins como SeedProd y el Thrive Theme Builder.

Con WordPress, puedes personalizar fácilmente temas y cambiar su fondo, fuentes, botones y colores de enlaces.

Sin embargo, ten en cuenta que algunos temas vienen con opciones de color predefinidas, mientras que otros ofrecen más flexibilidad para elegir las tuyas.

Dicho esto, veamos cómo puedes personalizar fácilmente los colores en WordPress. Puedes usar los enlaces rápidos a continuación para saltar a las diferentes partes de nuestro tutorial:

• Cómo personalizar colores en WordPress
• Cómo cambiar el color de fondo en WordPress
• Cómo cambiar el color del encabezado en WordPress
• Cómo cambiar el color del texto en WordPress
• Cómo cambiar el color de selección de texto en WordPress
• Cómo cambiar el color del enlace en WordPress
• Cómo cambiar el esquema de color del administrador en WordPress

Cómo personalizar colores en WordPress

Puedes personalizar los colores en WordPress usando muchos métodos diferentes, incluyendo el personalizador de temas, el editor de sitio completo, CSS personalizado, plugins de constructor de páginas y más.

Cambiar colores usando el personalizador de temas

Es súper fácil cambiar colores usando el personalizador de temas de WordPress integrado.

Primero, visita la página Apariencia » Personalizar desde la barra lateral del administrador.

Nota: Si no encuentras la pestaña 'Personalizar' en tu panel de WordPress, significa que estás usando un tema de bloques. Desplázate hacia abajo a la siguiente sección de este tutorial para averiguar cómo cambiar los colores en un tema de bloques.

Para este tutorial, usaremos el tema predeterminado Twenty Twenty-One.

Recuerda que el personalizador de temas puede verse diferente dependiendo del tema que estés usando actualmente.

Por ejemplo, el tema Twenty Twenty-One viene con un panel de 'Colores y modo oscuro' que permite a los usuarios seleccionar un color de fondo y personalizar el modo oscuro.

Después de abrir el panel, simplemente haz clic en la opción 'Seleccionar color'. Esto abrirá el Selector de color, donde puedes elegir tu color de fondo preferido.

Una vez que hayas terminado, no olvides hacer clic en el botón 'Publicar' en la parte superior para guardar tus cambios y hacerlos visibles en tu sitio web.

Cambiar colores en el editor de sitio completo

Si estás usando un tema basado en bloques, no tendrás acceso al personalizador de temas. Sin embargo, puedes usar el editor de sitio completo (FSE) para cambiar los colores de tu sitio web.

Primero, dirígete a la pantalla Apariencia » Editor desde la barra lateral del administrador para iniciar el editor de sitio completo. Ahora, tienes que hacer clic en el ícono 'Estilos' en la esquina superior derecha de la pantalla.

Esto abrirá la columna de ‘Estilos’, donde deberá hacer clic en el panel de ‘Colores’.

Puede cambiar los colores de fondo, texto, enlaces, encabezados y botones del tema desde aquí.

Una vez que hayas terminado, haz clic en el botón ‘Guardar’ para guardar tu configuración.

Cambiar colores usando CSS personalizado

CSS es un lenguaje de programación que puede usar para cambiar la apariencia visual de su sitio web, incluidos sus colores. Puede guardar CSS personalizado en la configuración de su tema para aplicar sus personalizaciones a todo su sitio.

Sin embargo, el código CSS personalizado ya no se aplicará si cambia de tema en su sitio web o actualiza su tema existente.

Es por eso que recomendamos usar WPCode, que es el mejor plugin de fragmentos de código de WordPress del mercado. Es la forma más fácil de agregar código CSS personalizado y le permitirá personalizar de forma segura los colores en su sitio web de WordPress.

Primero, deberá instalar y activar el plugin WPCode. Para obtener más instrucciones, consulte nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Al activar, visita la página Fragmentos de código » + Agregar fragmento desde la barra lateral de administración de WordPress.

Aquí, simplemente haga clic en el botón ‘Usar fragmento’ debajo de la opción ‘Agregar su código personalizado (Nuevo fragmento)’.

Una vez que estés en la página ‘Crear fragmento personalizado’, puedes empezar escribiendo un nombre para tu código.

Después de eso, simplemente selecciona ‘Fragmento CSS’ como el ‘Tipo de código’ en el menú desplegable.

Para esta sección, estamos agregando código CSS personalizado que cambia el color del texto en el sitio web:

p   { color:#990000;  }

Simplemente agrega el código CSS personalizado en el cuadro ‘Vista previa del código’.

Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección ‘Inserción’.

Aquí, puedes elegir la opción ‘Inserción automática’ si quieres que el código se ejecute automáticamente al activarlo.

También puedes agregar un shortcode a páginas o publicaciones específicas de WordPress.

Una vez que hayas terminado, desplázate de nuevo a la parte superior de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’.

Finalmente, necesitas hacer clic en el botón ‘Guardar fragmento’ para aplicar el código CSS a tu sitio web.

Cambiar colores usando SeedProd

También puedes personalizar los colores usando el plugin SeedProd.

Es el mejor constructor de páginas de WordPress del mercado, y te permite crear temas desde cero sin usar ningún código.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, puedes leer nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Tras la activación, dirígete a la página SeedProd » Theme Builder desde la barra lateral de administración de WordPress.

Desde aquí, haz clic en el botón ‘Theme Template Kits’ en la parte superior.

Nota: Si deseas crear tu propio tema desde cero, entonces necesitarás hacer clic en el botón ‘+ Add New Theme Template’ en su lugar.

Esto te llevará a la página ‘Theme Template Kit Chooser’. Aquí, puedes elegir entre cualquiera de las plantillas de tema prefabricadas que ofrece SeedProd.

Para más detalles, consulta nuestro tutorial sobre cómo crear fácilmente un tema de WordPress sin ningún código.

Después de elegir un tema, serás redirigido a la página ‘Theme Templates’.

Aquí, activa el interruptor ‘Enable SeedProd Theme’ a ‘Yes’ para activar el tema.

Ahora, haz clic en el enlace ‘Edit Design’ debajo de cualquier página del tema para abrir el editor de arrastrar y soltar.

Una vez que estés allí, haz clic en el ícono del engranaje en la parte inferior de la columna izquierda.

Esto te dirigirá a la configuración de ‘CSS Global’.

Desde aquí, puedes personalizar los colores del fondo de tu sitio web, texto, botones, enlaces y más.

Una vez que estés satisfecho con tus elecciones, haz clic en el botón ‘Guardar’ para almacenar tu configuración.

Cómo cambiar el color de fondo en WordPress

Todos los temas de WordPress vienen con un color de fondo predeterminado. Sin embargo, puedes cambiarlo fácilmente para personalizar tu sitio web y mejorar su legibilidad.

Si estás utilizando un tema de bloques, deberás cambiar el color de fondo usando el editor de sitio completo.

Primero, debes visitar la pantalla de Apariencia » Editor desde el panel de WordPress.

Esto iniciará el editor de sitio completo, donde debes hacer clic en el ícono de ‘Estilos’ en la esquina superior derecha de la pantalla.

Después de eso, simplemente haz clic en el panel ‘Colores’ para abrir configuraciones adicionales.

En este panel, ahora puedes administrar el color predeterminado de diferentes elementos en tu sitio web.

Aquí, necesitas hacer clic en la opción ‘Fondo’ en la sección ‘Elementos’.

Una vez que este panel se haya expandido, puedes elegir el color de fondo de tu sitio web desde aquí.

Todos los temas de WordPress ofrecen una serie de colores de fondo predeterminados entre los que puedes elegir.

Sin embargo, si deseas usar un color personalizado, debes hacer clic en la herramienta Color Personalizado. Esto abrirá el Selector de Color, donde puedes seleccionar un color de tu elección.

También puedes usar colores degradados para el fondo de tu sitio web.

Para hacer esto, primero deberás cambiar a la pestaña ‘Degradado’ en la parte superior.

A continuación, puedes elegir un degradado predeterminado del tema o seleccionar tus propios colores degradados con la ayuda de la herramienta Selector de Color.

Una vez que hayas terminado, no olvides hacer clic en el botón ‘Guardar’ para almacenar tu configuración.

También puedes cambiar el fondo de tu sitio web usando el personalizador de temas, SeedProd y CSS personalizado.

Para obtener instrucciones más detalladas, te recomendamos consultar nuestra guía para principiantes sobre cómo cambiar el color de fondo en WordPress.

Cómo cambiar el color del encabezado en WordPress

Muchos temas de WordPress vienen con una cabecera integrada en la parte superior de la página. Normalmente contiene enlaces importantes de la página, iconos de redes sociales, llamadas a la acción (CTAs) y más.

Si estás utilizando un tema de bloques, puedes personalizar fácilmente la cabecera de WordPress usando el editor de sitio completo.

Primero, necesitas visitar la pantalla Apariencia » Editor desde la barra lateral de administración para iniciar el editor de sitio completo. Una vez allí, haz doble clic en la plantilla 'Cabecera' en la parte superior para seleccionarla.

Esto abrirá la configuración de la cabecera en el panel de bloques a la derecha. Aquí, debes desplazarte hacia abajo hasta la sección 'Color' y hacer clic en la opción 'Fondo'.

Esto abrirá una ventana emergente donde puedes elegir un color predeterminado para tu cabecera.

También puedes seleccionar un color personalizado abriendo la herramienta Selector de Color.

Para personalizar tu cabecera usando un degradado de color, necesitas cambiar a la pestaña 'Degradado'.

Después de eso, puedes elegir una opción de degradado predeterminada o personalizar la tuya usando el Selector de Color.

Finalmente, haz clic en el botón 'Guardar' para almacenar tu configuración.

Si deseas cambiar el color de la cabecera usando el personalizador de temas o CSS adicional, te recomendamos leer nuestra guía para principiantes sobre cómo personalizar tu cabecera de WordPress.

Cómo cambiar el color del texto en WordPress

Cambiar el color del texto puede ayudar a mejorar la legibilidad de tu blog de WordPress.

Si estás usando un tema de bloques, entonces tendrás que cambiar el color del texto usando el editor de sitio completo.

Puedes empezar visitando la pantalla Apariencia » Editor desde el área de administración de WordPress. Esto iniciará el editor de sitio completo, donde deberás hacer clic en el ícono de ‘Estilos’ en la esquina superior derecha.

A continuación, haz clic en el panel ‘Colores’ para acceder a la configuración adicional.

Una vez que estés allí, procede a hacer clic en la opción ‘Texto’ en la sección ‘Elementos’.

Una vez que se hayan abierto la configuración del color del texto, podrás ver una serie de colores de texto en la sección ‘Predeterminado’.

Alternativamente, también puedes usar un color de texto personalizado haciendo clic en la herramienta Color Personalizado y abriendo el Selector de Color.

Una vez que hayas tomado tu decisión, simplemente haz clic en el botón ‘Guardar’ para almacenar los cambios.

Consejo extra: Puedes usar la herramienta WebAIM Contrast Checker para verificar si el color de fondo y el color del texto combinan bien. La herramienta puede ayudarte a mejorar la legibilidad del texto en tu sitio web.

Para personalizar el color del texto usando CSS, el personalizador de temas o SeedProd, es posible que desees consultar nuestra guía paso a paso sobre cómo cambiar el color del texto en WordPress.

Cómo cambiar el color de selección de texto en WordPress

Cuando un visitante selecciona texto en tu sitio web, se mostrará un color de fondo. El color predeterminado es azul.

Sin embargo, a veces, el color puede no combinar bien con tu tema de WordPress y es posible que desees cambiarlo.

Agregar código CSS a los archivos de tu tema puede cambiar fácilmente el color de selección de texto. Sin embargo, ten en cuenta que al cambiar a otro tema o actualizar tu tema actual, el código CSS desaparecerá.

Por eso recomendamos usar WPCode, que es el mejor plugin de fragmentos de código de WordPress del mercado.

Primero, necesitas instalar y activar el plugin WPCode. Para más instrucciones, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, dirígete a la página Fragmentos de código » + Añadir fragmentos desde la barra lateral del administrador.

Luego, simplemente haz clic en el botón ‘Usar fragmento’ bajo la opción ‘Añade tu código personalizado (Nuevo fragmento)’.

Una vez que estés en la página ‘Crear fragmento personalizado’, puedes empezar escribiendo un nombre para tu fragmento de código.

Después de eso, elige ‘Fragmento CSS’ como el ‘Tipo de código’ en el menú desplegable de la derecha.

Ahora, copia y pega el siguiente código CSS en el cuadro ‘Vista previa del código’:

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

Puedes cambiar el color de selección del texto sustituyendo el código hexadecimal junto a background-color en el fragmento CSS.

Una vez que hayas agregado el código, desplázate hacia abajo hasta la sección ‘Inserción’.

Aquí, elige el método ‘Inserción automática’ para ejecutar el código automáticamente al activarlo.

Después de eso, desplázate de nuevo hacia arriba y cambia el interruptor ‘Inactivo’ a ‘Activo’.

Finalmente, haz clic en el botón ‘Guardar fragmento’ para almacenar tus cambios.

Ahora, puedes visitar tu sitio web para comprobar el color de selección del texto.

También puedes cambiar el color de selección del texto usando el personalizador de temas o un plugin. Para más detalles, consulta nuestro tutorial sobre cómo cambiar el color de selección de texto predeterminado en WordPress.

Cómo cambiar el color del enlace en WordPress

Puedes cambiar fácilmente el color de los enlaces en WordPress usando el editor de sitio completo o CSS personalizado.

Si estás utilizando un tema de bloques, dirígete a la pantalla Apariencia » Editor desde la barra lateral de administración.

Al abrir el editor de sitio completo, haz clic en el icono ‘Estilos’ en la esquina superior derecha.

A continuación, haz clic en el panel ‘Colores’ en la columna derecha para ver configuraciones adicionales.

Una vez que estés allí, simplemente haz clic en la pestaña ‘Enlaces’.

Esto iniciará la configuración del color de los enlaces y verás varios colores de enlace predeterminados mostrados en la columna derecha.

Sin embargo, también puedes usar un color de enlace personalizado haciendo clic en la herramienta Color personalizado para abrir el Selector de color.

También puedes cambiar el color del enlace al pasar el cursor usando el FSE. Esto significa que el color del enlace cambiará cuando alguien pase el ratón sobre él.

Primero, deberás cambiar a la pestaña ‘Al pasar el cursor’ desde la parte superior.

Una vez allí, puedes elegir un color predeterminado o personalizado para cambiar el color del enlace al pasar el cursor.

Finalmente, haz clic en el botón 'Guardar' para almacenar tu configuración.

Para obtener instrucciones más detalladas, puede consultar nuestra guía para principiantes sobre cómo cambiar el color de los enlaces en WordPress.

Cómo Cambiar el Esquema de Color del Administrador en WordPress

También puedes cambiar el esquema de color del administrador en WordPress si lo deseas. Este método puede ser útil si quieres que el panel de administración coincida con la marca de tu sitio web o usar tus colores favoritos.

Sin embargo, ten en cuenta que cambiar el esquema de color del panel de WordPress no afectará la parte visible de tu sitio web.

Para cambiar el esquema de color del administrador, simplemente visita la página Usuarios » Perfil desde el panel de WordPress.

Aquí, verás varios esquemas de color junto a la opción 'Esquema de color del administrador'.

Elige el que prefieras y luego haz clic en el botón 'Actualizar perfil' en la parte inferior de la página para guardar tus cambios.

Para obtener instrucciones más detalladas, consulta nuestra guía para principiantes sobre cómo cambiar el esquema de color del administrador en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo personalizar los colores en tu sitio web de WordPress. También te puede interesar nuestro artículo sobre cómo elegir un esquema de color perfecto para tu sitio web de WordPress y nuestra guía definitiva de elementos de diseño de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.