Créer un diaporama d'images / slider avec Divi et WordPress (tuto vidéo)

Voici comment créer un diaporama d'images qui défilent, avec Divi, sur votre site WordPress. On appelle aussi ceci : un slider . Je vais vous exposer 3 manières différentes de créer ce diaporama d'images dans la vidéo ci-dessous.

Avant de vous montrer comment faire un slider, je dois vous avertir que les sliders / diaporama ne s’utilisent plus vraiment sur le Web.

De nos jours, faire un slider sur son site web n’est plus d’actualité. En effet aujourd’hui les sliders / diaporama ne sont plus aussi efficaces qu’avant. Ils sont jugés négatifs pour un site, mais réduisent aussi l’engagement visiteur ainsi que le taux de conversion, des détails que vous pourrez consulter sur https://www.neosama-consulting.com/pourquoi-utiliser-slider-site-web/. Libre à vous ensuite de déterminer si votre site peut contenir ou non des sliders.

Avant d’entrer dans le vif du sujet, il est important de connaitre ce qu’est Divi et d’en maitriser les bases fondamentales. En gros, Divi est un thème WordPress qui facilite la gestion, le développement, le style et l'agencement de votre site Web. Il vous suffit de sélectionner parmi une large gamme de mises en page préexistantes et d’ajuster, bricoler et coloriser jusqu’au contenu de votre choix. Vous n'avez pas besoin d'apprendre HTML, CSS ou PHP, le thème Divi est intuitif est très facile d’utilisation. Si vous souhaitez en connaitre plus sur Divi, rendez-vous sur notre présentation de Divi

Entrons maintenant dans la première solution. Cette première solution consiste à l’utilisation du module diaporama d’image. Un module évidemment présent dans Divi. Pour l’activer, il suffit tout simplement d’aller sur votre site, d’ajouter un module et de choisir diapos. Vous pouvez ensuite ajouter intuitivement les images qui vont composer votre diapo.  C’est la solution adaptée aux diapos qui sont riches en contenu, textes, liens et images. En effet juste à côté de chaque image, vous pouvez ajouter un titre, un texte pour expliquer l’image ou développer le titre, et un bouton d’appel à l’action. Cependant, si vous souhaitez simplement un diaporama d’images, il suffit de supprimer le titre et le texte par défaut. Dans ce cas, si vous souhaitez que chaque image couvre la totalité de l’espace consacrée à la diapo, placez vos images en image de fond. À vous ensuite de juger si jamais il y a trop ou pas assez d’images.

Pour obtenir le module galerie d’images, il vous suffit d’aller sur votre site web, d’ajouter un module et de choisir galerie. Cette solution est plus facile et simple du fait qu’au lieu de gérer des diapos, il suffit de gérer des images. En un clic vous pouvez ainsi sélectionner toutes les images qui vont défiler et composer la diapo. Vous allez avoir comme résultat premier un espace où toutes les images vont être présentées sous forme de grille. Pour en faire un diaporama, il suffit tout simplement de se rendre dans les paramètres d’option de la galerie d’images-style-modèle et cocher sur diapo.

Pour cette troisième et dernière solution, on va essayer d’autres solutions que celles offertes par Divi, notamment WordPress avec ses plus de 70 000 extensions gratuites. Il suffit de rechercher « slider » sur le site WordPress. À vous de faire votre choix sur les dizaines de résultats et de télécharger le plug-in ou encore de les installer directement sur votre site web à partir de votre back-office. Suivez ensuite les instructions pour la création de votre diapo. N’hésitez surtout pas à tester plusieurs plug-ins afin de trouver celui qui vous convient le mieux.

Bonjour, aujourd'hui je vais vous montrer comment créer un diaporama d'images qui défile avec Divi sur votre site WordPress. On appelle aussi cela un slider. Je vais vous exposer trois manières différentes de créer ce diaporama d'images.

