A color-changing background in Divi

Updated on 12/07/2021 | Published on 28/11/2018 | 8 comments

In this article, we will see how to easily get a background that changes colour, simply with CSS code. Here, no Javascript or hands in the code ! You'll see that with this trick, you'll get a super fun coloured effect!

To better understand, discover this video that shows the final result of this background that changes color:

So, what do you say? Does it give you some ideas? Let's find out how...

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

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.

1 - How do I get a background that changes colour in Divi?

The following method can be easily integrated into Divi but can also be used in any WordPress theme or HTML page.

First, you need to add a page and activate the Divi Builder (or edit a page that already uses the Divi Builder).

You will add a STANDARD SECTION (blue box in the image below).

In the LINE (green box in the image below), add a TEXT MODULE (pink box in the image below). You can write the text of your choice, for my example, I wrote "just fun".

section standard Divi

Next, make sure to set the background of the LINE (green color) to 100% transparency. This will allow the background color of the STANDARD SECTION to show through.

opacité ligne Divi

Finally, edit the STANDARD SECTION, go to the ADVANCED tab and add a CSS class. For this example, I used the class fun-color.

Ajouter une classe CSS à la section standard de Divi

Now you can save your page (your changes) and go to the Appearance > Customize > Additional CSS tab to enter these few lines of code:

/* couleurs changeantes */

.fun-color {
-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; } 
}

That's it! If you refresh your page you should see a background that changes colour.

Need more resources on Divi? Visit the ElegantTheme blog which is full of ideas and tutorials!

2 - Some explanations on this CSS code...

To better understand and appropriate this piece of codeHere are some explanations that will allow you to modify it as you wish:

explication du code CSS pour un arrière-plan qui change de couleur
  1. The text between /* and */ is a CSS comment. This is not taken into account by the browser and allows you to find your way in your code when you edit it later. This is optional and you can change the text without any problem.
  2. The .fun-color is the call to the CSS class. The CSS code that follows this call will only be applied to HTML elements that use this class
  3. 15s is the duration of the color change. If you increase it, the color change will be slower, if you decrease it, it will be faster.
  4. The % percentages will need to be adjusted according to the number of colors you wish to use. If you reduce the number of colors, you will increase the % of each color. If you increase the number of colors, you will decrease the % of each color.
  5. #e3ff87 is the hexadecimal code of a color in HTML. To choose your own colors and know their code : visit this page.

3 - What can we do with this custom code?

The CSS code is applied to an element. For my example, I used a CLASS (.fun-color) that I applied to a section of Divi but you could very well apply this code to an existing class or HTML ID in Divi.

For example, in the video below, I applied this code to the menu of my Divi site :

For this, it's very simple, I used the menu ID (#main-header) as you can see in the screenshot below:

appel css

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

4 - Going further with Divi's colours

I'm sure this gives you some incredible ideas for your current or future projects... Am I wrong?

If not, here is a reading list you might like:

arrière-plan qui change de couleur dans Divi
changing color background Divi

702 words

3

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

8 Commentaires

  1. Jean-Michel

    Bonjour Lycia et merci a nouveau pour cette idee.
    Je cherche ceci depuis un moment deja afin de traiter la couleur d’une ligne de « underscore » au moyen de 7 couleurs.

  2. Jean-Michel

    Rebonjour,
    Cela fonctionne evidemment tres bien. La question que je me pose c’est pourquoi le code css n’est pas accepte dans le fichier style.css du theme enfant ?
    Et en revanche, je n’arrive pas a transposer ce code pour la couleur d’un texte (une ligne) ?

  3. Lycia Diaz

    Il y a peut-être une « mini erreur » dans votre code qui fait que ça ne marche pas ? N’étant pas en face du problème je vais avoir du mal à vous dépanner malheureusement… courage ! 😉

  4. Jean-Michel

    C’est ok pour le texte en mettant le code la ou vous le dites. J’ai trouve qu’il faut mettre « 15% { color: #e3ff87; } » au lieu de « 15% { background-color: #e3ff87; } « .

    Je n’ai cependant pas compris la relation des % avec le nombre des couleurs.
    Je me demande aussi comment effectuer ceci sequenciellement au lieu du random ?

  5. Lycia Diaz

    Mais bien sur tu as raison : l’attribut color agit sur le texte.
    Les pourcentages servent à la boucle de changement de couleur. Par exemple, pour 3 couleurs, ce serait 33% pour chaque couleur. Mais tu peux aussi dire 10% puis 80% puis 10%… Si tu veux que la couleur du milieu soit plus présente que les autres… Pour le non-random, je ne sais pas trop, je suppose qu’il faudrait supprimer les transitions plutôt, ce sont elles qui agissent sur l’effet de fondu.

  6. Jean-Michel

    Ok merci beaucoup.
    Ca fonctionne a souhait avec le script suivant, ca peut rendre service :

    /* couleurs changeantes sequentiellement */

    .text-color {color: #FFFFFF;
    -webkit-animation: mycolor 15s infinite;
    animation: mycolor 15s infinite;
    }

    @keyframes mycolor {
    20% { color: #FFFF00; }
    20% { color: #FF8C00; }
    20% { color: #008000; }
    20% { color: #0000FF; }
    20% { color: #800000; }
    }

  7. Lycia Diaz

    Super ! Merci Jean Michel pour ce partage !

  8. Deanerys

    Bonjour,

    Merci beaucoup pour cette explication, c’est super sympa de votre part.
    Je me demandais si on pouvait faire la même chose en dégradé de couleur ?

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