skip to Main Content

Comment créer un diaporama avec Revolution Slider sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Nous pouvons maintenant entamer les choses sérieuses. La création de slider sur Revolution Slider peut être assez fastidieuse au départ. Vous perdrez vos repères, car vous souhaiterez savoir où se trouve tel ou tel élément.

Vous arriverez à bout de Revolution Slider en pratiquant avec habitude et en lisant aussi ce tutoriel.

Durant nos précédents tutoriels, nous avons découvert comment :

Et maintenant que nous avons configuré notre slider, nous allons créer les « slides » du « slider ».

Comment prendre en main l’éditeur de « Slides »

En principe, après avoir sauvegardé les configurations d’un slider, vous accédez à une nouvelle interface qui vous présente l’éditeur de « slides ».

editeur-de-slide-revolution-slider

Vous remarquerez tout en haut la même barre d’outils qui vous permet de revenir vers la liste des « sliders », vers les paramètres du slider et l’aperçu du slider entre autres.

revolution-slider-barre-doutil-edition-de-slide

Tout en bas, nous avons une nouvelle section qui nous permet de voir, les calques globaux, les différents « slides » et le bouton d’ajout d’un nouveau « slide ».

creation-de-slide-bouton-revolution-slider

En survolant le bouton d’un slide, vous remarquerez que de nouvelles options s’affichent. Ces options sont assez claires et faciles à comprendre (dupliquer, ajouter au template afin de le réutiliser plus tard et supprimer le slide).

options-creation-slide-revolution-slider

En survolant le bouton d’ajout de slide, vous remarquerez d’autres options qui vous permettent d’ajouter un slide vide, d’ajouter plusieurs slides, d’ajouter un slide depuis un template (modèle).

creation-de-slide-option-revolution-slider

Actuellement, vous êtes sur le slide 1, c’est la raison pour laquelle, ce dernier est mis en surbrillance sur la liste des slides. Si vous créez un nouveau slide, ce dernier sera mis en surbrillance à la place du premier slide.

deuxieme-slide-creation-dun-slider-revolution-slider

Revolution Slider à ce niveau est un véritable tableau de bord. Si je vous explique tout, vous ne comprendrez plus grand-chose, je vais donc éviter de parler des fonctionnalités qui pourront prêter à confusion et qui ne sont pas indispensables.

Lorsque vous avez sélectionnez un slide. Vous pouvez commencer l’édition dans la section qui suit. Cette section se compose de plusieurs onglets (7) qui vous donnent accès à diverses fonctionnalités.

Comment ajouter une image en arrière-plan à une scène

La première chose que vous souhaiterez faire en premier, c’est d’ajouter un arrière-plan à notre slide. Ici vous avez le choix entre : Une image d’arrière-plan (dans votre médiathèque), une URL externe vers une image, un fond transparent qui utilisera la couleur proposé par le thème, une couleur fixe, une vidéo Youtube, Viméo ou HTML5. Nous allons prendre un arrière-plan « image ».

image-arriere-plan-exemple

Voici un exemple d’image que vous pouvez utiliser chez vous.

image-arriere-plan-revolution-slider

Lorsque vous ajoutez une image, cela s’applique immédiatement dans la prévisualisation du slide et dans la « scène ».

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

scene-revolution-slider

Comment ajouter un élément dans une scène

Maintenant que nous avons une scène bien décorée, nous allons ajouter un élément. Chaque élément que vous ajoutez dans une scène est considéré comme un calque ou layer (en anglais). Cette fonctionnalité de calque vous aidera croyez moi.

Pour ajouter un élément à la scène, survolez « Add Layer ».

survoler-add-layer-revolution-slider

Vous remarquerez que vous pouvez ajouter plusieurs éléments différents notamment : les texte/HTML, les images, audio, video, un bouton, une forme, un objet et importer un élément.

Nous allons commencer par ajouter une image transparente de Snoopy le petit chiot.

funny-snoopy-png

Maintenant ajoutez cette image dans la scène, et vous devrez avoir quelque chose comme-ceci :

exemple-slider-revolution-slider

Vous remarquerez qu’aux quatre coins de l’image se trouvent des carrés. Ces carrés nous permettent de redimensionner les images, puisqu’en l’occurrence Snoopy occupe beaucoup d’espace. Le redimensionnement se fait par « Glissez-déposez ». Pour redimensionner en gardant les proportions, maintenez la touche « Maj » de votre clavier tout en redimensionnant.

nouvelle-representation-snoopy-revolution-slider

Maintenant Snoopy ressemble à ceci, c’est plus convenable. Vous pouvez également retourner une image en utilisant le voyant situé en haut à droite de chaque image comme ceci :

