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.
Schritt 1. Öffne die Darstellung des Widgets
Gehe im Seitenmenü von TuCalendi zum Bereich "Widgets" und wähle die Option "Darstellung".
Schritt 2. Erstelle oder bearbeite eine Darstellungsvorlage
Erstelle im Bereich "Darstellung" eine neue Vorlage oder bearbeite eine bestehende, indem du auf "Bearbeiten" klickst.
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.
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.
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.
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.