Elegir un tema y ajustar la apariencia

Elegir un tema en Éclair lleva unos minutos y no rompe nada: los contenidos, el posicionamiento y la velocidad siguen idénticos, solo cambia la apariencia. Esta lección repasa los 6 temas incluidos, la vista previa en directo y cada ajuste de Ajustes › Apariencia: color, fuentes, logo, cabecera y modo oscuro. El hilo conductor: Atelier Nova, un taller de cerámica en Lyon.

¿Tema clásico o dirección de arte?

En la parte superior de Ajustes › Apariencia, la sección Estilo del sitio ofrece dos caminos. Dirección de arte aplica un universo completo: paleta, tipografía de títulos descargada y composiciones; la lección sobre las direcciones la explica a fondo. Tema clásico se describe como «Sobrio y versátil, fuentes del sistema: nada que descargar». Esta lección trata del tema clásico. Si pruebas una dirección, los ajustes de tu tema clásico quedan guardados: los recuperas intactos al volver.

Los 6 temas incluidos

Al elegir un tema se aplican su color, sus fuentes y su disposición recomendadas: después puedes cambiarlo todo. Para Atelier Nova, el tema Taller se impone casi solo: tonos crema, esquinas redondeadas y sombras suaves, ideal para fotos de piezas de barro. Estudio sería la alternativa si las fotos están muy cuidadas: las pone en primer plano en un marco en blanco y negro.

¿Cómo elegir un tema con la vista previa en directo?

1. Abre Ajustes › Apariencia y, en Estilo del sitio, elige Tema clásico.
2. Haz clic en la tarjeta de un tema: la Vista previa en directo se actualiza debajo de las tarjetas.
3. Con la lista desplegable que hay encima de la vista previa, pasa del inicio al blog, a un artículo, a la tienda o a un producto. También puedes hacer clic dentro de la vista previa: sus enlaces no salen de ella.
4. Alterna entre Ordenador y Móvil para juzgar los dos formatos.
5. Compara dos o tres temas en la misma página y haz clic en Guardar.

No se publica nada mientras no guardes: tus visitantes no ven ninguna de tus pruebas.

El color principal, con contraste garantizado

El Color principal tiñe los botones, los enlaces, las viñetas de las listas, el resaltado y el contorno que marca el elemento seleccionado con el teclado. Elígelo con el selector o con una de las 8 muestras propuestas.

Éclair cuida la legibilidad: el texto de los botones pasa a blanco o a casi negro según tu color, y el color de los enlaces se oscurece, o se aclara en modo oscuro, justo lo necesario para alcanzar un contraste de 4,5:1, el umbral de las normas WCAG para el texto normal. Así puedes elegir un amarillo sol o un rosa empolvado sin que tus enlaces dejen de leerse. Para Atelier Nova, la terracota del tema Taller (#c2410c) recuerda el color de la arcilla.

Fuentes del sistema, cero descargas

Fuente de los títulos y Fuente del texto ofrecen 8 estilos cada una. Son fuentes que ya están instaladas en el dispositivo del visitante: el navegador toma la primera disponible de una lista, así que no se descarga nada y el texto aparece al instante. El resultado varía un poco entre un Mac, un PC y un móvil Android, pero el carácter se mantiene.

Una regla sencilla: una sola familia para todo el sitio, o títulos con serifa y texto sin serifa. Atelier Nova mantiene Humanista en todas partes, como propone el tema Taller.

Cabecera, listas, logo y pie de página

• Cabecera: «Logo a la izquierda, menú a la derecha» o «Centrado: logo encima del menú».
• Listas de artículos y productos: «Cuadrícula de tarjetas» o «Lista: imagen a la izquierda», más sobria para un blog.
• Logo: PNG o WebP con fondo transparente, de unos 400 px de ancho. Se muestra a unos 38 px de alto: mejor una versión horizontal.
• Icono del sitio (favicon): imagen cuadrada de 512 px como mínimo. Sin icono, Éclair genera un rayo con tu color.
• Texto del pie de página: una o dos líneas útiles, por ejemplo la dirección y el horario del taller.
• Mostrar «Creado con ⚡ Éclair»: desactívalo si lo prefieres, la licencia MIT no lo exige.

Modo oscuro: automático o siempre claro

El ajuste Modo oscuro ofrece dos opciones. Automático (según el dispositivo del visitante) es la opción predeterminada: cada tema tiene su paleta oscura, que se aplica cuando el móvil o el ordenador del visitante está en modo oscuro, con enlaces recalculados para que sigan siendo legibles. Siempre claro muestra el sitio en claro para todo el mundo.

Elige «Siempre claro» si tu identidad se basa en un fondo claro, o si tu logo es oscuro sobre fondo transparente: sobre un fondo oscuro, casi desaparecería. Para comprobarlo, pon tu propio dispositivo en modo oscuro y recarga tu sitio.

¿Por qué un tema solo pesa de 1,5 a 3 KB?

Un tema de Éclair es solo una hoja de estilos de 1,5 a 3 KB que se añade a la hoja base. El HTML no cambia de un tema a otro: la velocidad, la accesibilidad, los datos estructurados y el posicionamiento siguen idénticos. Solo se inserta en la página el tema activo junto con el CSS base, es decir, de 17 a 23 KB en total y de 5 a 6 KB una vez comprimidos.

Como las fuentes vienen del sistema, ninguna petición bloquea la visualización y la maquetación no salta durante la carga. Para ir más allá de un tema sin perder esa ligereza, tienes dos herramientas: una dirección de arte o unas pocas líneas de CSS personalizado.

Para recordar

• El tema solo afecta a la apariencia: los contenidos, las URL y las puntuaciones no cambian.
• Antes de elegir un tema, pruébalo en la vista previa en directo, sobre una página real y en versión móvil.
• Cualquier color principal sirve: Éclair ajusta los botones y los enlaces para mantener un contraste de 4,5:1.
• Comprueba tu logo en modo oscuro, o elige «Siempre claro».
• Para ir más allá de los 6 temas: dirección de arte o CSS personalizado.

Para saber más

• Direcciones de arte y puntuación de diseño: 12 universos completos, con tipografías propias y composiciones.
• El CSS personalizado: retocar un detalle del tema sin tocar sus archivos.
• Personalizar las plantillas del tema: para desarrolladores que quieren cambiar la estructura HTML.
• Fuente oficial: entender el contraste mínimo, en el sitio del W3C (WCAG 2.2, en inglés).

Todas las lecciones de la ruta