Beitragstyp Projekt in Divi entfernen

Der Beitragstyp Projekt wird in Divi sehr häufig überhaupt nicht benötigt und bläst den Admin-Bereich nur unnötig auf. Mit nur ein paar Zeilen Code ist der Custom Post Type schnell entfernt.

Archivseiten mit dem Divi Theme Builder erstellen

In diesem Tutorial zeigen wir dir, wie du unkompliziert Archivseiten mit dem Divi Theme Builder erstellen und im Nachhinein auch wieder bearbeiten und anpassen kannst. Alles was du hierzu benötigst, ist deine im Vorfeld erstellte Blogbeitragsübersicht, die wir als Vorlage verwenden werden.

Bilder im Divi Blog-Modul einheitlich anordnen

Hast du auch öfter das Problem, dass deine Beiträge im Divi Blog-Modul nicht vernünftig ausgerichtet sind? Die Bilder der Beiträge sind verzerrt, unterschiedlich hoch und sorgen dafür, dass deine Vorschau total asymmetrisch aussieht? Dann zeigen wir dir hier, wie du das in ein paar Handgriffen und wenig Code ganz schnell in den Griff bekommst...

Das Herzstück eines Blogs sind die Beiträge. Nur ist die Präsentation der Blogbeiträge genau so wichtig wie der Beitragsinhalt. Schlecht präsentierte Beitragsvorschauen führen nämlich selten zu Klicks, so wird der Inhalt des Beitrags also nicht einmal erreicht. Um Blogbeiträge schön aufbereitet zu präsentieren greifen die meisten Divi-Nutzer auf das Divi Blog-Modul zurück. Jedoch kann die Gestaltung des Moduls über die GUI manchmal zum Haare raufen sein. Die Vorschaubilder der Beiträge sind oftmals in ganz unterschiedlichen Formaten gespeichert. Das führt dazu, dass die Bilder unterschiedlich hoch oder breit sind. Versucht man über die GUI ein homogenes Layout zu erstellen, sind dann oftmals verzerrte – gestreckte oder gestauchte – Bilder das Resultat. Dabei ist es ganz einfach, das Divi Blog-Modul mit Custom-CSS perfekt auszurichten. Warum also nicht mit ein paar Zeilen CSS-Code den ganzen Ärger sparen und aus dem Layout unten links, das Layout rechts zaubern?

links: das unbearbeitete Blog-Modul; rechts: das per CSS bearbeitete Blog-Modul

Links: Das unbearbeitete Blog-Modul von Divi; rechts: Unser Layout nach Einfügen unseres CSS-Codes

Umsetzung per Child Theme oder über die Divi-Optionen

Dafür zeigen wir dir zunächst, wo du den CSS-Code, den wir gleich schreiben werden, implementieren kannst. Das ist zum einen in deinem erstellten Child-Theme möglich. Im zugehörigen Child-Theme-Ordner sollte eine Style-Datei vorhanden sein, in der du deinen gesamten Custom-CSS-Code speichern kannst. Diese Datei heißt im Standardfall style.css. Den Code dort also reinschreiben, abspeichern und die Datei wieder auf den Server schieben.

Tipp:

Wir haben ebenfalls ein Tutorial auf unserer Seite, in der wir dir erklären, wie du ein Child Theme erstellst.

Solltest du kein Child-Theme verwenden, oder aber nicht manuell die Style-Datei überschreiben wollen, kannst du deinen Custom-Code auch direkt in den Bereich „Custom CSS“ in den Divi-Optionen eintragen. Das entsprechende Feld findest du im Menü unter „Divi“ (unten links) – „Theme Options“ – und in den Theme Options ganz unten dann wie gesagt im Feld „Custom CSS“ einfügen.

Hier siehst du eine Anleitung, wie du um Feld "Custom CSS" kommst

Die einfachste Variante wäre nun, du kopierst dir den folgenden CSS-Code und nach dem Speichern wird auch dein Blog-Modul harmonischer aussehen.

 
.et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url {
padding-top: 70%;
}
.et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
height: 100%;
object-fit: cover;
position: absolute; 
top: 0; 
width: 100%; 
}

Eine Schritt-für-Schritt-Erläuterung des CSS Codes

Der Vorteil dieser Erläuterung besteht darin, dass du den Code einfacher an deine Bedürfnisse anpassen kannst.

Dafür kannst du im Browser, in dem du deine Seite aufgerufen hast, einmal den Inspector öffnen. Das geht im Safari auf dem Mac mit dem Shortcut ALT + CMD + C und in den meisten anderen Browsern mit Strg + Shift + C.

Anschließend wählst du das Anchor-Element des Vorschaubildes eines Beitrages aus. Entweder indem du es im Inspector rechts im HTML-Baum suchst, oder per Rechtsklick auf das Bild im Browser und dann auf „Untersuchen“

Diesem Element geben wir nun ein padding-top mit. Zum testen nehmen wir einen Wert von 70%.

 .et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url {
padding-top: 70%;
} 

Das Ergebnis ist natürlich noch nicht alles. Aktuell sieht das Ganze noch recht merkwürdig aus. Mit den folgenden Codezeilen wird das aber wieder alles geradegerückt.
Dazu müssen wir nun das img-Element selbst auswählen und der Reihe nach folgenden CSS-Code hinzufügen:

Das img-Element bekommen wir über

 
.et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
}

Und hier ändern wir nun die Werte position und top wie folgt:

 .et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
position: absolute;
top: 0;
}

Welche Auswirkungen diese zwei Codezeilen haben siehst du an folgenden Abbildungen:

Mit top: 0; haben wir das Bild also an den oberen Rand des gesamten Elementbereiches bekommen. Den nun zur Verfügung stehenden Platz wollen wir natürlich effizient nutzen. Das machen wir am besten, indem wir die volle Breite (width) und die volle Höhe (height) des verfügbaren Platzes nutzen:

 .et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

Das Ergebnis sieht nun schon viel besser aus. Die Bilder sind gleich hoch, gleich breit und dadurch sind auch die Überschriften der Vorschau perfekt ausgerichtet. Jedoch kann man bei dem rechten Bild deutlich erkennen, dass es aufgrund des neuen Formates verzerrt ist. Die junge Dame macht doch ein etwas langes Gesicht.

Das sieht nicht besonders professionell aus, daher sollten wir das noch korrigieren. Und das erreichen wir, indem wir die Eigenschaft object-fit verändern. Diese steht beim Blog-Modul standardmäßig auf contain, die Zauberformel ist in diesem Fall jedoch cover. Damit wird sozusagen das ursprüngliche Format des Bildes beibehalten und nur ein Ausschnitt des Bildes, der den gesamten Bereich des Elementes abdeckt (engl.: cover), ist zu sehen. Die Eigenschaft object-fit wird von allen aktuellen Browsern unterstützt, mit Ausnahme des Internet Explorers.

Unser Custom-CSS-Code sieht nach allen Änderungen also wie folgt aus:

 .et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

Schauen wir nochmal auf unsere Bilder, sehen diese nun nicht nur gleich groß aus, sondern sind auch nicht mehr verzerrt.

Fügst du nun den gesamten CSS-Code in die Style-Datei deines Child-Themes, oder aber in das Feld Custom-CSS, das wir dir eingangs gezeigt haben, ein und speicherst diese Änderungen, ist das Blog-Modul auch bereits für alle Besucher deiner Seite top ausgerichtet.

Wenn du möchtest, kannst du nun im Inspector noch ein wenig an der Eigenschaft padding-top des Image-Anchors herumschrauben. So kannst du nun das Format der Vorschaubilder einheitlich ändern. 100% entsprechen übrigens einem 1:1 Format, während Werte kleiner als 100% in ein breiteres Format umwandeln. Werte über 100% wandeln die Bilder in ein Porträtsformat um, also hochkant. Achte hier nur darauf, dass die Bildausschnitte noch alles wichtige zeigen und der Charakter des Bildes nicht verloren geht.

Zum Abschluss noch einmal den gesamten Code den du brauchst, um das Divi Blog-Modul mit Custom-CSS perfekt auszurichten:

 
.et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url {
padding-top: 70%;
}
.et_pb_module.et_pb_posts article.et_pb_post a.entry-featured-image-url > img {
position: absolute; 
top: 0; 
width: 100%; 
height: 100%;
object-fit: cover;
}

Hat dir das Tutorial weitergeholfen und den gewünschten Erfolg gebracht? Dann lass es uns am besten in einem Kommentar wissen!

Beitrag bewerten

0 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 50 votes, average: 0,00 out of 5
(Bewertungen: 0, Durchschnitt: 0,00, du musst eingeloggt sein, um zu bewerten)

Loading...

Fragen oder Anregungen zum Beitrag?
Hinterlasse einen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.