La gestión del color es una única opción con un gran efecto posterior. Acertar antes de convertir ahorra mucho reestilado más tarde.
Los dos modos
- Mantener colores originales — cada color de texto, fondo, borde y sombra se escribe en el widget como un valor explícito. El resultado coincide exactamente con el origen.
- Usar colores del sitio — se omiten los colores por widget y se hace referencia a los Colores globales de Elementor: los encabezados se asignan a Primario, el texto del cuerpo a Texto, los fondos de botones a Acento, etcétera.
Cuándo usar cada uno
Elige colores del sitio cuando traigas un bloque a un sitio ya con marca. La sección adopta tu paleta de inmediato y, cuando más adelante cambies un Color global, la sección importada cambiará con él. Es la opción fácil de mantener para cualquier cosa que vaya a vivir en tu sitio a largo plazo.
Elige colores originales cuando el diseño sea lo importante: una maqueta de cliente, una página de aterrizaje puntual o cuando la paleta de origen sea deliberadamente diferente del resto del sitio.
Qué valores de color se conservan
Los colores sólidos se convierten directamente. Los degradados lineales de dos paradas se reconocen y se convierten en fondos de degradado de Elementor conservando el ángulo y ambas paradas. Los fondos más complejos — degradados radiales, degradados de varias paradas — no pueden expresarse en el mismo control, por lo que se usa el primer color sólido como alternativa sensata en lugar de producir un fondo vacío.
Las sombras de caja también se importan, pero el control de sombra de Elementor admite una sola sombra. Si tu CSS tenía varias sombras superpuestas, se conserva la que está más al frente y una advertencia te indica que el resto debes añadirlas a mano.
Variables CSS
Las propiedades personalizadas como var(--brand) las resuelve el navegador antes de leerlas, así que lo que obtienes es el color final calculado, no el nombre de la variable. Normalmente es lo que quieres. Si dependes de variables para la tematización, cambia a colores del sitio y controla la paleta desde los Colores globales de Elementor: es el equivalente nativo de WordPress de la misma idea.
Transparencia
Los fondos totalmente transparentes se tratan como “sin fondo” en lugar de escribirse como un color transparente, lo que mantiene limpio el panel de ajustes. Los valores semitransparentes como rgba(255,255,255,.88) se conservan tal cual.
El mapeo completo
En el modo de colores del sitio, cada tipo de widget está vinculado a un espacio concreto de tu paleta:
- Encabezados → Primario
- Texto del cuerpo → Texto
- Fondos de botones → Acento
- Iconos → Primario
- Separadores → Secundario
Activar la tipografía del sitio hace lo mismo con las fuentes: los encabezados toman tu tipografía Primaria y el texto del cuerpo toma la Secundaria.
Las dos opciones son independientes. Colores del sitio con fuentes originales es una combinación común y sensata: el bloque adopta tu paleta y conserva una tipografía display de la que depende el diseño. Configúralas por separado en lugar de tratarlas como un solo interruptor.
Por qué la conexión es dinámica, no una copia
Esta es la parte que vale la pena entender, porque explica por qué la elección importa tanto más adelante. El modo de sitio no consulta tu color Primario y pega su valor hexadecimal en el widget. Escribe una referencia al global: Elementor lo almacena como un puntero a la entrada de la paleta, no como un valor.
Así que el vínculo sigue vivo. Cambia Primario en Ajustes del sitio dentro de seis meses y cada encabezado que se haya convertido en modo sitio cambiará con él, en todas las páginas, sin abrir ninguna. Una página convertida se convierte en un ciudadano normal de tu sistema de diseño y no en un cuerpo extraño que hoy coincide por casualidad.
Con los colores originales el valor queda incrustado. Eso es exactamente lo correcto para una maqueta de cliente que necesitas reproducir fielmente, y exactamente lo incorrecto para una sección que vas a mantener durante dos años.
Configura primero tu paleta
Hay un requisito previo que pilla a la gente por sorpresa. El modo sitio se vincula a lo que contengan actualmente tus Colores globales: no los crea ni los adivina. Convierte en un sitio cuya paleta sigue siendo la predeterminada de fábrica de Elementor y tu sección adoptará fielmente la predeterminada de fábrica, lo que parece un fallo de conversión.
Dedica cinco minutos en Ajustes del sitio → Colores globales a definir Primario, Secundario, Texto y Acento antes de convertir cualquier cosa que pienses conservar. Todo lo que importes después aterrizará bien a la primera.
Los iconos se comportan de forma ligeramente distinta
Un icono convertido en modo sitio recibe currentColor en lugar de un valor fijo, lo que significa que hereda de aquello que lo rodea. Coloca ese icono en una sección oscura y se volverá claro junto con el texto que lo rodea, sin ajustes por widget que recordar.
Es una pequeña cosa que evita una tarea concreta y molesta: buscar doce widgets de iconos después de cambiar el fondo de una sección porque todos siguen siendo del color que tenían sobre blanco.
Una recomendación práctica
Si no estás seguro, convierte una vez con colores originales para verificar que el diseño es fiel y luego convierte de nuevo con colores del sitio para la versión que vayas a publicar. Comparar las dos lleva dos minutos y hace evidente la decisión.
Como regla general: para cualquier cosa que vaya a tu propio sitio, usa colores del sitio. Para cualquier cosa que reproduzca el diseño de otra persona para aprobación, usa colores originales. Cuando una maqueta sea aprobada y se convierta en una página real, conviértela de nuevo en modo sitio en lugar de recolorearla a mano.