CSS

WordPress / Divi Theme CSS

Nützliche CSS-Sammlung

Texoptionen (Toolbar) sticky im visuellen Editor

Mein Favorit und must-have unter den Divi CSS Snippets.

Eines der am häufigsten auftretenden Probleme: Man schreibt lange Texte und die Text-Optionen (Headings, bold, link etc.) verschwinden und man muss hochscrollen, um sie zu erreichen.

Mit dem Code machst du diese Toolbar sticky. Und zwar in allen Modulen wo der Texteditor verwendet wird. Zumindest im visuellen Editor. Das spart auf Dauer viel Zeit und Nerven.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* divi builder text style container sticky */
.mce-top-part {
position: sticky!important;
top: -60px;
}

/* divi builder text style container sticky */

.mce-top-part {

position: sticky!important;

top: -60px;

}

Schrift der Erfolgsmeldung vom Kontaktformular ändern

Die Standardeinstellung ist weiß und lässt sich manuell über das Formular noch nicht ändern. Wer nun einen weißen Hintergrund hat, der bekommt bei der Error- oder Erfolgsmeldung keinen Text im Kontaktformular zu sehen.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ kann die Schrift gestyled werden. Hier das Snippet.

/* contact form message style */
.et-pb-contact-message {
color: #123456;
font-size: 18px;
text-align: left;
}

/* contact form message style */

.et-pb-contact-message {

color: #123456;

font-size: 18px;

text-align: left;

}

Blogmodul mit Bild links und Text rechts auf Desktop

In der Standardeinstellung lässt sich das Bild nur oberhalb des Text ausgeben.

Zunächst geben wir dem Blog-Modul eine Klasse.

Über „Modul Einstellungen“ – dann Reiter „Erweitert“ – „CSS-ID & Klassen“ die CSS Klasse definieren „bl-blog“.

Das Blogmodul Layout muss auf volle Breite eingestellt sein.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* blog module image left style */
@media only screen and (min-width: 1080px) {
.bl-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
float: left;
width: 30%;
margin-right: 4%;
}
.bl-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) &gt; .post-content {
padding-left: 34%;
}
}

/* blog module image left style */

@media only screen and (min-width: 1080px) {

.bl-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {

float: left;

width: 30%;

margin-right: 4%;

}

.bl-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {

padding-left: 34%;

}

White Space zwischen Blogbeitrag und Footer entfernen

Wer mit dem Divi Builder Blogbeiträge schreibt kennt das Phänomen: Unter den Beiträgen taucht auf einmal ein leerer Bereich auf. So entsteht eine unschöne Lücke zwischen dem Beitrag und dem Footer, vor allem wenn der Beitrag farblich abschliesst.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* remove bottom padding and margin on posts */
.single .post {
padding-bottom: 0;
margin-bottom: 0;
}

/* remove bottom padding and margin on posts */

.single .post {

padding-bottom: 0;

margin-bottom: 0;

}

Drop-down Menü verbreitern

Das Standard Drop-down Menü von Divi ist leider begrenzt. Lange Wörter werden daher oft abgeschnitten und schlecht umgebrochen. Wer das Menü verbreitern will nutzt dieses Code. Die erste width entspricht der Gesamtbreite. Die zweite des Menüs, diese hat 40px weniger, da dies der Standard Seitenrand ist.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* Increase width of drop-down menus */
@media screen and (min-width: 981px) {
.sub-menu {
min-width: 460px;
}
#top-menu li li a {
width: 420px;
/* Reduce padding on list items */
padding: 4px 12px;
}
}

/* Increase width of drop-down menus */

@media screen and (min-width: 981px) {

.sub-menu {

min-width: 460px;

}

#top-menu li li a {

width: 420px;

/* Reduce padding on list items */

padding: 4px 12px;

}

Update: Automatisch justierendes Dropdown

Wer keine Lust hat, die Breite manuell einzustellen, kann den nachfolgenden Code anwenden. Damit justiert sich die Breite des Dropdown Menü automatisch nach der Wortlänge.

/*dropdown menu auto width*/
@media only screen and (min-width: 981px) {
.nav li ul {
width: fit-content;
display: flex;
flex-direction: column;
}
.nav li li {
white-space: nowrap;
}
.nav li li a {
width: auto !important;
}
}

/*dropdown menu auto width*/

