Base de connaissance
Support / Aide - iZZi > Support en ligne - iZZi > Base de connaissance

Recherche Aide :


Comment créer un slider avec le plugin Revolution Slider

Solution

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.

creer-un-slider-revolution-slider

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.

reglages-type-slider-revolution-slider

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.

mise-en-page-responsive-revolution-slider

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)

general-settings

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).

loop-and-progress-section

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).

section-position-revolution-slider

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

apparence-slider-revolution-slider

La section « Navigation »

Cette section offre plusieurs options sur les flèches de navigation et les actions durant le survol du slider.

navigation-revolution-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 ».

creer-un-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 ».

options-additionnelles

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.

selection-slide-a-modifier-revolution-slider

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 ».

modifications-des-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 ».

creation-dun-nouveau-slide-revolution-slider

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 ».

liste-des-slides

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.

gestion-des-slides-déplacements

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 ».

general-settings-pour-les-slides

La section « Slider Main Image/Background »

Vous permet de modifier l’image en arrière-plan d’un slide.

section-slider-main-image

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 ».

ajout-des-objets-au-slide

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.

gestionnaire-de-timing-revolution-slider

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.

demo-revolution-slider

 
Est-ce que cet article vous a été utile ? oui / non
Articles en rapport 5 astuces pour supprimer un avis négatif sur Google
Détails de l'Article
Article ID: 34
Catégorie: Revolution Slider
Date: 19-09-2017 14:16:35
Affichage: 95
Evaluer (Voter): Article pas encore évalué (0)

 
« Retour