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.
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;
}
Das Resultat zeigt sich dann folgendermassen:
Werbung