Tema

La página Tema es donde eliges el aspecto de tu sitio web público: los colores, las fuentes, los botones y el estilo de las esquinas que los visitantes ven en cada página. La encuentras en la barra lateral de administración, en Tema. Funciona como los editores de páginas y de navegación: una galería de temas y un editor de lienzo en el que haces clic en la parte de la página que quieres cambiar.

Quién puede usar esto

Editar el tema está limitado a los administradores. Cada acción (activar, clonar, guardar y restaurar) comprueba el rol de administrador, así que los moderadores y los socios no pueden hacer cambios aquí.

Qué hay en la página

La página Tema es una galería. Tus temas personalizados se muestran como tarjetas con una muestra de colores, y debajo está la Biblioteca predeterminada de temas listos para usar. La línea debajo del título te dice qué tema está activo en este momento (dice "Predeterminado de la plataforma" hasta que actives uno propio).

Al hacer clic en Editar en un tema se abre su editor de lienzo: una página de inicio de club de ejemplo dibujada con los colores y las fuentes de tu tema. Haz clic en cualquier parte de la página (la barra de navegación, un título, el texto principal, una tarjeta, un botón, las insignias de estado o el pie de página) y su configuración se abre en un panel de configuración a la derecha, el mismo panel que usan los editores de páginas y de navegación. El lienzo sigue funcionando detrás, así que al hacer clic en otra zona el panel pasa a esa zona; Esc o la ✕ lo cierran. En una pantalla angosta, el panel ocupa toda la pantalla y sus campos se apilan en una sola columna. Las pestañas encima del lienzo cambian a Toda la configuración del tema (cada color, fuente, botón, redondeo, espaciado y configuración de tarjetas agrupados en un solo lugar), la Guía de estilo (cada sección que puedes agregar a una página, dibujada con el tema que estás editando) y JSON (avanzado) para exportar e importar. Al final hay un Historial de versiones con cada cambio guardado.

En la galería, Tus fuentes enumera las fuentes que subió tu club (Pro).

Cerca de la parte superior también hay una sugerencia del Asistente Helix. Describe un cambio con palabras sencillas (por ejemplo, "Cambia el color principal a azul marino y el de acento a dorado") y el asistente lo hace por ti.

Paso a paso

Empezar con un tema ya hecho

1. Recorre la Biblioteca predeterminada, donde cada tema se muestra con una muestra de colores.
2. Haz clic en Usar tal cual para que ese tema sea el tema activo de tu sitio de inmediato.
3. O haz clic en Clonar y personalizar para copiarlo en Tus temas personalizados y abrir su editor de lienzo.

Crear un tema desde cero

1. En Tus temas personalizados, haz clic en + Nuevo tema personalizado.
2. Ponle un nombre (por ejemplo, "Plantilla juvenil") y haz clic en Crear y editar: se abre el editor de lienzo.

Personalizar en el lienzo

1. Abre un tema con su botón Editar.
2. Haz clic en la parte de la página de ejemplo que quieres cambiar: la barra de navegación, un título, el texto principal, una tarjeta, un botón, las insignias de estado o el pie de página. Su configuración aparece en el panel de la derecha.
3. Elige colores con el selector, pega un valor hexadecimal o haz clic en un punto de la fila de la paleta debajo de cada selector: tiene tus colores de marca y cualquier color personalizado, así una variante de botón puede reutilizar un color guardado con un solo clic. Elige fuentes de la lista con búsqueda; define tamaños y grosores de los títulos y el redondeo de las esquinas. El lienzo se actualiza mientras escribes.
4. Usa el selector Escritorio / Celular para revisar ambas vistas, y la fila Agregar a este tema (encima del lienzo y en la parte inferior del panel) para agregar colores personalizados o variantes de botón.
5. Haz clic en Guardar tema en el botón flotante de guardado (arriba a la derecha) cuando estés conforme. Se mantiene atenuado hasta que cambias algo, así que solo se registra una versión cuando hay algo para registrar.

Elegir fuentes

1. Haz clic en un título o en el texto principal del lienzo, o abre Toda la configuración del tema, y haz clic en un campo de fuente.
2. La lista muestra solo las fuentes que se cargan en tu sitio para todos los visitantes: las fuentes del sistema, unas veinte fuentes de licencia abierta que alojamos por ti y las fuentes que haya subido tu club. Cada nombre se muestra en su propia fuente. Escribe para filtrar la lista y después haz clic en una fuente para elegirla.
3. Si tu tema se configuró con una fuente que no está en la lista, se muestra primero, marcada como No cargada. Sigue funcionando como siempre: los visitantes que tienen esa fuente instalada la ven, y todos los demás ven la fuente alternativa. Elige una fuente de la lista cuando quieras que todos vean lo mismo.
4. Para volver a la fuente estándar, elige Predeterminada del tema al principio de la lista. El campo se vacía y tu sitio usa la fuente estándar de ClubHelix (Inter, o Source Serif 4 para la fuente con serifa). La próxima vez que abras el tema, el campo muestra el nombre de esa fuente.

Definir el espaciado, las tarjetas y el texto adaptable

