Este tutorial explica cómo configurar la sombra del widget de TuCalendi mediante una plantilla de apariencia. La sombra es el efecto visual que aparece alrededor del widget y ayuda a que se integre de forma natural en el diseño de la página donde está insertado.
El campo "Sombra del widget" ofrece dos opciones de configuración:
- Valor personalizado. Escribe un valor de sombra CSS directamente en el campo de texto.
- Plantillas predefinidas. Haz clic en "Seleccionar" para elegir una de las 9 plantillas de sombra que ofrece TuCalendi.
Antes de empezar
Para seguir este tutorial, debes ir a la sección Apariencia del widget y tener una plantilla de apariencia creada o en edición. El proceso completo para crear y asignar plantillas se explica en el tutorial general sobre cómo crear y asignar una plantilla de apariencia del widget.
Paso 1. Accede a la 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 plantilla nueva o edita una existente haciendo clic en "Editar".
Paso 3. Localiza el campo Sombra del widget
En el editor de plantillas, localiza el campo "Sombra del widget". Este campo se encuentra en la esquina inferior izquierda del panel de personalización, debajo de los campos de color.
El campo incluye un área de texto que muestra el valor CSS de la sombra activa y un enlace "Seleccionar" para acceder a las plantillas predefinidas.
Paso 4a. Escribe un valor de sombra personalizado
Si conoces el formato CSS de box-shadow, puedes escribir el valor directamente en el campo de texto. El campo admite hasta 100 caracteres y muestra un ejemplo del formato esperado: -1px 3px 15px rgba(0, 0, 0, 0.04).
Este método es adecuado cuando necesitas una sombra muy concreta que encaje con el diseño de tu página.
Paso 4b. Elige una plantilla de sombra predefinida
Si prefieres una opción más rápida y visual, haz clic en "Seleccionar" para abrir el selector de plantillas de sombra. Aparecerá una ventana con 9 plantillas predefinidas, numeradas del #1 al #9, cada una con un efecto de sombra diferente que puedes previsualizar directamente.
Haz clic en la plantilla que mejor se adapte al diseño de tu widget y después haz clic en "Guardar" para seleccionarla. El valor CSS correspondiente se cargará automáticamente en el campo de texto.
Paso 5. Guarda los cambios
Después de configurar la sombra, haz clic en "Guardar" para aplicar el cambio a la plantilla de apariencia.
Paso 6. Comprueba las asignaciones de elementos
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, el cambio no se reflejará en ningún widget.
Resumen del proceso
Para configurar la sombra del widget, ve a "Apariencia del widget", crea o edita una plantilla y localiza el campo "Sombra del widget". Puedes escribir un valor CSS directamente en el campo de texto o hacer clic en "Seleccionar" para elegir una de las 9 plantillas de sombra predefinidas. Haz clic en "Guardar" y comprueba que la plantilla esté asignada al hub o a la encuesta correspondiente.