Spalten gleicher Höhe
WordPress / Divi Theme CSS
Equal Height Columns In Row
Spalten gleicher Höhe in einer Zeile
Wer kennt das nicht!?
Du erstellst eine Zeile mit mehreren Spalten wo dein Inhalt steht, aber die Spalten haben unterschiedliche Höhen.
Klar das liegt wohl am Inhalt, aber sieht nicht schön aus. Um dieses zu ändern gibt es mehrere Möglichkeiten, eine davon werde ich hier mit Hilfe von CSS zeigen.
Beispiel-Modul: Handlungsaufruf
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Benutzerdefinierte CSS ins Hauptelement der Zeile (grünes Modul) einfügen
|
1 2 3 4 |
display: flex; flex-wrap: wrap; |
Benutzerdefinierte CSS ins Hauptelement des Moduls einfügen
|
1 2 3 4 |
height: 100%; padding: 20px 20px 10px; |
Beispiel-Modul: Handlungsaufruf mit CSS-Kasse
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Unter Divi „Allgemeines“ im unteren Bereich „Eigene CSS“ folgendes einfügen.
CSS-Code
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*<strong>Equal Height Columns In Row</strong>*/ .equal-height { display: flex; flex-wrap: wrap; } .equal-height-col { height: 100%; padding: 20px 20px 10px !important; } |
Die CSS-Klasse „equal-height“ kommt in die grüne Zeile.
Die CSS-Klasse „equal-height-col“ kommt in das Modul.
In jede Zeile (grünes Modul) bei Benutzerdefiniertes CSS im Hauptelement folgendes einfügen.
|
1 2 3 4 |
display:flex; flex-direction:column; |
Nun musst Du noch den Zwischenraum des Buttons änern.
Margin-oben: auto
Margin-unten: 30px
Das ganz kann man sich natürlich auch wieder als benutzerdefinierte CSS-Klasse bauen und in das Divi eigene CSS einsetzten so das man später nur noch die Klassen einsetzen muss.
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design .
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. ou can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Ihr Titel
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.