Personaliza el aspecto de un sitio de documentación
Establece el logotipo, el icono de sitio, el color de marca, las fuentes, las esquinas, el tema predeterminado y el encabezado de la página de inicio de un sitio de documentación, y elige si se muestra la insignia "Powered by Clevera". Previsualiza cada cambio antes de guardar y publicar.
Apariencia controla cómo ven los lectores tu sitio de documentación: el logotipo y el icono de sitio, un color de marca, las fuentes, la forma de las esquinas, el tema claro u oscuro predeterminado y el encabezado de tu página de inicio. Cada cambio se muestra en una vista previa en directo a medida que lo realizas, y se publica con tu próxima publicación.
Antes de empezar
- Los propietarios, administradores y editores pueden cambiar la apariencia. Otros verán "Solo los administradores y editores pueden cambiar el aspecto del sitio."
- Un sitio en pausa es de solo lectura: "Este sitio está en pausa. Reanúdalo para cambiar su aspecto."
- El nombre del sitio se establece en Ajustes → General, no aquí.
Cambiar la apariencia
Abrir Apariencia
Abre tu sitio de documentación y ve a Apariencia bajo Sitio. El formulario está a la izquierda y la Vista previa en directo a la derecha. En una ventana estrecha, haz clic en Vista previa para abrirla.
La pantalla de Apariencia con su vista previa en directo Realiza tus cambios
Trabaja en las secciones a continuación. La vista previa se actualiza a medida que escribes.
Comprueba la vista previa
Cambia la vista previa entre Escritorio y Teléfono, Ligero y Oscuro, y entre la página de Inicio y una página de Artículo.
Guardar y publicar
Una barra muestra Cambios sin guardar con Descartar y Guardar. Haz clic en Guardar, luego publica el sitio para poner en vivo el nuevo aspecto. Si la publicación automática está activada, se publica por sí sola un par de minutos después.
Si abandonas la página con cambios sin guardar, Clevera te preguntará antes de que los pierdas.
Logotipo e icono de sitio
"PNG, JPG, WebP o SVG, hasta 2 MB."
| Ranura | Para qué sirve | Cuando está vacía |
|---|---|---|
| Fondo ligero | El logotipo en el encabezado en modo claro | El nombre del sitio se muestra como texto ("Nombre del sitio como texto") |
| Fondo oscuro | El logotipo en modo oscuro | "Usa el logotipo claro" |
| Icono de sitio | El icono pequeño en la pestaña del navegador | "Desde tu logotipo" |
Cada ranura tiene Subir, Reemplazar y Eliminar. "Usamos el logotipo claro en fondos oscuros si omites el oscuro. El icono de sitio proviene de tu logotipo a menos que subas uno."
Color
"Un color de marca para botones, enlaces y destacados."
- Haz clic en una de las 8 muestras, o usa el selector de color para "Elegir o pegar cualquier color" como un valor hexadecimal como
#2563eb. El predeterminado es#4f46e5. - Activa Establecer un color para modo oscuro para elegir el color utilizado en fondos oscuros. Desactivado: "De lo contrario, aclaramos tu color para fondos oscuros". El color derivado se muestra como Automático con su valor hexadecimal.
- Una nota de contraste a continuación comprueba tus enlaces. "Los enlaces se leen bien en fondos claros y oscuros" significa que todo está bien; "Los enlaces pueden ser difíciles de leer. Los oscureceremos ligeramente" significa que el sitio ajusta el color del enlace para facilitar la lectura.
Tipografía
"Combinaciones populares que funcionan en todos los idiomas, o cualquier fuente de Google."
| Combinación | Encabezados | Cuerpo de texto |
|---|---|---|
| Inter (predeterminado) | Inter | Inter |
| Geist | Geist | Geist |
| Manrope | Manrope | Manrope |
| Plus Jakarta Sans | Plus Jakarta Sans | Plus Jakarta Sans |
| DM Sans | DM Sans | DM Sans |
| IBM Plex Sans | IBM Plex Sans | IBM Plex Sans |
| Space Grotesk + Inter | Space Grotesk | Inter |
| Source Serif + Sans | Source Serif 4 | Source Sans 3 |
Para algo más, haz clic en Más fuentes… y elige cualquier fuente de Google para Encabezados, Cuerpo de texto o ambos. La lista comienza con las fuentes más populares; escribe para buscarla por nombre. Cada fuente muestra su estilo: Sans-serif, Serifa, Visualización, Escritura a mano o Monoespaciada.
"Cualquier fuente de Google. La alojamos con tu sitio, por lo que los lectores nunca la cargan desde Google. Los idiomas que carecen de ella usan la combinación". Así que si tu fuente no tiene caracteres japoneses, las páginas en japonés recurrirán a la combinación que elegiste.
Forma y tema
| Ajuste | Opciones | Predeterminado |
|---|---|---|
| Esquinas | Nítido, Suave, Redondo: el redondeo de botones, tarjetas y cajas | Suave |
| Tema predeterminado | Sistema (sigue el dispositivo del lector), Ligero, Oscuro. "Los lectores pueden cambiarlo en el encabezado". | Sistema |
Encabezado de la página de inicio
Inicio establece "La parte superior de la página principal de tu sitio".
| Campo | Qué hace | Predeterminado |
|---|---|---|
| Título | El encabezado grande, hasta 120 caracteres | El nombre de tu sitio |
| Subtítulo | La línea debajo, hasta 300 caracteres | Vacío |
| Cuadro de búsqueda | Un cuadro de búsqueda debajo del título | Activado |
| Fondo | Lo que se sitúa "Detrás del título y el cuadro de búsqueda". | Degradado (Brillo suave) |
Título y Subtítulo pueden diferir según el idioma: abre Otros idiomas bajo el campo, o haz clic en Traducir a todos los idiomas para completar los que faltan de forma gratuita. Los idiomas vacíos muestran el texto del idioma predeterminado.
Fondo
"Los colores del texto se ajustan para seguir siendo legibles, en modo claro y oscuro". Una lectura de contraste como "Contraste del título · Claro 7.1:1 · Oscuro 9.4:1" muestra qué tan bien se lee el título.
| Opción | Elecciones |
|---|---|
| Simple | Sin color, degradado o imagen detrás del título |
| Color | Un tinte o sombra "Sugerido a partir de tu color de marca, o elige cualquiera": Tinte tenue, Tinte claro, Tinte suave, Color de marca, Sombra profunda, Tinta, Papel, Carbón |
| Degradado | Brillo suave, Lavado, Aurora, Amanecer, Marca, Medianoche, Niebla, Arena, Grafito |
| Imagen | Un patrón dibujado (Ondas, Malla, Puntos, Plano, Contornos, Anillos, Líneas, Constelación) o Tu propia imagen |
Los patrones siguen tu color de marca y están en todos los planes. Tu propia imagen requiere Starter o superior: "PNG, JPG o WebP hasta 8 MB. Las imágenes anchas funcionan mejor; las redimensionamos y comprimimos para los lectores". Se "Muestra en lugar de un patrón, oscurecida para que el título se lea".
Insignia
Mostrar "Powered by Clevera" añade "Una pequeña insignia en el pie de página".
| Plan | Insignia |
|---|---|
| Gratuito | Siempre se muestra; el interruptor está bloqueado |
| Starter, Pro, Business, Personalizado | Activado por defecto; desactívalo para ocultarlo |
Qué incluye cada plan
| Opción | Gratuito | Starter y superior |
|---|---|---|
| Logotipo, icono de sitio, colores, fuentes, esquinas, tema | Sí | Sí |
| Fondo de inicio: simple, color, degradado, patrón | Sí | Sí |
| Fondo de inicio: tu propia imagen | No | Sí |
| Ocultar la insignia | No | Sí |
Consulta Planes y límites del sitio de documentación para todo lo demás.
Solución de problemas
| Ves | Qué hacer |
|---|---|
| "Esa imagen supera los 2 MB". | Haz el logotipo más pequeño o guárdalo como WebP o SVG. Una imagen de inicio puede ser de hasta 8 MB. |
| "Usa una imagen PNG, JPG, WebP o SVG". | Los logotipos e iconos de sitio solo aceptan estos tipos. Las imágenes de inicio aceptan PNG, JPG o WebP. |
| "No pudimos usar esta imagen. Prueba con un PNG o JPG". | El archivo no pudo ser leído. Expórtalo de nuevo como PNG o JPG. |
| "Esa imagen no se subió. Inténtalo de nuevo". | La subida se interrumpió. Inténtalo de nuevo. |
| "No se pudo guardar la apariencia. Inténtalo de nuevo". | No se guardó nada. Comprueba cualquier campo marcado en rojo, luego haz clic en Guardar de nuevo. |
| "La lista de fuentes no se cargó". | Haz clic en Inténtalo de nuevo. Tus fuentes actuales permanecen como están. |
| El sitio en vivo todavía se ve de la forma antigua | Guardar no publica. Haz clic en Publicar en la parte superior del sitio. |