@media only screen and (min-width: 981px) {

.nav li ul {

width: fit-content;

display: flex;

flex-direction: column;

}

.nav li li {

white-space: nowrap;

}

.nav li li a {

width: auto !important;

}

Abstand über und zwischen Listenpunkten erhöhen

Zwar lässt sich die Zeilenhöhe der Listenpunkte individuell verändern. Trotzdem gibt es über und zwischen einer Liste oft unschöne und sehr kleine Abstände. Damit diese nicht über Code im Editor (br oder nbsp) gelöst werden, hilft dieser kleiner Code. Mittlerweile habe ich ihn fast immer im Einsatz und er macht das Lesen von Listen in Divi einfach besser.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* list margin top */
.entry-content ol li, .entry-content ul li {
margin-top: 15px;
}

/* list margin top */

.entry-content ol li, .entry-content ul li {

margin-top: 15px;

}

Mobile Navigation Hamburger-Icon ändern

Auch das Icon des Hamburger lässt sich leicht ändern. Zumindest in ein paar andere verfügbare Icons.

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/*change mobile hamburger icon*/
.mobile_menu_bar:before {
content: “a”;
}

/*change mobile hamburger icon*/

.mobile_menu_bar:before {

content: “a”;

}

Dort wo nun das “a” steht kann ein beliebiger Buchstabe eingefügt werden. Hier meine Favoriten:

a= a

b=b

c=c

d=d

e=e

f=f

h=h

Graue Linie unter dem Divi-Menü entfernen

/* Entferne die graue Linie unter dem Divi-Menü */
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* Entferne die graue Linie unter dem Divi-Menü */

#main-header {

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

Reduziere die Schriftart der Suchschaltfläche

/* Reduziere die Schriftart der Suchschaltfläche */
.et_pb_widget .wp-block-search__button {
font-size: 10px;
}

/* Reduziere die Schriftart der Suchschaltfläche */

.et_pb_widget .wp-block-search__button {

font-size: 10px;

}

Reduziere die Schriftart der Suchschaltfläche

/* Reduziere die Schriftart der Suchschaltfläche */
.et_pb_widget .wp-block-search__button {
font-size: 10px;
}

/* Reduziere die Schriftart der Suchschaltfläche */

.et_pb_widget .wp-block-search__button {

font-size: 10px;

}

Entferne den Schatten unter dem Divi-Hauptmenü

/* Entferne den Schatten unter dem Divi-Hauptmenü */
#main-header.et-fixed-header {
-webkit-box-shadow:none!important; 
-moz-box-shadow:none !important; 
box-shadow:none !important;
}

/* Entferne den Schatten unter dem Divi-Hauptmenü */

#main-header.et-fixed-header {

-webkit-box-shadow:none!important;

-moz-box-shadow:none !important;

box-shadow:none !important;

}

Hole Dir ein Menü, das die Farbe automatisch ändert

