Le guide ultime pour créer un slider Divi

Publié: 2020-09-04

Divi by Elegant Themes est l'un des constructeurs de thèmes et de pages WordPress les plus populaires disponibles aujourd'hui. Ce constructeur de pages est un éditeur par glisser-déposer dans lequel vous pouvez créer un site Web complet . Il existe de nombreux modules disponibles parmi lesquels vous pouvez choisir et qui facilitent la création d'un site Web. Dans cet article, je vais vous présenter les modules slider disponibles dans Divi . De plus, je vais vous montrer une alternative au plugin de curseur qui peut rendre votre site Web plus unique.

Modules Divi Slider

L'utilisation d'un curseur ou d'un bloc sur votre site Web n'est pas une nouveauté de nos jours. Les constructeurs de page comme Divi ont déjà des options pour créer un module slider pour votre page, qui est la solution la plus simple et la plus rapide pour créer un slider . Divi propose 3 types de modules slider : un slider simple, un slider vidéo et un module post slider.

Modules coulissants Divi
Modules slider Divi disponibles

Jetons un œil à ces modules !

Module coulissant

Le module de curseur Divi peut être une excellente solution si vous souhaitez placer un curseur de base sur votre page. Chaque paramètre est à l'intérieur du constructeur Divi , et vous pouvez vérifier instantanément si la conception convient ou non.

Module de curseur Divi

Ce curseur est un excellent module de curseur que vous pouvez utiliser pour présenter des images ou des vidéos, afficher du texte et vous pouvez également y ajouter un CTA. Pour cette raison, cela peut être un moyen rapide de créer un curseur de héros. Vous avez également des options de personnalisation, comme définir la typographie, les couleurs ou le style de vos puces. Le curseur a une option pour définir une image d'arrière-plan du curseur, où vous pouvez ajuster la taille de l'image. De plus, vous pouvez mettre une superposition dessus. Et vous pouvez même ajouter un effet de parallaxe qui peut rendre votre site plus professionnel.

👍 BON
  • Facile à utiliser
  • Fond de parallaxe
  • Arrière-plan vidéo
  • Masquer le curseur sur les appareils
👎 MAUVAIS
  • Vous ne pouvez pas modifier l'ordre du contenu de votre diapositive
  • Structure limitée

Curseur vidéo

Divi propose un autre module slider pour créer un slider vidéo sur votre page. Avec ce module, vous pouvez organiser vos vidéos . Vous pouvez utiliser n'importe quelle source , par exemple, vous pouvez mettre n'importe quel lien YouTube ou Vimeo, ou vous pouvez télécharger votre propre vidéo mp4. C'est donc à vous de décider lequel vous souhaitez utiliser. Il existe des options de personnalisation similaires à l'autre module de curseur. De plus, vous pouvez également personnaliser les images miniatures et le bouton de lecture.

Module de curseur vidéo

👍 BON
  • Vous pouvez utiliser n'importe quel type de vidéo
  • Un moyen facile de créer une galerie vidéo
👎 MAUVAIS
  • Pas d'option de lecture automatique
  • Chaque fois que la vidéo commence depuis le début

Curseur de message

Post slider dans Divi
La création d'un curseur de publication à changement dynamique est idéale pour présenter nos publications les plus récentes ou en vedette . Divi propose un module post slider où vous pouvez afficher votre dernier post, définir combien d'articles vous souhaitez mettre en avant et dans quel ordre. Vous pouvez définir l'image en vedette comme arrière-plan de la diapositive, afficher le titre et la méta du message, et mettre un bouton Lire la suite qui renvoie au message lui-même.

👍 BON
  • Contenu changeant dynamiquement
  • Vous pouvez choisir parmi les catégories
  • Nombre de publications et commande personnalisables
👎 MAUVAIS
  • Conception et structure limitées

Comment créer de meilleurs sliders Divi ?

Les modules slider dans Divi sont géniaux mais je pense qu'ils sont un peu limités. Si vous souhaitez créer un slider plus personnalisable , cela vaut la peine de trouver un plugin de slider compatible avec Divi. Smart Slider est l'un des meilleurs plugins de slider de WordPress. Même la version gratuite a d'excellentes fonctionnalités avec lesquelles vous pouvez commencer. Smart Slider vous aide à créer des conceptions personnalisées et vous pouvez personnaliser chaque calque . Ce plugin a un module Divi, vous pouvez donc le publier comme d'habitude.

J'espère que vous voulez savoir comment le plugin Smart Slider 3 peut mettre à niveau la fonctionnalité de curseur Divi. L'une des améliorations les plus importantes est que vous pouvez créer des diaporamas avec plus de 4 couches dans un ordre et un placement personnalisés.

Exemple de curseur de portefeuille pleine page

Smart Slider a une liste de calques où vous pouvez choisir parmi plusieurs types de calques. Les lignes et les colonnes vous aident à les structurer. Vous avez la possibilité d'aligner vos calques verticalement et horizontalement, de définir une largeur maximale, de modifier les couleurs ou la typographie, afin de pouvoir créer un design unique . Si cela ne suffit pas, vous pouvez utiliser le positionnement absolu sur vos calques pour concevoir le curseur. En combinant les différentes couches et positions, vous pouvez créer des sites Web vraiment uniques avec Smart Slider 3 et Divi.

Comment utiliser Smart Slider 3 ?

