Je vais ici vous expliquer comment réaliser un effet assez sympa, facile à mettre en place, et qui permet de dynamiser le design de son site en donnant au visiteur une impression de nouveauté quand celui-ci revoit plusieurs fois la même page.
Dans mon exemple, j’ai utilisé 3 images et un module en-tête plein écran, mais libre à vous de choisir plus d’images et de les afficher en fond de section, de rangée, de module… du moment où ça reste une image de fond, car nous allons utiliser la propriété CSS background-image, qu’il ne faut pas confondre avec la balise HTML <img>.

 

Préparez le terrain

 

Dans les paramètres du module, de la section ou de la rangée

Optionnel mais recommandé : il est préférable d’ajouter un fond de couleur (Contenu -> Fond), si votre texte est blanc par exemple, afin de pouvoir le visualiser dans le builder (vu que l’image de fond sera ajoutée avec jQuery seulement lors du rendu de la page). Dans mon exemple, j’ai choisi le noir.

Maintenant, rendez-vous dans Avancé -> ID et classes CSS -> ID CSS et précisez fond-aleatoire (identifiant que vous pouvez modifier mais qui devra être également changé dans le code jQuery que vous ajouterez ensuite).

 

Préparez vos images

Si ce n’est pas encore fait, uploadez dans la bibliothèque de médias de WordPress les images que vous souhaitez utiliser.
Cliquez sur chaque image et récupérez leur URL respective. Vous pouvez, par exemple, les copier/coller dans un fichier texte que vous conserverez de côté le temps de mettre en place ce qui va suivre.

 

Ajoutez le jQuery

Insérez maintenant sur votre page un module code, dans lequel vous pouvez coller le code suivant :

<script type="text/javascript">

jQuery(document).ready(function($){
    
    var image = new Array ();
    image[0] = "/11/watercolor-background.jpg";
    image[1] = "/11/explosion-de-couleurs.jpg";
    image[2] = "/09/d72a91fe3554c325338224329074d89f.jpg";

    var hasard = Math.floor(Math.random() * image.length);

    $('#fond-aleatoire').css({'background-image': 'url(http://playground.divi-community.fr/wp-content/uploads/2017' + image[hasard] + ")"});

});

</script>

Détaillons un peu le code

  • Lignes 6 à 7 : mes 3 images sont définies dans une variable sous forme de tableau (array) afin de rendre le code plus facile à lire.
    • Notez bien que la première image doit impérativement être numérotée 0
    • Vous remarquerez que je n’ai pas uniquement précisé le nom du fichier, mais ai également inclus une partie de l’URL, étant donné que mes images ne sont pas toutes stockées dans le même dossier. Souvenez-vous de l’arborescence des médias de WordPress : /upload/année/mois
      Mais si toutes vos images sont dans le même dossier, vous n’avez qu’à inscrire le nom des fichiers (sans oublier l’extension).
  • Ligne 8 : juste pour info, la variable hasard dit qu’il faut sélectionner aléatoirement une image parmi la liste de la variable image.
  • Ligne 12 :
    • tout d’abord, entre les premières parenthèses, nous retrouvons l’identifiant (#fond-aleatoire) de l’élément auquel nous allons changer l’image de fond.
    • ensuite, entre les secondes parenthèses :
      • nous précisons la propriété CSS sur laquelle nous intervenons
      • puis sa valeur : url(http://…) qui correspond à la partie constante des URL des images.
        (Donc dans mon cas, elle s’arrête à l’année car, comme expliqué plus haut, le mois est variable)
      • et enfin, on ajoute un peu de hasard 🙂

 

Et si nous allions un peu plus loin ?

 

Comment afficher aléatoirement une image <img>

Comme je le précisais au début de cet article, la méthode que je viens de présenter est valable pour les images de fond affichées en CSS.
Mais si vous avez besoin de l’appliquer à une “vraie” image, voici comment faire.

Dans le Divi Builder, ajoutez un module image puis, dans ses paramètres, allez dans Avancé -> ID et classes CSS -> ID CSS et inscrivez l’identifiant image-aleatoire
Vous pouvez faire d’autres réglages (dimensions, bordure, marges…) mais ne renseignez pas le champ URL de l'image.

Insérez maintenant sur votre page un module code, dans lequel vous pouvez coller le code suivant :

<script type="text/javascript">

jQuery(document).ready(function($){
 
 var image = new Array ();
 image[0] = "/11/watercolor-background.jpg";
 image[1] = "/11/explosion-de-couleurs.jpg";
 image[2] = "/09/d72a91fe3554c325338224329074d89f.jpg";

 var hasard = Math.floor(Math.random() * image.length);

 $('#image-aleatoire span img').attr('src', 'http://playground.divi-community.fr/wp-content/uploads/2017' + image[hasard]);

});

</script>

Détaillons un peu le code

C’est sensiblement le même code jQuery que pour les images de fond, les seules différences se trouvent à la ligne 12 :

  • Primo : le sélecteur CSS comprend notre identifiant #image-aleatoire plus span img, car l’image du module image de Divi est incluse dans une div, et c’est celle-ci qui reçoit l’identifiant CSS qu’on précise dans Avancé -> ID et classes CSS -> ID CSS. Il nous donc aller “chercher un peu plus loin”…
  • Secondo : on ne fait plus référence à des CSS mais à un attribut HTML (donc .attr) qui est src (soit l’URL du fichier image)

 

Comment changer aléatoirement une couleur de fond

Pour terminer, nous pouvons également reprendre notre premier exemple portant sur les images de fond et facilement l’adapter pour qu’il fonctionne avec les couleurs de fond.

Dans le Divi Builder, ajoutez ou choisissez une section, une rangée ou un module existants, puis dans ses paramètres, allez dans Avancé -> ID et classes CSS -> ID CSS et inscrivez l’identifiant couleur-aleatoire.
Vous pouvez effectuer tous les réglages qui vous semblent nécessaires, mais ne renseignez pas de couleur de fond dans Contenu -> Fond.

Insérez maintenant sur votre page un module code, dans lequel vous pouvez coller le code suivant :

<script type="text/javascript">

jQuery(document).ready(function($){
 
 var couleur = new Array ();
 couleur[0] = "#d9dbb3";
 couleur[1] = "#c3dbb3";
 couleur[2] = "#add1d3";

 var hasard = Math.floor(Math.random() * couleur.length);

 $('#couleur-aleatoire').css({'background-color': couleur[hasard]});

});

</script>

Détaillons un peu le code

Il s’agit donc d’une déclinaison du code jQuery pour les images de fond, avec comme différences :

  • Lignes 6 à 8 : on en renseigne plus des images mais des couleurs
    • il faut donc changer le nom de la variable
    • à la place des noms de fichiers, on cite des références hexadécimales (ou RGBA)
  • Ligne 10 : à la fin, penser à remplacer le nom de la variable pour utiliser couleur
  • Ligne 12 : on utilise notre identifiant CSS #couleur-aleatoire et l’attribut background-color vu qu’on veut modifier cette fois la couleur du fond

 

Pour conclure

Désormais, vous avez toutes les cartes en main pour décliner cette méthode avec les différents attributs CSS qui existent, ce qui laisse envisager un champ d’expérimentations extrêmement vaste !
Vous pouvez modifier les couleurs des titres, les hauteurs des sections, jouer sur les effets d’ombre, de flou, de déformation… Laissez libre cours à votre imagination, mais restez toujours raisonnable afin que cela ne desserve pas votre design. 😉

D'autres tutoriels pouvant vous intéresser: