Créer un slider ou diaporama sur WordPress grâce à Slider Révolution

Sur un site web on peut ajouter une multitude de fonctionnalités. Aujourd’hui nous allons parler des sliders, en effet il se peut que vous ayez envie de créer d’en créer un sur votre site WordPress ou pour un client. Pour se faire je vous propose un plugin complet sur le sujet, il s’appelle Revolution Slider. Un grand classique bien connu de ceux qui utilisent WordPress. Voyons dans ce petit tutoriel les manipulations de bases pour créer un slider simple mais efficace aux yeux des clients.

Créer et paramétrer un nouveau diaporama

Avant toute chose, il faut créer le slider avec le plugin donc cliquez sur l’onglet « Slider Révolution » qui se situe vers le bas du tableau de bord de WordPress

Vous arrivez directement sur la page pour paramétrer votre nouveau slider, la chose essentielle ici étant de renseigner le nom de votre slider et son alias qui se trouvent dans la partie 2 de la page. Pour le shortcode, il va se compléter automatiquement avec l’alias, il vous servira plus tard, on en reparlera à la fin du tuto.

Par la suite vous pouvez modifier le type et la taille que prendra le slider sur votre site avec les parties en dessous et ajuster quelques fonctionnalités grâce à la slidebar sur la droite, mais rappelons que c’est un tuto de base donc restons sur la simplicité de la création.

N’oubliez pas d’enregistrer vos modifications avant de changer de pages !

Comment créer une slide ?

Une fois le slider créé, il faut le remplir ! C’est pour cette raison qu’on va commencer à créer notre première slide, pour cela il vous suffit d’aller dans l’onglet « Slide editor » en haut de la fenêtre. Une slide est automatiquement créée au début, on peut voir qu’elle est sélectionnée grâce au petit rectangle noir qui se situe en dessous de son nom dans la partie présentant tous les slides du slider en haut de la page. Sinon si vous voulez créer une nouvelle slide, il faut cliquer sur « nouvelle slide » à côté de la slide actuellement sélectionnée.

Ensuite vous pouvez choisir l’arrière-plan que vous souhaitez. Ce que vous avez choisi viendra se mettre en dessous sur le « plan de travail » de votre slide, c’est ici que toute la création de votre slide va se jouer.

Comment ajouter du contenu sur votre slide ?

Vous pouvez ajouter plusieurs choses à votre slide telles que des images, du texte, des boutons et bien plus. Nous nous allons voir plus en détails l’ajout de ces 3 outils car ce sont les plus courants.

Sur le plan de travail du slide, vous pouvez voir « Add Layer », en cliquant dessus une liste va apparaître en vous indiquant tout ce que vous pouvez ajouter.

Il faut savoir que pour une image, il suffit de sélectionner « image » et d’upload votre image afin qu’elle apparaisse sur votre slide.

Pour ajouter un bouton, cliquez sur « bouton », une fenêtre pour paramétrer votre prochain bouton apparaît. Vous pouvez régler différentes fonctionnalités telles que le texte du bouton, la couleur de fond, des bords et du texte, mais également la couleur du fond, des bords et du texte lors d’un passage de souris sur ce bouton.

Pour cet exemple, j’ai opté pour un fond orange avec des écritures blanches, à vous de choisir vos couleurs ! Une fois les couleurs et le texte sélectionnés, cliquez le bouton qui vous semble le plus approprié à votre situation. Celui-ci va directement s’implanter dans votre slide, il vous reste plus qu’à le replacer, à l’agrandir, à changer la taille de la police (grâce à la barre d’outils situé en haut du plan du travail dans l’onglet « style ») et faire toutes autres manipulations si besoin.

Pour ajouter du texte, il vous suffit de cliquer sur « texte » et rentrer votre texte et de le manipuler comme vous le désirez grâce à la barre d’outils.

Une chose très intéressante à savoir est que le texte que vous insérez (et également le texte du bouton) interprète l’html, donc si vous voulez insérer des balises html pour pousser un peu plus votre slide, vous pouvez en les insérant dans le texte comme si c’était un paragraphe basique. Une remarque également, le passage à la ligne ne se fait pas automatiquement avec la touche « entrée », en effet il faut mettre par exemple une balise « <br> » afin de retourner à la ligne dans le texte.

