Elementor

Cómo cambiar las fuentes y colores globales en Elementor

Cómo cambiar las fuentes y colores globales en Elementor

Tabla de contenidos

¿Por qué usar fuentes y colores globales en Elementor?

Para unificar el aspecto de un sitio web, es mejor usar los mismos colores y fuentes en todas las páginas. Los usuarios pueden sentirse confundidos si las tipografías y los colores son diferentes en cada apartado. Esto puede generar desconfianza y, como consecuencia, la pérdida de posibles clientes.

Usar la misma fuente y colores en todas las páginas de tu sitio web ayudará a consolidar tu marca y a que los usuarios la reconozcan. Con Elementor, puedes usar fuentes y colores globales para actualizar las tipografías y colores de todas las páginas de tu web desde un solo lugar. De esta forma, evitarás tener que abrir todas las páginas de tu web cada vez que necesites hacer un cambio.

En esta publicación, te enseñaré cómo cambiar las fuentes y los colores globales en Elementor. Para ello, primero tendremos que acceder a los ajustes del sitio.

¿Dónde están los ajustes generales?

Escritorio
Escritorio

Busca dentro del escritorio de WordPress > Plantillas > Plantillas guardadas.

Plantillas guardadas
Plantillas guardadas

Dentro de plantillas guardadas haz clic en “Todo”. De esta forma verás todas las plantillas que hay creadas con Elementor.

Kit por defecto
Kit por defecto

Usa el buscador para escribir la palabra “Kit”. Pasa el ratón por encima y haz clic en “Editar con Elementor”. De esta forma será mucho más fácil encontrar los Ajustes del sitio.

Diseño del sistema
Diseño del sistema

Una vez que estés en los Ajustes del sitio, verás las opciones “Colores globales” y “Fuentes globales”.

¿Cómo cambiar las fuentes y colores globales en Elementor?

Verás que, por defecto, las fuentes y colores del sistema están divididos en 4 grupos: Principal, Secundario, Texto, Énfasis.

A continuación te explicaré como personalizar los elementos etiquetados como “Principal”.

Fuentes globales Elementor
Cambiar tipografías globales en Elementor

Cambiar una fuente global en Elementor

  1. Haz clic en Fuentes globales.
  2. Busca la fuente que se llama “Principal” (está dentro de las fuentes del sistema).
  3. Presiona el Icono del lápiz.
  4. Personaliza la Tipografía.
  5. Cierra el menú.
Colores globales Elementor
Cambiar colores globales en Elementor

Cambiar un color global en Elementor

  1. Haz clic en Colores globales.
  2. Busca el color que se llama “Principal” (está dentro de las colores del sistema).
  3. Haz clic en la muestra de color para abrir el Selector de color.
  4. Elige un color usando el Selector de color.
  5. Cierra el menú.

¿Cómo crear nuevas fuentes y colores globales en Elementor?

Como vimos antes, las fuentes y colores globales se dividen en 4 grupos predeterminados. Pero, ¿qué pasa si quieres crear tus propias fuentes y colores globales? Por ejemplo, si tu diseño tiene muchos encabezados, a lo mejor quieres crear un color y un grupo de fuentes personalizados llamados «Encabezados» para que todos los encabezados sean iguales.

Para ello, sigue los siguientes pasos:

Añadir color
Añadir color

Haz clic en en el botón “+ Añadir color” o “+ Añadir estilo” que encontrarás al final del listado de colores o fuentes globales. De esta forma, tendrás un nuevo color global con un nombre que podrás editar y un color en blanco.

Nuevo elemento
Nuevo elemento

Presiona sobre el nombre por defecto y cámbialo.

Añadir nuevo color global en Elementor
Añadir color global en Elementor

Para crear un color global, haz clic sobre la muestra de color para abrir el Selector de color. Elige un color y cierra la ventana.

Añadir nueva fuente global en Elementor
Añadir fuente global en Elementor

Para configurar una fuente global, haz clic en el icono del lápiz y elige la tipografía y el tamaño de la fuente.

¿Cómo añadir nuevas fuentes y colores globales usando elementos existentes?

Si estás trabajando en un diseño y quieres guardar el estilo como un color global, porque te gusta el color, o como una fuente global, porque te gusta cómo has configurado la tipografía, en este ejemplo veremos cómo hacerlo. Es algo muy sencillo y te ahorrará mucho tiempo.

Presiona sobre el texto que tenga la configuración de color y fuente que quieres guardar. Para hacerlo, pasa el ratón por encima del texto hasta que aparezca un recuadro delimitador y un lápiz de color rosa.

Color de texto
Color de texto

Haz clic en la muestra de color junto al Color de texto para abrir el Selector de color.

Botón +
Botón +

Presiona el botón más +.

Crear un nuevo color global
Crear un nuevo color global

Escribe un nombre para el color que quieres guardar como global en el Pop-up Crear un nuevo color global.

Tipografía
Tipografía

Presiona el icono del lápiz que encontrarás al lado de Tipografía.

Tipografía
Botón +

Presiona el botón más +.

Crear una nueva fuente global
Crear una nueva fuente global

Escribe un nombre para la fuente que quieres guardar como global en el Pop-up Crear una nueva tipografía global.

¡Listo! Ya lo tienes. Has añadido un nuevo color y fuente global a la hoja de estilo de tu sitio web.

Conclusión

¡Qué pereza da hacer el mismo cambio en todas las páginas de tu web! Usa los colores y tipografías globales para cambiar todos los estilos a la vez.

Escrito por:

Richi Pérez

Richi Pérez

13/06/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Qué es el widget de Valoración en Elementor? El Widget de Valoración en Elementor te permite añadir valoraciones...

¿Qué es el widget de Indicador de avance en Elementor? El Widget de Indicador de avance en Elementor...

¿Qué es el widget de Listas de reproducción de vídeo en Elementor? El Widget de Listas de reproducción...