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

    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.