Kit por defecto de Elementor
true
08:00
0.0/5
Ajustes del sitio, Introducción a Elementor
Colores globales, Fuentes globales y Estilos del tema en Elementor
> Ajustes del sitio, Introducción a Elementor
- Colores globales
- Global
- Nuevos colores globales
- Colores personalizados en línea
- Sistema de colores Hexadecimal
- Enlaces de interés
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 (primario, secundario, 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 lista, subtítulos, encabezados 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 enlaces, fondos de botones, encabezados 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.
- 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.
- Agregar color: haga clic en el botón Agregar color para agregar un nuevo color personalizado global o en línea
- 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:
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).
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
- Teoría del color: Guía básica del color
- Extensión para navegador con la que podrás capturar el color Hex de cualquier parte de una página web:
Suscríbete y recibe avisos de nuevos contenidos
Temas relacionados
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
