Wir erklären dir, wie du den Rahmenstil des TuCalendi-Widgets mithilfe einer Designvorlage konfigurierst. Der Rahmen legt die visuelle Umrandung des Widgets fest und ermöglicht es dir, es an das Design der Seite anzupassen, auf der es eingebettet ist.
Die Rahmeneinstellungen sind im Editor in zwei Bereiche unterteilt: Widget Border Style (Rahmenstil des Widgets), der Breite, Stil und Farbe umfasst, und Border Radius (Rahmenradius), der die Abrundung der Ecken steuert.
- Breite: Die Stärke des Widget-Rahmens, angegeben in Pixeln (px).
- Stil: Die Art der Rahmenlinie, zum Beispiel durchgezogen, gepunktet oder gestrichelt.
- Farbe: Die Farbe des Widget-Rahmens.
- Radius: Die Abrundung der Widget-Ecken, angegeben in Pixeln (px).
Wenn du auf eines dieser Felder klickst, öffnet sich ein Menü mit den verfügbaren Optionen, aus denen du den gewünschten Wert auswählen kannst.
Bevor du beginnst
Um dieser Anleitung zu folgen, musst du zum Bereich "Widget-Darstellung" gehen und bereits eine Darstellungsvorlage zum Bearbeiten erstellt haben. Den vollständigen Ablauf zum Erstellen und Zuweisen von Vorlagen erklären wir in der allgemeinen Anleitung, 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 für das Widget
Erstelle im Bereich "Darstellung" eine neue Vorlage oder bearbeite eine bestehende, indem du auf "Bearbeiten" klickst.
Schritt 3. Finde die Rahmenfelder im Editor
Im Vorlageneditor findest du die Rahmenfelder im unteren Teil des Anpassungsbereichs. Dort gibt es zwei separate Bereiche:
- Widget Border Style: enthält das Feld Breite, das Feld Stil und die Auswahl für die Rahmenfarbe.
- Border Radius: enthält das Feld Radius, das die Abrundung der Widget-Ecken steuert.
Der folgende Screenshot zeigt die Position beider Bereiche im Editor, markiert mit Pfeilen.
Schritt 4. Konfiguriere den Rahmenstil
Klicke auf jedes Feld, um das Optionsmenü zu öffnen, und wähle den gewünschten Wert aus:
- Breite: Wähle die Rahmenstärke in Pixeln. Mit einem Wert von 0px entfernst du den Rahmen vollständig.
- Stil: Wähle die Art der Rahmenlinie aus den verfügbaren Optionen, zum Beispiel durchgezogen, gepunktet oder gestrichelt.
- Farbe: Wähle die Farbe des Widget-Rahmens.
Schritt 5. Konfiguriere den Rahmenradius
Klicke im Bereich Border Radius auf das Feld "Radius" und wähle den gewünschten Wert in Pixeln. Ein höherer Wert sorgt für rundere Ecken, während ein Wert von 0px dem Widget gerade Ecken gibt.
Schritt 6. Speichere die Änderungen
Nachdem du alle Rahmeneinstellungen konfiguriert hast, klicke auf "Speichern", um die Änderungen auf die Designvorlage anzuwenden.
Schritt 7. Überprüfe die Zuweisung zum Element
Sobald die Vorlage gespeichert ist, prüfe, ob sie dem entsprechenden Hub oder der Umfrage mit Routing zugewiesen ist. Wenn die Vorlage keinem Element zugewiesen ist, werden die Änderungen in keinem Widget sichtbar.
Kurzversion für das Hilfe-Center
Um den Widget-Rahmen zu konfigurieren, gehe zu "Widget-Darstellung", erstelle oder bearbeite eine Vorlage und suche die Felder "Widget Border Style" und "Border Radius" im unteren Teil des Editors. Klicke auf jedes Feld, um das Optionsmenü zu öffnen, und passe Breite, Stil, Farbe und Rahmenradius nach deinen Wünschen an. Klicke auf "Speichern" und prüfe, ob die Vorlage dem entsprechenden Hub oder der entsprechenden Umfrage zugewiesen ist.