Aufgrund des großen Erfolges meines ersten Beitrages CSS Änderungen für Divi Theme habe ich mich entschieden, noch weitere interessante Divi CSS Snippets zur Verfügung zu stellen.
Finden Sie hier jetzt spannende und interessante CSS-Änderungen für Divi, die Sie garantiert von der Konkurrenz abheben. Nutzen Sie diese kleinen Snippets, um Ihrer Divi-Website eine ganz spezielle und einzigartige Note zu geben – IHRE!
Beitragsbild links neben dem Text anzeigen
.et_pb_post a img {
height: 200px!important;
float: left;
width: 200px;
left: 0;
padding-right: 14px;}@media only screen and (max-width: 980px) {
.et_pb_post a img {
float:none;
width:200px;
height:200px;}}
Zeigen Sie Ihre Beitragsbild links neben dem Text an! Diese Funktion wird immer wieder angefragt, da Elegant Themes diese Anzeige bisher nicht standardmäßig in Ihrer Blogdarstellung zur Verfügung gestellt haben. Beachten Sie bitte, dass dieses Snippet nur für die Darstellung “Volle Breite” gilt, nicht für “Gitter”. Ersetzen Sie width: und height: mit Ihrer gewünschten Bildgröße.
Bildgröße 200x200px
Bildgröße 300x400px
Zusatz
Dieses CSS-Snippet greift global für Ihre ganze Website. Deswegen kann es passieren, dass u. U. die Bilder des Gallery-Moduls verzerrt dargestellt werden.
Wenn Sie also dieses CSS-Snippet ausschließlich für Ihr Blog-Modul wünschen, vergeben Sie hierfür eine extra CSS-Klasse und weisen den CSS-Code explizit zu.
Die CSS-Klasse vergeben Sie direkt in Ihrem Blog-Modul. Gehen Sie dafür in Ihre Blog-Modul-Einstellungen (1) und dort in den Tab Erweitert (2). Unter CSS-Klasse (3) vergeben Sie jetzt Ihre individuelle CSS-Klasse, z. B. bildlinks.
Jetzt ersetzen Sie die gloable CSS-Klasse .et_pb_post mit Ihrer neu definierten Klasse:
.bildlinks a img {
height: 200px!important;
float: left;
width: 200px;
left: 0;
padding-right: 14px;}@media only screen and (max-width: 980px) {
.bildlinks a img {
float:none;
width:200px;
height:200px;}}
Damit wird nun der CSS-Code nur auf Ihr Blog-Modul angewendet.
Eine Trennlinie zwischen den Widgets einfügen
#sidebar .et_pb_widget {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 10px; }
#sidebar .et_pb_widget:last-of-type {
border-bottom:0; }
Sie können mit diesem CSS-Snippets schnell und unkompliziert Trennlinien zwischen Ihre Widgets einfügen. Modifizieren Sie einfach die Höhe, Farbe und den Abstand der Linie nach Ihren Wünschen.
Eine Trennlinie zwischen einzelnen Beiträgen einfügen
.page article, .archive article, .search article {background: url(‘https://easy-web-solutions.de/wp-content/uploads/2016/06/1612059-CSS-Snippet-Beitrags-Trennlinie.png’) no-repeat center bottom;}
.page .et_pb_post, .archive .et_pb_post, .search .et_pb_post {margin-bottom: 90px; padding-bottom: 30px;}
Wenn Sie etwas Ihr Layout auflockern bzw. mit netten Elementen versehen wollen, ist dieses Snippet genau richtig. Fügen Sie auf diese Weise Ihren Beiträgen auf der Blogseite (Standard, Archiv und Suche) eine individuelle Trennlinie bei. Ersetzen Sie hierbei die URL (kursiv markiert) mit Ihrer individuellen Bild-URL.
*Die URL muss mit einem Anführungsstrich oben, nicht wie angezeigt unten, angegeben werden. Leider wird das nicht korrekt dargestellt.
Einen Rahmen um das Blogbild beifügen
.et_pb_post a img {border: 2px solid #2ea3f2;}
Eine interessante Erweitung, um Ihr Blogbild etwas aufzupeppen. Fügen Sie einen Rahmen bei!
Ersetzen Sie 2px mit Ihrer gewünschten Rahmenbreite, solid mit Ihrem gewünschten Rahmenlayout und #2ae3f2 mit Ihrer Wunschfarbe.
Rahmen im Masonary Blog-Layout entfernen
.et_pb_blog_grid .et_pb_post {border: 0px; padding: 0 !important;}
.et_pb_image_container {margin: 0 !important;}
Sie lieben das Masonary-Layout, aber mögen den Rahmen rund um jeden Beitrag nicht? Mit diesem kleinen CSS-Snippet entfernen Sie diesen im Handumdrehen.
CTA-Button ohne runde Ecken
.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0;
}
Standardmäßig sind die CTA-Buttons (wie z. B. im Slider) mit runden Ecken. Wenn Sie dies nicht mögen, nutzen Sie dieses kleine Snippet und erhalten einen rechteckigen CTA-Button.
CTA-Button - Ecken mehr abrunden
.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
border-radius: 25px;
}
Standardmäßig sind die CTA-Buttons (wie z. B. im Slider) mit leicht abgerundeten Ecken. Wenn Sie diese noch etwas mehr abrunden möchten, nutzen Sie dieses CSS-Snippet und geben für den border-radius Ihre gewünschte Rundung ein. Je höher der Pixel-Wert ist, desto runder wird die Ecke.
Unteren Rahmen des Headers anpassen
#main-header {border-bottom: 10px solid #2ea3f2;}
#main-header {border: none;}
Standardmäßig ist dem Header ein sehr schmaler unterer Rahmen beigefügt. Mit diesem Snippet passen Sie diesen für Ihre Bedürfnisse individuell an. Varieren Sie 10px entsprechend Ihrer Vorstellung der Dicke sowie #2ea3f2 Ihrer Farbvorstellung.
Mit “border: none;” blenden Sie den unteren Rahmen komplett aus.
Ausblenden der Sidebar auf der Category-Seite
.archive #left-area {width: 100%; float: none; }
.archive #main-content .container:before, .archive #sidebar {display: none; }
Die Category- bzw. Archiv-Seiten werden bei WordPress standardmäßig selbst erstellt (abhängig vom verwendeten Theme), so auch bei Divi. Aktuell gibt es noch keine Einstellung, die Sidebar für speziell diese Seiten auszuschalten. Mit dem hier genannten CSS-Code haben Sie aber manuell die Möglichkeit, Ihre Kategorie- und Archiv-Seiten “fullwidth” zu gestalten.
Featured Bilder in Projekten nicht abschneiden
function portfolio_size_h($height) {
return ‘9999’;
}
add_filter( ‘et_pb_portfolio_image_height’, ‘portfolio_size_h’ );
function portfolio_size_w($width) {
return ‘9999’;
}
add_filter( ‘et_pb_portfolio_image_width’, ‘portfolio_size_w’ );
Diese Code-Schnipsel fügen Sie in die Datei “functions.php” ein. Ihre Projekt-Bilder werden nun nicht mehr abgeschnitten, sondern entsprechend Ihres Formates dargestellt.
Anzeige des mobilen Menüs anpassen
Divi bietet inzwischen eine weitere Möglichkeit, das Menü über die Einstellung Headerformat (1) anzuzeigen: Kopfzeilen-Stil “Slide in” (2). Bei dieser Einstellung wird generell das mobile Menü (3) verwendet:
Oft wird aber noch eine Einstellung “dazwischen” gewünscht. Über diseen CSS-Code können Sie steuern, ab welcher Bildschirmbreite, das Menü von der normalen Ansicht auf die mobile Ansicht umschaltet:
@media only screen and (max-width: 1250px) and (min-width: 981px){
#et_mobile_nav_menu {display: block;}}
@media only screen and (max-width: 1250px) and (min-width: 981px){
#top-menu {display: none;}}
Ersetzen Sie den Wert “max-width: 1250px” mit Ihrem Wunschwert, ab welcher Bildschirmauflösung das mobile Menü angezeigt werden soll.
Breite der Tabs gleichmäßig ausrichten
Standardmäßig werden die Tabs ohne Ausrichtung nebeneinander angeordnet. Dadurch entsteht oft rechts eine unschöne Lücke.
Um die Tabs gleichmäßig auszurichten, vergeben Sie dem Modul eine eigene CSS-Klasse, z. B. tab-ausrichten:
Anschließend fügen Sie den CSS-Code für die Ausrichtung wie gewohnt in den Divi-Theme-Optionen ein:
.tab-ausrichten .et_pb_tabs_controls li {
width: 20%; /*Ändern Sie die Breite entsprechend Ihrer Tabanzahl. 20% entsprechen 5 Tabs.*/
text-align: center;
}
@media screen and (max-width: 981px){
.tab-ausrichten .et_pb_tabs_controls li {
width: 100%;
text-align: center;
}
}
Im Ergebnis erhalten Sie die gleichmäßige Verteilung von 5 Tabs:
Höhe des Call to action einheitlich ausrichten
Standardmäßig wird die Höhe des Call to actions (Handlungsaufruf) durch die Höhe des Textes bestimmt. Möchte man nun z. b. 2 oder 3 Module nebeneinander anzeigen, haben diese dann normalerweise durch die unterschiedliche Textlänge eine unterschiedliche Höhe.
Um die Höhe gleichmäßig auszurichten, vergeben Sie dem Modul eine eigene CSS-Klasse, z. B. cta-hoehe:
Anschließend fügen Sie den folgenen CSS-Code für die Ausrichtung wie gewohnt in den Divi-Theme-Optionen ein:
.cta-hoehe .et_pb_promo_description { min-height: 180px !important; }
Variieren Sie die Höhe 180px entsprechend nach Ihren Anforderungen.
Im Ergebnis erhalten Sie die gleichmäßige Ausrichtung der Module:
Hallo,
interessante snippets. Suche einen code, um die Höhe des post-sliders zu begrenzen. Plugins für die Begrenzung der Zeichenzahl funktionieren nicht richtig, zumal auch die Überschriften unterschiedlich lang sind und höher als der Text sein sollen.
Ciao
weberausko
Hallo Stefan,
eine kurze Verständnisfrage: ist der Post-Slider bei dir unterschiedlich hoch oder dir generell zu hoch?
Hast du vielleicht einen Link, wo ich es mir mal anschauen kann? Schick mir den gerne auch per Mail.
Viele Grüße, Bettina
Hallo Betina,
vielleicht hast du einen kleinen Tipp für mich. Ich nutze bei meinem Blog http://goo.gl/woj5VV das Divi Kommentar-Modul. Leider erscheint beim Absenden des Kommentars ein Text, der einen Rechtsschreibfehler hat (statt Moderation steht Modertaion). Ich finde die Datei nicht, die diesen Text ausliefert. Ich war schon in der comments.php und auch in der Sprachdatei drin.
Viele Grüße
Lilija
Hallo liebe Lilija,
ich habe jetzt mal ein wenig gesucht :-) Das Theme enthält mehrere Sprachdateien. Schau mal hier: /wp-content/themes/Divi/includes/builder/languages/de_DE.po.
Dort ist der Fehler enthalten:
Ich habe den bei mir auch gleich korrigiert :-)
Liebe Grüße, Bettina
Hallo Bettina,
ich danke dir viiiiiiielmals. Es funktioniert. Ich habe mit der Suche schon Stunden verbracht :-/
Liebe Grüße
Lilija
PS: übrigens, bei den Kommentaren auf deiner Seite überlagert das Avatar-Bild ziemlich den Text. Ich musste deine Antwort herauskopieren, damit ich die komplett lesen konnte
Nachtrag: beim IE 11
Hallo Lilija,
sehr gerne und super, dass du es jetzt auch gleich gefunden hast :)
Danke dir auch für die Info wegen dem IE11. Hast du die Seite dafür auf dem Smartphone angeschaut oder ist die Überlagerung auch auf dem Desktop? Liebe Grüße, Bettina
Nur auf dem Desktop
Vielen Dank für den hilfreichen Beitrag “Einen Rahmen um das Blogbild beifügen”. Dies war genau das was ich gesucht habe!
Kurze Frage noch dazu: Ist es auch möglich das der “Mehr lesen” Button nicht unter dem Bild steht sondern wieder hinter dem Test? Unter dem Bild geht der sehr unter :(
Gruß Monika
Hallo Monika,
danke für dein tolles Feedback!
Und probiere mal den folgenden Code zusätzlich:
.et_pb_posts a.more-link {
text-align: right;}
Damit wird “mehr lesen” ganz nach rechts gesetzt.
Viele Grüße, Bettina
Danke, hat geklappt! Hast du möglicherweiße auch noch eine Idee wie ich die Beitragsbilder im Blogbeitrag kleiner und zentriert bekomme?
Gruß Moni
Hallo Moni,
probiere mal folgenden Code zum Verkleinern:
.single-post .et_post_meta_wrapper img {
max-width: 70%;
}
Ersetze “max-width: 70%” mit deiner gewünschten Größe.
Mit dem Zentrieren ist das so eine Sache. Da habe ich noch keine Lösung gefunden.
Liebe Grüße, Bettina
Zum Snippet Beitragsbild links neben dem Text anzeigen, passiert bei mir dass dann bei Blogansichten mit Gitter die Bilder in nicht zumutbarer Höhe dargestellt werden und selbst Bilder in Beiträgen werden beeinflusst. Ich habe dann ein wenig mit % anstatt mit Px experimentiert, das beeinflusst die Gitteranzeigen weniger, aber hat Einfluss auf Bilder in Seiten und Beiträgen, aber da ich eigentlich kaum Kenntnisse kommen ich da nicht wirklich weiter.
Hallo Ulrich, ja – die Ansicht ist vorrangig nur für die Einstellung “Volle Breite” gedacht. Du wills die Bilder somit auch in der Gitter-Ansicht links daneben? LG Bettina
das Problem ist wenn man das Snippet in Divi-Themeoption packt beeinflusst dass auch Gridlayouts die mann eventuell noch verwendet oder man muss für jede Vollbreiten Blogansicht ne Seite machen und das Snippet da reinpacken und darf die Standard WP-Blogansicht nicht verwenden
Ja, stimmt. Du könntest aber versuchen, es über die Post-ID nur einer speziellen Seite zuzuordnen, z. B.:
“.post-1099 .et_pb_post a img {…}”
‘1099’ müsstest du dann mit deiner Post-ID ersetzen.
Achtung: manchmal ist es auch ‘.page-id’
Ja danke werde ich ausprobieren
ich suche einen Codeschnipsel um dem fullside portfolio zu sagen, dass es 8 Bilder in 2 Reihen darstellen soll. :)
vielen Dank für die Hilfe
Hallo “Caze” :)
eine Beschreibung würde hier den Rahmen sprengen. Aber schauen Sie mal hier, ob Ihnen der Beitrag von ET weiterhilft: https://www.elegantthemes.com/blog/divi-resources/changing-the-number-of-columns-in-the-divi-gallery-module
Viele Grüße, Bettina
Hat das Snippet “Beitragsbild links neben dem Text anzeigen” negativen Enfluss auf das Galeriemodul? Die Bilder sind dann verzerrt.
Siehe http://entw.koeb-heusweiler.de/lesen-und-toepfern-auf-der-wiese
Hallo Herr Müller,
ja. Das Snippet gilt global und greift somit auch für andere Bildanzeigen.
Um die Anzeige nur für Ihr Blogmodul greifen zu lassen, vergeben Sie am besten eine CSS-Klasse und weisen den Befehl dieser zu.
Ich passe dazu auch noch meinen Beitrag an, da dies jetzt öfter angefragt wird.
Viele Grüße, Bettina Schwidder
Wie kann ich denn das Beitragsbild über eine CSS-Klasse ansprechen?
Schauen Sie noch einmal oben in die Beschreibung. Ich habe hier soeben einen Zusatz hinzugefügt.
Hallo Frau Schwidder,
hat funktioniert!!!
Vielen Dank
LG
Ulli
Hallo Ulli, super und danke für die Rückmeldung! Einen tollen Sonntag und lieben Gruß, Bettina
Hallo,
gibt es ein Snippet mit dem ich einstellen kann, dass die Webseite nach oben einen abstand von mindestens 50px hat ?
mfG
Hallo Herr Nagel, Sie meinen ganz oben am Rand, so dass das Menü diesen Abstand hat?
Liebe Bettina
Stundenlang gegoogelt und nichts gefunden, trau ich mich, Dich anzufragen: Hast Du mir einen Tip wie ich die Lightbox-Funktion der Galerie (Slider-Layout) deaktivieren kann?
Viele Grüsse aus Zürich
Barbara
Guten Morgen liebe Barbara,
toll, dass du dich traust :-)
Und dass du nichts so richtig gefunden hast, liegt daran, dass es mit Bordmitteln nicht einfach zu deaktiveren ist.
Aber es geht mit ein wenig CSS.
Gehe dazu im Modul auf das Tab “Erweitert” und vergib die CSS-Klasse: lightbox-deaktivieren.
Und dann fügst du den folgenden CSS-Code bei Theme-Optionen –> Benutzerdefiniertes CSS ein:
.lightbox-deaktivieren a {
pointer-events: none;
}
.lightbox-deaktivieren .et_overlay {
display: none !important;
}
.et-pb-slider-arrows a {
pointer-events: auto !important;
}
Damit sollte die Lightbox-Funktion des Galerie-Modul deaktiviert werden :-)
Lieben Gruß
Bettina