/* Hole Dir ein Menü, das die Farbe automatisch ändert */
#main-header {
-webkit-animation: random 15s infinite;
animation: random 15s infinite;
}
@keyframes random {
15% { background-color: #e3ff87; } 
30% { background-color: #ff7c96; } 
45% { background-color: #6ffffa; }
60% { background-color: #ef6b30; } 
75% { background-color: #bf69b1; } 
}

/* Hole Dir ein Menü, das die Farbe automatisch ändert */

#main-header {

-webkit-animation: random 15s infinite;

animation: random 15s infinite;

}

@keyframes random {

15% { background-color: #e3ff87; }

30% { background-color: #ff7c96; }

45% { background-color: #6ffffa; }

60% { background-color: #ef6b30; }

75% { background-color: #bf69b1; }

}

Zeigt das Aktualisierungsdatum eines Blogbeitrags an

function ad_last_updated_post( $the_date ) {
if ('post' === get_post_type() ) {
$nb_days_between = (get_post_modified_time() - get_post_time())/86400;
$nb_days_to_compare = '5';
$last_modified =  sprintf( __( 'Mis à jour le %s', 'Divi' ), esc_html( get_post_modified_time( 'd/m/Y' ) ) );
$published =  sprintf( __( 'Publié le %s', 'Divi' ), esc_html( get_post_time( 'd/m/Y' ) ) );
$date = $nb_days_between > $nb_days_to_compare ? $last_modified . ' | ' .  $published : $published;
return $date;
}
}
add_action( 'get_the_date', 'ad_last_updated_post' );
add_action( 'get_the_time', 'ad_last_updated_post' );

function ad_last_updated_post( $the_date ) {

if ('post' === get_post_type() ) {

$nb_days_between = (get_post_modified_time() - get_post_time())/86400;

$nb_days_to_compare = '5';

$last_modified = sprintf( __( 'Mis à jour le %s', 'Divi' ), esc_html( get_post_modified_time( 'd/m/Y' ) ) );

$published = sprintf( __( 'Publié le %s', 'Divi' ), esc_html( get_post_time( 'd/m/Y' ) ) );

$date = $nb_days_between > $nb_days_to_compare ? $last_modified . ' | ' . $published : $published;

return $date;

}

add_action( 'get_the_date', 'ad_last_updated_post' );

add_action( 'get_the_time', 'ad_last_updated_post' );

Parallaxe auf mobilen Bildschirmen zulassen

Wenn Du ein Layout mit Parallaxeneffekten erstellt hast, funktionieren diese auf mobilen Bildschirmen möglicherweise nicht richtig. Wenn Du dein Parallaxeneffekte auf diesem Bildschirmtyp beibehalten möchtest, musst Du den folgenden Code hinzufügen:

<script>
jQuery(document).ready(function($) {
// Mobile device check
$is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
if ($is_mobile_device) {
// Function to check if an element is in the Viewport
isInViewport = function(elem) {
elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
return elementBottom &gt; viewportTop &amp;&amp; elementTop &lt; viewportBottom;
};
// Apply Parallax transform calculations when scrolling
$(window).scroll(function() {
$(".et_parallax_bg").each(function() {
var $this_parent = $(this).parent();
// Check if the parent element is on-screen
var $is_visible = isInViewport($this_parent);
if ($is_visible) {
element_top = $this_parent.offset().top,
parallaxHeight = $(this).parent(".et_pb_fullscreen").length &amp;&amp; $(window).height() &gt; $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
bg_height = .3 * $(window).height() + parallaxHeight,
main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";
$(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});
}
});
});
}
});
</script>

jQuery(document).ready(function($) {

// Mobile device check

if ($is_mobile_device) {

// Function to check if an element is in the Viewport

isInViewport = function(elem) {

elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();

return elementBottom > viewportTop && elementTop < viewportBottom;

};

// Apply Parallax transform calculations when scrolling

$(window).scroll(function() {

$(".et_parallax_bg").each(function() {

var $this_parent = $(this).parent();

// Check if the parent element is on-screen

var $is_visible = isInViewport($this_parent);

if ($is_visible) {

element_top = $this_parent.offset().top,

parallaxHeight = $(this).parent(".et_pb_fullscreen").length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),

bg_height = .3 * $(window).height() + parallaxHeight,

main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";

$(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});

}

});

}

});

</script>

Platziere dieses Divi-Snippet in einem Codemodul innerhalb des Layouts, in dem sich die Parallaxe befindet, oder platziere dieses Snippet auf der Registerkarte „Divi“ > „Themenoption“ > „Integration“ : Füge diesen Code im Abschnitt „Kopf“ Deiner Website hinzu. In diesem Fall wirkt sich der Parallaxeneffekt auf die gesamte Site aus .

Dynamisches Jahr in Deine Veröffentlichungen

Wenn Du möchtest, dass Deine Beiträge immer „aktuell“ sind und Du nicht möchtest, dass die eingefügten Daten veraltet erscheinen, kannst Du ganz einfach einen Shortcode erstellen, um ein dynamisches Datum anzuzeigen. Dies ist beispielsweise nützlich, wenn Du einen Artikel wie „Der beste Leitfaden für 2021 für …“ veröffentlichst, sodass Du im Jahr 2022 nicht noch einmal zurückkommen und das Datum ändern musst, sondern dies automatisch geschieht …

// Créer le shortcode [year] pour afficher l’année courante
function year_shortcode() {
$year = date('Y');
return $year;
}
add_shortcode('year', 'year_shortcode');

// Créer le shortcode [year] pour afficher l’année courante

function year_shortcode() {

$year = date('Y');

return $year;

}

add_shortcode('year', 'year_shortcode');

Kopiere dieses Snippet und füge es in die Datei „functions.php“ Deines Child-Themes ein. Platziere dann den Shrotcode [Jahr] bei Bedarf in Deine Beiträgen. PS: Das funktioniert nicht in der Divi-Fußzeile.

Tooltip entfernen

Du möchtest den Tooltip entfernen, der angezeigt wird, wenn Du mit der Maus über ein Bild auf Deiner Divi-Site fährst. Das geht ganz einfach!

Füge einfach den folgenden Code in „Divi -> Integration -> Head“ ein:

<script>
jQuery(document).ready(function($) {
$("img").mouseenter(function() {
let $lwp_title = $(this).attr("title");
$(this).attr("remove_title", $lwp_title);
$(this).attr("title", "");
}).mouseleave(function() {
let $lwp_title = $(this).attr("remove_title");
$(this).attr("title", $lwp_title);
$(this).removeAttr("remove_title");
});
});
</script>

jQuery(document).ready(function($) {

$("img").mouseenter(function() {

let $lwp_title = $(this).attr("title");

$(this).attr("remove_title", $lwp_title);

$(this).attr("title", "");

}).mouseleave(function() {

let $lwp_title = $(this).attr("remove_title");

$(this).attr("title", $lwp_title);

$(this).removeAttr("remove_title");

});

</script>

Reihenfolge der Spalten in der mobilen Ansicht ändern

Eines der am häufigsten auftretenden Probleme: Die Anordnung der mobilen Reihenfolge ändern.

Auf dem Desktop gibt es zwei Spalten. Links ein Textmodul und rechts ein Bildmodul. In der mobilen Ansicht soll nun aber erst das Bildmodul folgen und dann das Textmodul.

Step 1: In die Zeileneinstellungen gehen und im Reiter „Erweitert“ auf „Benutzerdefiniertes CSS“ und „Hauptelement“ gehen.
Dort folgenden Code einfügen:

display: flex;
flex-wrap: wrap;

display: flex;

flex-wrap: wrap;

Step 2: Nun bei den Spalteneinstellungen im Reiter „Erweitert“ auf „Benutzerdefiniertes CSS“ und „Hauptelement“ gehen und die Reihenfolge festlegen.

Bei Spalte 1 wird nun für „Desktop“ und „Tablet“ „order: 1;“ eingestelt und für „Telefon“ „order: 2;“.

Bei Spalte 2 wird nun für „Desktop“ und „Tablet“ „order: 2;“ eingestelt und für „Telefon“ „order: 1;“.

Speichern und fertig ist die Anpassung der mobilen Reihenfolge für die Spalten.

Buttons auf volle Breite stellen

Auch hierfür gibt es noch keine Einstellungsmöglichkeit im Theme Builder.

Über „Modul Einstellungen“ – dann Reiter „Erweitert“ – „Benutzerdefinierte CSS“ und „Hauptelement“ das Snippet einfügen:

width: 100%;<br />text-align: center;

width: 100%;<br />text-align: center;

Schon geht der Button über die volle Breite.

Logo in Tablet- & Mobilansicht größer machen

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* logo bigger on tablet and mobile */
@media only screen and (max-width: 980px) {
#logo {
height: 100% !important;
max-height: 100% !important;
width: auto;
max-width: 100% !important;
}
}

/* logo bigger on tablet and mobile */

@media only screen and (max-width: 980px) {

#logo {

height: 100% !important;

max-height: 100% !important;

width: auto;

max-width: 100% !important;

}

Logo in Tablet- & Mobilansicht größer machen

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* logo bigger on tablet and mobile */
@media only screen and (max-width: 980px) {
#logo {
height: 100% !important;
max-height: 100% !important;
width: auto;
max-width: 100% !important;
}
}

/* logo bigger on tablet and mobile */

@media only screen and (max-width: 980px) {

#logo {

height: 100% !important;

max-height: 100% !important;

width: auto;

max-width: 100% !important;

}

Mobiles Menü scrollbar machen

Wenn das Menü insgesamt zu lang ist oder viele Unterpunkte hat wird es oft zu lang für Smartphones. Das Standard Menü lässt sich leider nicht scrollen und manche Punkte lassen sich nicht mehr erreichen. Mit diesm Snipppet machst du das mobile Menü „scrollbar“.
Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/* mobile menu scroll */
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}

/* mobile menu scroll */

.et_mobile_menu {

overflow: scroll !important;

max-height: 83vh;

}

Module nebeneinander ausgeben

Leider lassen sich Module zunächst nur untereinander in einer Zeile ausgeben. Manchmal braucht man aber zwei oder mehr Module nebeneinander und kann dafür keine neue Zeile anlegen. Z.B. zwei Buttons nebeneinander oder auch Text und Bild. Ein einfacher CSS-Snippet hilft. Dieser muss in beide Module eingegeben werden.
Über „Modul Einstellungen“ – dann Reiter „Erweitert“ – „Benutzerdefinierte CSS“ und „Hauptelement“ das Snippet einfügen:

display: inline-block;

Das wars schon. Ggf. müssen danach noch die Zwischenräume angepasst werden. Es lassen sich auch problemlos mehr als zwei Module nebeneinander ausgeben.

Automatische Trennung langer Wörter

Mehr ein allgemeiner Tipp, statt Divi bezogen.
Aber wir alle kennen es: Manchmal ist ein langes Wort z.B. in der mobilen Variante so lang, dass es aus dem sichtbaren Bereich fällt oder unpassend getrennt wird.

Im Text-Reiter vom Textmodul kann dann einfach an der gewünschten Trennstelle ein „& shy;“ eingefügt werden. Das Leerzeichen zwischen & und shy; bitte entfernen (Wenn ich es drin lasse verschwindet der Code). Damit trennt sich das Wort automatisch an der eingefügten Stelle.

Mobile Navigation (Hamburger) verbessern

Der Standard Hamburger in Divi ist nicht nur langweilig, sondern man erkennt auch immer direkt, dass es sich um eine Divi-Seite handelt. Das finde ich extrem nervig und eintönig.

Mit diesem kleinen Code kann man zumindest etwas daran arbeiten.

Der Code vergrößert zum einen den Hamburger etwas. Außerdem gibt es einen Rotations-Effekt beim öffnen. Und zu guter Letzt wird aus dem Hamburger ein „X“ beim öffnen. Leicht einzubinden, aber mit großer Wirkung!

Über „Divi“ – „Theme Optionen“ – Reiter „Allgemeines“ und dann im Feld „Eigene CSS“ den Code hinzufügen. Hier das Snippet.

/*change mobile hamburger size, add rotate effect and x*/
.mobile_menu_bar:before {
font-size: 37px;
display: block;
transition: all .6s ease;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: “M”;
transform: rotate(90deg);
}

/*change mobile hamburger size, add rotate effect and x*/

.mobile_menu_bar:before {

font-size: 37px;

display: block;

transition: all .6s ease;

}

.mobile_nav.opened .mobile_menu_bar:before {

content: “M”;

transform: rotate(90deg);

}

Entferne die graue Linie aus der Divi-Seitenleiste

Das scheint Sie weniger zu stören, aber auf manchen Websites kann es unansehnlich sein, diese graue Linie beizubehalten, die den Hauptinhalt von der Seitenleiste trennt

/* Entferne die graue Linie aus der Divi-Seitenleiste */
#main-content .container::before {
background-color: rgba(0, 0, 0, 0);
}

/* Entferne die graue Linie aus der Divi-Seitenleiste */

#main-content .container::before {

background-color: rgba(0, 0, 0, 0);

}

Listenaufzählungszeichen in der Divi-Fußzeile entfernen

Wenn Sie Fußzeilen-Widgets verwenden, kann es sein, dass hässliche Aufzählungszeichen auftauchen und Ihr Design stören

/* Listenaufzählungszeichen in der Divi-Fußzeile entfernen */
#footer-widgets .footer-widget li::before {
display:none;
}
#footer-widgets .footer-widget li {
padding-left: 0px;
}

/* Listenaufzählungszeichen in der Divi-Fußzeile entfernen */

#footer-widgets .footer-widget li::before {

display:none;

}

#footer-widgets .footer-widget li {

padding-left: 0px;

}

Füge im Hauptmenü ein Hintergrundbild hinzu

/* Füge im Hauptmenü ein Hintergrundbild hinzu */
#main-header {
background-size: initial;
background-repeat: no-repeat;
background-image: url(placez ici l'URL de votre image) !important;
background-position: center;
}

/* Füge im Hauptmenü ein Hintergrundbild hinzu */

#main-header {

background-size: initial;

background-repeat: no-repeat;

background-image: url(placez ici l'URL de votre image) !important;

background-position: center;

}

Stoppe zugeschnittene Bilder im Blog-Modul

Mit diesem PHP-Snippet lässt sich dies leicht korrigieren:

// Begin stop cropping featured image in Divi Blog Module
function ld_blog_crop_image_width($width) {
return 9999;
}
function ld_blog_crop_image_height($height) {
return 9999;
}
add_filter( 'et_pb_blog_image_width', 'ld_blog_crop_image_width' );
add_filter( 'et_pb_blog_image_height', 'ld_blog_crop_image_height' );
// End stop cropping featured image in Divi Blog Module

// Begin stop cropping featured image in Divi Blog Module

function ld_blog_crop_image_width($width) {

return 9999;

}

function ld_blog_crop_image_height($height) {

return 9999;

}

add_filter( 'et_pb_blog_image_width', 'ld_blog_crop_image_width' );

add_filter( 'et_pb_blog_image_height', 'ld_blog_crop_image_height' );

// End stop cropping featured image in Divi Blog Module

Ändere die Farbe des WooCommerce-Promo-Abzeichens

Wenn Dein Shop dir Schwierigkeiten bereitet und Du ihn nicht nach Ihren Wünschen anpassen kannst, finden Du hier einen Ausschnitt, um die Farbe dieses Abzeichens in CSS zu ändern:

/* Farbe des Woocommerce-Werbeabzeichens ändern */
.woocommerce span.onsale, .woocommerce-page span.onsale {
Hintergrund: #974df3 !important;
}

/* Farbe des Woocommerce-Werbeabzeichens ändern */

.woocommerce span.onsale, .woocommerce-page span.onsale {

Hintergrund: #974df3 !important;

}

Öffne die Fußzeilensymbole in einem neuen Browser-Tab

Wenn Du den Theme Builder nicht zum Erstellen der Fußzeile Deiner Website verwendest, möchtest Du möglicherweise, dass die Fußzeilensymbole in einem neuen Tab (neuem Fenster) geöffnet werden. In diesem Fall benötigen Du dieses Divi-Snippet:

/* Ouvrir les icônes du footer dans une nouvelle fenêtre */
&lt;script type="text/javascript"&gt;
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
&lt;/script&gt;

/* Ouvrir les icônes du footer dans une nouvelle fenêtre */

jQuery(document).ready(function(){

jQuery(".et-social-icon a").attr('target', '_blank');

});

</script>

Platziere diesen Code auf der Registerkarte „Divi“ > Option „Theme“ > „Integration“ : Füge diesen Code im Abschnitt „Kopf“ Deiner Website hinzu.

Eigene CSS-Sammlung

"Hier ist ein Code-Modul (Style-CSS) für den Button-Effekt" hinterlegt.

Überlappendes Logo, das beim Scrollen schrumpfen

Du möchtest Dein Logo größer machen und beim Scrollen verkleinern und das nicht mit der normalen Divi Funktion?

So geht es:

Divi –> Theme Optionen –> Reiter „Allgemeines“ im Feld „Eigene CSS“ den Code einfügen. Die Werte können nach belieben geändert werden.
Hier das Snippet.

/*=== Overlapping Logo that Shrinks on Scroll ===*/
.et_fixed_nav #top-header {
position: fixed;
z-index: 9998 !important;
}
#logo {
max-height: 140px !important;
margin-top: 10px;
}
.et-fixed-header #logo {
max-height: 55px!important;
margin-top: 0px;
}
@media only screen and (max-width: 980px){
#logo {
max-height: 41px!important;
margin-top: -30px;
}
#et-info {
float: none;
}
}
/*=== ENDE ===*/

