Los estilos globales son los ajustes de marca y diseño —colores, fuentes y tipografía— que se aplican a todas las páginas de tu sitio. Cuando cambias un estilo global, se actualizan todas las páginas a la vez, así que solo tienes que definir la identidad de marca en un único sitio.
Acceder al editor de estilos globales
En la pantalla Grupos de páginas, haga clic en Editar estilos globales.
El editor de estilos globales. A lo largo de este artículo se hace referencia a las llamadas numeradas.
| # | Área | Para qué sirve |
| 1 | Panel derecho | Define colores, fuentes y otras opciones de estilo globales |
| 2 | Vista previa de página | Vista previa en directo de tus cambios a medida que los haces. |
| 4 | Conmutador de grupo de páginas/entidad | Cambia entre grupos de páginas, entidades e idiomas para previsualizar |
| 6 | Conmutador de panel | Contrae o expande el panel derecho para tener más espacio de trabajo |
| 7 | Controles del visor | Cambia entre escritorio, tableta y móvil; amplía y reduce la imagen |
| 8 | Controles de cambios | Deshacer, rehacer, descartar o publicar tus cambios |
| 9 | Vista previa/enlaces en directo | Abre una vista previa para compartir o tu sitio en directo en una pestaña nueva |
| 10 | Actualizar biblioteca | Incorpora las últimas actualizaciones de producto (solo aparece cuando hay actualizaciones pendientes) |
Configura tu paleta de colores
En el panel derecho (1), define la paleta de colores de tu sitio introduciendo cuatro colores base:
- Principal
- Secundario
- Terciario
- Cuaternario
Utiliza el selector de colores para introducir el valor de cada uno. Una vez configurados, el sistema genera automáticamente seis tintes y sombras adicionales —variaciones más claras y más oscuras— que pueden aplicarse como colores de fondo en todo el sitio sin ningún ajuste manual.
Sobre la accesibilidad: el sistema de colores da prioridad a la accesibilidad. Los colores generados automáticamente se emparejan con colores de texto en primer plano que cumplen los requisitos de contraste de WCAG AA. Los cuatro colores base pueden usarse como fondo, pero no se puede garantizar que cumplan WCAG AA, ya que el usuario define sus valores exactos.
| Fondo | Primer plano | Compatible con WCAG AA |
| Blanco | Negro | ✓ |
| Brillo principal 98 % | Negro | ✓ |
| Brillo secundario 98 % | Negro | ✓ |
| Brillo terciario 98 % | Negro | ✓ |
| Brillo cuaternario 98 % | Negro | ✓ |
| Brillo principal 20 % | Blanco | ✓ |
| Brillo secundario 20 % | Blanco | ✓ |
| Colores Base (Primario, Secundario, Terciario, Cuaternario) | Blanco o Negro | No está garantizado |
Configura tus fuentes
En el panel derecho (1), selecciona la familia de fuentes y el tamaño para cada nivel de la jerarquía tipográfica de tu sitio:
- Niveles de encabezado (H1–H6)
- Texto del cuerpo
- Enlaces
- Botones
Hay más de 1500 opciones de fuente disponibles. Por ahora solo se admiten fuentes con caracteres latinos.
Previsualizar los cambios
Antes de publicar, usa el editor para validar cómo se ven tus estilos en todo el sitio.
- Vista previa de la página (2): tus cambios se reflejan en directo en la vista previa a medida que los haces.
- Conmutador de grupo de páginas/entidad (4): cambia entre distintos grupos de páginas y entidades para confirmar que tus estilos se ven correctamente en todo el sitio. También puedes abrir una entidad en Knowledge Graph directamente desde aquí para hacer cambios de contenido.
- Controles de visor (7): cambia entre las vistas de escritorio, tableta y móvil para comprobar la capacidad de respuesta.
- Vista previa de cambios (9): genera un enlace de vista previa que puedes compartir con todas tus ediciones sin publicar. Úsalo para recabar comentarios de las partes interesadas antes de la publicación. La vista previa refleja los cambios locales; tu sitio en directo solo refleja los cambios publicados.
- Conmutador de panel (6): contrae el panel derecho para conseguir un espacio de vista previa más amplio.
Nota: Puedes alternar entre grupos de páginas y entidades para obtener una vista previa, pero no puedes añadir, reordenar ni eliminar secciones desde el editor de estilos globales. Para modificar la estructura de la página, utiliza el editor de diseño.
Publicar tus cambios
Los cambios se guardan automáticamente mientras trabajas. Cuando estés listo para activar las actualizaciones:
- Haz clic en Publicar en los controles de cambios (8). Si tus páginas ya están activas, este botón muestra Actualizar # páginas.
Tus estilos se activan en todas las páginas y todos los grupos de páginas al mismo tiempo.
Para verificarlo: una vez publicado, abre tu sitio en directo (9) y actualiza para confirmar que las actualizaciones son visibles.
Nota: el botón Publicar está desactivado mientras hay un despliegue en curso o tu sitio tiene errores. Aún puedes hacer y guardar cambios localmente; estarán listos para publicarse una vez que termine el despliegue o se resuelva el error. Consulta Ver páginas e Investigar errores para más detalles.