Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo cambiar el color del texto en WordPress (4 métodos fáciles)

Cambiar el color del texto en WordPress no es complicado. Sólo tienes que saber el lugar adecuado para hacerlo.

El proceso en sí es bastante sencillo, pero hemos descubierto que no todo el mundo sabe cómo hacerlo con eficacia. Esto se debe a que el proceso puede variar en función de tu situación específica.

Por ejemplo, si utilizas un tema clásico, es posible que solo tengas la opción de cambiar el color del texto de todo el sitio y no de una página concreta. Y, a veces, el tema ni siquiera proporciona el color que quieres usar.

Estas situaciones pueden hacer que te sientas atascado o inseguro acerca de cómo continuar. Pero no te preocupes. Después de haber pasado más de una década en WordPress, vamos a desglosar múltiples maneras de cambiar el color del texto en WordPress, independientemente de su tema o necesidades específicas.

How to change the text color in WordPress

¿Por qué cambiar el color del texto en WordPress?

Hay muchas razones por las que puede querer cambiar el color del texto en WordPress. Tal vez le gustaría destacar una llamada a la acción en una página de destino, o tal vez usted desea utilizar subtítulos de color en su sitio.

A veces, incluso puede que desee cambiar el color del texto en todo un sitio web. Por ejemplo, tal vez su tema de WordPress utiliza un color de fuente gris, pero preferiría utilizar negro para un mejor contraste con el color de fondo.

También puede utilizar el color para provocar una emoción en sus visitantes. Por ejemplo, mucha gente piensa que el azul crea una sensación de confianza y fiabilidad. Para obtener más información, consulte nuestra guía sobre cómo elegir una combinación de colores perfecta para su sitio web en WordPress.

Dicho esto, vamos a ver cómo se puede cambiar el color del texto en WordPress. Simplemente utilice los siguientes enlaces para saltar al método que prefiera:

Consejo de experto: ¿Tienes problemas para diseñar bien tu sitio web en WordPress? Deje que nuestro equipo de WPBeginner Pro Services transforme su sitio para que coincida exactamente con su visión. Programa tu consulta gratuita hoy mismo y descubre cómo podemos ayudarte.

Método 1: Cómo cambiar el color del texto en el editor de bloques

Si sólo quieres cambiar unas pocas palabras, un párrafo o un encabezado dentro de una entrada, entonces puedes usar el editor de contenido de WordPress. Este método funciona tanto si utilizas un tema de bloques como un tema clásico.

Para empezar, abre la entrada o página en la que quieras cambiar el color del texto o crea una página nueva.

Si aún no lo ha hecho, escriba el texto que desea personalizar. Dependiendo del texto, puede que necesites añadir un Párrafo, Encabezado, o algún otro bloque que acepte texto. Para obtener ayuda con esto, eche un vistazo a nuestra guía sobre cómo utilizar el editor de bloques de WordPress.

En cuanto tengas un texto, ya puedes cambiar su color.

Cambiar el color del texto de un bloque

En este primer ejemplo, vamos a cambiar el color del texto de un bloque entero. Esta es una buena manera de resaltar una sección entera de contenido, como un párrafo entero.

Basta con hacer clic en el bloque y seleccionar la pestaña “Bloquear” del menú de la derecha.

Changing the text color of a WordPress block

Una vez hecho esto, busca la sección “Color” y haz clic en “Texto”.

El editor visual mostrará ahora algunos colores que complementan tu tema de WordPress. Basta con hacer clic en cualquier color para cambiar todo el texto dentro de ese bloque.

Choosing a color from your WordPress theme

Para utilizar un color diferente, basta con hacer clic en la casilla situada en la parte superior de la ventana emergente.

Esto abre un selector donde puede elegir un nuevo color de fuente.

Customizing your text using the color picker

Otra opción es introducir un código hexadecimal, que es el código HTML de un color concreto. Esto es útil si desea utilizar un color muy específico, como el tono exacto de rojo del logotipo de su sitio web.

Si no está seguro de qué código hexadecimal utilizar, puede resultarle útil consultar un sitio como Códigos de color HTML. Aquí puedes explorar diferentes colores y obtener sus códigos hexadecimales.

