Lesefortschritt:

Mehrere Divi-Buttons in einer Spalte nebeneinander anordnen

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

Trick # 199 | 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

Header des Divi-Themes ausblenden

Das Divi-Theme blendet von Haus aus einen Header ein. Darin erscheint etwa das Menu und zusätzlich noch ein Logo. Ab und an möchte man aber diesen Standard-Header vollständig ausblenden - etwa auch, um ihn zu ersetzen. Wie das geht, zeigen wir ...

Werbung

 

Pin It on Pinterest

Share This