Buttons
Buttons
Anstelle altmodischer Links, sind Buttons eine deutlich modernere Alternative ihren Seiten-Besuchern den Weg zum Download oder zum entsprechenden Topic zu weisen. Hier finden Sie die Basics, um erfolgreich Buttons auf ihrer RRZE WordPress-Seite einzurichten.
Shortcode
Wenn Sie einen Button erstellen fügen Sie den Link einfach wie folgt als Attribut ein:
[button link="https://www.meine-domain.de"]Beispiel[/button]Mögliche Attribute
Um ihre Buttons nach persönlichen Wünschen zu gestalten, können Sie die folgenden Parameter verwenden.
| Parameter | Erklärung | 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. Farbcode im Hex-Dezimalcode angeben. | color=“#1f4c7a“ |
| style = “ „ | Erzeugt ein Erscheinungsbild ähnlich den Bootstrap-Buttons https://getbootstrap.com/docs/3.3/components/#btn-dropdowns Mögliche Werte sind: success Wurde eine eigene Hintergrund- oder Randfarbe eingestellt, wird das style-Attribut ignoriert. |
style = „info“ | border_color= “ „ | Färbt den Rahmen des Button in der gewählten Farbe. Farbcode im Hex-Dezimalcode angeben. | border_color=“#1f4c7a“ |
| size = “ „ | Ändert die Größe des Buttons zu den folgenden möglichen Parametern
xsmall Ohne Attribut ist die Standardgröße als Medium eingestellt. |
size = „small“ |
| font =“ „ | Ändert die Schriftfarbe auf Schwarz, empfohlen für helle Hintergrundfarben | font=“dark“ |
| width =“ „ | Ändert die Breite des Buttons. Mögliche Parameter sind: full Ohne Angabe richtet sich die Breite nach dem Text auf dem Button. |
width=“235px“ |
Beispiele
Beispiele für das color-Attribut
Verwendeter Code
[button color="#F20732"]Beispiel 1[/button]<br>
[button color="#07038C"]Beispiel 2[/button]<br>
[button color="#0439D9"]Beispiel 3[/button]<br>
[button color="#056CF2"]Beispiel 4[/button]<br>
[button color="#F20505"]Beispiel 5[/button]<br>Beispiele für das border_color-Attribut
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
Verwendeter Code
[button color="#FFFFFF" font="dark" border_color="#F20732"]Beispiel 1[/button]
[button color="#FFFFFF" font="dark" border_color="#07038C"]Beispiel 2[/button]
[button color="#FFFFFF" font="dark" border_color="#0439D9"]Beispiel 3[/button]
[button color="#FFFFFF" font="dark" border_color="#056CF2"]Beispiel 4[/button]Beispiele für das Style-Attribut
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
| Beispiel 1 | style = "success" |
| Beispiel 2 | style = "info" |
| Beispiel 3 | style = "warning" |
| Beispiel 4 | style = "danger" |
Beispiele für die Größen von Buttons
Größe xsmall
[button size="xsmall" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Größe small
[button size="small" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Größe medium (Standard)
[button size="medium" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Größe large
Größe xlarge
[button size="xlarge" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Beispiele für die Breite von Buttons
Maximale Breite
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button width = "full" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]
Variable Breite
Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button width="300" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]