Sommaire de l’article :
- Créer une bannière accordéon engageante avec Divi Supreme
- Trouver des images gratuites, de qualité et les optimiser
- Installer Divi Supreme Lite
- Module Divi Supreme : Image Accordion
a) Maximiser la rangée dans la section
b) Paramètres généraux du module
c) Paramètres de chaque image
d) Etendre le Style à la section
e) Placer un filtre (Overlay) sur les images de la bannière accordéon
Créer une bannière accordéon engageante avec Divi Supreme Lite
Dans ce tutoriel Divi, je vous montre comment créer une bannière accordéon très design pour votre site web en utilisant le module « Image Accordion » du plugin Divi Supreme Lite. Divi Supreme Lite est la version gratuite de l’excellent Divi Supreme Pro. Divi Supreme lite compte un 20aine de nouveaux modules pour Divi contre une 60aine pour Divi Supreme Pro.
Le module « Image Accordion » est donc une fonctionnalité extrêmement utile pour créer des bannières attractives et engageantes pour votre site web Divi. Grâce à ses nombreux paramètres de personnalisation, vous pouvez créer des effets visuels impressionnants et des transitions animées qui feront ressortir votre bannière.
Dans cette vidéo, je vous guide donc pas à pas pour créer votre propre bannière accordéon en utilisant le module « Image Accordion ». Je vous montre comment télécharger les images appropriées, les optimiser au bon format, ajuster les paramètres pour créer l’effet accordéon souhaité, et personnaliser le texte et les liens pour ajouter une touche professionnelle à votre bannière animée.
Trouver des images gratuites, de qualité et les optimiser
Pour notre bannière pleine écran nous aurons besoin de 3 images d’au moins 1920 pixels de large. Il faudra cependant qu’elles soient optimisées et que chacune d’entre elles ne dépasse pas une 30aine de Ko pour que la bannière ne soit pas trop lourde et que la vitesse de téléchargement de la page de ne s’en trouve pas impactée.
– Pour trouver des images de qualités, libres de droits et utilisables gratuitement dans un cadre commercial, je vous recommande le site Pixabay qui propose un choix vaste et intéressant de belles images.
Je vous recommande de choisir des images avec une variété faible en couleurs et nuances afin que l’optimisation puisse être efficace et ne pas dépasser 30 / 40 ko par image.
Pour recadrer vos images, les optimiser et les exporter dans un format performant, je vous recommande Photopea qui est un site en ligne gratuit qui permet de retoucher les images et qui accepte de nombreux formats et qui gère les calques. C’est un « Photoshop like » entièrement gratuit !
Appelez les images téléchargées dans Photopea. Redimensionnez-les en choisissant 1920 pixels de large (Image > Taille de l’image)
Recadrez-les ensuite avec l’outil recadrage (présent dans le menu des outils de gauche.) Hauteur d’image de ~ 800 / 900 pixels. Puis exportez l’image au format WebP (Ficher > Exporter en tant que > WebP.
Installer Divi Supreme Lite
Pour créer cette bannière accordéon nous aurons besoin d’un nouveau module Divi que va nous offrir gratuitement Divi Supreme Lite un plugin Divi.
Attention, pour pouvoir installer Divi Supreme lite vous devez disposez d’une licence Divi afin de pouvoir accéder au Divi Visual Builder. pour télécharger et installer Divi Supreme Lite, rendez-vous dans la partie « Extensions » du menu WordPress.
Module Divi Supreme : Image Accordion
Pour créer notre bannière, nous créons tout d’abord une section normale puis nous insérons une rangée à 1 colonne et dans cette rangée nous insérons le module Image Accordion de Divi Supreme.
La fenêtre des paramètres s’ouvre et nous ajoutons les 3 images que nous avions préparées et optimisées à l’aide de Photopea en cliquant à chaque fois sur le [+] Ajouter un nouvel article.
Maximiser la rangée dans la section
Le module est inséré dans l’espace d’une rangée qui a des marges internes. De même la rangée a une certaine largeur dans la section et la section elle-même a aussi des marges internes. Il est donc nécessaire de supprimer toutes ces marges et de maximiser la taille de la rangée dans la section pour que la bannière accordéon occupe toute la largeur.
1. Dans les paramètres de la section :
Dans l’onglet style > Espacement
à « Marge Interne » mettre 0 en haut, en bas, à droite, à gauche.
2. Dans las paramètres de la section :
Dans l’onglet style > Espacement
à « Marge Interne » mettre 0 en haut, en bas, à droite, à gauche.
Toujours dans l’onglet Style > Dimensionnement, régler largeur maximale à 100% (dans les 2 cas).
Paramètres généraux du module
Quelques réglages sont intéressants ici. Nous sommes donc dans l’onglet contenu. Nous avons :
Accordion Type : cette option va permettre d’activer l’effet accordéon au survol de la souris ou au clic.
Accordion Content animation : il est possible à cet endroit de définir l’animation de l’entrée du contenu sur chaque image (titre, sous titre et bouton).
Accordion Height : Réglage intéressant qui permet de définir la hauteur de la bannière.
Paramètres de chaque image
En cliquant sur l’engrenage de chaque image, il est possible d’accéder aux paramètres spécifiques de l’image.
Dans l’onglet contenu. Il va être possible (si les champs sont renseignés) de placer un titre, un sous titre et un bouton avec un lien.
Avec les options : Horizontal Align et Vertical Align, il est facile de positionner ce texte sur l’image.
Dans notre cas, j’ai choisi de placer mon contenu en bas et à gauche, mais vous pouvez constater qu’il est trop près des bords. Il faudra donc aller dans l’onglet Style et ajouter de la marge interne (dans mon cas en bas et à gauche).
Ensuite dans l’onglet Style, il est possible d’apporter du Style au titre, au texte et au bouton selon vos goûts.
Etendre le Style à la section
Reproduisez l’opération aux 2 autres images, sans appliquer de Style, juste en entrant le contenu brut.
Ensuite cliquez sur les 3 petits points en bout de ligne de la première image (celle où le style a été défini) puis choisissez l’option « Etendre les styles d’élément » puis choisissez ensuite étendre le style à cette section.
Cette opération aura pour effet d’appliquer le style du contenu de la première image aux 2 autres images, ce qui vous fera gagner du temps.
Placer un filtre (Overlay) sur les images de la bannière accordéon
Dans les paramètres généraux du module dans Style, il est possible de placer un filtre sur les 3 images en même temps à « Overlay ». Un filtre permet parfois de mieux distinguer le texte sur l’image sinon c’est un simple effet esthétique.
Il est possible également de placer un filtre séparé sur chaque image. Pour cela, il faut se rendre dans les paramètres de chaque image et dans l’onglet Style toujours à « Overlay », choisir une couleur de filtre.
Quand vous choisissez une couleur, celle-ci va recouvrir complètement l’image. Il est nécessaire alors de cliquer sur la pipette et en jouant sur le canal Alpha d’apporter de la transparence à couleur afin de révéler l’image du dessous.
