RRZE Elements Beitragsbild

Buttons

Elements ist auf allen CMS-Instanzen vorinstalliert und bereits aktiviert. Sie können alle Elements-Shortcodes ohne vorangegangene Aktivierung benutzen.
Beispiel 1

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.

border_color= “ „Färbt den Rahmen des Button in der gewählten Farbe. Farbcode im Hex-Dezimalcode angeben.border_color=“#1f4c7a“

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 
 ghost

Das style-Attribut überschreibt die eingestellte Hintergrund- und Randfarbe.

 style = „info“
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“
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]
[button color="#07038C"]Beispiel 2[/button]
[button color="#0439D9"]Beispiel 3[/button]
[button color="#056CF2"]Beispiel 4[/button]
[button color="#F20505"]Beispiel 5[/button]

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

Beispiel 1Beispiel 2Beispiel 3Beispiel 4

Verwendeter Code

[button color="#FFFFFF" border_color="#F20732"]Beispiel 1[/button]
[button color="#FFFFFF" border_color="#07038C"]Beispiel 2[/button]
[button color="#FFFFFF" border_color="#0439D9"]Beispiel 3[/button]
[button color="#FFFFFF" border_color="#056CF2"]Beispiel 4[/button]

 

Zur Erinnerung: Die Attribute color und border-color werden durch das style-Attribut überschrieben!

Beispiel 1 Beispiel 2 Beispiel 3 Beispiel 4 Beispiel 5
Beispiel 1 style = „success“
Beispiel 2 style = „info“
Beispiel 3 style = „warning“
Beispiel 4 style = „danger“
Beispiel 5 style = „ghost“

Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="xsmall" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]

Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="small" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]

Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="medium" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]

Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="large"]Beispiel 1[/button]

Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button size="xlarge" link="www.wordpress.rrze.fau.de"]Beispiel 1[/button]

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]

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]