Buttons
Elements ist auf allen CMS-Instanzen vorinstalliert und bereits aktiviert. Sie können alle Elements-Shortcodes ohne vorangegangene Aktivierung benutzen.
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
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 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
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>Beispiele für das border_color-Attribut
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]Beispiele für das Style-Attribut
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" |
Beispiele für die Größen von Buttons
Größe xsmall
Größe small
Größe medium (Standard)
Größe large
Größe xlarge
Beispiele für die Breite von Buttons
Maximale Breite
Durch width="full" wird der Button auf maximale Breite gestreckt.
Variable Breite
Durch width = " " können sie eine beliebige pixel-breite wählen z.B. 300 px. | width = "300"