Una vez que tengas el código, pégalo o escríbelo en la casilla “Hex”.

Customizing text using a hex code

Si cambias de opinión y quieres restaurar el color de texto por defecto, sólo tienes que hacer clic en el botón de puntos del menú de la derecha.

Las opciones que veas variarán en función de si también has cambiado el color de fondo del bloque, así que puede que tengas que hacer clic en “Texto” o en “Restablecer todo”.

Restoring the theme's default text color

Cambiar el color del texto de una palabra o frase

A veces, es posible que solo desee cambiar el color de una palabra, frase u oración en particular, como la llamada a la acción en su página de captación.

Para ello, simplemente resalte la palabra o frase que desea cambiar en el editor de bloques de WordPress. A continuación, haga clic en la pequeña flecha hacia abajo en la barra de herramientas del editor de contenido y haga clic en ‘Resaltar.’

Changing the text color for specific words in WordPress

Esto abre un mensaje / ventana emergente mostrando algunos colores que se verán bien con su tema actual.

También puede elegir un color manualmente o incluso utilizar un código hexadecimal siguiendo el mismo proceso descrito anteriormente.

How to change the text color in WordPress

Consejo profesional: ¿Quieres cambiar el color de tus enlaces? Compruebe nuestra guía para principiantes sobre cómo cambiar el color de los enlaces en WordPress.

Método 2: Cómo cambiar el color del texto en el Personalizador de temas (solo temas clásicos)

El color puede llamar la atención sobre el contenido más importante de una página, pero muchos colores diferentes pueden resultar abrumadores. Teniendo esto en cuenta, normalmente querrás utilizar el mismo color de texto en la mayor parte de tu sitio web WordPress.

Cambiar cada página y entrada manualmente usando el editor de bloques llevaría mucho tiempo, así que en su lugar, recomendamos cambiar el propio tema usando el personalizador de temas.

Nota: Si falta el Personalizador de temas, lo más probable es que esté utilizando un tema en bloque y puede omitir el método 3.

Para primeros pasos, ve a Apariencia ” Personalizar.

The WordPress theme customizer

Ahora tienes que encontrar los ajustes de texto del tema. Cada tema es diferente, pero normalmente tendrás que buscar la opción “Tipografía”.

En nuestras imágenes, utilizamos OceanWP.

The theme customizer Typography settings

Siga adelante y haga clic en el ajuste “Tipografía” o similar. En este punto, normalmente verás todos los diferentes tipos de texto utilizados en el tema, como el encabezado 1 y el título de la página.

Para cambiar el texto dentro de tus entradas y páginas, haz clic en la sección “Cuerpo” o similar.

Changing the body text color using the WordPress theme customizer

Para personalizar el color del texto, busque la sección ‘Color de fuente’.

A continuación, haz clic en “Seleccionar color”.

The font color selector

Se abrirá el selector. Puede utilizar uno de los colores ya creados, elegir uno nuevo utilizando los ajustes o introducir un código hexadecimal.

Si quieres restaurar el color por defecto del tema en cualquier momento, sólo tienes que hacer clic en ‘Por defecto’.

The color picker settings in the theme customizer

También puedes utilizar estos ajustes para cambiar el tamaño de la fuente, el estilo, el espaciado entre letras, etc.

Cuando esté satisfecho con el aspecto del texto, haga clic en el botón “Publicar” situado en la parte superior de la pantalla.

Método 3: Cómo cambiar el color del texto en el editor de sitio completo (solo temas en bloque)

Si está utilizando un tema basado en bloques como ThemeIsle Hestia Pro o Twenty Twenty-Three, entonces el proceso de cambiar el color del texto del tema es ligeramente diferente.

Para personalizar el texto utilizando el Editor de Sitio Completo vaya a Temas “ Editor.

Selecting the Full-Site Editor from the WordPress admin panel

Ahora verá varios menús para personalizar el aspecto de su sitio web.

Aquí debe seleccionar “Estilos”. Esta sección define los colores globales, la tipografía y la disposición de su sitio web.

Choosing Styles in the Full Site Editor

