Vous connaissez probablement Slider Revolution, c’est l’un des plugins premium WordPress les plus téléchargés sur CodeCanyon. C’est également le plus recommandé aux personnes qui veulent ajouter un slider (diaporama) sur leur site web ou blog WordPress.

C’est un plugin disponible sur CodeCanyon.com. Rappelez-vous, nous vous avons présenté plutôt comment télécharger un plugin sur cette plateforme.

La première chose est donc de le télécharger, de l’installer et de l’activer.

Si vous n’avez jamais installé ce dernier, découvrez Comment Installer Revolution Slider sur WordPress.Vous pouvez aussi découvrir cet autre tutoriel détaillé et assez complet.

Recommandé.

Comment configurer Slider Revolution

Slider Revolution offre des réglages de base. Vous devez premièrement accéder à la page d’accueil du plugin, à travers le menu « Slider Revolution » disponible sur le menu latéral gauche de votre tableau de bord, après l’installation et l’activation du plugin.

access revolution slider.jpg

Ceci vous redirigera vers le tableau de bord du plugin Slider Revolution. Ensuite, nous allons configurer le plugin. Vous devez ensuite cliquer sur le lien « Paramètres Généraux » situé dans le sous-menu de Slider Revolution.

parametres généraux resolution slider.jpg

En cliquant dessus, vous arriverez sur une nouvelle page. Cette page contient quelques options, notamment :

  • Les rôles qui y ont accès « view plugin permission »
  • Le chargement des ressources du plugin partout « on » ou uniquement sur les pages qui l’utilisent. Charger les ressources sur toutes vos pages peut ralentir votre site web.
  • Vous pouvez en outre intégrer les ressources du plugin sur certaines pages en ajoutant l’identifiant de chaque page dans le champ « Pages to includes RevSlider libraries ».
  • Pour un meilleur rendu, vous pouvez choisir de charger les ressources du plugin après que la page se soit affichée avec l’option « Inset Javascript into footer ».
  • Vous pouvez activer les options d’export des données du slider afin d’être utilisées sur plusieurs autres sites web.
  • La dernière option concerne les rapports d’activités du slider.

reglage revolution slider paramètres generaux.jpg

Les réglages par défaut sont acceptables. Mais vous pouvez personnaliser ces derniers comme vous le souhaitez. N’oubliez pas de cliquer sur « Enregistrer les paramètres » pour enregistrer vos réglages.

Revenez sur « Slider Revolution », car désormais nous allons créer un nouveau slider.

configurer le plugin WordPress Slider Revolution

Comment créer un slider avec le plugin Revolution Slider

Revolution Slider est très flexible et s’adapte à peu près à tout type de slider, des plus simples aux plus complexes avec des calques (c’est une fonctionnalité très intéressante).

Sur la nouvelle page, vous pouvez remarquer qu’il y a deux principales colonnes. Cette page doit être considérée comme page des réglages du nouveau slider. Il n’est pas possible depuis cet emplacement d’ajouter des images et des textes. Cependant, nous allons modifier quelques réglages du slider.

Découvrez nos 10 meilleurs plugins WordPress premium pour créer des sliders sur votre blog

Sur la section « Param Slider »

Nous avons plusieurs champs requis qu’il faut remplir, notamment :

  • Le titre
  • L’alias qui sera utilisé sur le shortcode. Vous devez nécessairement fournir un alias.

titre shortcode revolution slider.jpg

Il existe plusieurs types de slider réalisables avec Slider Revolution :

  • Vous pouvez choisir d’afficher les articles en tant que slide, notamment en définissant une limite des résultats, en modifiant l’ordre d’affichage, en choisissant un template, etc…
  • Choisir des articles en particulier, en spécifiant leurs identifiants
  • Choisir le mode galerie pour le slider, ce qui nous permettra de créer des slides plus complexes et plus beaux.

selection du type du slider revolution slider.jpg

L’option qui suit permet de modifier la mise en page du slider : fixe, personnalisée, auto responsive, plein écran. A ces options, s’ajoutent celles des tailles de la grille et des dimensions de la mise en page.

