Revolution Slider : Créer des Sliders Professionnels et Responsives

Vous n’êtes pas sans savoir qu’aujourd’hui les sliders sont très populaires, chacun a cette envie irrésistible d’embellir sa page d’accueil avec un joli slider qui fait défiler des belles images. Si ça n’était qu’à moi, j’éviterai les sliders quand c’est possible. Tout le monde n’a pas un super PC à 8Go de RAM, une carte graphique dernière génération et surtout une connexion ADSL haut débit. D’autant plus qu’un bon nombre de plugins pour slider vous donnent un rendu très médiocre.

En parlant de plugins pour slider médiocres, c’est ici que se situe l’intérêt du plugin que je vous présente aujourd’hui. J’ai déjà eu affaire à la mise en place de slider dans d’autres sites. Et comme premier réflexe quand il s’agit de plugin, c’est toujours d’en trouver un qui soit gratuit. En général il existe toujours un bon petit plugin gratuit qui fasse l’affaire et je vous en fais part de temps en temps en rédigeant un petit tutoriel dessus. Or, malheureusement pour les sliders je n’ai pas trouvé quelque chose qui tienne vraiment debout. Ils sont vraiment très limités.

C’est vers les plugins premium qu’il a fallu se tourner pour trouver quelque chose de relativement bien complète. Arrive donc ce fameux plugin, Revolution Slider Plugin, qui propose un grand nombre de fonctionnalités utiles et qui permet de créer des sliders très poussés en terme de personnalisation.

Bon, je n’en dirai pas plus quant à sa popularité, vous pourrez voir sa cote de popularité auprès de la communauté WordPress (plus de 26 000 ventes à ce jour). Je vous propose maintenant de passer au cœur du sujet pour voir comment mettre en place des beaux sliders qui valent la peine d’être affichées sur votre site.

Comment mettre en place un slider avec le plugin Revolution Slider

La première chose, vous l’aurez compris, c’est de vous procurer une copie du plugin Revolution Slider. Après l’installation et l’activation, un nouvel élément « Revolution Slider » viendra s’ajouter au menu du tableau de bord. En cliquant dessus vous arrivez sur l’interface admin du plugin à partir de laquelle vous pourrez créer et modifier vos sliders. Il n’existe pas de sous-menu.

Revolution Slider Plugin : interface admin

Comme vous pouvez le remarquer sur l’image, vous avez le choix entre créer un nouveau slider et en importer un. Pour la seconde option, vous pouvez importer :

  • vos propres sliders que vous avez créés ailleurs sur d’autres sites ou autres,
  • un slider démo qui vous a été offert avec votre thème premium
  • des sliders démos à partir du site démo du plugin. En arrivant sur ce site, vous pourrez voir déjà un slider démo créé par ce plugin pour vous donner une idée de ce que vous pouvez faire avec cette extension. Ensuite, pour télécharger les démo, cliquez sur « Example files » juste au-dessus du slider, et là vous aurez un grand nombre de démos provenant de différents sites. Cliquez sur celle qui vous plaît pour la télécharger et/ou la voir. Un fichier .zip se téléchargera donc automatiquement.

Créer un slider à partir de zéro

Si vous préférez créer votre propre slider, cliquez sur « Create New Slider » et vous arriverez sur une page avec trop plein d’options réglables.

Créer un nouveau slider avec le plugin Revolution Slider

Dans les deux-tiers de gauche de l’écran vous avez les réglages de base du slider avec en premier lieu le nom du slider et l’alias qui permettra de générer le shortcode qui pourra être inséré dans les pages et articles.

Le champs « Source Type » est important puisque vous aurez à indiquer si vous voulez afficher un slider avec une galerie d’images (3ème option) qui ne pointent pas vers des articles et des pages. Ce sera par exemple des images que vous aurez uploadé à partir de votre PC et vous aurez embellies et perfectionnées avec du texte et des effets à partir de l’interface du plugin (mais vous verrez par la suite que vous pourrez ajouter des liens aux slides pour pointer vers des articles et pages). Ou alors vous pourrez avoir envie d’afficher vos articles provenant d’une ou plusieurs catégories (1ère option). Dans ce cas, la liste des catégories s’affichera et vous pourrez choisir de trier l’ordre d’affichage selon différents choix et afficher une description pour chaque article en limitant le nombre de mots. Enfin, vous pouvez n’afficher que certains articles (2ème option) dont vous rentrerez les ID.

