fbpx

Colores globales, Fuentes globales y Estilos del tema en Elementor

> Ajustes del sitio, Introducción a Elementor
Para poder ver este Contenido Premium (Videotutoriales, descargas, herramientas, recursos, ...) tienes que estar suscrito al menos a una licencia de Elementor Pro, JetPlugins o Dynamic ooo. Si ya estás suscrito Inicia la sesión.

Crea tu propio sistema de diseño con colores globales y estilos de texto que puedan asignarse fácilmente a elementos de su sitio.

Colores globales

Establece colores globales predefinidos (colores primarios, secundarios, de texto y de acento), colores personalizados en línea o crea nuevos colores globales desde la configuración global de Elementor.

Global

Colores globales predefinidos

De forma predeterminada, los colores predefinidos (primariosecundario, texto y acento) se rellenan previamente desde el CSS de tu tema. Cámbialos aquí para anular la configuración de tu tema. Qué elementos se ven afectados por la paleta de colores predeterminada:

  • Los colores primarios se utilizan para los títulos y los iconos.
  • Los colores secundarios se utilizan para fondos de elementos de listasubtítulosencabezados animados y tablas de precios .
  • Los colores de texto se utilizan para párrafos y elementos de menú.
  • Los colores de acento se utilizan para enlacesfondos de botonesencabezados de tabulación y acordeón e insignias.

Cada uno de los colores se utilizará en varios widgets de forma similar a los ejemplos anteriores. A continuación se muestran algunos ejemplos de colores para ayudar a visualizar las áreas en las que se usa cada color.

Nuevos colores globales

Además de los 4 colores globales predefinidos (primario, secundario, texto y acento), puedes agregar cualquier color que elijas a la paleta global, para usar en cualquier opción de color de Elementor.

Colores personalizados en línea

También puedes seleccionar cualquier color personalizado para usar en línea sin agregarlo a la paleta de colores globales.

Desde cualquier página o publicación de Elementor, haz clic en el menú de hamburguesa  en la esquina superior izquierda del Panel de widgets, luego clic en Ajustes del sitio > en la sección DISEÑO DEL SISTEMA > haz clic en Colores Globales.

  1. Editar color: haz clic en la  muestra de color  para seleccionar un nuevo color para cualquier color existente. Los nombres también se pueden cambiar. Haga clic en el  nombre del color  para cambiar el nombre. Por ejemplo, puede cambiar Principal a Títulos, Acento a Resaltado, etc.
  2. Agregar color: haga clic en el  botón Agregar color  para agregar un nuevo color personalizado global o en línea
  3. Eliminar color: coloca el cursor sobre la muestra de color y haga clic en el icono de la papelera que aparece.

Sistema de colores Hexadecimal

En HTML se usa el código Hex o hexadecimal para definir colores. Para entender un poco mejor como se transcribe este código veamos este gráfico:

Colores Hex

Como podemos ver en la imagen seguido del símbolo numeral o almohadilla # los códigos Hex para definir un color llevan 6 digitos más, que definen un color RGB (Red Green Blue o Rojo Verde Azul) todos los colores del espectro se componen de la mezcla de estros tres colores base. En el código Hex los dos primeros dígitos corresponden al color Rojo, los dos del medio al Verde y los dos últimos al Azul.

Imagina que tienes tres latas de pintura una de color rojo otra de color verde y otra de color azul, y mezclas estos colores en un recipiento añadiendo cierta cantidad de cada uno, el resultado será un color determinado. Pues en este caso es exactamente igual, dependiendo de la cantidad de cada color que añadamos obtendremos un color concreto.

Hasta ahí todo bien, pero … en los códigos Hex no solo hay números, si no también letras, veamos el por qué. Nosotros estamos acostumbrado a trabajar con el sistema decimal es decir con una base de 10 dígitos (0, 1, 2, 3, 4, 5, 6, 7, 8 y 9) usando estos digitos componemos cualquier cantidad numérica. El el caso de los códigos para colores Hex trabajamos con base hexadecimal, es decir, en lugar de 10, usamos 16 dígitos (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E y F).

Paleta de colores de Photoshop

Usando solo dós digitos el menor valor hexadecimal es 00 (equivale en decimal a 0) y el mayor FF (equivale en decimal a 255), es decir podemos añadir a la mezcla de cada color entre 0 y 255. Veamos algunos ejemplos representados de forma hexadecimal:

  • #000000 (Negro: en decimal 0 unidades de rojo, 0 de verde y 0 de azul)
  • #FFFFFF (Blanco: en decimal 255 unidades de rojo, 255 de verde y 255 de azul)
  • #FF0000 (Rojo: en decimal 255 unidades de rojo, 0 de verde y 0 de azul)
  • #00FF00 (Verde: en decimal 0 unidades de rojo, 255 de verde y 0 de azul)
  • #0000FF (Azul: en decimal 0 unidades de rojo, 0 de verde y 255 de azul)
  • #999999 (Gris: en decimal 153 unidades de rojo, 153 de verde y 153 de azul)

Con este sistema un ordenador de 24 bits puede reproducir hasta 16.777.216 colores diferentes, una cantidad más que suficiente, teniendo en cuenta que el ojo humano tan solo puede distinguir 10 millones de colores.

Enlaces de interés

Temas relacionados

Caja de Tipografía de los widgets de Elementor
Caja de Tipografía de Elementor
 
16:48
0.0/5
Introducción a Elementor
{{ reviewsTotal }} Reseña
{{ reviewsTotal }} Reviews
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on print
Ir arriba

¡hola!

Ingresa tus datos de acceso