configuration de la taille revolution slider.jpg

Il s’agit là des options de la première colonne. La deuxième colonne offre plusieurs autres options. Entre autres nous avons : La durée de chaque slide, qui par défaut est de 9 secondes.

L’affichage aléatoire (shuffle mode)

parametres généraux slider revolution slider.jpg

La section Layout & Visual

Cette section regroupe les options sur la configuration de l’ombre, de l’arrière-plan dans le sous-onglet « Apparence ». Vous y trouverez également un onglet « Spinner », qui permet de modifier l’animation durant le chargement du slider, l’onglet « Mobile » qui vous permet de déterminer comment le slider s’affiche sur mobile et l’onglet « Position » qui permet de configurer l'emplacement du slider par rapport au contenu.

layout & visual revolution slider.jpg

La section Navigation

L’onglet navigation est subdivisé en plusieurs sous onglets qui vous permettent de configurer divers aspects de la navigation du slider. Vous aurez par exemple l’onglet « flèches » qui permet de choisir le type de bouton de navigation entre les sliders (vous pouvez activer ou non les flèches). Avec l’onglet « Puce », vous avez également la possibilité de configurer les puces de navigation, avec l’onglet « Onglets » qui ajoutera un effet onglet à slider ainsi de suite.

onglet navigation revolution slider.jpg

Configurer les conditions d’animation  « Paramètres Généraux »

Offre des options sur les slides, par exemple, vous pouvez définir que le slider s’arrêtera automatiquement après un slide en particulier « Stop After Loops » ou choisir la position de la barre d’évolution du slide (la barre d’évolution permet de voir la durée que met un slide avant qu’un autre ne s’affiche).

configuration animation slider revolution slider.jpg

Il s’agit-là des premières sections du plugin et celles que vous utiliserez le plus. Vous pouvez utiliser plus d’options pour ajouter plus de fonctionnalités au slider.

Découvrez Comment créer une page Web Pro avec WPBakery et intégrez à cette dernière un magnifique Slider.

Une fois que c’est fait, enregistrez le slider plus bas en utilisant le bouton « Enregistrer les paramètres ».

enregister le slider revolution sliders.jpg

Après avoir cliqué sur « Enregistrer les paramètres », vous serez redirigés vers l’interface de création du slider. Qui créera un slider par défaut vide.

interface de création du slider.jpg

Comment ajouter un nouveau « slide » à un « slider »

Si vous ne vous rappelez pas de quoi il s’agit, dans un précédent article, j’ai défini un ensemble de termes techniques WordPress, dont « Slider » et « Slides ».

Tout avant l’interface de modification des options du slider, vous verrez une section ayant par défaut 3 zones où vous trouverez le dernier avec le label « Ajouter Slide« . En plaçant la souris sur ce dernier, il affichera des options supplémentaires. Choisissez Ajouter Slide Vide.

ajouter un slider à un slider.jpg

Remarque : Tous nouveaux slides que vous créerez s’ajouteront à cette barre. Chaque Slide crée vous proposera des options de gestion supplémentaires : Supprimer, Dupliquer, Ajouter au template.

L’interface d’un slider se compose de :

  • Des options avancées du slide
  • De l’interface de conception du slider (interface de création)

Interface des options avancées

Ces options sont organisées en plusieurs onglets divers. La section arrière-plan principal vous permet de configurer différents aspects qui touchent l’arrière-plan du slide. Vous pourrez par exemple choisir d’utiliser une vidéo YouTube comme arrière-plan.

arrière-plan video revolution slider.jpg

L’onglet Paramètres Généraux vous permet de configurer des éléments comme la durée du slide, des différents événements qui entraîneront la pause du slide (l’arrêt de l’animation).

paramètres généraux revolution slider.jpg

L’onglet vignette vous permet de choisir un aperçu pour le slide créé. Ceci sera utilisé si votre slider propose des aperçus de slides. 

creation vignette revolution slider.jpg

L’onglet slide animation vous permet de définir quelle est l’animation d’entrée et de sortie du slide. Vous avez un large choix parmi les options disponibles.

