Trick # 537 | Dieser Beitrag beinhaltet 943 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Das Button-Modul des Divi-Themes enthält keine Option, um seine Höhe einzustellen. Aber in manchen Fällen möchten Sie diese vielleicht anpassen, damit der Button auf Ihrer Seite besser zur Geltung kommt. Hier zeigen wir Ihnen, wie Sie die Höhe des Divi-Buttons mittels CSS-Code anpassen können. Auch für die Button-Breite haben wir einen Hack parat.
So wie hier zeigt sich der Divi-Button standardmässig:
Die Button-Breite passt sich an den darzustellenden Text an, doch die Höhe bleibt immer gleich. Ausser Sie wenden den folgenden CSS-Block an.
Doch zunächst sollten Sie dafür Ihrem Button-Modul eine CSS-Klasse zuweisen. Dies tun Sie, indem Sie den Button bearbeiten, in den Tab «Erweitert» wechseln und unter «CSS-ID und Klassen» den Klassennamen «custom-height-button» ins Textfeld «CSS-Klasse» einfügen.
Ferner benötigen Sie folgenden CSS-Block, den Sie im Backend unter Design/Customizer/Zusätzliches CSS platzieren:
.custom-height-button.et_pb_button {
/* Button-Höhe definieren */
min-height: 100px;
/* Button-Beschriftung vertikal zentrieren */
display: inline-flex !important;
align-items: center;
}Das Snippet legt die Höhe des Buttons fest: in unserem Fall 100 Pixel (auf Zeile 3). In den Zeilen 5 und 6 wird ausserdem der Button-Text vertikal mittig platziert. Beides lässt sich leicht an Ihre Bedürfnisse anpassen.
Unser Button sieht nun so aus:
Variante: Zusätzlich Button-Breite festlegen
Mit ein paar zusätzlichen CSS-Codes lässt sich der Button auch in der Breite definieren. Wir wollen unseren Button auf der gesamten Spaltenbreite darstellen. Auch das geht ganz einfach.
Am besten vergeben Sie dem Button-Modul eine neue CSS-Klasse namens «custom-width-height-button». Diese Klasse tragen Sie ein im Tab «Erweitert», unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse».
Den folgenden CSS-Block legen Sie dann im CSS-Stylesheet Ihrer Website ab – unter Design/Customizer/Zusätzliches CSS:
.custom-width-height-button.et_pb_button {
/* Button-Höhe definieren */
min-height: 100px;
/* Button-Beschriftung vertikal zentrieren */
display: inline-flex !important;
align-items: center;
/* Button-Breite definieren */
width: 100%;
/* Button-Beschriftung horizontal zentrieren */
justify-content: center;
}Der Code beginnt genau gleich wie die erste Variante. Zusätzlich wird auf Zeile 8 die Breite des Buttons definiert und die horizontal zentrierte Button-Beschriftung auf Zeile 10 festgelegt. Auch diese Werte lassen sich anpassen.
Das Resultat sieht dann in unserem Beispiel so aus:
Werbung
Werbung
