Saltar a contenido

Cambiar los colores del sitio

Los colores del sitio vienen de una paleta de diez colores, ajustada en un solo lugar. Cambiar un color de la paleta lo cambia en todas partes a la vez: actividades, páginas, cabecera, menú, bloques de color.

Solo para administradores

Los colores forman la identidad visual del sitio. Solo los administradores los cambian; los editores pueden ver la pantalla y copiar las clases CSS (consulta Colorear un bloque). Si no puedes hacer cambios, pídeselo al administrador del sitio.

Cambiar un color existente

  1. Abre Ajustes > Colores.
  2. En la Paleta, busca el color que quieres cambiar (por su número y su nombre).
  3. Haz clic en el botón Seleccionar color de esa línea.
  4. Elige el nuevo color: en el cuadrado, con la barra de tonos, o pegando el código indicado en la guía de identidad visual (un # seguido de seis caracteres, por ejemplo #e67e22).
  5. Haz clic en Guardar cambios, abajo de la pantalla.

El mensaje «Ajustes guardados.» confirma la operación. La caché del sitio se vacía sola: los visitantes ven los nuevos colores en su próxima visita.

No cambies el nombre, solo el color

Si el naranja pasa a ser un naranja más suave, cambia el color, no el nombre orange: renombrar un color rompería los bloques de las páginas que lo usan (consulta Trampas).

Cambiar el color principal del sitio

El color por defecto se usa en la cabecera, el pie de página, el menú y las páginas sin color propio.

  1. En Ajustes > Colores, sección Roles de color, busca Color por defecto.
  2. Elige otro color de la paleta en la lista.
  3. Haz clic en Guardar cambios.

Los submenús siguen: usan este color, un poco aclarado (ajuste Color de los submenús).

Añadir un color a la paleta

La paleta tiene diez espacios, y algunos pueden estar vacíos. Para usar uno:

  1. Busca un espacio sin color.
  2. Escribe un nombre en inglés, en minúsculas, sin acentos ni espacios (green, light-blue).
  3. Elige su color.
  4. Haz clic en Guardar cambios.

El color aparece entonces en las listas de elección de las actividades, las páginas y los roles.

Colorear un bloque en una página

  1. En Ajustes > Colores, haz clic en Fondo (color del fondo del bloque) o Texto (color del texto) en la línea del color deseado. La clase queda copiada.
  2. En el constructor Avada, abre los ajustes del bloque, pestaña General.
  3. Pega la clase en el campo CSS Class y luego guarda la página.

Para un texto blanco sobre fondo de color, añade también la clase text-white (botón Copiar debajo de la paleta). Detalles y ejemplos: Botones Fondo y Texto.

Elegir el color de una actividad

El color de una actividad se elige en la paleta, en la pantalla de la actividad: consulta Actividades y lugares.

Trampas

  • Renombrar un color rompe las páginas cuyos bloques usan su antigua clase: pierden su color. Hazlo solo si es realmente necesario.
  • Vaciar un espacio que todavía se usa quita ese color de todo lo que lo usaba. Elige primero otro color en todos los lugares donde se usaba.
  • Un color «personalizado» (fuera de la paleta) en una página o un evento no sigue los cambios de la paleta.

Si no funciona

  • El sitio no ha cambiado: ¿has hecho clic en Guardar cambios? Luego recarga la página con Ctrl + F5 (en Mac: Cmd + Mayús + R).
  • Un bloque ha perdido su color: su clase ya no corresponde a ningún color de la paleta (nombre cambiado, espacio vaciado).

Para ir más lejos