Buttons
Anstelle altmodischer Links, sind Buttons eine deutlich modernere Alternative Ihren Seiten-Besuchern den Weg zum Download oder zum entsprechenden Thema zu weisen. Hier finden Sie die Basics, um erfolgreich Buttons auf ihrer RRZE WordPress-Seite einzurichten.
Im Block-Editor können Sie den „Buttons“-Block anstelle des Shortcodes verwenden. Weiterhin unterliegen die Buttons im Theme FAU Elemental dem Corporate Design der FAU und sollten nicht per Shortcode verändert werden.
Shortcode
Die wohl wichtigste Funktion eines Buttons ist natürlich das Verlinken. Wenn Sie einen Button erstellen, fügen Sie den Link mit dem Attribut link="" ein. Beispiel:
[[button link="https://fau.de"]Zur Website der FAU[/button]]
Mögliche Attribute und Werte
Um Ihre Buttons nach persönlichen Wünschen zu gestalten, können Sie die folgenden Attribute verwenden:
| Attribut | Erklärung | Mögliche Werte | Beispiel |
|---|---|---|---|
link="" | Verlinkt ihren Button zur angegebenen Seite | – | link=“https://www.meine-domain.de“ |
color="" | Färbt den Hintergrund des Buttons in der gewählten Farbe. Der Farbcode wird als HEX-Dezimalwert angegeben. | – | color=“#1f4c7a“ |
style="" | Erzeugt ein Erscheinungsbild ähnlich den Bootstrap-Buttons. Das style-Attribut überschreibt die eingestellte Hintergrund- und Randfarbe. | success, info, warning, danger, ghost | style=“info“ |
size="" | Ändert die Größe des Buttons. Ohne Attribut ist die Standardgröße als Medium eingestellt. | xsmall, small, medium, large, xlarge | size=“small“ |
width="" | Ändert die Breite des Buttons in Pixeln. Ohne Angabe richtet sich die Breite nach dem Text auf dem Button. | full 215 | width=“235px“ |
Beispiele
Roter ButtonDunkelblauer ButtonGrüner ButtonVioletter Button
Verwendeter Code
[[button color="#F20732"]Roter Button[/button]]
[[button color="#07038C"]Dunkelblauer Button[/button]]
[[button color="#1CFF00"]Grüner Button[/button]]
[[button color="#A200FF"]Violetter Button[/button]]Damit Sie die Randfarben besser sehen, wurde hier zusätzlich das Attribut color=“#FFFFFF“ verwendet, welches einen weißen Hintergrund erzeugt.
Roter UmrissDunkelblauer UmrissGrüner UmrissVioletter Umriss
Verwendeter Code
[[button color="#FFFFFF" color="#F20732"]Roter Umriss[/button]]
[[button color="#FFFFFF" color="#07038C"]Dunkelblauer Umriss[/button]]
[[button color="#FFFFFF" color="#1CFF00"]Grüner Umriss[/button]]
[[button color="#FFFFFF" color="#A200FF"]Violetter Umriss[/button]]Hinweis: Das style-Attribut überschreibt die border-color und color-Attribute!
| Button-Typ | Attribut | Verwendungszweck |
|---|---|---|
| Erfolg | style = „success“ | für positive, einladende Aktionen |
| Information | style = „info“ | für neutrale, weiterführende Aktionen |
| Warnung | style = „warning“ | für Aktionen, die ein Benutzer bewusst wahrnehmen sollte |
| Gefahr | style = „danger“ | für unwiderrufliche Aktionen |
| Ghost | style = „ghost“ | als sekundärer Button |
Größe xsmall
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="xsmall" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Größe small
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="small" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Größe medium (Standard)
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="medium" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Größe large
Größe xlarge
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="xlarge" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Maximale Breite
Durch width=“full“ wird der Button auf maximale Breite gestreckt.
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button width = "full" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Variable Breite
Durch width = “ “ können sie eine beliebige pixel-breite wählen z.B. 300 px. | width = „300“
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button width="300" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]