En la pantalla siguiente, verá algunas combinaciones de estilos entre las que puede elegir. Si quieres cambiar por completo el aspecto del tema del bloque, puedes elegir una de las opciones disponibles.

Pero a efectos de demostración, seguiremos adelante y haremos clic en el botón del lápiz “Editar estilos”.

Clicking Edit Styles in Full Site Editor

Ahora llegará al Editor de Sitios Completos y se abrirá la pestaña Estilos.

Hagamos clic en “Colores”.

Selecting Colors in the Full Site Editor

La barra lateral le mostrará algunos elementos cuyos ajustes de color puede cambiar, como texto, enlaces, leyendas, botones y encabezados.

Cada uno tendrá diferentes ajustes de color, así que asegúrate de explorarlos para ver lo que pueden hacer.

Elements whose color you can change in the WordPress Full Site Editor

Pongamos un ejemplo al hacer clic en “Encabezado”.

Para cambiar el color del encabezado, puede seleccionar uno de los colores predefinidos del tema o utilizar uno personalizado al hacer clic en el selector de color.

How to change the heading text color in the WordPress Full Site Editor

Cuando estés satisfecho con los colores del texto, haz clic en el botón “Guardar”. Todos los cambios que hagas se aplicarán a todas tus páginas y entradas.

Para más información, marque / compruebe nuestra guía para principiantes sobre la edición completa del sitio en WordPress.

Método 4: Cómo cambiar el color del texto con código CSS (más personalizable)

Dependiendo de su tema, puede que no sea posible cambiar el texto en todo el sitio utilizando los menús del Personalizador. Una opción es cambiar cada pieza de texto manualmente utilizando uno de los métodos en esta entrada. Sin embargo, esto tomaría mucho tiempo y esfuerzo.

La buena noticia es que puedes personalizar el texto de todo un sitio añadiendo CSS personalizado. Y lo que es aún mejor, este método permite definir colores diferentes para tipos de texto específicos, como el encabezado 1 (h1) o el texto de párrafo (p).

Dado que la edición y personalización del tema de WordPress puede cambiar de un tema a otro, le recomendamos que utilice WPCode para añadir CSS personalizado a su sitio.

WPCode es el mejor plugin de fragmentos de código utilizado por más de 1 millón de sitios web de WordPress. Facilita añadir CSS personalizado, PHP, HTML y mucho más sin tener que editar ningún archivo del núcleo de WordPress.

Lo primero que tienes que hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, diríjase a Fragmentos de código ” Añadir fragmento.

How to add custom CSS to your site using WPCode

Aquí verás todos los fragmentos de código WPCode que puedes añadir a tu sitio.

Simplemente pase el cursor por encima de “Añada su código personalizado” y seleccione “Usar fragmento” cuando aparezca.

Adding a custom snippet to WordPress

Para empezar, escriba un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en el escritorio de WordPress.

A continuación, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código CSS”.

Adding custom CSS to WordPress

A continuación, puedes añadir el CSS personalizado al pequeño editor de código. Tendrás que escribir el selector del tipo de texto que estás personalizando, seguido del código hexadecimal del color que quieres utilizar.

Por ejemplo, puede cambiar el color del texto del párrafo añadiendo lo siguiente:

