---
language: es
title: Cómo configurar la sombra del widget
category: Widget
summary: Configura la sombra del widget de TuCalendi con un valor CSS propio o con una de las 9 plantillas predefinidas en tu plantilla de apariencia.
---

# Cómo configurar la sombra del widget

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](https://www.tucalendi.com/en/s/widget/how-to-customize-the-appearance-of-the-new-tucalendi-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"**.

![Apariencia del widget](https://www.tucalendi.com/images/content/widget/en/widget-appearance.png)

## 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"**.

![Editar plantilla de apariencia del widget](https://www.tucalendi.com/images/content/widget/en/edit-widget-apperance-template.png)

## 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.

![Sombra del widget](https://www.tucalendi.com/images/content/widget/en/widget-appearance-shadow.png)

## 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.

![Plantillas de sombra del widget](https://www.tucalendi.com/images/content/widget/en/widget-shadow-templates.png)

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.

![Plantilla de apariencia del widget con elemento asignado](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-with-element.png)

## 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.