choisir animation slide revolution slider.jpg

L’onglet link & seo vous permet de modifier quelques attributs HTML du slide. Vous n’aurez, en principe, pas besoin de souvent utiliser cet onglet.

Interface de conception Revolution Slider

L’interface de conception est cet emplacement de mise en scène où vous ferez votre composition. Il se compose d’une surface composée de carrée blanc et gris, qui constituent le super de travail (où seront déposé les différents éléments).

interface conception revolution slider.jpg

Ce qu’il faut savoir sur les calques (Layer)

Chaque objet déposé sur l’interface de composition constitue un calque. Ces calques peuvent se superposer les uns sur les autres, comme vous pourrez le faire avec des croquis. Le calque peut donc consister en une image, un code html, une vidéo, une forme, un objet et bien plus. Vous pouvez ajouter un calque survolant le bouton « Add Layer » qui vous propose plus d’options.

parcourir un calque revolution slider.jpg

Si l’on clique sur « Text/html », cela ajoutera une zone de texte sur l’interface de conception que vous pourrez personnaliser (ajouter du texte, modifier la police ou déplacer).

ajouter du texte revolution slider.gif

Chaque calque ajouté peut proposer des options différentes. Généralement pour accéder aux options d’un calque, il suffit de double-cliquer dessus. Nous allons maintenant ajouter une image.

ajouter une image revolution slider.gif

Chaque calque dispose de ses propres options. Ces options sont la barre située juste au dessus de l’interface de conception.

option pour calque revolution slider.jpg

Il s’agit en l’occurrence d’onglets qui proposent des options avancées. Par exemple, si nous souhaitons modifier l’animation du calque, nous devons aller sur l’onglet animation et choisir une animation d’entrée et de sortie comme suit.

choisir une animation pour un calque.gif

Chaque onglet propose des options qui lui sont propres. En prenant quelques minutes, vous pourrez comprendre le fonctionnement de la plupart des onglets.

C’est à peu près tout ce qu’il faut savoir sur la configuration du plugin WordPress Slider Revolution pour commencer. Nous reviendrons ultérieurement pour vous montrer des techniques plus avancées.

Mais avant de vous laisser, nous tenons à vous proposer 2 autres alternatives premium conçues pour vous aider à créer des sliders sur votre site web.

1. RoyalSlider

Le slider le plus téléchargé sur CodeCanyon, Royal Slider est doté de fonctionnalités irrésistibles. Utilisé par des entreprises aussi diverses que Coca-Cola, Ralph Lauren et Land Rover, ce plugin fait à peu près tout ce que vous pourriez attendre d’un slider. La fonctionnalité la plus attrayante est le support natif du plein écran.

Royalslider touch content slider for wordpress

Parfait pour afficher la photographie à haute résolution. Ce plugin va certainement impressionner vos visiteurs avec ses fonctionnalités professionnelles. Comme fonctionnalités on aura entre autres : la possibilité de créer plusieurs sliders avec des styles différents par page, le support de la navigation tactile, une conception responsive, le A miniature verticale ou horizontale, puces ou onglets pour la navigation, et plus.

Télécharger | Démo | Hébergement Web

2. . WP Slick Slider and Image Carousel Pro

Si vous êtes un adepte inconditionnel de la suite Visual Composer, l’utilisation du plugin WP Slick Slider est une option que vous devrez considérer. Avec près de 100 modèles prédéfinis, vous trouverez certainement ce que vous cherchez sans avoir à coder quoi que ce soit.Wp slick slider and image carousel pro

C’est une option à prendre vraiment au sérieux, en particulier pour les utilisateurs de Visual Composer – WPBakery -.

Ses fonctionnalités sont entre autres : une mise en page entièrement responsive avec support du glisser-déposer, un constructeur de shortcodes, le support du RTL et du multilingue, de magnifiques design, et bien plus.

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Nous espérons que cet article vous a aidé à configurer le plugin WordPress premium Slider Revolution. Si vous avez des questions, n’hésitez pas à nous les laisser dans la section commentaires. Et si vous avez aimé cet article, partagez-le sur vos différents réseaux sociaux