Trick # 98 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 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:
Die Ausrichtung der Buttons kommt nun wesentlich ruhiger daher.
Werbung
Werbung
