So konfigurierst du den Schatten des Widgets

In diesem Tutorial wird erklärt, wie du den Schatten des TuCalendi-Widgets mithilfe einer Theme-Vorlage konfigurierst. Der Schatten ist der visuelle Effekt, der um das Widget herum erscheint und dafür sorgt, dass es sich nahtlos in das Design der Seite einfügt, in die es eingebettet ist.

Das Feld "Widget-Schatten" bietet zwei Konfigurationsoptionen:

  • Benutzerdefinierter Wert. Gib einen CSS-Schattenwert direkt in das Textfeld ein.
  • Vordefinierte Vorlagen. Klicke auf "Auswählen", um eine der 9 von TuCalendi bereitgestellten Schattenvorlagen auszuwählen.

Bevor du loslegst

Um diesem Tutorial folgen zu können, musst du den Bereich „Darstellung“ des Widgets aufrufen und über eine bereits erstellte oder gerade bearbeitete Darstellungsvorlage verfügen. Der gesamte Vorgang zum Erstellen und Zuweisen von Vorlagen wird im allgemeinen Tutorial zum Erstellen und Zuweisen einer Widget-Darstellungsvorlage erklärt.

Schritt 1. Auf das Design des Widgets zugreifen

Gehe im TuCalendi-Seitenmenü zum Abschnitt "Widgets" und wähle die Option "Erscheinungsbild" aus.

Erscheinungsbild des Widgets

Schritt 2. Erstelle oder bearbeite eine Widget-Darstellungsvorlage

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

Designvorlage das Widget Bearbeiten

Schritt 3. Suche das Feld "Widget-Schatten"

Suche im Vorlageneditor das Feld "Widget-Schatten". Dieses Feld befindet sich in der unteren linken Ecke des Anpassungsbereichs, unterhalb der Farbfelder.

Das Feld enthält ein Textfeld, in dem der CSS-Wert für den aktiven Schatten angezeigt wird, sowie einen "Auswählen"-Link, über den du auf vordefinierte Vorlagen zugreifen kannst.

Darstellung des Widgets: Schatten

Schritt 4a. Gib einen benutzerdefinierten 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 benötigst, der zum Design deiner Seite passt.

Schritt 4b. Wähle eine vordefinierte Schattenvorlage

Wenn du eine schnellere, 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 mit einem anderen Schatteneffekt, den du direkt in der Vorschau ansehen kannst.

Vorlagen für Widget-Schatten

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

Schritt 5. Speichere die Änderungen

Nachdem du den Schatten konfiguriert hast, klicke auf "Speichern", um die Änderung auf die Darstellungsvorlage anzuwenden.

Schritt 6. Elementzuweisungen überprüfen

Sobald die Vorlage gespeichert ist, überprüfe, ob sie dem entsprechenden Hub oder der Umfrage mit Routing zugewiesen ist. Wenn die Vorlage keinem Element zugewiesen ist, wird die Änderung in keinem Widget übernommen.

Vorlage Erscheinungsbild Widgets mit Zugewiesenem Element

Zusammenfassung des Vorgangs

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 auszuwählen. Klicke auf "Speichern" und überprüfe, ob die Vorlage dem entsprechenden Hub oder der entsprechenden Umfrage zugewiesen ist.