Lesefortschritt:

Divi-Buttons am unteren Rand einer Zeile ausrichten

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

Trick # 98 | Dieser Beitrag beinhaltet 1070 Wörter. – Geschätzte Lesezeit: 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

Header-Menu des Divi-Themes anpassen

Das Headermenu (auch «Primary Menu» genannt) lässt sich im Customizer des Divi Themes optisch verändern. Es geht aber noch viel besser: Mit CSS haben Sie weitaus mehr Möglichkeiten, das Styling anzupassen. Wir zeigen Ihnen wie.
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.