Advertisement
  1. Web Design
  2. WordPress

Cómo cambiar el color de fuente en WordPress

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Cambiar el color de fuente en tu sitio de WordPress es algo que puedes hacer fácilmente en una pequeña sección de texto o un bloque. Alternativamente, puedes cambiar el color de un elemento específico o una clase CSS en todo tu sitio.

En este tutorial rápido, te mostraré cómo cambiar rápidamente el color de la fuente en tu sitio de WordPress.

Te mostraré dos métodos:

  • Cambio del color de fuente de un bloque individual.
  • Añadir una clase CSS a un bloque para colorear y, a continuación, aplicar estilo a la clase.

También te daré una visión general sobre cómo cambiar el color de fuente en tu sitio, utilizando tu hoja de estilos.

Si quieres aprender cómo añadir fuentes completamente nuevas a WordPress, o cómo cambiar el tamaño de fuente en WordPress también puedes aprenderlo aquí.

Cómo cambiar el color de fuente de una sección de texto

Puedes elegir hacer que una sección de texto o un bloque entero de texto en una de tus entradas o páginas sea de un color diferente al resto. Puedes usar esto para resaltar algún texto y destacarlo, o para mejorar el diseño de tu sitio.

Una palabra de advertencia: el empleo de demasiados colores harán que tu sitio se vea desordenado y poco profesional. Asegúrate de usar colores que no entren en conflicto.

Comienza localizando la sección de texto cuyo color deseas cambiar.

paragraph blockparagraph blockparagraph block

Seleccione el texto cuyo color deseas cambiar haciendo doble clic sobre él. Haz clic en el icono de flecha situado encima del bloque y selecciona Color de texto.

text color selectiontext color selectiontext color selection

Elige el color que deseas que tenga el texto. El color cambiará para ti en la pantalla de edición.

changing font colorchanging font colorchanging font color

Como alternativa, puedes usar un código hexadecimal para seleccionar un color concreto. Esta es una buena idea si deseas utilizar un color que ya esté en uso en otra parte de tu sitio.

Haz clic en el vínculo Color personalizado y selecciona un color del selector o escribe el código hexadecimal.

custom color selectioncustom color selectioncustom color selection

Repite esto para cualquier otro bloque de texto o secciones de texto cuyo color desees cambiar. No tienes que cambiar el color de un bloque entero, si quieres, puedes cambiar solo una palabra.

Por último, haz clic en Actualizar para actualizar tu entrada o Publicar para publicarla. Esto guardará los cambios.

Ahora tu texto será del color que le hayas asignado:

text with new color in live sitetext with new color in live sitetext with new color in live site

Cómo usar una clase CSS para cambiar el color de fuente

Si deseas cambiar un montón de bloques de texto para que todos sean del mismo color, la mejor manera de hacerlo es mediante el uso de una clase CSS. De esta manera sabes que todos serán del mismo color y no tendrás que recordar qué color usaste.

Busca tu bloque de texto de nuevo y, en el panel Bloque, abre la pestaña Avanzado.

En el campo Clase(s) CSS adicional(es), escribe una clase CSS. Yo voy a usar highlight-color. No estoy aludiendo directamente al color de forma deliberada por si decido cambiarlo más tarde.

adding a CSS class for color to a blockadding a CSS class for color to a blockadding a CSS class for color to a block

Ahora haz clic en Actualizar o Publicar para guardar tu entrada.

Ahora tienes dos opciones para editar el color de los bloques utilizando esa clase:

  • añadir estilo en el Personalizador
  • añadir estilo a la hoja de estilo de tu tema

Aplicar estilo a la clase desde el personalizador es la forma más fácil de hacerlo, y no te causará ningún problema al actualizar el tema.

Dirígete a Apariencia > Personalizar en el administrador de WordPress y haga clic en CSS adicional.

customizercustomizercustomizer

En el panel CSS adicional, escribe el CSS para cambiar el color de fuente:

Cambia tu color en ese código a cualquier color que quieras usar, usando un código hexadecimal. Es buena idea usar un color que ya se esté usando en otra parte del tema, o uno que quede bien en él y que al mismo tiempo haga destacar al texto.

CSS color in customizerCSS color in customizerCSS color in customizer

Haz clic en el botón Publicar para guardar los cambios.

Ahora ve a la entrada de tu sitio en vivo y comprobarás que tu bloque con la clase highlight-color tiene el texto de un color diferente al que lo rodea:

orange text in live siteorange text in live siteorange text in live site

Ahora puedes usar esta clase en cualquier bloque en el que desees usar ese color para su texto.

Cambiar el color de la fuente en la hoja de estilos de tu tema

Con los dos métodos que te he mostrado, no necesitas editar los archivos de tu tema ni tener una comprensión profunda de CSS. Y te proporcionan una forma rápida de cambiar el color de la fuente en WordPress.

Pero si deseas editar el color de diversos elementos existentes en tu sitio (como todos los párrafos o enlaces), o si desea añadir CSS en la hoja de estilos en lugar de en el personalizador, tendrás que editar la hoja de estilos del tema.

Puedes obtener más información sobre cómo editar tu hoja de estilos en nuestra guía para añadir CSS personalizado a tu sitio de WordPress. Si quieres profundidad más, ese es un buen lugar para empezar.

Conclusión

Cambiar el color de fuente del texto en tu sitio de WordPress sólo cuesta unos minutos. Puedes editar el color de fuente directamente o asignarle una clase y, a continuación, escribir CSS para dicha clase.

Pero, lo hagas como lo hagas, no te abuses de ello. Y asegúrate de usar colores que funcionen bien juntos para evitar tener un sitio que se ve desordenado y poco profesional.

Haz que tu sitio destaque usando un tema profesional de WordPress

¿Estás diseñando actualmente un nuevo sitio web de WordPress? Nuestra colección de temas de WordPress profesionalmente diseñados puede dar a tu sitio web un nuevo y atractivo aspecto, en cuestión de minutos.

Estos son algunos de los temas de WordPress más vendidos y prometedores disponibles en ThemeForest para 2020.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.