p { color:#990000; }

Si desea utilizar un color diferente para los encabezados de su sitio, deberá utilizar los selectores h1, h2, h3 o similares.

Puede verlo en la siguiente imagen.

Changing the text color using custom code

Si no está seguro de qué código hexadecimal utilizar, puede recurrir a un sitio como HTML color codes.

Cuando estés satisfecho con el fragmento de código, desplázate hasta la sección “Inserción”. WPCode puede añadir el CSS a diferentes lugares, como después de cada entrada, solo portada / vista pública, o solo administrador.

Para cambiar el texto en todo tu blog de WordPress, haz clic en “Insertar automáticamente” si aún no está seleccionado. A continuación, abre el menú desplegable “Ubicación” y elige “Cabecera para todo el sitio”.

How to add custom CSS across your entire website

Una vez hecho esto, desplázate a la parte superior de la pantalla y haz clic en el conmutador “Inactivo” para que cambie a “Activo”.

Por último, haga clic en “Guardar fragmento” para activar el fragmento de código CSS.

How to change the text color using WPCode

Ahora, si visita su sitio, verá el texto personalizado en directo.

Si desea utilizar un color de texto diferente en cualquier punto o simplemente añadir más CSS a ese fragmento de código, sólo tiene que ir a Fragmentos de código Fragmentos de código. Aquí, pase el ratón sobre el fragmento de código que acaba de crear y haga clic en “Editar” cuando aparezca.

Editing a code snippet in WordPress

Ahora puede editar el fragmento de código para utilizar el nuevo color y, a continuación, hacer clic en “Guardar fragmento” para que el cambio se aplique en su sitio web.

Además del color del texto, también puede utilizar WPCode para cambiar el color por defecto cuando se selecciona un texto o activar texto resaltado en una página y contenido de entradas.

Muchas veces, querrá que sus páginas de destino tengan un aspecto diferente del resto de su sitio web. Esto hace que destaquen, lo que puede conseguir más conversiones.

Esto es especialmente importante si tiene varias páginas de destino, como una para una lista de espera viral y otra para una campaña publicitaria en Google. Cada una de estas páginas puede necesitar su propio diseño y combinación de colores para dirigirse eficazmente a diferentes audiencias o canales de marketing.

Si quieres crear una página de destino o de oferta, te recomendamos que utilices SeedProd. De todos los creadores de páginas que hemos probado, es el mejor del mercado y tiene un editor de arrastrar y soltar fácil de usar.

SeedProd incluye más de 90 bloques que puede arrastrar y soltar en su estructura / disposición / diseño / plantilla. A continuación, puede ajustar estos bloques de muchas maneras diferentes, incluyendo el cambio de color del texto.

Si está utilizando una página personalizada para obtener más conversiones, entonces SeedProd funciona con muchas herramientas populares de terceros que ya puede estar utilizando para gestionar las conversiones.

Entre ellos se incluyen los mejores servicios de marketing por correo electrónico, WooCommerce, Google Analytics y mucho más.

Primero, necesitas instalar y activar SeedProd. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Nota: También hay una versión gratuita de SeedProd que le permite crear páginas personalizadas. Sin embargo, para esta guía, vamos a utilizar SeedProd Pro ya que tiene muchas más plantillas y bloques avanzados.

Después de activar el plugin, SeedProd le pedirá su clave de licencia.

Adding the license key to SeedProd

Puede encontrar esta información en su cuenta del sitio web de SeedProd. Después de introducir la clave de licencia, siga adelante y haga clic en el botón “Verificar clave”.

A continuación, debe visitar SeedProd ” Páginas y hacer clic en el botón “Añadir nueva página de destino”.

How to create a new landing page in SeedProd

Después, es hora de elegir una plantilla. SeedProd cuenta con más de 300 plantillas diseñadas por profesionales que puede personalizar con sus propias imágenes, texto, colores y mucho más.

Para seleccionar una plantilla, basta con pasar el cursor por encima de ella y hacer clic en el icono “Marca de verificación”.

Choosing a SeedProd template

Estamos utilizando la plantilla ‘Juicy Sales Page’ en todas nuestras imágenes, pero puedes utilizar cualquier diseño.

A continuación, escriba un nombre para la página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero usted puede cambiar esta URL a cualquier cosa que desee.

Cuando esté satisfecho con la información que ha introducido, haga clic en el botón “Guardar y empezar a editar la página”.

Adding relevant keywords to a page URL

A continuación, accederá al editor de arrastrar y soltar de SeedProd, donde podrá personalizar su plantilla.

El editor SeedProd muestra una vista previa en vivo de su diseño a la derecha y algunos ajustes de bloque a la izquierda.

The SeedProd drag and drop page builder

El menú de la izquierda también tiene bloques que puedes arrastrar a tu estructura / disposición / diseño / plantilla.

Por ejemplo, puede arrastrar y soltar bloques estándar como botones e imágenes o utilizar bloques avanzados como temporizadores de cuenta atrás, testimonios rotativos, botones para compartir en redes sociales, etc.

Adding a social sharing block to a custom page

SeedProd también viene con “Secciones”, que son colecciones de bloques que a menudo se utilizan juntos. Por ejemplo, SeedProd tiene una cabecera, imagen a pantalla completa, llamada a la acción, testimonios, formulario de contacto, FAQ, características, secciones de pie de página, y mucho más. Esto puede ayudarle a crear rápidamente una página de diseño profesional.

Para consultar las distintas secciones, basta con hacer clic en la pestaña “Secciones”. Para obtener una vista previa de cualquier sección, pase el ratón por encima y haga clic en el icono de la lupa.

The SeedProd ready-made sections

Para añadir la sección a su diseño, sólo tiene que hacer clic en “Elegir esta sección”.

Esto añadirá la sección al final de su página.

Adding a ready-made section to your website

Puede arrastrar y soltar secciones y bloques por la estructura / disposición / diseño / plantilla.

Para personalizar un bloque, basta con hacer clic para seleccionarlo en la estructura / disposición / diseño / plantilla. El menú de la izquierda mostrará todos los ajustes que puedes utilizar para configurar ese bloque.

Customizing SeedProd blocks on a landing page

Para cambiar el color del texto, basta con hacer clic en cualquier bloque que tenga texto.

En el menú de la izquierda, seleccione la pestaña “Avanzado”. En “Estilos”, haz clic en “Color”.

Changing the text color using SeedProd

Se abrirá una ventana emergente en la que podrá elegir un nuevo color para el texto.

Otra opción es introducir un código hexadecimal en el campo “Hex”.

Customizing the text color using a page builder plugin

Ahora puede cambiar el color del texto de cualquier otro bloque simplemente siguiendo el mismo proceso descrito anteriormente.

Cuando estés satisfecho con el aspecto de la página, es hora de publicarla, para lo que debes hacer clic en el botón “Guardar”. A continuación, selecciona “Publicar”.

Publishing a page with custom text colors

Si visita su tienda en línea, blog o sitio web, verá la nueva página en acción, completa con sus colores de texto personalizados.

Esperamos que este tutorial te haya ayudado a aprender cómo cambiar el color del texto en WordPress. Puede que también quieras comprobar nuestro tutorial sobre cómo añadir un rediseñador de fuentes en WordPress y formas de crear un sitio web WordPress amigable para móviles.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

15 comentariosDeja una respuesta

  1. Jim Toth

    This tutorial was of no help to me. M y headings still have no colour other than white.

    • WPBeginner Support

      If none of the recommendations from our article were able to assist you, we would recommend reaching out to the support for your specific theme to see if they have a recommendation in case their CSS is overriding that you add.

      Administrador

    • Jiří Vaněk

      If you use some kind of pagebuilder, there should be a problem too. For exhample Elementor could overwrite your CSS on its own. So if you have Elementor, Oxygen, Divi builder or anything like this, try to look on collor setings here too.

  2. Simba

    What is the color of wpbeginner h2 text?

  3. Lara

    Thank you! This was a great quick fix for an only semi-literate in the technical stuff.

    • WPBeginner Support

      You’re welcome :)

      Administrador

  4. Kayla

    Do you have any insight into how to change the background color of just part of a sentence?

    Thank you for all of your help. I’ve learned an immense amount from the content you share.

    • WPBeginner Support

      You would want to use the CSS method and instead of color:, use background-color:

      Administrador

  5. Ekta

    The 2nd method worked very well for me. Had spent quite some time on the net looking for how to change the color of the widget title and this took only a minute. Thanks a lot.

    • WPBeginner Support

      You’re welcome, glad our guide helped :)

      Administrador

  6. Bob Wood

    I still cannot change the color of a single word.
    I pull down options on single word –
    Inline code
    Inline image
    justify
    strikethrough
    underline

    • WPBeginner Support

      For a single word, you would need to use CSS for the moment.

      Administrador

  7. Tunde Sanusi (Tuham)

    Users can only do this in the Block Editor!
    That’s why I’ve been recommending people to start learning about the Block Editor

    • WPBeginner Support

      The CSS method would still work for those still on the Classic editor

      Administrador

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.