1. Abre Toda la configuración del tema.
2. En Espaciado y tarjetas, elige el Espacio entre secciones de tus páginas (Compacto, Estándar, Amplio o Muy amplio), y una Sombra, un Borde y una Línea de borde para las tarjetas de contenido (los recuadros que contienen eventos, enlaces, personas y elementos similares). También puedes definir la configuración de las tarjetas desde el lienzo: haz clic en una tarjeta y busca en Tarjetas.
3. En Títulos, completa Mínimo (teléfonos) y Máximo (escritorio) para que un título se adapte de forma gradual al ancho de la pantalla. Usa px o rem, como 1.75rem y 3rem. Tamaño del texto principal tiene el mismo par.
4. Deja una opción en Predeterminado (como ahora), o deja un rango de tamaños en blanco, y tu sitio se verá exactamente como hoy.

Revisarlo todo en la Guía de estilo

1. Haz clic en la pestaña Guía de estilo.
2. Cada tipo de sección que puedes agregar a una página se dibuja con contenido de ejemplo, con los colores, las fuentes, el espaciado y los estilos de tarjeta que estás editando, incluidos los cambios que todavía no guardaste.
3. Vuelve a otra pestaña, cambia algo y mira otra vez. Cuando estés conforme, haz clic en Guardar tema.

Subir tu propia fuente (Pro)

1. Consigue tu fuente como archivo WOFF2, un archivo por grosor (por ejemplo, Normal y Negrita). No se aceptan archivos TTF, OTF ni WOFF, así que conviértelos primero. Cada archivo puede pesar hasta 500 KB.
2. En la galería de Tema, busca Tus fuentes. Elige el archivo, escribe el Nombre de la fuente que quieres ver en la lista de fuentes y elige su Grosor y su Estilo.
3. Marca la casilla para confirmar que tu club tiene licencia para usar la fuente en un sitio web y después haz clic en Subir fuente.
4. Abre un tema y elige la fuente de la lista, en Tus fuentes subidas. Sube cada grosor con el mismo nombre de fuente para que el texto en negrita use tu archivo en negrita.
5. Para quitar una fuente, haz clic en Eliminar a su lado. El texto que la usaba pasa a la siguiente fuente de tu tema.

Activar tu tema

1. En la galería, haz clic en Activar en un tema personalizado (o en Usar tal cual en la biblioteca). También puedes activarlo desde el encabezado del editor.
2. El botón dice Activo cuando ya está publicado en tu sitio.

Deshacer un cambio

• En el Historial de versiones, al final del editor, cada fila muestra cuándo se guardó una versión, quién la guardó y cuántas opciones cambió (por ejemplo, "3 tokens cambiados", con sus nombres). Haz clic en Restaurar en una versión anterior y confirma para recuperarla.
• Una restauración se guarda como una versión nueva, así que no se sobrescribe nada del historial. Si el tema está activo, tu sitio público cambia de inmediato.
• Una restauración se revisa igual que un guardado. Si una versión antigua tiene un valor de color o de fuente que ya no se permite, o un texto principal demasiado difícil de leer sobre el fondo, verás un mensaje que dice qué corregir y no cambia nada.
• En un tema clonado, Restablecer al original (en el encabezado del editor) lo devuelve al tema de la biblioteca del que salió.
• Descartar, en el botón de guardado, descarta los cambios sin guardar.

Referencia de campos

Consejos y preguntas frecuentes

• ¿Quién es responsable de la licencia de una fuente? Tu club. Antes de subir una fuente, comprueba que su licencia permita usarla en un sitio web. Muchas fuentes compradas para uso de escritorio no lo permiten. Las fuentes de la lista incorporada son todas de licencia abierta, así que puedes usarlas libremente.

• ¿Por qué mi fuente no está en la lista? La lista solo muestra las fuentes que verán todos los visitantes. En el plan Pro puedes subir las tuyas; si no, elige de la lista la más parecida.

• ¿Qué pasa con las fuentes subidas si dejamos el plan Pro? Se conservan, pero tu sitio deja de usarlas hasta que vuelvas al plan Pro. Igual puedes eliminarlas.

• ¿Por qué no se restaura una versión antigua? Tiene un valor que ya no aceptamos, por lo general un color o una fuente que podría romper la página, o un texto principal por debajo del contraste mínimo. Restaura otra versión, o cambia esa opción y guarda.

• ¿Por qué no se guardan mis colores? Para que el texto se pueda leer, el texto principal debe alcanzar un contraste de al menos 4.5:1 con el fondo de la página (WCAG AA). Si es demasiado bajo, verás un mensaje que te pide ajustar el color de Texto principal o de Fondo de página.

• ¿No cambió nada? Guardar un tema idéntico se omite a propósito, así los números de versión solo reflejan cambios reales.

• Los botones siguen tu marca. Los botones principal, secundario, de acento y de la barra de navegación siguen tus colores de marca automáticamente hasta que personalices sus colores directamente; a partir de ahí conservan los suyos.

• ¿Necesitas más que colores y fuentes? En el plan Pro, CSS personalizado (enlazado junto al tema activo) te permite agregar tu propio CSS a tu sitio web público.

• Avanza más rápido con Helix. Haz clic en Abrir el asistente y describe tus colores y fuentes con palabras sencillas.

• El tema controla el estilo general del sitio; para tu logotipo y la identidad del club, consulta Identidad visual. Para construir el sitio en sí, consulta Páginas y Navegación.