skip to Main Content

Comment créer un diaporama avec Slider Revolution sur WordPress

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

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é ]

Nous pouvons maintenant entamer les choses sérieuses. La création de slider sur Slider Revolution 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 Slider Revolution 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 ou diapositives», vers les paramètres du slider et l’aperçu du slider entre autres.

Découvrez aussi nos 10 plugins WordPress qui vous permettent d’évaluer les articles de votre Blog

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

Slider Revolution à 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.

Lire notre article sur les 6 plugins WordPress de compression d’images pour votre Blog

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 d’arrière-plan dans 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 (de votre médiathèque), une URL externe qui pointe vers une image, un fond transparent qui utilisera la couleur proposé par le thème WordPress, une couleur fixe, une vidéo Youtube, Viméo ou HTML5. Nous allons choisir un arrière-plan « image ».

image-arriere-plan-exemple

Vous pourrez trouver de nombreuses images gratuites sur le Web. Faites juste une recherche sur Google. 

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

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 ajouterez 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

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 ]

Ensuite, 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 de petits 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.

Consultez aussi nos 10 plugins WordPress qui feront de vous un meilleur Blogueur

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 Slider Revolution : des animations d’entrée, des animations pendant (l’existence de l’élément dans la scène) et les animations de fin.

Consultez aussi nos 6 plugins WordPress de compression d’images pour votre Blog

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

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

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

Voici pour vous nos 4 plugins WordPress pour booster le pieds de page de votre blog

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

Lire aussi Comment masquer les titres des articles et pages WordPress

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

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]

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.

Découvrez aussi nos 10 plugins WordPress premium de Booking et Réservation

gestion-des-declencheurs-revolution-slider

Comment utiliser la « TimeLine » de Slider Revolution

Slider Revolution 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

Sur l’image précédente, vous remarquerez deux flèches bleue. 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.

Lire aussi Comment ajouter un compte à rebours sur votre blog WordPress

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 la « 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.

La timeline aussi 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, sauvegardez votre 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.

Découvrez aussi quelques thèmes et plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Disk Audio

Disk Audio est un autre plugin WordPress qui vous aidera à afficher un lecteur audio directement sur votre site Web en appuyant juste sur un bouton. La mise en page du lecteur audio est complètement responsive, de sorte que les utilisateurs mobiles pourront profiter de ses fonctionnalités sans aucun problème.

Disk audio player plugins wordpress premium ajouter lecteur audio

En plus, il propose de nombreuses options de personnalisation dont on citera entre autres les jeux de couleurs, les apparences, les images d’arrière-plan et l’opacité. Il possède plusieurs options pour le contrôler par clavier et il vous permet aussi d’afficher votre playlist avec une barre de défilement réglable.

Lire aussi : 10 plugins WordPress pour améliorer la recherche sur votre blog

Vous pourrez également intégrer des liens de téléchargement sur le lecteur de musique pour montrer aux utilisateurs où ils pourront aller acheter la piste en cours de lecture sur votre site Web. 

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

2. Event Booking Pro

Il s’agit d’un autre plugin WordPress 100% responsive, facile à personnaliser et dédié à la gestion des réservations sur tout site Web, qui propose ses services dans les domaines de l’événementiel.

Event booking pro

Ses fonctionnalités principales sont entre autres : la personnalisation du texte, de la couleur, des bordures et autres, le support de PayPal, la gestion des codes promos et coupons, le support de Google Maps, le support de la gestion d’e-mails,  le support des shortcodes, le panneau de configuration intuitif, la création facile des événements, le contrôle total sur l’apparence, etc…

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

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. [Recommandé]

3. Social Share & Locker Pro

L’extension Social Share & Locker Pro a été conçue pour aider votre site web à être plus visible sur les réseaux sociaux. En seulement quelques clics, vous pourrez soit définir la position de vos icônes sociales, soit verrouiller votre contenu en exigeant un partage sur l’un des réseaux sociaux proposés par vous.

Social share locker pro wordpress plugin

Vous disposez de 10 thèmes prédéfinis et cela devrait couvrir les souhaits les plus courants. Tous ses thèmes sont Retina et fonctionnent à merveille. 

30 choses à faire sur les articles de votre blog après leur publication Découvrez-les en consultant cet article.

En outre, avec Social Share & Locker Pro, vous pourrez afficher le nom complet des réseaux sociaux ou uniquement l’icône. Cela dépendra de votre design, de l’espace disponible, ou de vos souhaits.

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

Voila ! C’est tout pour ce guide. Nous espérons que ce tutoriel vous a donné les bases de la création d’un diaporama avec Slider Revolution sur un blog ou site web WordPress. Si vous avez des questions, suggestions ou des remarques, laissez-les dans notre section commentaires.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés

… 

Cet article comporte 0 commentaires

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
4 Partages
Partagez1
Tweetez
Enregistrer3