/*=== Overlapping Logo that Shrinks on Scroll ===*/

.et_fixed_nav #top-header {

position: fixed;

z-index: 9998 !important;

}

#logo {

max-height: 140px !important;

margin-top: 10px;

}

.et-fixed-header #logo {

max-height: 55px!important;

margin-top: 0px;

}

@media only screen and (max-width: 980px){

#logo {

max-height: 41px!important;

margin-top: -30px;

}

#et-info {

float: none;

}

/*=== ENDE ===*/

Erster Buchstabe Groß

Damit der erste Buchstabe größer angezeigt werden kann muss vor und hinter dem Buchstaben folgendes eingesetzt werden:

Beispiel:

Dropcap
heißt hier das Zauberwort.

[ dropcap ] „in eckigen Klammern“ dann den Buchstaben z.B. „D“ wie oben einsetzten das ganze dann wieder schließen [ / dropcap ]

Die Größe und Farbe etc. kann angepasst werden.

Hier der Schnipsel:

/* Erster Buchstabe Groß */
.et-dropcap {
font-size: 95px;
line-height: 0.7;
color: #2f0033;
font-family: mali;
padding-top: 10px;
}
/* ENDE */

/* Erster Buchstabe Groß */

.et-dropcap {

font-size: 95px;

line-height: 0.7;

color: #2f0033;

font-family: mali;

padding-top: 10px;

}

