Hay un momento que se repite de forma fiable en casi todos los proyectos web: el azul tiene que ser un poco más oscuro. Lo que en un sitio bien montado lleva un minuto, en uno crecido sin orden se convierte en una búsqueda a lo largo de cuarenta páginas. La diferencia se decide justo al principio.
Dónde están las definiciones centrales
En el editor de Elementor haga clic arriba a la izquierda en el menú de hamburguesa y elija Ajustes del sitio. Ahí encontrará, entre otras cosas, Colores globales y Fuentes globales.
Lo que registre aquí aparecerá después como definición con nombre en cada selector de color y en cada ajuste tipográfico. Si en un widget elige esa definición en lugar de un valor fijo, queda unido a ella de forma permanente. Si más adelante cambia la definición, el widget cambia con ella.
Ese es todo el truco. Y aun así se salta la mayoría de las veces, porque al principio va más rápido teclear un valor de color sin más.
Cuántos colores tienen sentido
Elementor crea cuatro colores estándar. En mis proyectos trabajo con seis a ocho — casi nunca hacen falta más, y con menos se queda uno corto.
Un reparto que ha demostrado funcionar:
- Primario — su color principal, para botones y elementos destacados.
- Secundario — el segundo color de marca, usado con moderación.
- Texto — el color de letra del texto corrido. Rara vez negro puro; un gris muy oscuro se lee más cómodamente.
- Título — a menudo el mismo que el texto, a veces un tono más oscuro.
- Fondo — el fondo de la página.
- Superficie — un tono ligeramente distinto para tarjetas y zonas destacadas.
- Borde — para líneas y separadores.
- Acento — para avisos o advertencias, si hacen falta.
Ponga nombres que digan algo. «Primario» y «Superficie clara» le dirán algo dentro de un año; «Color 5» no.
Una palabra sobre el contraste
Compruebe que el color de texto tenga suficiente contraste contra el color de fondo antes de fijarlo. Para texto normal se considera un mínimo de 4,5 a 1. Hay herramientas de comprobación gratuitas que tardan segundos.
Esto no es una formalidad. Un texto gris claro sobre fondo blanco queda elegante en su monitor calibrado y sencillamente no se lee en un móvil bajo el sol. Y dado que los requisitos de accesibilidad para sitios web son cada vez más vinculantes, es además el lado en el que le conviene estar.
Fijar la tipografía de forma central
En Fuentes globales define familia tipográfica, tamaño, grosor, altura de línea y espaciado entre letras para los papeles de texto recurrentes — primario, secundario, texto, acento — y en Estilo del tema, además, los valores por defecto para H1 a H6 y para el texto corrido.
Dos recomendaciones de la práctica:
Con dos familias tipográficas basta. Una para los títulos, otra para el texto corrido. Cada una adicional cuesta tiempo de carga y vuelve inquieta la imagen. A menudo llega incluso con una sola familia en dos grosores.
No olvide la altura de línea. Para el texto corrido, un valor en torno a 1,6 suele funcionar bien; los títulos admiten bastante menos, alrededor de 1,2. El interlineado decide más sobre la legibilidad que el tamaño de letra — en detalle: Ajustar bien el interlineado en Elementor.
El error más frecuente
Tiene este aspecto: alguien crea los colores globales — y luego, aun así, teclea a mano el valor de color en el widget, porque el selector de color ya estaba abierto.
El color es correcto, el resultado se ve idéntico, y falta la conexión. En el siguiente cambio de color, justamente ese widget se queda atrás.
Preste atención a elegir en el selector el valor global, reconocible por el pequeño símbolo del globo terráqueo, y no el valor de color libre que hay al lado. La misma distinción vale para la tipografía.
Si el sitio web ya está hecho
Reconvertirlo a posteriori es trabajo de constancia, pero merece la pena. No vaya página por página, sino por tipo de elemento: primero todos los botones, luego todos los títulos, luego las superficies. Así la mirada se mantiene en el mismo patrón y avanza usted bastante más rápido.
Aproveche la ocasión para hacer limpieza. Normalmente resulta que un sitio con supuestamente cuatro colores contiene en realidad once tonos de azul ligeramente distintos.
Elementor Pro: los colores y las tipografías globales existen en ambas versiones. Pro lo extiende a la cabecera, el pie, los popups y los diseños de entrada — ahí rigen entonces igualmente esas mismas definiciones. Ver Elementor Pro
Por qué el esfuerzo sale a cuenta
Una hora al principio le ahorra días más adelante. He asumido proyectos de clientes en los que un cambio de color habría llevado tres días, porque cada color estaba pegado individualmente a cada widget. En un proyecto bien montado, ese mismo cambio es una modificación en un solo sitio.
Cómo estructurar un sitio web desde el principio para que siga siendo modificable es uno de los ejes de mi formación de Elementor.
Etiquetas