Cambiar los colores y las letras de tu web
Elige los colores, las fuentes y las medidas de toda la web en un solo sitio, con la vista previa al lado.
El tema son los colores, las fuentes y las medidas que usa toda la web. Se cambia una vez y vale para todas las páginas, la cabecera y el pie.
Ojo: el grupo Desarrollo del menú solo lo ven los usuarios Administrador y Desarrollador. Si no lo ves, pídeselo a quien administra la web.
Los colores
Abre Desarrollo › Tema y código. En la pestaña Diseño, el apartado Colores tiene siete:
- Primario y Secundario: los de tu marca.
- Texto sobre primario y Texto sobre secundario: el color del texto que va encima de cada uno. Que se lea bien: claro sobre oscuro o al revés.
- Fondo, Fondo alternativo y Texto sobre fondo: el fondo de la web, otro fondo para alternar secciones y el color del texto normal.
Pulsa el cuadrado para elegir el color o escribe su código (por ejemplo, #1E2A4A).
Cada sección de una página elige cuál de estos colores usa: en su pestaña Estilos, con Esquema de color (Fondo, Fondo alternativo, Primario o Secundario).
Las letras
En Tipografía eliges la Fuente del texto y la Fuente de los títulos. Al abrir la lista tienes todo el catálogo de Google Fonts, con un buscador y filtros (Sin serifa, Con serifa, Display, Manuscrita, Monoespaciada); cada nombre se ve escrito con su propia fuente. También está la Fuente del sistema, la del aparato de cada visitante.
En la web, las fuentes se sirven desde Layo, sin pedir nada a Google. Si usas cursivas, marca Cargar también la cursiva (sale solo si la fuente la tiene).
Las medidas
En Medidas, con una barra: el Ancho máximo del contenido, el Redondeo de esquinas y el Margen base para escritorio, tablet y móvil.
Ver y guardar
La vista previa enseña la portada con los cambios sin guardar; arriba cambias entre Escritorio, Tablet y Móvil. Cuando te guste, pulsa Guardar: se aplica a toda la web en ese momento, sin publicar nada más. Si te arrepientes, Historial guarda las versiones anteriores del tema.
La pestaña Código
Es para quien programa: SCSS global, JS global, <head> y Final del <body>, que se añaden a todas las páginas. En <head> se pegan, por ejemplo, Google Analytics, Tag Manager o una verificación. Lo de <head> y Final del <body> no se carga en la vista previa del panel, para que no cuente visitas.
Ver también Cambiar la cabecera, el pie y los menús y Cambiar un dato en toda la web con variables.
¿Te falta algo? Escríbenos a hola@layocms.com o desde el panel, en Ayuda › Enviar opinión.