Elements – 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.

Buttons

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Das wichtigste zuerst: Buttons verlinken

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

Wenn du einen Button erstellst fügst du den Link einfach wie folgt als Attribut ein:

[button link="https://www.meine-domain.de"]Beispiel[/button]

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"

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

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

Mögliche Modifikationen

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"