---
language: de
title: So konfigurierst du den Schatten des Widgets
category: Widget
summary: Stelle den Schatten deines TuCalendi-Widgets mit einem eigenen CSS-Wert oder einer von 9 vordefinierten Vorlagen ein.
---

# So konfigurierst du den Schatten des Widgets

In diesem Tutorial erfährst du, wie du den **Schatten** des TuCalendi-Widgets mithilfe einer **Darstellungsvorlage** konfigurierst. Der Schatten ist der visuelle Effekt, der rund um das Widget erscheint und dafür sorgt, dass es sich natürlich in das Design der Seite einfügt, auf der es eingebettet ist.

Das Feld **"Widget-Schatten"** bietet dir zwei Konfigurationsmöglichkeiten:

- **Eigener Wert**: Gib einen **CSS-Schattenwert** direkt in das Textfeld ein.
- **Vordefinierte Vorlagen**: Klicke auf **"Auswählen"**, um eine der **9 Schattenvorlagen** von TuCalendi zu wählen.

## Bevor du beginnst

Um diesem Tutorial zu folgen, musst du im Bereich **Darstellung** des Widgets sein und eine Darstellungsvorlage entweder erstellt haben oder gerade bearbeiten. Den vollständigen Ablauf zum Erstellen und Zuweisen von Vorlagen findest du im allgemeinen Tutorial dazu, [wie du eine Darstellungsvorlage für das Widget erstellst und zuweist](https://www.tucalendi.com/en/s/widget/how-to-customize-the-appearance-of-the-new-tucalendi-widget).

## Schritt 1. Öffne die Darstellung des Widgets

Gehe im Seitenmenü von TuCalendi zum Bereich **"Widgets"** und wähle die Option **"Darstellung"**.

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

## Schritt 2. Erstelle oder bearbeite eine Darstellungsvorlage

Erstelle im Bereich **"Darstellung"** eine neue Vorlage oder bearbeite eine bestehende, indem du auf **"Bearbeiten"** klickst.

![Darstellungsvorlage des Widgets bearbeiten](https://www.tucalendi.com/images/content/widget/en/edit-widget-apperance-template.png)

## Schritt 3. Finde das Feld Widget-Schatten

Suche im **Vorlageneditor** das Feld **"Widget-Schatten"**. Du findest es in der unteren linken Ecke des Anpassungsbereichs, unterhalb der Farbfelder.

Das Feld enthält einen Textbereich, der den **CSS-Wert** des aktiven Schattens anzeigt, sowie einen Link **"Auswählen"**, über den du die vordefinierten Vorlagen öffnest.

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

## Schritt 4a. Gib einen eigenen Schattenwert ein

Wenn du das CSS-Format für **box-shadow** kennst, kannst du den Wert direkt in das Textfeld eingeben. Das Feld unterstützt bis zu **100 Zeichen** und zeigt ein Beispiel für das erwartete Format an: -1px 3px 15px rgba(0, 0, 0, 0.04).

Diese Methode eignet sich, wenn du einen ganz bestimmten Schatten brauchst, der genau zum Design deiner Seite passt.

## Schritt 4b. Wähle eine vordefinierte Schattenvorlage

Wenn du eine schnellere und visuellere Option bevorzugst, klicke auf **"Auswählen"**, um die Auswahl der Schattenvorlagen zu öffnen. Es erscheint ein Fenster mit **9 vordefinierten Vorlagen**, nummeriert von #1 bis #9. Jede hat einen anderen Schatteneffekt, den du direkt in der **Vorschau** sehen kannst.

![Schattenvorlagen des Widgets](https://www.tucalendi.com/images/content/widget/en/widget-shadow-templates.png)

Klicke auf die Vorlage, die am besten zum Design deines Widgets passt, und dann auf **"Speichern"**, um die Vorlage auszuwählen. Der entsprechende CSS-Wert wird **automatisch** in das Textfeld übernommen.

## Schritt 5. Speichere die Änderungen

Nachdem du den Schatten konfiguriert hast, klicke auf **"Speichern"**, um die Änderung in der Darstellungsvorlage zu übernehmen.

## Schritt 6. Prüfe die Zuweisungen der Elemente

Sobald die Vorlage gespeichert ist, prüfe, ob sie dem entsprechenden **Hub** oder der **Umfrage mit Routing** zugewiesen ist. Ist die Vorlage keinem Element zugewiesen, wird die Änderung in keinem Widget sichtbar.

![Darstellungsvorlage des Widgets mit zugewiesenem Element](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-with-element.png)

## Zusammenfassung des Ablaufs

Um den Schatten des Widgets zu konfigurieren, gehe zu **"Widget-Darstellung"**, erstelle oder bearbeite eine Vorlage und suche das Feld **"Widget-Schatten"**. Du kannst einen CSS-Wert direkt in das Textfeld eingeben oder auf **"Auswählen"** klicken, um eine der 9 vordefinierten Schattenvorlagen zu wählen. Klicke auf **"Speichern"** und prüfe, ob die Vorlage dem entsprechenden Hub oder der Umfrage zugewiesen ist.