Avant de vous expliquer comment faire ce slider, je dois vous avertir que les sliders, les diaporamas, ne s'utilisent plus vraiment sur le web. En effet, il a été mesuré qu'ils sont négatifs pour un site : ils vont réduire l'engagement de vos visiteurs et votre taux de conversion. J'en parle par exemple sur cette adresse que je vous mets en description de la vidéo. Je vous laisse aller lire les sources et les études qui ont mené à ces résultats, et vous pouvez prendre votre décision sur le fait de les utiliser sur votre site ou non.

Cette démo, comme le titre de la vidéo l'indique, utilise Divi. Si vous voulez savoir ce qu'est Divi, vous pouvez vous rendre sur le site netologiste.com (maintenant ideoforge.com), dont je vous mets le lien dans la description, où je vais vous expliquer ce que c'est.

Pour la première solution, on va utiliser le module « Diaporama d'images » qui est présent dans Divi. C'est celui vers lequel les gens vont se tourner naturellement. Une fois que vous êtes dans l'édition de votre site, vous ajoutez un module, et ici vous avez « Diapos ». Lorsque vous cliquez sur « Diapos », voici ce qui se passe : il y a deux diapos qui sont créées, avec un fond bleu, du texte et un bouton pour chacune des diapos.

Ce qu'on va faire, c'est qu'on va modifier les diapos. Ici, on va descendre dans « Image et vidéo » et on va lui ajouter une image. Donc je veux lui mettre ce chat. Ensuite je vais valider, me rendre dans la deuxième diapo et ici lui mettre une autre image. Voilà ce que ça donne pour le moment : on a un fond vert, du texte, des boutons, avec le texte qui est sous les boutons. Si le texte passe dessous, c'est parce que je suis dans un espace réduit. Ce que je peux faire, c'est créer une nouvelle rangée et puis prendre simplement mon module pour le mettre ici. Maintenant vous voyez que mon diaporama s'affiche en horizontal.

Ça, c'est pour créer des sliders avec une image, du texte et un bouton d'appel à l'action. Nous, ce qu'on veut faire ici, c'est simplement un diaporama avec des images. Donc on va modifier les diapos et supprimer tout le texte qui a été mis par défaut, ce qui nous permet d'obtenir ceci. Vous voyez, ce n'est pas terrible. On voit que ce diaporama n'est pas fait pour faire simplement défiler des images, il est là pour faire défiler un bloc de contenu.

Ce qu'on va faire, c'est qu'on va supprimer nos diapos et en ajouter, toujours en supprimant le contenu. Ici, on ne va pas ajouter d'image, on va lui mettre une image de fond. Donc on clique, comme d'habitude, ici sur « Fond » et on lui met l'image. On fait ceci pour la première, puis pour une deuxième diapo, on peut en mettre autant qu'on veut, il faut simplement éviter de surcharger son site. Ici, pour la deuxième diapo, je vais mettre une autre image pour la démonstration, et voici le résultat.

Ce qui nous embête ici, c'est évidemment la taille des images, parce qu'on a dit au fond de couvrir le diaporama, qui a une hauteur prédéfinie. Ça va être un peu compliqué avec cette solution d'arriver exactement à ce que vous voulez.

Je vous donne rapidement des pistes si vous voulez utiliser cette solution plutôt que la suivante. Lorsque vous êtes dans « Fond », comme tous les fonds sur un site web, vous pouvez choisir s'il va couvrir le conteneur, s'il va s'ajuster, si on met l'image en taille réelle, si on la met à gauche ou au centre, et ainsi de suite. Vous pouvez également, dans les styles du diaporama, dans « Dimensionnement », modifier la hauteur de votre diapo. Voilà, cette solution, si vous la maîtrisez et si elle vous convient, tant mieux.

Maintenant je vais vous montrer une deuxième solution, qui va être plus facile. Pour la deuxième, on va utiliser le module « Galerie d'images ». Lorsque j'ajoute un module, je choisis celui qui s'appelle « Galerie ». Ici, plutôt que de gérer des diapos, on va simplement gérer des images. On a un bouton « Images de la galerie » : je vais sélectionner simplement, en un clic, les images qui doivent apparaître dans ma galerie, je valide, et ça me crée une galerie photos comme ça.

