Lesefortschritt:

Mehrere Divi-Buttons in einer Spalte nebeneinander anordnen

15. Januar 2023 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 462 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Wenn Sie Buttons im Divi-Theme nebeneinander statt untereinander anordnen wollen, müssen Sie dies im Normalfall mit einer mehrspaltigen Zeile lösen. Es gibt aber einen Trick, mit welchem auch mehrere Buttons in derselben Spalte nebeneinander platziert werden.

Wenn Sie im Divi-Theme mehrere Button-Module in einer Spalte platzieren, so wird das auf der Live-Seite etwa so ausschauen:

Das sieht meist nicht gut aus. Besser wäre oft nebeneinander. Das geht mit ein wenig CSS-Code, den Sie ins CSS-Stylesheet Ihrer Website schreiben. Unter Design/Customizer/Zusätzliches CSS:

.buttons-inline .et_pb_button_module_wrapper {
  display: inline-block;
  margin-right: 10px;
}

Im Code können Sie natürlich den Abstand zum nächsten Button (mit «margin-right») anpassen.

Nun bearbeiten Sie die Zeile mit den drei Buttons: Klicken Sie auf «Advanced» (oder «Erweitert»), dann auf CSS-ID und Klassen und fügen Sie den Klassennamen «buttons-inline» aus obigem Code unter «CSS-Klasse» ein.

Unsere drei Buttons von oben präsentieren sich nun so:

Sieht doch gleich besser aus – und verschwendet keinen Platz.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This