Der Button ist das Modul, das Besucher zum Handeln bringt: Termin buchen, Angebot anfordern, Produkt ansehen. In Divi 5 ist er in wenigen Klicks eingebaut. Hier die Schritte vom leeren Platz bis zum fertigen Button mit Link, einschließlich der Stolperfallen.
Getestet mit Divi 5 (Version 5.13, deutsche Oberfläche), Stand Oktober 2026. Wie du den Button danach gestaltest, zeige ich in Divi-Button anpassen. Den Hover-Effekt findest du in Hover-Effekt in Divi 5.
Button-Modul einfügen
Öffne die Seite im Visual Builder. Fahr mit der Maus über eine leere Spalte, dann erscheint ein dunkles Plus. Mit dem Plus öffnest du das Fenster „Modul Oder Zeile Einfügen“. Es hat drei Reiter: „Neues Modul“, „Neue Zeile“ und „Aus Bibliothek hinzufügen“.
Das dunkle Plus in der leeren Spalte fügt ein Modul ein.Tipp „Button“ ins Suchfeld. Divi zeigt dir zwei Treffer: den normalen „Button“ und einen „Zahlungsbutton“. Der Zahlungsbutton ist für Zahlungen gedacht, für normale Links nimmst du „Button“.
Die Suche findet „Button“ und „Zahlungsbutton“.Nach dem Klick sitzt der Button sofort in der Spalte, und rechts öffnen sich seine Einstellungen. Standardmäßig steht dort „Hier Klicken“, ein blauer Rahmen mit blauer Schrift und ohne Füllung.
So sieht ein frischer Button aus: Rahmen, kein Hintergrund.Text und Link festlegen
Im Reiter „Inhalt“ öffnest du die Gruppe „Text“. Dort steht das Feld „Button-Text“. Ersetze „Hier Klicken“ durch deine eigene Aufforderung, zum Beispiel Jetzt Termin buchen, und bestätige mit der Tabulatortaste.
Der Button-Text steht in der Gruppe „Text“.Der Link steckt in der Gruppe „Link“ darunter. Trag bei „Button-Link-URL“ die Zieladresse ein. Das Feld „Button Link-Ziel“ steuert, wo der Link aufgeht. Zur Wahl stehen „Im Aktuellen Tab“ und „In Einem Neuen Tab“.
Die zwei Möglichkeiten für das Link-Ziel.
URL eingetragen, Link-Ziel auf neuen Tab gestellt.Ich habe bei meinem Test „In Einem Neuen Tab“ gewählt und die Seite danach im Frontend geprüft: Der Link zeigte auf die eingetragene Adresse und hatte das Ziel _blank. Für interne Links lasse ich es beim aktuellen Tab, bei externen Adressen nehme ich den neuen.
Button ausrichten
Wechsel in den Reiter „Design“ und öffne die Gruppe „Ausrichtung“. Dort gibt es das Feld „Button-Ausrichtung“ mit drei Symbolen: links, Mitte und rechts. Die Symbole haben keinen Hinweistext, aber die Reihenfolge ist wie erwartet.
Drei Symbole für die Ausrichtung des Buttons.Ich habe die Mitte gewählt, der Button sitzt jetzt mittig in seiner Spalte.
Der Button ist in seiner Spalte zentriert, nicht auf der ganzen Seite.Beachte: Die Ausrichtung bezieht sich auf die Spalte, in der der Button steht. Willst du ihn auf der ganzen Seite mittig haben, brauchst du eine Zeile mit nur einer Spalte.
Speichern und prüfen
Klick oben rechts auf „Speichern“ und sieh dir die Seite im Frontend an, so wie deine Besucher sie sehen.
Der fertige Button auf der Seite.Zwei Hinweise aus der Praxis: Schreib auf den Button, was passiert („Termin buchen“ statt „Hier klicken“). Und wenn dir der blaue Standardrahmen nicht gefällt, ändere Farbe und Form im Reiter „Design“ unter „Button“. Divi gibt es bei Elegant Themes (Werbung).