/* ENDE */

Button Effekt

Für einen Button-Effekt wird eine neue CSS-Klasse generiert und in das Button-Modul eingesetzt. In diesem Fall ist es die CSS-Klasse: custom_button_1

Hier der CSS-Schnipsel:

/* Button-Effekt */
.et_pb_module a.custom_button_1 {
background-color: #5d0060; /* Change this color to your own */
background-image: linear-gradient(to right,#5d0060,#d706de,#5d0060); /* Change this color to your own */
display: inline-block !important;
cursor: pointer;
position: relative;
transition: color 0.35s ease, background-position 0.3s ease-in-out, 
background-color 0.35s ease, box-shadow 0.3s ease-in-out;
z-index: 1;
overflow: hidden;
background-size: 200% 100%;
background-position: 0 0;
}
.et_pb_module a.custom_button_1:hover {
box-shadow: -0.25em 0.25em 2.25em rgba(0,0,0,0.35);
background-position: 100% 100%;
}
/* ENDE */

/* Button-Effekt */

.et_pb_module a.custom_button_1 {

background-color: #5d0060; /* Change this color to your own */

background-image: linear-gradient(to right,#5d0060,#d706de,#5d0060); /* Change this color to your own */

display: inline-block !important;

cursor: pointer;

position: relative;

transition: color 0.35s ease, background-position 0.3s ease-in-out,

background-color 0.35s ease, box-shadow 0.3s ease-in-out;

z-index: 1;

overflow: hidden;

background-size: 200% 100%;

background-position: 0 0;

}

.et_pb_module a.custom_button_1:hover {

box-shadow: -0.25em 0.25em 2.25em rgba(0,0,0,0.35);

background-position: 100% 100%;

}

/* ENDE */

Button-Effekt

Bild und Schrift Center stellen

CSS-Klasse: .et_pb_equal_columns

Hier der CSS-Schnipsel:

/* Bild und Schrift Center */
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
/* ENDE */

/* Bild und Schrift Center */

.et_pb_equal_columns >.et_pb_column {

margin-top:auto;

margin-bottom:auto;

}

/* ENDE */

Animierte Linie unter dem Hauptmenü

Um eine animierte Linie unter Dein Hauptmenü zu erstellen kannst Du folgenden CSS-Schnipsel nutzen und nach Deinen wünschen gestalten.

Hier der Schnipsel:

/** Linie unter Menü **/
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 60%;
background: #ffffff; /*** COLOR OF THE LINE ***/
height: 1px; /*** THICKNESS OF THE LINE ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}
/*** ENDE***/

/** Linie unter Menü **/

#top-menu .current-menu-item a::before,

#top-menu .current_page_item a::before {

content: "";

position: absolute;

z-index: 2;

left: 0;

right: 0;

}

#top-menu li a:before {

content: "";

position: absolute;

z-index: -2;

left: 0;

right: 100%;

bottom: 60%;

background: #ffffff; /*** COLOR OF THE LINE ***/

height: 1px; /*** THICKNESS OF THE LINE ***/

-webkit-transition-property: right;

transition-property: right;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: ease-out;

transition-timing-function: ease-out;

}

