Personalización
Adapta el aspecto de tus widgets para que coincidan con el diseño de tu página web. Todos los ajustes se encuentran en el Widget Builder bajo los Ajustes de integración (icono de engranaje).
Temas
Los temas son combinaciones de colores predefinidas que cambian toda la apariencia de tu widget con un solo clic.
Temas disponibles
| Tema | Descripción |
|---|---|
| Modern Blue | Azul clásico - profesional y fiable |
| Dark Elegant | Fondo oscuro con texto claro |
| Fresh Green | Natural y fresco - ideal para yoga y bienestar |
| Warm Orange | Energético y acogedor |
| Premium Gold | Refinado y de gama alta |
| Ocean | Tonos azul-turquesa relajantes |
| Nature | Colores terrosos y naturales |
| Violet | Moderno y creativo |
| Custom Colors | Configura todo manualmente |
Seleccionar un tema
- Abre el Widget Builder
- Haz clic en el icono de engranaje (Ajustes de integración)
- Selecciona el esquema de colores deseado en "Tema"
- Los colores se aplican automáticamente
Colores personalizados
Selecciona "Custom Colors" para configurar cada color individualmente. O elige un tema como punto de partida y luego ajusta los colores individuales.
Colores
Puedes configurar los siguientes colores individualmente:
| Color | Se usa para |
|---|---|
| Color primario | Botones, enlaces, acentos, estados hover |
| Color de fondo | Fondo del widget |
| Color del texto | Encabezados y texto principal |
| Color del texto secundario | Descripciones, etiquetas, información adicional |
| Color del borde | Bordes, separadores, contornos de tarjetas |
| Color de éxito | Indicador de disponibilidad, confirmaciones |
| Color de error | Indicador de agotado, mensajes de error |
Cambiar un color
- Haz clic en la muestra de color junto al color respectivo
- Elige un color con el selector de color o introduce un código hex (p. ej.
#84CC16) - La vista previa en el lienzo se actualiza inmediatamente
Consejo: Usa el mismo color primario que en tu página web - así el widget se integra perfectamente.
Ajustes del contenedor
Estos ajustes afectan al marco exterior de todo el widget.
Ancho
| Opción | Descripción |
|---|---|
| 100% | Ancho completo del elemento contenedor |
| 90% | Con un pequeño margen a izquierda y derecha |
| 80% | Con un margen mayor |
| 800px | Ancho fijo (800 píxeles) |
| 1000px | Ancho fijo (1000 píxeles) |
Ancho máximo
Limita el ancho incluso con ajuste en porcentaje:
| Opción | Descripción |
|---|---|
| 800px | Compacto - ideal para widgets en barra lateral |
| 1000px | Estándar |
| 1200px | Ancho |
| 1400px | Muy ancho |
| Ninguno | Ilimitado |
Espaciado interior (Padding)
| Opción | Descripción |
|---|---|
| 0px | Sin espaciado interior |
| 8px | Mínimo |
| 16px | Pequeño |
| 24px | Estándar |
| 32px | Grande |
Redondeo de esquinas (Border Radius)
Controla el redondeo de las esquinas de tarjetas y elementos dentro del widget. Valores desde 0px (cuadrado) hasta 32px (muy redondeado).
Sombra
Activa o desactiva una sombra sutil alrededor del widget.
Diseños específicos por widget
Algunos widgets ofrecen diferentes opciones de diseño:
Cuadrícula
- Cuadrícula responsiva automática
- Los elementos llenan el espacio disponible
- Automáticamente se convierte en una columna en pantallas pequeñas
Lista
- Listado vertical
- Cada elemento usa el ancho completo
- Ideal para representaciones detalladas
Carrusel
- Desplazamiento horizontal
- Optimizado para táctil en dispositivos móviles
- Navegación con flechas en escritorio
Comportamiento responsivo
Todos los widgets se adaptan automáticamente al tamaño de la pantalla:
| Dispositivo | Comportamiento |
|---|---|
| Escritorio | Diseños multicolumna, vista en cuadrícula |
| Tablet | Menos columnas, espaciado ajustado |
| Móvil | Una sola columna, elementos apilados |
No necesitas configurar nada - el comportamiento responsivo funciona automáticamente.
Terminología dinámica
Los widgets usan automáticamente las etiquetas que has configurado en tu estudio:
- En lugar de "Trainer", puedes usar Coach, Instructor o Terapeuta
- En lugar de "Cursos", puedes usar Talleres, Seminarios o Sesiones
Cambiar la terminología
- Ve a Configuración → General → Terminología
- Selecciona los términos adecuados para tu estudio
- Los widgets adoptan el cambio automáticamente - no es necesario volver a incrustar
Marca
Se aplica automáticamente
Los widgets heredan automáticamente:
- El nombre de tu estudio
- La terminología elegida
- Los colores configurados
Aislamiento de tu página web
El widget se ejecuta en un área aislada (Shadow DOM). Esto significa:
- El CSS de tu página web no influye en la apariencia del widget
- El CSS del widget no cambia nada en tu página web
- Los colores y el estilo se controlan exclusivamente a través de los ajustes del widget
Buenas prácticas
Coincidir con tu página web
- Usa el mismo color primario que en tu página web
- Elige un redondeo de esquinas similar
- Ajusta el fondo (transparente suele funcionar mejor)
Menos es más
- Los ajustes predeterminados están optimizados para la mayoría de las páginas web
- Empieza con un tema adecuado y solo ajusta el color primario
- Siempre prueba en escritorio y móvil
Pruebas
- Usa la función de vista previa en el builder
- Comprueba el widget en tu página web real
- Prueba en diferentes dispositivos y navegadores
- Haz clic en todo: clases, filtros, entrenadores
Preguntas frecuentes
¿Puedo añadir CSS personalizado al widget?
No. El widget se ejecuta en un Shadow DOM aislado que no se puede acceder desde fuera mediante CSS. Todas las personalizaciones visuales se realizan a través de los ajustes del Widget Builder.
¿Por qué el widget se ve diferente en mi página web que en la vista previa?
El widget se adapta al ancho del contenedor en el que está en tu página web. Si el contenedor es más estrecho que en el builder, el diseño se ve ligeramente diferente. Sin embargo, el contenido se adapta automáticamente.
¿Puedo cambiar la fuente?
Los widgets usan fuentes del sistema para tiempos de carga rápidos. Actualmente no es posible configurar una fuente personalizada.
¿Los cambios son visibles inmediatamente?
Sí. En cuanto hagas clic en "Guardar" en el Widget Builder, los cambios son inmediatamente visibles en tu página web. No necesitas volver a insertar el código de incrustación.
¿Necesito actualizar el código de incrustación cuando hago cambios?
No. El código de incrustación siempre se mantiene igual. Todos los cambios de diseño, widgets y contenido se aplican automáticamente.