Divi-Buttons am unteren Rand einer Zeile ausrichten

16. Mai 2021 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 6 Minuten.

Wenn in einer Zeile im Divi-Theme unterschiedlich lange Texte zusammen mit Buttons dargestellt werden, kann es zu unschöner Positionierung der Buttons kommen. Das lässt sich aber leicht beheben. Ein Gestaltungs-Tipp für den Divi-Alltag.

Das Divi-Theme stellt die verschiedenen Inhalte der Module in dessen Zeilen (Rows) direkt untereinander dar. Meist ist das gewollt; Lücken zwischen den Inhalten würden stören. Doch kann dies auch mal unerwünscht sein. Etwa im folgenden Beispiel:

Titel #1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu

Titel #2

Lorem ipsum dolor sit amet, consetetur sadipscing

Titel #3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et

Titel #4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l

Das Geflatter oben lässt sich allerdings leicht beheben. Öffnen Sie dazu die Einstellungen der betreffenden Zeile (Row) indem Sie auf das Zahnrad-Symbol klicken.

  • Wechseln Sie auf das «Design» der Zeile, klicken Sie auf «Grösse einstellen» und aktivieren Sie «Spaltenhöhe ausgleichen».
  • Nun wechseln Sie auf «Erweitert» (Advanced). Dort klicken Sie auf «CSS-ID & Klassen» – im Feld «CSS-Klasse» geben Sie z.B. «bottom_fixed_buttons» ein.
  • Speichern Sie jetzt die Zeile.

Bearbeiten Sie nun das CSS-Stylesheet Ihrer Website (Design/Customizer/Zusätzliches CSS) und fügen Sie folgenden Code ein:

.bottom_fixed_buttons .et_pb_column {
padding-bottom:20px;
}

.bottom_fixed_buttons .et_pb_button_module_wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Falls Sie oben bei der «CSS-Klasse» eine andere Bezeichnung als «bottom_fixed_buttons» eingegeben haben, müssten Sie diese Klasse in Zeile 1 und 5 natürlich anpassen.

Das Resultat zeigt sich dann folgendermassen:

Titel #1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu

Titel #2

Lorem ipsum dolor sit amet, consetetur sadipscing

Titel #3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et

Titel #4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l

Die Ausrichtung der Buttons kommt nun wesentlich ruhiger daher.

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