Smart Slider est un plugin de curseur disponible gratuitement dans le référentiel WordPress. Il suffit de le télécharger et de l'activer. Ensuite, vous pouvez commencer à créer votre slider. Il existe de nombreux modèles prédéfinis avec lesquels vous pouvez commencer, mais vous avez la possibilité de recommencer à zéro.

Si vous êtes prêt avec votre slider, publiez-le avec le module Smart Slider Divi.

Module de curseur intelligent

Comparaison du module slider Divi et du Smart Slider

Permettez-moi de comparer le curseur Divi de base et les versions gratuite et pro de Smart Slider. Je pense vraiment que le module slider Divi est un excellent module de Divi, car il a beaucoup d'options de personnalisation, et il est à l'intérieur de Divi. Tout est au même endroit et vous n'avez pas besoin de connaître une nouvelle interface. Mais la fonctionnalité est limitée car vous ne pouvez pas créer la mise en page souhaitée.

Si vous voulez une mise en page plus spécifique où vous pouvez placer vos calques où vous voulez, et vous pouvez créer un contenu plus unique, pensez à utiliser Smart Slider 3 . La version gratuite propose de nombreuses fonctionnalités comme le module Divi, et avec la Pro, vous n'avez pas de limites.

Voyons quelques différences pertinentes !

Module de curseur Divi
Curseur intelligent 3 gratuit
Curseur intelligent 3 Pro
Couches 5 6 23
Options de typographie
Interface glisser-déposer
Image de fond
Vidéo de fond mp4, WEBM mp4
Effet de parallaxe
Animations de calque
Transitions
Contrôles 2 5 7
Variables dynamiques
Superposition statique
Lecture automatique

Interface

Interface de curseur intelligent

La principale différence est l'interface. Il ne fait aucun doute que Divi facilite l'ajout de curseurs à votre site Web WordPress. Entrez simplement du texte dans les champs définis, puis téléchargez des images et votre curseur est prêt à fonctionner. Cependant, en ce qui concerne les fonctionnalités et la possibilité de créer des curseurs impressionnants, le curseur Divi présente certaines limites. Néanmoins, dans Smart Slider, vous pouvez utiliser un éditeur de diapositives par glisser-déposer et vous pouvez placer vos calques où vous le souhaitez.

Animations et effets

Avec les modes d'animation d'arrière-plan, vous pouvez facilement donner vie à votre conception. Divi a une option d'animation de base, que vous pouvez égayer votre curseur, mais dans Smart Slider 3 Pro, vous pouvez choisir parmi 3 types d'animations : animation principale, animation d'arrière-plan et animations de calque unique.

Commandes personnalisables

Chaque module de curseur a des options pour personnaliser les contrôles, mais dans Smart Slider, vous avez plus de façons de les rendre uniques. Vous pouvez placer les commandes dans d'autres positions, modifier les couleurs, l'espacement ou les masquer sur différents appareils. En outre, dans Smart Slider 3, vous disposez d'options pour afficher les vignettes que vous pouvez créer un curseur de vignettes de style galerie d'images.

Curseur de vignette gratuit

Lecture automatique du curseur

Smart Slider offre une lecture automatique des curseurs, une fonctionnalité populaire dans la plupart des plugins de curseurs. De cette façon, le curseur change de diapositive après un certain temps. Cela peut attirer l'attention des visiteurs, mais si vous n'aimez pas les curseurs à lecture automatique, vous pouvez simplement désactiver ce paramètre.

Pourquoi devriez-vous choisir Smart Slider 3 comme Divi Slider ?

Si vous aimez les choses simples et basiques, vous ne voulez peut-être pas installer un autre plugin et apprendre comment cela fonctionne pour créer un slider. Divi a également des modules slider, alors pourquoi devriez-vous utiliser un plugin différent pour créer un slider ? Voyons quelques fonctionnalités qui peuvent vous aider à décider de choisir Smart Slider ou non.

Types de curseurs disponibles dans Smart Slider
Types de curseur dans Smart Slider. Rangée du haut : Simple (Gratuit) et Carrousel (Pro). Rangée du bas : Block (gratuit) et Showcase (Pro)

Raisons de choisir Smart Slider 3 gratuit

  • C'est gratuit. La version gratuite de Smart Slider est disponible sur le référentiel WordPress, vous n'avez pas besoin de payer pour cela.
  • La liberté de créer un slider. Vous pouvez créer une mise en page compliquée grâce aux lignes, aux colonnes et aux options de positionnement.
  • Contrôles personnalisables. Utilisez vos flèches, puces, vignettes, barre de texte comme vous l'aviez imaginé. Positionnez-les, modifiez leurs couleurs ou désactivez-les si vous ne souhaitez pas les afficher.
  • Modèles prêts à l'emploi. Dans Smart Slider 3, vous pouvez commencer avec des modèles prédéfinis, entièrement personnalisables. Modifiez simplement le contenu ou les images et vous avez un curseur prêt.
  • Modèles de curseurs intelligents gratuits
    Modèles de curseurs intelligents gratuits
  • Curseurs réactifs. Avec un minimum d'effort, vous pouvez créer un curseur qui s'affiche bien sur n'importe quel appareil.

Raisons de choisir Smart Slider 3 Pro

J'espère que vous avez maintenant une meilleure idée de la façon dont Smart Slider 3 peut améliorer votre capacité à ajouter des présentations de diaporamas à votre site Web Divi. Mais si vous n'êtes toujours pas sûr, voyons quelques fonctionnalités de Smart Slider 3 Pro !