Selon le type de source sélectionné, le reste des réglages changera. Si vous choisissez la première option par exemple, le dernier tiers de l’écran à droite avec tous les réglages en plus n’apparaîtront pas.

En sélectionnant l’option « Gallery », vous aurez la possibilité de choisir la mise en page du slider (auto responsive, plein écran, personnalisé).

Enfin, dans les réglages de droite vous avez des options avancées et très intéressantes qui vous permettront de personnaliser votre slider avec des effets, des styles, des positionnements et des mises en page que vous pourrez adapter à vos besoins.

Une fois les réglages effectués, il faut cliquer sur « Create Slider » et le nouveau slider viendra s’ajouter à la listes des slides dans la première interface présentée au début :

Slider créé

Ajouter des slides

Maintenant que le support (slider) est créé, il faut ajouter des slides en cliquant sur « Edit Slides ». Puis « New Slide » dans la nouvelle page pour sélectionner une image déjà existante dans votre bibliothèque d’images ou alors en télécharger une nouvelle à partir de votre pc. Vous avez aussi la possibilité d’ajouter un slide transparent si vous ne voulez pas avoir d’arrière-plan pour votre slide. Voilà deux slides dont un qui est transparent :

slides

Modifier les réglages d’un slide

Cliquez sur « Edit Slide » afin de régler ses options.

Modifier slide dans le plugin Revolution Slider

Dans la première section du haut, vous avez les réglages généraux avec une liste déroulante des « Transitions » avec une cinquantaine de choix possibles qui va de l’effet fade, au slide, au parallax, au zoom, au 3D, …  Vous pouvez ajouter un lien sur le slide pour pointer vers un article ou une page de votre site.

Dans la section du bas, dans les « Layer », vous pouvez ajouter (en plus de l’image d’arrière-plan existante) d’autres images, une vidéo, du texte. De plus, pour chaque layer vous pouvez personnaliser les paramètres et mettre en place une animation spécifique et plein d’autres petits réglages pour gérer l’apparition, le positionnement et le style du layer. Vous pourrez voir un aperçu du slide en cliquant sur bouton « Preview Slide »

Avec un peu d’imagination, vous aurez des beaux sliders qui ressemblent à ceux que l’on peut voir dans la démo.

J’ai été très rapide ici mais vous vous rendez bien compte qu’avec cette simple page d’édition de slide, on a un nombre infini de possibilités de personnalisation de son slide. Pour comprendre chacune des options je vous encourage à lire la documentation qui se trouve derrière le bouton bleu « Help » en haut à droite de la page et qui est aussi accessible via ce lien. C’est de l’anglais mais ça n’a rien de compliqué et c’est bien illustré par des captures d’écran.

Insérer le slider sur le site

Selon l’endroit où vous souhaitez insérer le slider sur le slider voici comment les ajouter :

  • Dans vos articles et pages : insérer le shortcode dans l’éditeur de texte de l’article/page
  • Dans votre thème WordPress : <?php putRevSlider( « alias » ) ?>
  • Uniquement dans la page d’accueil : <?php putRevSlider(« alias », »homepage ») ?>
  • Dans certaines pages : <?php putRevSlider(« alias », »2,10″) ?>
  • Dans un widget : dans le tableau de bord Apparence > Widget, glisser et déposer le widget « Revolution Slider » dans le sidebar ou zone widget que vous voulez.

 Conclusion

Après avoir testé ce plugin, j’étais encore très loin d’avoir fait usage de toutes les options  proposées. En général, ça ne devrait pas être si compliqué de créer son slider à partir de zéro. Mais si vous vous sentez perdus, je vous conseille de commencer par les sliders provenant des fichiers démo et de les personnaliser pour votre site.

Enfin, un certain nombre de thèmes premium populaires proposent ce plugin gratuitement avec l’achat du thème. Ce qui fait de lui l’un des plugins slider les plus populaires et les plus vendus.

En parlant de premium, ce plugin ne vous coûtera pas un bras avec un prix accessible de 19$ (~14€).

