Este tutorial explica cómo personalizar los colores del widget de TuCalendi mediante una plantilla de tema. Los colores definen la identidad visual del widget y te permiten adaptarlo a la imagen de marca de cada negocio.
Cuando creas una nueva plantilla de tema, todos los campos de color se rellenan automáticamente con la configuración predeterminada. A partir de ahí, puedes modificar cada color por separado hasta conseguir el aspecto que buscas.
El widget tiene seis campos de color individuales y un campo adicional para el tema general:
- Color primario. El color principal de la interfaz: botones, días y elementos destacados.
- Color secundario. Color de acento para los elementos secundarios.
- Color del texto principal.
- Color del texto secundario.
- Color destacado. Se usa para resaltar elementos dentro del widget.
- Color de fondo.
- Tema de color. Modo visual general: Automático, Claro u Oscuro.
Antes de empezar
Para seguir este tutorial, tienes que ir a la sección Apariencia del widget y tener creada una plantilla de tema que puedas editar. El proceso completo para crear y asignar plantillas se explica en el tutorial general sobre cómo crear y asignar una plantilla de tema del widget.
Paso 1. Accede a la configuración de apariencia del widget
Desde el menú lateral de TuCalendi, ve a la sección "Widgets" y selecciona la opción "Apariencia".
Paso 2. Crea o edita una plantilla de apariencia del widget
Dentro de la sección "Apariencia", crea una nueva plantilla o edita una existente haciendo clic en "Editar".
Paso 3. Revisa la configuración de colores predeterminada
Cuando creas una nueva plantilla, todos los campos de color se rellenan automáticamente con valores predeterminados. En la siguiente captura puedes ver cómo se ve el editor con la configuración de colores predeterminada.
Paso 4. Personaliza los colores de la plantilla
Haz clic en cualquiera de los campos de color para abrirlo y selecciona el valor que quieras. Puedes modificar cada campo de forma independiente:
- Color primario: afecta a los botones principales, a los días seleccionados en el calendario y a los elementos más destacados de la interfaz.
- Color secundario: se aplica a los elementos de apoyo de la interfaz.
- Color del texto principal: controla el color del texto principal visible en el widget.
- Color del texto secundario: controla el color del texto secundario, como descripciones y etiquetas.
- Color destacado: se usa para resaltar elementos especiales, como notificaciones o acciones importantes.
- Color de fondo: define el color de fondo del widget.
- Tema de color: te permite elegir entre Automático (el widget adapta su apariencia al modo claro u oscuro del sistema del usuario), Claro (siempre en modo claro) u Oscuro (siempre en modo oscuro).
La siguiente captura muestra el editor con los colores de TuCalendi aplicados como ejemplo de personalización.
Paso 5. Guarda los cambios
Después de configurar todos los colores que quieras, haz clic en "Guardar" para aplicar los cambios a la plantilla de tema.
Paso 6. Comprueba la asignación del elemento
Una vez guardada la plantilla, comprueba que esté asignada al hub o a la encuesta con enrutamiento correspondiente. Si la plantilla no está asignada a ningún elemento, los cambios no se verán reflejados en ningún widget.
Paso 7. Comprueba el resultado en el widget
Cuando hayas configurado los colores y guardado los cambios, el widget mostrará la nueva paleta de colores en todas sus pantallas. La siguiente captura muestra cómo se ve la personalización de colores en el widget que ve el usuario final.
Resumen del proceso
Para personalizar los colores del widget, ve a "Apariencia del widget", crea o edita una plantilla y modifica los campos de color disponibles: Color primario, Color secundario, Color del texto principal, Color del texto secundario, Color destacado, Color de fondo y Tema de color. Al crear una nueva plantilla, todos los campos se rellenan con valores predeterminados que puedes modificar libremente. Haz clic en "Guardar", comprueba que la plantilla esté asignada al hub o a la encuesta correspondiente y revisa cómo se ve el widget después de personalizar los colores.