The Snippets Library for Divi

Published on 23/09/2021 | 7 comments

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, as 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"...

ligne grise sous le menu de divi
Remove the grey line under the Divi 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...

supprimer ligne grise sidebar divi
Remove the grey line on the left of the Divi sidebar

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

bouton recherche divi
Reduce the font size of the 'search' button so that it is no longer truncated
/* 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...

supprimer puces de liste footer divi
Remove list bullets in Divi footer widgets

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 Divi
Remove the shadow under the Divi menu
/* 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 image dans menu divi
Add a background image in the Divi 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:

change couleur css
Automatic colour change in the menu (it looks jerky because of the compression of my Gif but in reality, the change is smooth).
/* 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...

barre outils Divi

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

Blog Module Crop
Images are cropped in the Divi 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 wait any longer! 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...

article mis à jour le...
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

Changer la couleur du badge promo Divi et WooCommerce

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 don't need to come back and change the date, it will be automatic...

shortcode year
Create a "Year" shortcode to display a dynamic date.
// 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 efficiently with my Divi training !

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 😉

snippets divi 2
snippets divi 3

2,271 words

9

You should like it too:

Comment personnaliser le curseur de la souris sur votre site ?

How to customise the mouse cursor on your site?

Do you want a site that is customised down to the last detail? I have a quick and easy tutorial to help you customise the mouse cursor on your site. This way, when your visitors hover over a link, the cursor is fully customised!

7 Commentaires

  1. Cj-envadrouille

    Comme d’habitude, un article très utile pour tirer le meilleur de Divi . Merci Lycia !!

  2. Daniel Prin

    Un grand merci pour « La bibliothèque des Snippets pour Divi » Vraiment très utile, encore MERCI.

  3. Lycia Diaz

    Merci Christine 😉

  4. Michel

    Bonjour Lycia,
    Il y a un petit souci de css sur cette page
    https://astucesdivi.com/snippets-pour-divi/
    Tout le bas de page est collé à droite, et la sidebar d’inscription est passée en bas. J’ai pas le souci sur les autres posts.
    En affichage tel c’est OK, ça décale sur mes Media Queries Portable et bureau.
    Je suis sur Macbook dernier système, avec une version Firefox à jour.
    Mais tu es peut-être déjà entrain de régler le PB ;-).
    Boonne journée
    Michel

  5. Lycia Diaz

    Merci Michel ! Je vais regarder, c’est peut-être le cache

  6. Philippe Lenders

    Pour le snipped 10 : ne fonctionne chez moi que si j’utilise les entités HTML pour les caractères accentués :

    $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’ ) ) );

  7. Lycia Diaz

    Merci Philippe pour ta contribution

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This