The Snippet Library for Divi

The Divi theme and its Divi Builder offer an incalculable number of customization options. Just know them well to set the least pixel of a layout... Yet, there are still some places where the developers of Elegantthemes have decided for us, not leaving us an option to correct some design elements here and there... And this is where the SNIPPETS for Divi!

Yes, thanks to a simple copy and paste, you will correct these unwanted little designs on your site.

I publish this article today, but pin it somewhere because with every new snippet I need for my own Divi projects, I'll come and share them here. So this is a V1 for this evolutionary article!

What is a Snippet?

Snippet is an anglophone word that could be translated as "extract" in French... It is, in fact, a matter of portion of code ready to be copied and glued to your site. Upon adding this code, the desired functionality or design must be immediate.

The Snippets are a real happiness for WordPress users / Divi who have no code skills, because it allows them to correct their small worries without using a developer.

I must confess that when I started with WordPress, I didn't even know where to place the Snippets that I found on the Web. I also didn't know the difference between CSS or JS and I didn't know how to handle these lines of code... Anyway, what is it all about?

Need to master Divi? Discover my training that accompanies you step by step in the understanding and use of Divi! Learn more about Divi training.

How to use the Divi snippets offered here?

I'll offer you various Snippets Divi to achieve various immediate outcomes. Just copy and paste the given code. To help you, I will tell you where to place this code, but for your learning, I recommend you read this guide carefully to find out add code in Divi.

Note that the proposed codes can be modified by you to better match your graphic chart, so don't hesitate to change the color codes, pixel values, etc.

Ah! and as long as I think about it: if the code doesn't work, think about emptying your cache or checking that the quotes or apostrophe are straight, because it can be modified when copy-paste...

1 – Remove the grey line under the Divi menu

Ah, she pisses you off that one?! Many of you ask me this question regularly: "how to remove the grey line from the menu"...

So here's the answer:

/* supprimer la ligne grise sous le menu de Divi */

#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

💡 Placez ce code dans la style sheet of your theme child – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

Did you know that? You can test Divi for free by visiting on this page and by clicking on "TRY IT FOR FREE"

2 - Remove the grey line from the sidebar of Divi

This one looks less disturbing, but on some sites, keeping this grey line that separates the main content from the sidebar can be unsightly...

So here's the solution:

/* supprimer la ligne grise de la sidebar Divi */
#main-content .container::before {
    background-color: rgba(0, 0, 0, 0);
}

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

3 – Reduce font from Search button

This one you hate, I'm sure! You don't like the word "search" truncated. Indeed, for Anglophones (search) the button does not pose a problem, but for Francophones, it is a concern...

/* réduire la police pour le bouton rechercher */
.et_pb_widget .wp-block-search__button {
    font-size: 10px;
}

See also this tutorial for optimize your result page Research with Divi.

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

4 - Remove list chips at footer Divi

If you use widgets at the foot of the page, it is possible that ugly chips appear and come to disrupt your design...

Here's the solution:

/* supprimer les puces de liste en pied de page */
#footer-widgets .footer-widget li::before {
display:none;
}
#footer-widgets .footer-widget li {
    padding-left: 0px;
}

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

5 - Remove shadow under the main menu of Divi

This Snippet Divi could also serve you, if you want to get a flat design...

/* supprimer l'ombre sous le menu */
#main-header.et-fixed-header {
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;
}

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

Need to master Divi? Discover my training that accompanies you step by step in the understanding and use of Divi! Learn more about Divi training.

6 - Add a background image to the main menu

This is less common but perhaps you would like to add a decorative image in the background of your menu...

/* ajouter une image de fond dans le menu principal */
#main-header {
background-size: initial;
background-repeat: no-repeat;
background-image: url(placez ici l'URL de votre image) !important;
background-position: center;
}

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

To add background images in the background of your pages, this way.

7 – Get a menu that changes color automatically

If you want to give peps to your site, you could choose a main menu with changing colors, as here:

/* couleurs changeantes dans le menu principal */
#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; } 
}

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

If you wish to apply this change colors on other elements of your site, read this tutorial.

8 - Fix the toolbar of the Divi Text module

If you use the Divi Builder to write long texts, you must have noticed that you had to scroll up to format the text you are writing.

It's annoying if your text is long...

The solution is to add this little Snippet:

/* toolbar sticky au scroll */
.mce-top-part {
	position: sticky !important;
	top: -60px;
}

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS.

Be careful, this code only works if you use Divi in Front Office. For other situations, go to the article dedicated to the fixed tool bar.

9 - Stop the images in the Blog module

You must have realized that the highlighted images of your articles may appear on the page of your blog using the Divi Builder Blog module...

It's simple to fix this with this PHP Snippet:

// 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

Copy and paste the above code into the file functions.php your child theme.

For other tips, go to the article dedicated to cropping images in Divi.

Don't delay! Discover the theme Divi here !

10 - Show update date of a blog post

If you, too, want to show the update date of a blog post, like here on Divi Tips, know that this is not complicated...

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' );

Copy and paste this snippet into the file functions.php your child theme.

For other tips on update date of an article, visit here.

11 - Change the color of WooCommerce Promo badge

If your shop gives you a twist and you can't customize it as you wish, here is a snippet to change the color of this badge into CSS:

/* changer la couleur du badge promo woocommerce */

 .woocommerce span.onsale, .woocommerce-page span.onsale {
     background: #974df3 !important;
 }

💡 Placez ce code dans la style sheet of your child theme – or in the tab Divi > Theme Options > Customize CSS – or in the tab Appearance > Customize > Additional CSS – Don't forget to change the color code (#974df3) by yours.

12 - Allow parallax on mobile screens

If you created a layout with parallax effects, they may not work properly on mobile screens. If you want to keep your parallax effects on this type of screen, you will need to add the following code:

<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 > 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>

Place this Divi snippet in a Code module within the layout where the parallax is located or place this snippet on the tab Divi > Theme option > Integration : add this code in the section Head Your site. In this case, The parallax effect will apply to the entire site.

For more information, see the tutorial on Parallax for Divi.

13 - Open the footer icons in a new browser tab

If you don't use the Builder Theme to build the footer of your site, you might want the footer icons to open in a new tab (new window), in this case you will need this Divi Snippet:

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

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".et-social-icon a").attr('target', '_blank');
});
</script>

Place this code on the tab Divi > Theme option > Integration : add this code in the section Head Your site.

For more tips, go to the tutorial dedicated to icons in the footer.

14 - Insert a dynamic year into your publications

If you want your publications to be "up-to-date" and don't want the inserted dates to look obsolete, you can easily create a shortcode to display a dynamic date. For example, this is useful if you publish an article like "Best Guide 2021 of ...", so in 2022 you won't need to come back to change the date, it will be automatic...

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

function year_shortcode() {
$year = date('Y');
return $year;
}
add_shortcode('year', 'year_shortcode');

Copy and paste this snippet into the file functions.php of your child theme, then place the shrotcode [year] in your publications when you need them. PS: This does not work in Divi's footer.

Need more resources on Divi? Visit ElegantThemes blog full of ideas and tutos! Or learn how to effectively use this theme through my training Divi !

15 - Remove the infobulle that appears on the overfly of an image

You want to delete the bug that pops up when you pass the mouse over an image in your Divi site. For this, it's very easy!

Simply add the following code in the section <head> on your site:

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

I propose two methods to implement this JavaScript: with or without plugin. The best is to read carefully the atircle that deals with the removal of the image title on the mouse overfly.

Snippets for Divi: In conclusion...

As explained at the beginning of this article, stay connected as this article will evolve over time! I will regularly add new Snippets simple, useful and easy to use!

And don't hesitate to leave a little incentive comment and share this article on your networks, it might be useful to your audience