Comment animer mon slide ?

Pour mettre en place une animation sur votre slide, il vous suffit d’aller dans l’onglet « slide animation » en dessous de la partie présentant tous les slides du slider en haut de la page.

Vous pouvez voir qu’une liste assez complète de toutes les animations proposées par Slider Révolution. Pour chaque catégorie d’animation, une sous-catégorie apparaît pour vous présenter toutes les animations disponibles pour cette catégorie. Vous ne savez pas le nom de l’animation que vous souhaitez mettre ? Ne vous inquiétez pas, le plugin a tout prévu ! En effet, dans la deuxième colonne, si vous passez votre souris sur une animation, une petite fenêtre vous indiquera ce que fait l’animation en question.

Une fois l’animation sélectionnée, modifiez ses paramètres à votre guise.

Comment modifier la durée d’un de mes slides ?

Il vous est possible de changer la durée d’un slide en allant dans l’onglet « Paramètres généraux » à côté de « Slide animation » comme vu précédemment.

Dans cet onglet on peut voir toute une liste de paramètre pour votre slide, notamment le premier qui est « Slide durée : « . C’est ce champ qui nous intéresse pour cette partie, en effet c’est ici que vous mettez le temps de visibilité de votre slide avant de passer au suivant.

Attention, ce temps est en ms ! Cela veut dire que 1000 ms = 1 seconde !

Comment rendre son slide en auto-responsive ?

Les images et le texte, normalement se mettent tout seul en mode auto-responsive contrairement au bouton qui faut nous même le mettre en auto-responsive. Si jamais les images et le texte ne s’y mettent pas automatiquement, la démarche à faire est la même que celle d’un bouton.

Donc, il faut aller sélectionner le bouton ou l’outil en question dans le slide, en haut dans la barre d’outil « vous pouvez voir l’onglet « comportement », en allant dessus vous pouvez voir en dessous, en première position l’attribut « auto-responsive » avec un interrupteur sur le côté, actionnez ce dernier afin qu’il soit sur « on » et voilà le travail est fait !

De plus, lors d’un passage d’un écran d’ordinateur à un téléphone par exemple, la zone d’affichage diminue afin de répondre à la résolution de l’appareil. La zone d’affichage d’un téléphone (la plus petite) est limité par les lignes verticales en pointillés présentes sur les cotés de votre slide, tout ce qui est en dehors de ces lignes ne seront pas visibles sur un téléphone… Assurez vous donc que tous vos gadgets se situent bien à l’intérieur de ces lignes verticales !

Comment avoir un aperçu de son slider ?

Avant d’avoir un aperçu, vérifiez bien que vous avez sauvegardé votre travail grâce au bouton vert en haut à droite de la page.

Pour avoir un aperçu de son slider, c’est à dire de tous les slides réunis, il vous suffit que cliquer sur « static/global layers » en haut de la page, sur la gauche des slides sélectionnés. Vous allez voir que plus aucun slide n’est sélectionné (il n’y a plus de petit rectangle noir en dessous du slide), à ce moment la repartez en haut à droite de la page et cliquez sur le bouton gris, 4 affichages sont alors disponibles, un pour les desktops, un pour les laptops, un pour les tablettes et un pour les téléphones.

Ajouter son diaporama à une page de son site web

C’est bien beau de l’avoir créer mais il faut aussi le mettre sur son site web ! Pour cela nous avons besoin du shortcode, vous vous souvenez du fameux nom au début du tuto ? C’est maintenant qu’il intervient ! En effet, copiez votre shortcode, allez dans la page que où vous souhaitez mettre votre diaporama et collez le à l’endroit où vous voulez le placer. Attention cela respecte l’ordre html, si vous souhaitez le placer juste au dessus d’un paragraphe, collez votre shortcode juste au dessus, si vous souhaitez le placer tout en haut de votre page, il suffit de coller votre shortcode tout en haut de la page !

Voilà le tuto est fini ! A vous de jouer 🙂 Voici le lien vers les concepteurs du plugin.