#top-menu li a:hover {

opacity: 1 !important;

}

#top-menu li a:hover:before {

right: 0;

}

#top-menu li li a:before {

bottom: 10%;

}

/*** ENDE***/

Step 2: Nun bei den Spalteneinstellungen im Reiter „Erweitert“ auf „Benutzerdefiniertes CSS“ und „Hauptelement“ gehen und die Reihenfolge festlegen.

Bei Spalte 1 wird nun für „Desktop“ und „Tablet“ „order: 1;“ eingestelt und für „Telefon“ „order: 2;“.

Bei Spalte 2 wird nun für „Desktop“ und „Tablet“ „order: 2;“ eingestelt und für „Telefon“ „order: 1;“.

Speichern und fertig ist die Anpassung der mobilen Reihenfolge für die Spalten.

Hintergrundbild im Header 2

Hier der Schnipsel:

/* Hintergrundbild im Header */
#main-header {
background-image: url('https://Bildadresse.png');
background-size: initial;
background-repeat: no-repeat;
background-position: center top;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);
border-bottom:2px solid #2f0033;
}
/*ENDE*/

/* Hintergrundbild im Header */

#main-header {

background-image: url('https://Bildadresse.png');

background-size: initial;

background-repeat: no-repeat;

background-position: center top;

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);

-moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);

box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);

border-bottom:2px solid #2f0033;

}

/*ENDE*/

Step 2: Nun bei den Spalteneinstellungen im Reiter „Erweitert“ auf „Benutzerdefiniertes CSS“ und „Hauptelement“ gehen und die Reihenfolge festlegen.

Bei Spalte 1 wird nun für „Desktop“ und „Tablet“ „order: 1;“ eingestelt und für „Telefon“ „order: 2;“.

Bei Spalte 2 wird nun für „Desktop“ und „Tablet“ „order: 2;“ eingestelt und für „Telefon“ „order: 1;“.

Speichern und fertig ist die Anpassung der mobilen Reihenfolge für die Spalten.

Back to top Button Styling

Gestalte den Back to Top Button mit einem Bild oder Logo

Hier der Schnipsel:

*Back to top button styling*/
/*Dieser Abschnitt fügt das Bild hinzu*/
.et_pb_scroll_top:before { 
content: url(https://Bildpfad.png) !important;  
}
/*Dieser Abschnitt ändert die Form in einen Kreis und verschiebt die Schaltfläche vom Bildschirmrand aus.*/
.et_pb_scroll_top.et-pb-icon {
padding: 4px;
-webkit-border-radius: 20%;
-moz-border-radius: 20%;
border-radius: 20%;
right: 8px;
border:1px solid #ededed;
}
/* ENDE */

*Back to top button styling*/

/*Dieser Abschnitt fügt das Bild hinzu*/

.et_pb_scroll_top:before {

content: url(https://Bildpfad.png) !important;

}

/*Dieser Abschnitt ändert die Form in einen Kreis und verschiebt die Schaltfläche vom Bildschirmrand aus.*/

.et_pb_scroll_top.et-pb-icon {

padding: 4px;

-webkit-border-radius: 20%;

-moz-border-radius: 20%;

border-radius: 20%;

right: 8px;

border:1px solid #ededed;

}

/* ENDE */

Handy Menü gestalten

Hier eine Möglichkeit das Menü im Handy etwas anders zu gestalten.

Ein paar CSS-Schnipsel die Du nutzen kannst.:

Hier der Schnipsel:

/*=== 1. Handy Menü gestalten ===*/
/*make the Divi mobile dropdown menu scrollable*/
.et_mobile_menu {
overflow: scroll !important;
max-height: 80vh;
}
/*==== Ende =======*/
/*=== 2. Handy Menü Fixed mit Hamburger Text ===*/
/* Set the Divi Mobile Nav to Fixed on scroll */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
}
}
/*=== 3. Add the word MENU after the mobile nav hamburger icon ===*/
.mobile_menu_bar:after {
content: 'MENÜ';
bottom: 7px;
left: 10%;
position: relative !important;
color: #FFF;
right: 40px;
margin-top:5px;
font-size:16px;
}
/*=== 4. X icon in expanded mobile menu ===*/
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
color:#fff !important;
}
/*===== Ende =====*/
/*=== 5. Hamburger Linien in weiss ===*/
.mobile_menu_bar:before{
color:#fff;
}
/*===== Ende =====*/
/*=== 6. Mobile Menü aktive Linkfarbe ===*/
.mobile_nav .current-menu-ancestor&gt;a, .mobile_nav .current-menu-item&gt;a {
color: #3c3c3b!important;
}
/*=== Ende ===*/
/*=== 7. Center-align mobile menu items ===*/
.et_mobile_menu li {
text-align:center !important;
}
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}
/*=== Ende ===*/
/*=== 8. Make mobile menu fullwidth ===*/
.et_mobile_menu {
min-width: 100vw;
/*margin-left: -10vw;*/
}
/*=== 9. Remove the animation to avoid delay ===*/
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}
/*=== Ende ===*/
/*=== 10. Mobiles Logo ändern ===*/
@media only screen and (max-width: 980px) {
#logo {
content: url("https://demo.medienmonkey.de/wp-content/uploads/Logo_mit_Text-2.jpg");
}
}
/*==== Ende ====*/
/*=== 11. LOGO Handy größer machen ===*/
@media only screen and (max-width: 980px) {
body header img#logo {
max-width: 70%!important;
max-height: 70%!important;
height: auto!important;
width: auto!important;
margin-left:-40px;
}
}
/*=== Ende ===*/
/*=== 12. Linie unten Handy Menü ===*/
.et_mobile_menu li a {
border-bottom: 1px solid #3c3c3b;
background: #777;
}
/*==== Ende ====*/

