Divi verspricht zwar eine Code-freie Design-Umgebung, aber dies ist nur bedingt wahr. Ja, in 90% aller Fälle mag das zutreffen, aber manchmal muss man doch noch ein wenig eingreifen. Nehmen wir an, ihr möchtet gerne, wie ich es auf meiner Startseite gemacht habe, die neuesten Blogbeiträge darstellen. Herausfordernd ist das in Divi nicht. Dazu erstellt ihr eine Zeile und positioniert darin das Modul „Blog“ und legt fest, wieviele Beiträge angezeigt werden sollen. Anschließend stellt ihr im Design-Tab der Moduleinstellungen noch die Anzeige „Gitter“ ein und fertig. Wollt ihr aber, das die Beiträge auch genau gleich hoch angezeigt werden, müsst ihr ein wenig basteln. Hier setzt mein neuer Webdesign-Tipp an: Divi und WordPress – Beitragshöhe angleichen – und zwar völlig unabhängig vom Inhalt.

Jetzt mal Schritt für Schritt

Für dieses Beispiel habe ich eine neue Seite angelegt. Einfach auf „Seite erstellen“, den Tirtel eintragen und auf „Mit Divi bearbeiten“ klicken. Von den 3 Optionen, die anschließend zur Auswahl stehen, wählen wir die Erste, die Lionke, „Mit dem Aufbau beginnen“.

Direkt im Anschluß erstellen wir eine einspaltige Zeile. Die Modulauswahl wird angezeigt und wir wählen das Modul „Blog“. Auch stellen wir hier gleich ein, das wir 3 Beiträge sehen wollen. Entsprechend eurer Vorstellungen, könnt ihr die Zahl natürlich auch erhöhen.

Wie unschwer zu erkennen ist, sind die Beiträge zwar schön formatiert, aber sie sind eben unterschiedlich hoch. Dies ist abhängig vom Inhalt des Beitrages.

Hier geht es jetzt eigentlich erst los. Divi und WordPress – Beitragshöhe angleichen – unabhängig vom Inhalt. Ihr benötigt ein paar Zeilen CSS um die Höhe der Beiträge anzugleichen.

Die Beitragshöhe angleichen: der CSS-Code

Den nachfolgenden CSS-Code dürft ihr euch hier gern kopieren. Fügt ihn dann in den „Eigenen CSS-Code“ in die Divi Theme-Optionen ein. Alternativ geht ihr in den Theme-Customizer und fügt den Code hier ein. Einfach kopieren und an das Ende anhängen. Ich habe dem CSS-Code den Klassen-Namen „bloggrid“ gegeben, ihr könnt ihn im Prinzip nennen, wie ihr möchtet. Hier also der CSS-Code, den ihr euch gerne kopieren könnt:

Die CSS-Klasse im Modul eintragen

Aber auch wenn ihr nun den CSS-Code eingefügt habt, passiert zunächst einmal noch gar nichts. Schließlich weiß der CSS-Ccode noch nicht, wo er eingreifen soll.

Festgelegt wird dies nun, in dem wir in den Moduleinstellungen unseres Blog-Moduls, die CSS-Klasse eintragen. Einfach auf das Zahnrad im Modul klicken, im dann geöffneten Fenster den Reiter „Erweitert“ öffnen und in der Zeile „CSS-Klasse“ den Namen eurer Klasse eintragen – in diesem Fall „bloggrid“. Habt ihr einen anderen Namen vergeben, müsst ihr natürlich diesen eintragen. Den „.“ vor dem Namen der Klasse müssen wir hier weglassen. Also niur den blanken Namen eintragen. Anschließend die Einstellungen beenden, das ganze speichern und Voila. Das war es.

Divi und WordPress – Beitragshöhe angleichen – das Ergebnis

Hier seht ihr nun das Ergebnis dieser kleinen Anpassungen. Eine sauber formatierte Blogansicht mit 3 Beiträgen mit exakt gleicher Höhe. Dies funktioniert aber nicht nur bei 3 Blogbeiträgen, wie hier gezeigt. Ihr könnt es überall einsetzen, wo ihr Blogbeiträge in dieser Form formatieren möchtet.
Ich hoffe, ihr konntet mir folgen und ich konnte denjenigen helfen, die ganu dfür diesen Fall die Lösung gesucht haben. Lasst es mich gerne in den Kommentaren wissen. Hier kjönnt ihr mir auch Fragen stellen, falls noch Fragen im Raum stehen.

Ich danke euch fürs das Lesen meiner Beiträge, hoffe, es gefällt euch und ich wünsche mir, das auch meine zukünftigen Beiträge hilfreich für euch sein können. Ansonsten bleibt mir nur noch, euch weiterhin viel Spaß und Erfolg beim Designen euerer Websites zu wünschen.