Der blaue Rahmen-Button, mit dem Divi 5 startet, ist selten das, was zu deiner Seite passt. Zum Glück hast du alles Wichtige an einer Stelle: Farbe, Schrift, Rundung und Icon. Ich zeige dir, wo du was findest und was dabei zu beachten ist.
Getestet mit Divi 5 (Version 5.13, deutsche Oberfläche), Stand Oktober 2026. Wie du einen Button überhaupt einfügst und verlinkst, steht in Button-Modul in Divi 5. Den Effekt beim Überfahren mit der Maus erkläre ich in Hover-Effekt in Divi 5.
Ausgangspunkt: der Standard-Button
Ein frisch eingefügter Button hat einen blauen Rahmen, blaue Schrift und keine Füllung. Genau den passen wir an.
Der Standard-Button: Rahmen und Schrift in Blau, ohne Füllung.Wo die Button-Einstellungen liegen
Fahr mit der Maus über den Button und klick auf das Zahnrad in der Leiste. Wechsel im Einstellungsfeld in den Reiter „Design“. Dort stehen mehrere Gruppen, zum Beispiel „Layout“, „Ausrichtung“ und „Text“. Das Aussehen des Buttons selbst steckt in der Gruppe „Button“. Wichtig: Die Gruppe „Text“ darüber betrifft nur die Farbe eines Textes im Modul (Dunkel oder Hell), nicht die Schrift auf dem Button.
In der Gruppe „Button“ gibt es fünf Untergruppen: „Hintergrund“, „Rand“, „Text“, „Icon“ und „Größe Einstellen“.
Die Gruppe „Button“ enthält fünf Untergruppen.Hintergrundfarbe
Öffne die Untergruppe „Hintergrund“. Das Feld heißt „Button Hintergrundfarbe“. Klick unten in das Feld „Farbe Auswählen“, trag den Farbwert ein, zum Beispiel #1f3a5f, und bestätige mit Enter. Daneben stehen noch Verlauf, Bild, Video, Muster und Maske zur Auswahl.
Die Hintergrundfarbe des Buttons.Schriftfarbe und Schriftgröße
In der Untergruppe „Text“ findest du alles zur Schrift auf dem Button, unter anderem „Button Schriftart“, „Button Schriftstärke“, „Button Textgröße“, „Button Textfarbe“, „Button Zeichenabstand“ und „Button Textschatten“. Ich habe die Größe auf 20 Pixel gestellt und die Farbe auf #ffffff (weiß).
Textgröße und Textfarbe stecken in der Untergruppe „Text“.Stolperfalle: Das Farbfeld zeigt danach weiter grau den Platzhalter FFFFFF. Lass dich davon nicht irritieren, der Wert war gespeichert, im Builder und auf der Seite war die Schrift weiß.
Runde Ecken und Rahmen
Die Untergruppe „Rand“ hat den Regler „Button Rahmenradius“. Es gibt vier Felder, eins pro Ecke, und ein Kettensymbol in der Mitte, das sie verknüpft. Trägst du in einem Feld 30 ein, ziehen die anderen drei mit. Das gibt die runde „Pillen“-Form. Darunter stehen „Button Rahmenstile“, „Button Rahmenbreite“, „Button Rahmenfarbe“ und „Button Rahmenstil“ (Durchgehend).
Der Rahmenradius mit vier verknüpften Eckfeldern.Icon hinzufügen
Die Untergruppe „Icon“ zeigt den Schalter „Button-Icon Anzeigen“. Er stand bei mir schon auf an. Darunter wählst du bei „Button Icon“ ein Symbol aus der Liste, du kannst auch über „Suchsymbole“ suchen. Weitere Felder sind „Button Icon-Farbe“, „Button Icon-Platzierung“ (Standard: Rechts) und „Icon Nur Beim Hover Für Button Anzeigen“.
Der Pfeil nach rechts ist als Icon gewählt.Stolperfalle: Im Builder war das Icon bei mir erst nicht zu sehen. Im Frontend erscheint es erst, wenn du mit der Maus über den Button fährst. Willst du das Icon dauerhaft, schau bei der Option „Icon Nur Beim Hover Für Button Anzeigen“ nach.
Das Ergebnis
Nach diesen vier Schritten sieht der Button so aus. Oben rechts auf „Speichern“ klicken, dann prüfst du die Seite im Frontend.
Der angepasste Button im Builder.
So erscheint er auf der Seite.
Beim Überfahren erscheint der Pfeil als Icon.Größe des Buttons
Die Untergruppe „Größe Einstellen“ enthält „Button Breite“, „Button Maximale Breite“, „Button Mindesthöhe“, „Button Höhe“ und „Seitenverhältnis“. Die habe ich nicht verändert, die Größe ergibt sich bei mir aus Text und Innenabstand.
Divi bekommst du bei Elegant Themes (Werbung).
