Cómo configurar la sombra del Widget
Este tutorial explica cómo configurar la sombra del Widget de TuCalendi desde una plantilla de apariencia. La sombra es el efecto visual que aparece alrededor del widget y que contribuye a integrarlo de forma natural en el diseño de la página donde está insertado.
El campo "Sombra del widget" ofrece dos formas de configuración:
- Valor personalizado. Se escribe directamente un valor CSS de sombra en el campo de texto.
- Plantillas predefinidas. Se hace clic en "Seleccionar" para elegir una de las 9 plantillas de sombra preparadas por TuCalendi.
Antes de empezar
Para seguir este tutorial, debes acceder a la sección de Apariencia del widget y tener una plantilla de apariencia creada o en edición. El proceso completo de creación y asignación de plantillas se explica en el tutorial general sobre cómo crear y asignar una plantilla de apariencia del Widget.
Paso 1. Acceder a la apariencia del widget
Desde el menú lateral de TuCalendi, accede a la sección "Widgets" y selecciona la opción "Apariencia".
Paso 2. Crear o editar una plantilla de apariencia
Dentro de la sección "Apariencia", crea una nueva plantilla o edita una plantilla existente haciendo clic en "Editar".
Paso 3. Localizar el campo Sombra del widget
Dentro del editor de la plantilla, localiza el campo "Sombra del widget". Este campo se encuentra en la zona inferior izquierda del panel de personalización, debajo de los campos de color.
El campo incluye un área de texto donde se muestra el valor CSS de la sombra activa, y un enlace "Seleccionar" para acceder a las plantillas predefinidas.
Paso 4a. Escribir un valor de sombra personalizado
Si conoces el formato CSS de box-shadow, puedes escribir directamente el valor 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 específica que se ajuste al diseño de tu página.
Paso 4b. Elegir una plantilla de sombra predefinida
Si prefieres una opción más visual y rápida, haz clic en "Seleccionar" para abrir el selector de plantillas de sombra. Se mostrará 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 clica en "Guardar" para seleccionar la plantilla. El valor CSS correspondiente se cargará automáticamente en el campo de texto.
Paso 5. Guardar los cambios
Después de configurar la sombra, haz clic en "Guardar" para aplicar el cambio en la plantilla de apariencia.
Paso 6. Comprobar la asignación de elementos
Una vez guardada la plantilla, comprueba que esté asignada al hub o encuesta con enrutamiento correspondiente. Si la plantilla no está asignada a ningún elemento, el cambio no se verá reflejado en ningún widget.
Resumen del proceso
Para configurar la sombra del Widget, accede a la "Apariencia del Widget", crea o edita una plantilla y localiza el campo "Sombra del widget". Puedes escribir directamente un valor CSS 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 encuesta correspondiente.