The Snippets Library for Divi

The Divi theme and its Divi Builder offer countless customization options. You just need to know them well to set up every single pixel of a layout... However, there are still a few places where the developers at Elegantthemes have decided for us, leaving us no option to fix a few design elements here and there... And this is where SNIPPETS for Divicome in !

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

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

What is a Snippet?

Snippet A snippet is a piece of code that is ready to be copied and pasted onto your site. As soon as you add this code, the functionality or design you are looking for should be immediate.

Snippets are a real boon for WordPress / Divi users who have no coding skills, as it allows them to fix their little problems without calling in a developer.

I must confess that when I started with WordPress, I didn't even know where to place the Snippets I found on the Web. I didn't know the difference between CSS and JS and I didn't know how to manipulate those lines of code... Well, you can learn everything!

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

How do I use the Divi snippets offered here?

I'm going to offer you various Divi snippets to get various immediate results. All you have to do is copy and paste the given code. To help you, I will show you where to place this code but for your learning, I advise you to read carefully this guide to know add code to Divi.

Note that the proposed codes can be modified by you to better match your graphic charter, so feel free to modify the colour codes, pixel values, etc.

Oh, and now that I think about it: if the code doesn't work, remember to clear your cache or check that the quotes or apostrophes are straight, because this can be changed when copying and pasting...

1 - Remove the grey line under the Divi menu

Ah, you're getting annoyed with this one?! Many of you ask me this question regularly: "how to remove the grey line under the menu"...

So here is the answer:

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

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

💡 Place this code in the style sheet of your child theme - or in the tab Divi > Theme Options > Customize CSS - or in the Appearance > Customize > Additional CSS.

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

2 - Remove the grey line from the Divi sidebar

This one seems to bother you less, but on some sites, keeping that grey line separating the main content from the sidebar can be unsightly...

So here is the solution:

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

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

3 - Reduce the font of the Search button

You hate this one, I'm sure! You don't like the word "search" being truncated. Indeed, for English speakers (search) the button is not a problem, but for French speakers, it is a problem...

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

Discover also this tutorial for optimise your results page search with Divi.

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

4 - Remove list bullets in Divi footer

If you use widgets in the footer, it is possible that ugly bullets appear and disrupt your design...

Here is 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;
}

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

5 - Remove the shadow under the Divi main menu

This Snippet Divi could also be useful 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;
}

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

Need to master Divi? Discover my training which will guide 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 to 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;
}

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

To add background images in the background of your pages, it's here.

7 - Get a menu that changes colour automatically

If you want to liven up your site, you could opt for a main menu with changing colours, like 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; } 
}

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

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

8 - Fixing the Divi Text Module toolbar

If you use the Divi Builder to write long texts, you may have noticed that you have 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;
}

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS.

Please note that this code only works if you are using Divi in the Front Office. For other situations, go to the article dedicated to the fixed toolbar.

9 - Stop cropping images in the Blog module

You may have noticed that the featured images in your posts may appear cropped on your blog page using the Divi Builder Blog module...

It's easy 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 your child theme's functions.php file.

For more tips, see the article on Crop images in Divi.

Don't delay! Discover the Divi theme here !

10 - Displaying the update date of a blog post

If you also want to display the update date of a blog post, like here on Divi Tips, you should know that it's 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 your child theme's functions.php file.

For more tips on date of update of an article, go here.

11 - Change the colour of the WooCommerce Promo badge

If your shop is giving you trouble and you can't customise it the way you want, here is a snippet to change the colour of this badge in CSS:

/* changer la couleur du badge promo woocommerce */

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

💡 Place this code in the style sheet of your child theme - or in the Divi > Theme Options > Customize CSS - or in the tab Appearance > Customise > Additional CSS - Don't forget to change the colour code (#974df3) to your own.

12 - Allow parallax on mobile screens

If you have 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:

💡 Place this Divi snippet in a Code module within the layout where the parallax is located or place this snippet at the Divi > Theme options > Integration tab: add this code to the "head" section of your site. In this case, the parallax effect will be applied to the whole site.

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

13 - Open the footer icons in a new browser tab

If you are not using the Theme Builder to build the footer of your site, you may want the footer icons to open in a new tab (new window), in which case you will need this Divi snippet:

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

💡 Place this code in the Divi > Theme options > Integration tab: add this code to the "head" section of your site.

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

14 - Insert a dynamic year in your publications

If you want your publications to be always "up to date" and you don't want the inserted dates to look outdated, you can easily create a shortcode to display a dynamic date. For example, this is useful if you publish an article such as "the best 2021 guide to...", so that in 2022 you won't need to come back and 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 your child theme's functions.php file, then place the [year] shrotcode within your posts when you need it. PS: this does not work in the Divi footer.

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme effectively with my Divi training !

15 - Delete the tooltip that appears when hovering over an image

You want to remove the tooltip that appears when you hover over an image in your Divi site. It's very easy to do!

Il suffit d’ajouter le code suivant dans la section <head> de votre site :

💡 I propose two methods to implement this JavaScript: with or without plugin. The best is to read carefully the article about the removal of the image title on mouse over.

Snippets for Divi: in conclusion...

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

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