Télécharger Revolution Slider

Bon j’arrête la pub là et reviens vers vous. Vous pensez quoi de ce plugin si vous l’avez déjà testé ? Sinon, qu’est-ce que vous utilisez comme autre alternative ?

En attendant vos réponses et vos remarques, je vous dis à la prochaine!

Anouar

Cet article vous a plu?

Abonnez-vous alors à notre newsletter pour recevoir des trucs utiles pour votre site WordPress.

90 Commentaires

  1. Chacha 25 septembre 2014
    • Anouar Fourti 26 septembre 2014
      • Chacha 28 septembre 2014
  2. vandemeulebroukce 27 novembre 2014
  3. EmilieC 5 janvier 2015
  4. kerichen 7 janvier 2015
    • Anouar Fourti 7 janvier 2015
  5. Samuel Cortès 19 janvier 2015
    • Anouar Fourti 19 janvier 2015
  6. Nabil 23 février 2015
    • Anouar Fourti 23 février 2015
  7. alex 25 février 2015
    • Anouar Fourti 25 février 2015
  8. sandra 26 février 2015
    • Anouar Fourti 26 février 2015
      • sandra 26 février 2015
  9. Jacques 8 mars 2015
  10. TIET 14 mars 2015
  11. TIET 14 mars 2015
    • Anouar Fourti 14 mars 2015
  12. Bruno Tritsch 17 mars 2015
    • Anouar Fourti 17 mars 2015
  13. Bruno Tritsch 18 mars 2015
  14. Edouard 25 mars 2015
    • Anouar Fourti 27 mars 2015
  15. Yenkel Amsellem 20 avril 2015
    • Anouar Fourti 21 avril 2015
      • Yenkel Amsellem 21 avril 2015
  16. richard 29 avril 2015
    • Anouar Fourti 30 avril 2015
  17. Chantal P 24 juillet 2015
  18. kadikadoo 22 octobre 2015
    • Anouar Fourti 2 novembre 2015
  19. Thibaut Edenwald 26 octobre 2015
  20. momo-fr 16 novembre 2015
  21. isabelle 14 janvier 2016
  22. bastien 1 février 2016
  23. Florent 9 février 2016
  24. Paturel 21 février 2016
  25. Paturel 21 février 2016
  26. Lhenry 21 mars 2016
    • Anouar Fourti 21 mars 2016
      • Lhenry 21 mars 2016
        • Anouar Fourti 21 mars 2016
          • Lhenry 21 mars 2016
          • Anouar Fourti 21 mars 2016
  27. Lhenry 22 mars 2016
    • Anouar Fourti 22 mars 2016
  28. Bernard 24 mars 2016
  29. lhenry 25 mars 2016
  30. Emmanuel 12 avril 2016
    • Anouar Fourti 24 avril 2016
  31. balse 24 avril 2016
    • Anouar Fourti 24 avril 2016
  32. balse 24 avril 2016
  33. Vanessa 26 avril 2016
  34. finssao 18 mai 2016
    • finssao 18 mai 2016
      • Anouar Fourti 18 mai 2016
        • finssao 18 mai 2016
  35. finssao 18 mai 2016
  36. finssao 18 mai 2016
    • Anouar Fourti 18 mai 2016
      • finssao 18 mai 2016
        • Anouar Fourti 18 mai 2016
  37. finssao 18 mai 2016
  38. Mohamed Sati 19 mai 2016
  39. Chipier 22 mai 2016
  40. Holou Baloo 21 juin 2016
  41. gardphil 24 juin 2016
    • Anouar Fourti 24 juin 2016
  42. E-liquide 18 septembre 2016
  43. Fadwa 23 septembre 2016
  44. cormont 26 octobre 2016
    • Anouar Fourti 27 octobre 2016
  45. K 29 décembre 2016
  46. Katy 4 janvier 2017
  47. Burkett Henrichon 11 mai 2017

Laisser un Commentaire

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

Créer et Gérer sa Newsletter avec Mailchimp & l’Intégrer à WordPressSuivre le tutoriel
+ +

Recevez du contenu
WordPress exclusif

Abonnez-vous à notre newsletter et recevez des trucs utiles pour mieux utiliser votre site WordPress!