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.

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:

Beispiel

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

Beispiele für das color-Attribut

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]

Beispiele für das border_color-Attribut

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]

 

Beispiele für das Style-Attribut

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

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

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

Größe small

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

Größe medium (Standard)

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

Größe large

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

Größe xlarge

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

Beispiele für die Breite von Buttons

Maximale Breite

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

Beispiel 1Beispiel 2Beispiel 3Beispiel 4
[button width = "full" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]

Variable Breite

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" url="www.wordpress.rrze.fau.de"]Beispiel 1[/button]