Temas e identidad visual

Tus temas personalizados y la biblioteca predeterminada aparecen lado a lado como tarjetas con muestras de color. Usa un tema de la biblioteca tal cual con un clic, clónalo y personalízalo como tuyo, o crea un tema desde cero; un tema clonado siempre se puede restablecer al original de la biblioteca.

¿Quieres un sitio completo para empezar, no solo un diseño? Mira las plantillas de páginas web para clubes listas para usar en la galería de plantillas.

El editor de temas es una página de inicio de club de ejemplo dibujada con tu tema: haz clic en la barra de navegación, un título, una tarjeta, un botón o el pie de página, y sus ajustes se abren junto al lienzo. Elige colores con un selector de muestras o pega un valor hexadecimal; una fila de paleta debajo de cada selector guarda los colores de tu marca, así una variante de botón puede reutilizar un color guardado con un clic.

Elige tipografías de una lista con buscador de las que sirve tu sitio, define tamaños y grosores de títulos y bordes redondeados, y alterna entre vista de computadora y celular mientras trabajas. Las variables personalizadas, y la exportación e importación en JSON, están ahí cuando las necesites.

Elige entre veinte familias tipográficas de licencia abierta servidas desde nuestros propios servidores, además de las tipografías del sistema, así la tipografía que eliges es la que ve cada visitante, en cualquier celular. Predeterminada del tema devuelve un campo a la tipografía estándar.

En el plan Pro, sube las tipografías propias de tu club como archivos WOFF2, de hasta 500 KB cada uno y uno por grosor, después de confirmar que el club tiene licencia para usarlas en un sitio web. Si cambias a un plan inferior se conservan pero no se usan; vuelven cuando regresas.

Define el espacio entre secciones (Compacto, Estándar, Amplio o Espacioso), una sombra y un borde para las tarjetas de contenido, y un tamaño mínimo y máximo para títulos y texto, así la tipografía se adapta sin saltos del celular a la computadora.

La pestaña Guía de estilo dibuja cada tipo de sección que puedes agregar a una página con el tema que estás editando, cambios sin guardar incluidos, para que veas el sitio completo antes de guardar.

Elige cómo se organiza la parte superior de cada página: logotipo a la izquierda con enlaces a la derecha, logotipo centrado con enlaces debajo, enlaces centrados con botones a la derecha, o un menú dividido alrededor de un logotipo centrado. Dale un fondo con tu color principal, claro, oscuro, o claro con una línea de color. Después elige uno de cuatro pies de página: en columnas, centrado y compacto, en columnas con franja de patrocinadores, o una sola línea mínima.

El editor de navegación muestra una vista previa de cada opción al elegirla. En un celular, todos los diseños mantienen la fila compacta estándar, así el botón del menú siempre está donde el pulgar lo espera.

Cualquier sección de la columna principal de una página puede llevar un estilo: una portada para la imagen de apertura, una franja de acento con el color de tu marca, una columna angosta para textos largos, dos columnas o una imagen a todo lo ancho. Los estilos se activan en tu sitio la primera vez que un administrador elige uno, así nada cambia en un sitio existente hasta que tú decides, y el selector te avisa en palabras simples cuando un estilo podría hacer que el texto cueste más leer.

En el plan Pro, Tema → CSS propio acepta una hoja de estilos para todo el sitio de hasta 20 KB, y cualquier sección de la columna principal puede llevar hasta 2 KB propios. Cada regla se revisa al guardar y otra vez cada vez que se sirve la página, y el editor te muestra lo que quitó y por qué.

Los límites evitan que una hoja de estilos rompa el sitio o vaya más allá de él. No puede importar otras hojas de estilos ni cargar fuentes web, solo puede usar imágenes que tú subiste, no puede fijar capas fijas o adhesivas sobre la página, y se aplica solo a tu sitio público, nunca a tus pantallas de administración. Si cambias a un plan inferior, tu CSS se conserva pero no se muestra; vuelve cuando regresas a Pro.

La identidad visual te acompaña en todas partes: el sitio público, los correos automáticos y el portal de socios toman automáticamente el logotipo y la identidad visual de tu club. Los botones siguen los colores de tu marca hasta que decidas cambiarles el estilo, así que cambiar tu color principal viste todo el sitio de nuevo de una sola vez: los colores de tu club como tema de la web, sin un diseñador en la comisión directiva.

Un historial de versiones registra cada cambio guardado, con restauración en un clic a cualquier diseño anterior, y los menús tienen su propio historial de versiones, así un cambio en la navegación se puede revertir de la misma forma. Además, una revisión de legibilidad incorporada te impide guardar un texto que no cumple el contraste de accesibilidad con el fondo de la página, para que un cambio de imagen entusiasta nunca deje ilegibles los partidos.

El Asistente Helix puede cambiar el estilo del sitio a partir de un pedido en lenguaje simple, como “usa los colores de nuestra camiseta”, con una vista previa completa antes de guardar nada.