Navigation

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.

Da die Beispiele auf dieser Seite alle nicht verlinkt sind, ist hier die wohl wichtigste Funktion der Buttons: Das Verlinken.

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 
info
warning
danger

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 
small
medium
large
xlarge

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 
215
(Angabe in px z.B. 200)

Ohne Angabe richtet sich die Breite nach dem Text auf dem Button.

width=“235px“

Beispiele

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

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>

Damit Sie die Randfarben besser sehen, wurde hier zusätzlich das Attribut font="dark" und color="#FFFFFF" verwendet!

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]

Zur Erinnerung: Die Attribute color und border-color überschreiben das style-Attribut!

Beispiel 1Beispiel 2Beispiel 3Beispiel 4


Beispiel 1 style = "success"
Beispiel 2 style = "info"
Beispiel 3 style = "warning"
Beispiel 4 style = "danger"

Durch width="full" wird der Button auf maximale Breite gestreckt.

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Durch width = " " können sie eine beliebige pixel-breite wählen z.B. 300 px. | width = "300"

Beispiel 1Beispiel 2Beispiel 3Beispiel 4