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.
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.
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.
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.
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.
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.
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.
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)
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.
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.
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).
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 ».
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.
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.
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.
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).
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.
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.
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).
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.
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).
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.
Chaque calque dispose de ses propres options. Ces options sont la barre située juste au dessus de l’interface de conception.
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.
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.
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.
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.
- Comment modifier l’image de profil (avatar) sur WordPress
- Les GIF, Emojis ou Memes sont-ils une bonne idée pour les sites WordPress ?
- 23 outils indispensables pour réussir dans le blogging
- 10 plugins WordPress pour protéger efficacement votre blog
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.