A background that changes color in Divi

Published on 28/11/2018 | 8 comments

In this article, we will see how to easily obtain a background that changes color, simply with CSS code. Here, no Javascript or hands in the code! You will see that with this trickyou will get a colorful and fun effect!

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

So, what do you think? Does that give you any ideas? Let's find out how to do it....

 

Advertisement: This article contains affiliate links that you will easily recognize. Classic links are in purple and sponsored links are in pink.

 

How do I get a background that changes color in Divi?

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

First of all, you must 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

 

Then, make sure to set the LINE background (green color) with 100% transparency. This will allow the background color of the STANDARD SECTION to appear.

 

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 tab Appearance > Customize > Additional CSS 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 all! That's all! If you refresh your page you should see a background that changes color.

Need more resources on Divi? Visit ElegantTheme's blog full of ideas and tutorials!

 

Some explanations about this CSS code....

To better understand and appropriate this piece of code, here 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 around 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 of 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 reduce it, it will be faster.
  4. The % percentages will have to be adjusted according to the number of colours you want 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 reduce the % of each color.
  5. #e3ff87 is the hexadecimal code of a color in HTML. To choose your own colours and know their code: visit this page.

 

What can be done with this code?

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

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

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

appel css

I'm sure it gives you incredible ideas for your current or future projects... Am I right?

arrière-plan qui change de couleur dans Divi

 

changing color background Divi

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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