/*=== 1. Handy Menü gestalten ===*/

/*make the Divi mobile dropdown menu scrollable*/

.et_mobile_menu {

overflow: scroll !important;

max-height: 80vh;

}

/*==== Ende =======*/

/*=== 2. Handy Menü Fixed mit Hamburger Text ===*/

/* Set the Divi Mobile Nav to Fixed on scroll */

@media (max-width: 980px) {

.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {

position: fixed !important;

}

/*=== 3. Add the word MENU after the mobile nav hamburger icon ===*/

.mobile_menu_bar:after {

content: 'MENÜ';

bottom: 7px;

left: 10%;

position: relative !important;

color: #FFF;

right: 40px;

margin-top:5px;

font-size:16px;

}

/*=== 4. X icon in expanded mobile menu ===*/

.mobile_nav.opened .mobile_menu_bar:before {

content: '\4d';

color:#fff !important;

}

/*===== Ende =====*/

/*=== 5. Hamburger Linien in weiss ===*/

.mobile_menu_bar:before{

color:#fff;

}

/*===== Ende =====*/

/*=== 6. Mobile Menü aktive Linkfarbe ===*/

.mobile_nav .current-menu-ancestor>a, .mobile_nav .current-menu-item>a {

color: #3c3c3b!important;

}

/*=== Ende ===*/

/*=== 7. Center-align mobile menu items ===*/

.et_mobile_menu li {

text-align:center !important;

}

.et_mobile_menu li li, .et_mobile_menu li ul {

padding-left:0 !important;

}

/*=== Ende ===*/

/*=== 8. Make mobile menu fullwidth ===*/

.et_mobile_menu {

min-width: 100vw;

/*margin-left: -10vw;*/

}

/*=== 9. Remove the animation to avoid delay ===*/

.mobile_nav.opened .et_mobile_menu {

display:block !important;

}

/*=== Ende ===*/

/*=== 10. Mobiles Logo ändern ===*/

@media only screen and (max-width: 980px) {

#logo {

content: url("https://demo.medienmonkey.de/wp-content/uploads/Logo_mit_Text-2.jpg");

}

/*==== Ende ====*/

/*=== 11. LOGO Handy größer machen ===*/

@media only screen and (max-width: 980px) {

body header img#logo {

max-width: 70%!important;

max-height: 70%!important;

height: auto!important;

width: auto!important;

margin-left:-40px;

}

/*=== Ende ===*/

/*=== 12. Linie unten Handy Menü ===*/

.et_mobile_menu li a {

border-bottom: 1px solid #3c3c3b;

background: #777;

}

/*==== Ende ====*/