Créer un diaporama d’images (slider) avec Divi et WordPress

par Jean - netologiste.com | Mis à jour le 27 Oct 2023 | Divi | 9 commentaires

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.

regardez la vidéo

Transcription résumée de la vidéo :

Avertissement sur l’utilisation des sliders dans votre site Web

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.

Qu’est-ce que Divi, le thème WordPress ?

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 https://www.netologiste.com/divi-wordpress-presentation/

Première solution : le module diaporama 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.

Deuxième solution : le module galerie d’images de Divi

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.

Troisième solution : utiliser un outil spécifique pour des galeries d’images

Pour cette troisième et dernière solution, on va essayer d’autres solutions que celles offertes par Divi, notamment WordPress avec ses 55000 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.

9 Commentaires

  1. CLAUDE BARAS

    Clair net et précis. Des conseils très efficaces exposés simplement, on appelle ça de la pédagogie. Bravo.

    Réponse
    • Jean - netologiste.com

      Merci beaucoup Claude, c’est très encourageant !

      Réponse
  2. Dan

    Okey, mais alor comment créer un diaporama du texte ?
    Merci

    Réponse
    • Jean - netologiste.com

      Bonjour, dans la vidéo de cet article, des diaporamas de texte sont créés

      Réponse
  3. sabrina

    Bonjour, comment figer un titre sans qu’il bouge et faire en même temps un défilement de diapo? merci pour votre aide
    cordialement

    Réponse
    • Jean - netologiste.com

      Bonjour Sabrina,
      Vous pouvez faire une colonne avec un titre standard figé, et une colonne avec un diapo

      Réponse
  4. Alex

    Est il possible de faire défiler 3 images en même temps ?

    Réponse
    • Jean - netologiste.com

      Bonjour Alex,
      Pour cela j’utiliserais plutôt un plugin WordPress spécialisé dans les sliders d’images

      Réponse
  5. Paul Langouet

    Bonjour, comment créer un diaporama de « carte produit » a défilé avec le doigt ?

    Merci pour votre réponse.

    Paul

    Réponse

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Besoin d’aide personnalisée ?

Recevez de l’aide directement sur votre site : lors d’un appel Zoom avec partage d’écran, je travaillerais avec vous sur votre site.

Pratiquez à votre rythme avec les formations en ligne

Formation WordPress

Apprendre WordPress

Comprenez WordPress de A à Z : formation complète en vidéo pour tout apprendre de WordPress.

Formation Découvrir Divi

Découvrir Divi

Créez votre site Web sans faire de code grâce au constructeur visuel Divi.

Formation Mieux utiliser Divi

Mieux utiliser Divi

Mon expérience après avoir aidé des dizaines d'entreprises à améliorer leur site Web Divi.

Formation Hébergement

Guide hébergement

Un hébergement Web avec votre installation de WordPress dès aujourd’hui.

Formation Divi Intégration Web

Divi intégration Web

Création d'une page Web complexe à partir d'une maquette graphique.

Obtenez ma formation Divi gratuitement

Recevez ma formation Divi gratuite avec des astuces pour vous simplifier le quotidien.

Vous allez recevoir un email à l'adresse que vous avez indiqué.