Button

Das Button-Element erzeugt einen klickbaren Link als Schaltfläche.

Einstellungen

Width

Bestimmt die Breite des Buttons. Die Breite kann sowohl als feste Größe in Pixel als auch in Prozent angegeben werden.
Die prozentuale Größe errechnet sich relativ zur Breite der umgebenden Column abzüglich Padding.
Der Standardwert ist "auto". Dieser wird verwendet, sobald der Wert des Feldes gelöscht wird.
Ist der Wert "auto" wird der Button so breit wie der Inhalt dargestellt.

Background Color

Bestimmt die Füllfarbe des Buttons.

Font Family

Bestimmt die Schriftart des Textinhalts.
Die Einstellungen für den Textinhalt verhalten sich analog zu den Einstellungen des Text-Elements:
Siehe: Text > Font Family

Font Size

Bestimmt die Schriftgröße des gesamten Textinhalts in Pixel.

Font Weight

Bestimmt die Schriftstärke des gesamten Textinhalts.

Font Style

Bestimmt die Schrägstellung des gesamten Textinhalts.

Letter Spacing

Bestimmt den Zeichenabstand des gesamten Textinhalts.

Text Color

Bestimmt die Schriftfarbe des gesamten Textinhalts.

Text Alignment

Bestimmt die Ausrichtung des gesamten Textinhalts.

Text Decoration

Bestimmt zusätzliches Anzeigeverhalten des Textinhalts.
Siehe: Text > Text Decoration

URL

Bestimmt die URL, die der Button beim Klicken öffnet.

Es ist möglich Twig-Code in das URL-Feld einzutragen. Dieser wird roh in den Template-Code übernommen und entsprechend verarbeitet. Beachten Sie jedoch, dass Logik zur Ausschließung des Buttons sich außerhalb des Button-Elements befinden sollte und mit umgebenden Code-Elementen gelöst werden sollte.

Link Target Attribute

Ermöglicht das Bestimmen des "target"-Attributs das auf dem generierten Anchor-Tag angewendet wird.
Standard-Wert ist _blank (Öffnen im neuen Tab)

Link Rel Attribute

Ermöglicht das Bestimmen des "rel"-Attributs das auf dem generierten Anchor-Tag angewendet wird.
Standard-Wert ist noopener (Verhindert den Zugriff auf Informationen des aktuellen Fensters / Tab, durch das sich öffnende Fenster / Tab)

Container Background Color

Bestimmt die Hintergrundfarbe der freien Fläche hinter dem Button-Element innerhalb des Column-Elements.

Horizontal Alignment

Bestimmt die horizontale Ausrichtung des Buttons innerhalb des umgebenden Column-Elements.

Border

Weist dem Button einen sichtbaren Rahmen zu.
Anzeigeeinstellungen des Rahmens können über das "Border Settings"-Menü vorgenommen werden.

Das Feld unterstützt auch die Eingabe eines CSS-Strings im Format:

<line-width> <line-style> <color>

Border Radius

Bestimmt die Abrundung der Ecken des Buttons. Der Wert kann nur in Pixel angegeben werden.

Um die Ecken komplett abzurunden nutzen Sie einen hohen Wert, wie 1000px.