rotation-dimage-revolution-slider

Comment bien positionner des éléments avec la grille d’aide

La grille d’aide est un élément précieux qui aide à mieux positionner les éléments. Vous pourrez activer la grille d’aide tout en bas à gauche de la scène.

grille-daide-revolution-slider

Cette grille dispose de carreaux avec des tailles différentes, plus la taille est petite, plus vous serez précis dans le placement d’élément.

placement-des-images

Comment ajouter des animations

Il existe 3 types d’animations sur Revolution Slider : des animations d’entrée, des animations pendant (l’existence de l’élément dans la scène) et les animations de fin.

Pour ajouter une animation à un élément, vous devez d’abord le sélectionner en cliquant dessus (lorsqu’un élément est sélectionné il est encadré d’une ligne à pointillé avec des coins redimensionnables). Cliquez donc sur Snoopy, remontez plus haut sur la page et cliquez sur l’onglet « Animation ».

animation-revolution-slider

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Dans l’image précédente, j’ai encadré en bleu les animations d’entrée et en rouge les animations de sortie.

Pour changer une animation, cliquez sur la liste déroulante qui situé après l’icône du bonhomme qui cours.

icone-animation-revolution-slider

Vous avez alors une large variété d’animation à votre disposition. Je vous laisse le soin de choisir l’animation que vous souhaitez définir pour l’entrée d’un élément. Pour ma part, j’ai choisi « easeOutElastic », pour avoir ce résultat :

animation-entree-snoopy

Plus à gauche, vous pouvez déterminer la durée de l’animation et le mode d’animation que vous devez laisser sur « No split », car les autres options s’appliquent uniquement aux textes et non les images.

configuration-dune-animation-revolution-slider

Maintenant, je voudrai faire flotter Snoopy, pour cela, accédez à « Loop » et sur l’option déroulante, choisissez « Wave ». Maintenant Snoopy flotte :

snoppy-flottant

Comment configurer la visibilité des éléments

Mon Snoopy flotte, mais je ne souhaite pas qu’il soit visible sur mobile. Alors cliquez sur « Visibilité » et sur l’icône du Smartphone, assurez-vous qu’elle est désactivée :

visibilite-elements-revolution-slider

Comment régler le comportement des éléments

Pour optimiser le chargement du slider, vous pourrez vouloir différer le chargement des images. Ceci se fait dans l’onglet « Comportement », avec l’option « Lazy Loading ». Vous pouvez même aussi forcer le caractère responsive des éléments.

comportement-element-revolution-slider

Comment créer des déclencheurs personnalisés sur un élément

Les actions vous permettent d’associer des déclencheurs à des actions spécifiques. Pour ajouter un déclencheur, cliquez sur l’onglet « Actions » ensuite sur le bouton « + ».

ajouter-un-declencheur

Il existe 3 types de déclencheurs:

  • Le clic, qui est le fait de cliquer avec la souris
  • L’entrée de la souris au-dessus de l’élément
  • La sortie de la souris au-dessus de l’élément

La liste des actions est assez longue. Vous pourrez par exemple rediriger un utilisateur qui clique sur Snoopy vers une autre page en choisissant l’action « Simple Lien », ce qui fera apparaître de nouvelles options.

gestion-des-declencheurs-revolution-slider

Comment utiliser le « TimeLine » de Revolution Slider

Revolution Slider propose tout en bas une interface de gestion de temps. Cette interface vous permet de voir où débute l’animation d’un élément et où elle se termine.

debut-et-fin-dune-animation-sur-revolution-slider

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Sur l’image précédente, vous remarquerez deux flèches rouges. La première à gauche indique le début de l’animation d’entrée d’un élément et la seconde indique la fin de l’animation d’entrée. La couleur foncée rouge indique la durée de vie de l’élément dans la scène. Vous retrouverez une fin également similaire à l’autre extrémité d’une durée (animation d’entrée, durée de vie et animation de fin).

Avec le « timeline », vous pourrez contrôler quel élément s’affiche avant et quel élément disparaît en premier. C’est un outil très pratique que vous devez maîtriser pour faire de bonne animation.

Le timeline dispose d’un lecteur que vous pouvez activer pour prévisualiser le « slide ».

animation-timeline-revolution-slider

Jusque-là, je vous ai donné des bases pour créer un slide. Maintenant, sauvegardons notre slider et lancez la prévisualisation.

sauvegarde-et-previsulisation

C’est tout pour ce tutoriel, dans un prochain, nous allons parler de l’affichage d’un slider sur un article et de quelques opérations avancées.

Avez-vous des questions ? Laissez un commentaire, j’y répondrai.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
5 Partages
Partagez2
Tweetez
Enregistrer3