Maintenant la petite astuce, c'est simplement de se rendre dans les paramètres de la galerie. On clique dans « Style », et ici on va dans « Modèle », et on a une option qui s'appelle « Diapos ». J'ai simplement pris cette option « Diapos », et vous voyez, mon diaporama d'images est déjà là. Ces deux solutions, c'était si vous voulez utiliser les modules qui sont dans Divi.

Maintenant, le fait d'utiliser Divi nous laisse l'accès à la majeure partie des ressources de WordPress. WordPress est connu grâce à ses plus de 70 000 extensions gratuites qui nous facilitent la vie. On va donc pouvoir utiliser un outil spécifique pour faire des galeries d'images avancées ou autres que celles qui sont offertes par Divi. Lorsque vous êtes sur le site officiel de WordPress, dans les extensions, ici vous tapez « slider ». Ça va vous donner des tas de résultats, tout ça sont des extensions gratuites ou en modèle freemium qui vont vous permettre d'intégrer des diaporamas d'images ou autres dans votre site. Il y en a vraiment beaucoup.

On va prendre par exemple celle-là, qui a cinq étoiles, Smart Slider 3. On peut la télécharger ici, ou on peut aller dans le back-office de notre site. On peut aussi les chercher ici, on n'a pas besoin d'aller sur le site de WordPress. On va installer Smart Slider 3, et une fois qu'elle est installée, on l'active.

Lorsque vous installez un plugin, il faut évidemment apprendre comment il fonctionne. Là, il nous donne directement dans le back-office des liens vers des vidéos. Sinon, sur le site officiel, il y a toujours une aide pour l'installation et le fonctionnement. Parfois ils traduisent en français, mais comme le web est plutôt en anglais, ici tout est en anglais. Pour ça, vous avez sûrement l'habitude, vous avez un bouton « Traduire en français » qui devrait vous permettre de comprendre tout ce contenu.

Celui-là, par exemple, nous proposait une bibliothèque de modèles, ou alors de créer un nouveau diaporama à partir de zéro. Rapidement, ce n'est pas du tout le but de la vidéo, mais on va créer un diaporama avec ce plugin. On va le prendre. Là, il nous demande le nom, la largeur, la hauteur. Évidemment, il faudra mettre vos images à la même taille que votre diaporama. On va utiliser une vignette horizontale qui a l'air sympa.

Lorsque je clique sur « Créer », on me propose d'ajouter une diapositive, qui peut être composée d'une image ou d'une vidéo externe. Nous, on va prendre simplement des images. Ici, je vais aller chercher des images dans ma médiathèque, celle-ci. Maintenant je vais rajouter une diapositive, une autre image, puis je vais en ajouter une troisième. Je vais enregistrer, et ensuite il nous explique comment ça fonctionne. Si vous travaillez en PHP, voici comment faire. Si vous êtes dans l'éditeur de pages, voici comment l'intégrer dans votre page. Et si vous êtes dans Divi, vous avez simplement à copier-coller ce shortcode.

Je l'ajoute ici dans un simple module texte, dans lequel je copie-colle le shortcode. Si c'est la première fois que vous voyez un shortcode, c'est simplement un code à copier-coller comme ça. Ici on enregistre, et vous voyez que le diaporama est là. Une fois que la sauvegarde est terminée, on va se rendre sur le site normal, et vous voyez ce que ça donne.

Ça, c'est assez sympa, parce qu'en 30 secondes on a créé un slider qui nous met des images, qui défilent avec une transition comme ça, et puis aussi des petites vignettes en dessous. Là, on est dans une démarche habituelle : vous allez lire les descriptions des plugins qui correspondent à ce que vous voulez, vous allez en tester quelques-uns jusqu'à trouver celui qui vous convient, celui qui convient le mieux à votre cas à vous.

Je vous ai préparé d'autres astuces et conseils pour vous simplifier la vie au quotidien, vous aider avec votre site Divi, WordPress et même le web en général. Vous pouvez vous rendre sur le site netologiste.com, dont le lien est dans la description, et en mettant simplement votre email ici, vous recevrez gratuitement une autre vidéo dans laquelle je vous partage d'autres astuces plus généralistes qui vont forcément vous toucher, vous aider et vous simplifier la vie. Merci de votre attention, à bientôt.