Comment créer un slider avec le plugin Revolution 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.
Sur la section « Main Slider Settings »
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 de 3 types de slider réalisable avec Revolution Slider :
- 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 options. Entre autres nous avons : La durée de chaque slide, par défaut 9 secondes.
L’affichage aléatoire (shuffle mode)
La section « loop and progress »
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).
La section « Position »
Cette section offre des options sur les marges (basses, hautes, droites, gauches) et la position du slider (à gauche, au centre ou à droite).
La section « Appearance »
Cette section vous donne la possibilité de modifier l’apparence du slider, entre autres : l’ombre sous le slider, la marge interne, la couleur de ce dernier et ses arrières-plans
La section « Navigation »
Cette section offre plusieurs options sur les flèches de navigation et les actions durant le survol du slider.
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.
Une fois que c’est fait, enregistrez le slider plus bas en utilisant le bouton « Create Slider ».
Remarque : certaines options ne sont disponibles qu’après la création d’un diaporama. C’est le cas des sections « Import/Export », « API Functions », « CSS/Javascript ».
Après avoir cliqué sur « Create Slider », vous serez redirigé vers la page qui liste l’ensemble des sliders crées. Cliquez sur le nom du slider que vous venez de créer.
Comment ajouter un « 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 ».
Défilez vers le bas de la page puis cliquez sur « Edit Slides ».
Remarque : depuis ce panel de boutons, vous pouvez consulter un aperçu du slider « Preview », supprimer le slider « Delete Slider », Enregistrer les réglages « Save Settings » ou revenir vers la liste des sliders en cliquant sur « Close ».
Sur la nouvelle page d’édition des « slides », vous pouvez remarquer qu’elle est vide. C’est assez normal, nous venons tout juste de créer ce slider. Pour ajouter un nouveau slide, il faut cliquer sur le bouton « New Slide ».
En cliquant dessus, la fenêtre de la médiathèque s’ouvrira. Et vous pourrez choisir une image et l’ajouter en cliquant sur « Insert ».
Remarque : cette image sera en même temps comme l’arrière-plan du slide, et vous pourrez y ajouter des animations, du texte et bien plus.
Déjà en insérant une image, elle s’ajoutera à la liste des « slides » du « slider », et vous pourrez la supprimer « delete », la dupliquer « duplicate », la copier ou la déplacer« copy/move » et enfin, la modifier « Edit Slide ».
Remarque : la différence entre un slide normal et un slider transparent « New Transparent Slide », est que ce dernier n’utilise pas une image comme arrière-plan.
Cliquez sur « Edit Slide », je vous montrerai comment ajouter des calques au slide.
La nouvelle page est constituée de plusieurs onglets. Les onglets « Slide » correspondent aux différents slides crées. Pour en ajouter un nouveau, vous devez cliquer sur l’onglet « Add Slide ».
Remarque : les onglets peuvent être réordonnés depuis cet emplacement.
La section « General Settings »
Vous permet de personnaliser le slide notamment :
- Son titre
- Son statut (publié ou non)
- La durée de la transition « Transition Duration »
- L’animation à l’ouverture
- La durée du slide avant d’être remplacé par un autre « Delay ».
La section « Slider Main Image/Background »
Vous permet de modifier l’image en arrière-plan d’un slide.
La section « Slide »
C’est sur cette section que vous pourrez définir des calques ainsi que leurs animations. Vous pourrez ajouter un calque vide « Add Layer », sous forme d’image « Add Layer : Image » ou un calque vidéo « Add Layer : Video ».
Pour chaque calque, vous avez un gestionnaire de timing situé plus bas. Ce dernier vous permet de déterminer quand est-ce qu’un calque commence à s’afficher. Vous pouvez configurer le temps en modifiant les valeurs « start » et « end », exprimé ici en tierces.
Mais aussi, vous pouvez personnaliser votre calque en y ajoutant des animations disponibles dans la section « Layer Animation ». Assurez-vous d’avoir au préalable sélectionné un calque, sans quoi, toutes ces options seront désactivées.
Une fois que vous avez terminé, cliquez sur « Update Slide » pour enregistrer vos modifications. Vous pouvez effectuer cette manœuvre sur tous les différents slides que vous avez créé. Revenez sur la page qui liste les sliders et copiez leur shortcode. Utilisez ce shortcode sur une page/article question de voir comme le slider s’affiche avec votre thème.
