Slider Revolution

Revolution Slider est un plugin WordPress Premium qui permet de créer des sliders avancés et professionnel sur toutes ces pages. C'est à dire que vous pourrez l'utiliser pour : faire défiler des images, automatiquement et manuellement, ajouter des animations, adapté votre slider à tous les écrans,...

Ce plugin fait souvent parti d'un bundle (= lot) de plugins compris dans l'achat d'un template premium.

C'est à dire que quand vous installez un template premium sur votre site web, vous pourrez installer le plugin en un clic.

Par exemple The 7, l'un des templates les plus populaires propose un lot de 6 plugins premium dont Revolution Slider.

Slider Revolution revendique 4 millions de licences actives,

soit une communauté d'environ 4 millions d'utilisateurs.

- Ce qui veut dire qu'un site web du plugin a été créé et compte de nombreux exemples et tutoriels.

- Une communauté de passionnés postent régulièrement sur Internet des tutoriels ou des questions relatives à Slider Revolution

Vous n'êtes pas seul(e)...

Lien du site officiel : https://revolution.themepunch.com/

Un slider c'est quoi ?

Un slider peut aussi servir à faire défiler des témoignages, par exemple si vous avez 15 témoignages à afficher, vous pouvez les afficher sous forme de slider pour qu'ils ne prennent une hauteur de page conséquente. Ou encore mettre une série de photo en avant ou bien l'utiliser en tant que Carousel pour faire afficher des features.

C'est une fonctionnalité utilisée pour améliorer l'expérience utilisateur.  En effet, il permet de faire défiler plusieurs blocs sur une même page sans que l'utilisateur ait à scroller sa page. Les informations que vous présentez sur votre slider seront visualiser en faisant glisser les parties à gauche ou à droite par l'intermédiaire de bouton ou de puces qui sont placées à des endroits visibles pour l'utilisateur afin qu'il puisse faire évoluer les slides facilement.

Le slider a pour vocation de présenter un texte et/ou un call-to-action (= bouton d'appel à l'action) pour emmener rapidement le visiteur à une page stratégique de votre site web. Il est généralement accompagné d'une image en arrière plan pour rendre le contenu plus significatif et attractif.

Exemples à consulter : https://revolution.themepunch.com/examples/

Créer un nouveau slider :

Slider Revolution ou The7 Slider Revolution pour créer un nouveau slider ou travailler un slider existant

Créer un nouveau slider :

Une fois sur la page générale du plugin.

Cliquez sur la boîte "Nouveau Slider" pour créer un nouveau projet de slider.

Créer un nouveau slider :

Vous accédez automatiquement à la rubrique Param. Slider (= Paramètre Slider). Vous allez configurer l'aspect général du slider comme : Donner un titre, choisir les dimensions,  pour que chaque slide qui sera configurer respectent des normes communes, choisir les éditeur de navigation...

Param. slider (1/5)

Dans un premier temps, nous allons nous intéresser à la partie centrale puis dans un deuxième temps quand cette configuration au centre sera enregistrée, nous passerons aux blocs accordéon situés à droite de l'écran.

Partie centrale

Blocs accordéon

Param. slider (2/5)

Cette partie centrale doit être réglée au départ dans un souci de configuration générale. Il y a 5 étapes à prendre en compte (qui seront présentées à la suite). Notez que cette configuration pourra être modifiée à terme quand vous en estimerez le besoin.

Content source : permet de définir le contenu de la source. Par défaut le contenu provient de Slider Révolution. Mais nous pouvons très bien appeler un article, ou un tweet, une vidéo YouTube en appelant une variable définie.

Slider Title et Shortcode : en entrant un titre pour nommer votre Slider, ce qui est obligatoire pour être enregistré. Cela créé automatiquement  un shortcode (= code court) que vous pouvez copier et coller sur les pages que vous souhaitez. Ce code fera apparaître ce Slider Revolution.  

Sélectionnez un type de Slider : Vous avez le choix entre plusieurs type de slider :  Standard Slider, Hero Scene ou Carousel Slider. Ce qui différencie le carousel du slider est que le carousel est que un slider se lit slide par slide à l'horizontal ou vertical, un carousel à une notionde rotation au changement des images, avec une perspective

Param. slider (3/5)

Slide Layout : Vous pouvez sélectionnez le rendu en sélectionnant le style Auto (= automatique), Pleine largeur ou Plein écran

Par défaut vous pouvez garder les tailles en l'état et vous voyez uniquement les dimensions pour le desktop que vous pouvez modifier. Si vous modifiez une dimension par défaut toutes les autres tailles vont se retailler automatiquement en fonction des nouvelles dimensions attribuer. Si toute fois vous voulez attribué des tailles manuellement pour avoir des visuels personnalisés. Vous pouvez mettre Custom Grid Size en mode "On".

Enfin, vous pouvez définir une hauteur minimum et une largeur maximum tout en bas pour bloquer cette option et garder une uniformité.

C'est ici que vous attribuez toutes les dimensions width (= largeur) et height (= hauteur) pour les écrans Desktop, portable, Tablette et smartphone.

Param. slider (4/5)

Customize, Build & implement : Enfin le tout dernier bloc vous permet de soit travailler les paramètres avancés (= les blocs accordéons) commencer directement l'édition du premier slide de votre nouveau projet ou bien intégrer votre slide avec le shortcode.

Mais avant tout ça : Enregistrez votre configuration en pressant le bouton vert "Enregistrer les paramètres"

Une fois enregistré, nous retournons en haut de la page pour travailler les blocs en accordéon

Param. slider (5/5)

Nous allons nous intéresser à certaines actions dont les Paramètres généraux, la partie Layout & Visual, la Navigation et Parallax & 3D.

Param. slider (5/5)

Quelques précisions :

Pour configurer vos blocs Paramétres Généraux, Layout & Visual, Navigation, Parallax & 3D...

- Activer/Désactiver des actions spécifiques en glissant le bouton en Mode ON ou OFF

Vous pourrez :

- Gérer des durée en format Millisecondes

- Cocher et choisir des effets via des fichiers déroulants

- Quand vous ajusterez vos actions si vous passez votre curseur sur une action,

une boîte grise de Prévisualisation (=  Preview) apparaît.

Elle permet d'avoir un aperçu du rendu de la slide en direct.

Dans cet exemple, nous avons passer le curseur sur l'action

"Style Flèche" > "Hespedian", la boîte de Prévisualisation nous

montre le rendu de notre choix.  

Paramètres généraux (1/3)

Slideshow : permet de paramétrer la visualisation des slides en mode ON comme :

- Stopper le slide présenter en passant son curseur,

- Stopper le slider après un nombre prédéfinis de boucles,

- Définir le slide sur lequel le slider stoppe

- Configurer le nombre de boucle du slider,

- Se mettre en mode Random (=  les slides apparaissent aléatoirement);

- ...

Défauts : permet de configurer la sélection de slides qui seront affichées et la configuration des transitions par défaut.

- Sélection de slides

- ID (= numéro unique d'identification) du slide

- Durée par défaut de la visualisation des slides (= 9000 ms)

- Effet de la transition

- Durée de l'animation de l'effet

- Ajustement de l'arrière fond

- Position arrière-plan

- Répétition de l'arrière plan

- Rendre la vidéo muette (si intégration de vidéo sur une slide)

Paramètres généraux (2/3)

Barre de progression : permet de rendre active ou non la barre de progression. Si activée en mode ON, des actions de personnalisations sont proposées :

1èr Slide : permet de choisir et personnaliser sa première slide

- Activer sa première slide alternative

- Indiquer le numéro de la slide que vous souhaitez afficher en premier, par exemple si vous avez 5 slides, mettez 4 pour afficher la première slide en premier.

- Spécifier une transition spéciale pour la première slide

Paramètres généraux (3/3)

Une fois que vous avez modifié les différentes sections du bloc des Paramètres Généraux, pensez à sauvegarder vos modifications en pressant le bouton vert "Enregistrer les paramètres".

https://www.themepunch.com/revslider-doc/general-settings/

Consulter la documentation officielle pour en savoir plus sur Paramètres Généraux :

Layout & Visual (1/3)

Apparence : permet de styler le contour de son slider par :

- Choix d'un effet d'ombre

- Ajouter une supersposition en pointillé

- Personnaliser la couleur d'arrière plan (= background)

- Définir les paddings (=  marges intérieures)

-  Activer le Mode On pour télécharger une image de background par défaut

Spinner : permet de choisir le style du spinner que vous souhaitez afficher lorsque la page se charge. ( exemple choix 3 affichant trois points qui grossissent et rétrécissent)

Layout & Visual (2/3)

Mobile : Vous pouvez désactiver le Slider sur Mobile en pressant le Mode On. Désactiver l'effet Ken Burns (=  effet de mouvement) et cacher l'élément en affectant des dimensions spécifiques en pixels.

Position : Positionner le Slider.

- Par défaut le Slider sera positionné au centre sera au centre.

-   Choix des marges extérieures en haut (= Margin Top)

- Choix des marges extérieures en bas (= Margin Bottom)

Layout & Visual (3/3)

Une fois que vous avez modifié les différentes sections du bloc Layout & Visual, pensez à sauvegarder vos modifications en pressant le bouton vert "Enregistrer les paramètres".

https://www.themepunch.com/revslider-doc/layout-visual/

Consulter la documentation officielle pour en savoir plus sur Layout & Visual :

Navigation (1/7)

Flèches : En activant le Mode On "Enable Arrows" (= permettre de faire apparaître les flèches) vous allez pouvoir ajouter des flèches latérales (gauche et droite) de navigation pour le Slider. Ce qui augmente l'expérience utilisateur. Vous pouvez :

- Activer la lecture RTL (= Right to Left) utile pour certaines langues

- Choisir le style de flèche (exemple : Hephaistos)

- Pérégler (= Preset) sa propre configuration

- Faire le choix de la visibilité : Toujours les afficher ou pas ...

- Positionner la flèche gauche (haut, bas, aligné...)

- Positionner la flèche droite  (haut, bas, aligné...)

- Régler la taille des images en preview des autres slides

Navigation (2/7)

Puces : En activant le Mode On "Enable Bullets" (= permettre les flèches) vous allez pouvoir ajouter des puces pour repérer les slides et glisser d'un slide à l'autre en pressant l'une des puces.

- Activer la lecture RTL (= Right to Left) utile pour certaines langues

- Choisir le style de puces  par défaut sur  Hephaistos

- Prérégler sa propre configuration

- Définir un espace entre les puces

- Définir la Direction (horizontal, vertical)

- Visibilité : toujours afficher, cacher après un certains nombre de secondes sur desktop et Mobile.

- Position : Alignement horizontal, vertical, définir un décalage (= Offset)...

- Régler la taille des images en preview des autres slides

Vous pouvez :

Navigation (3/7)

Onglets : En activant le Mode On "Enable Tabs" (= permettre les Onglets), vous allez pouvoir paramétrer des onglets sur votre slider, c'est une fonctionnalité supplémentaire qui permet de visualiser en image les slides.

Les fonctionnalités se configurent dans la même logique que les Flèches et Puces.

Voir l'exemple : https://revolution.themepunch.com/wordpress-content-tabs-slider/

Détails de l'option : https://www.themepunch.com/revslider-doc/navigation/#tabs

Navigation (4/7)

Vignettes (= Thumbnails) : En activant le Mode On "Vignettes actives", vous pouvez afficher des vignettes en guise de navigation. Ces vignettes peuvent représenter l'image principale de sa slide.

Notez que si vous souhaitez mettre en place cette configuration, vous devrez télécharger sur chaque slide individuelle dans la partie Slide Editor (= Editeur de Slide) la vignette (= Thumbnail) que vous souhaitez affichée.

Voir l'exemple  : https://revolution.themepunch.com/thumbnail-hover-carousel-slider-revolution-plugin/

Détails de l'option : https://www.themepunch.com/revslider-doc/navigation/#tabs

Navigation (5/7)

Touch : En activant le Mode On "Touch Enabled", vous faîtes le choix d'activer la navigation tactile pour mobile.

En activant "Drag Block Vertical" sur ON, vous autorisez le défilement vertical de la page lorsque l'option précédente "Touch Enabled" est activée.  

Enfin vous pouvez configurer :

- Swipe Treshold (= seuil de balayage) pour définir la sensibilité du toucher de l'écran pour balayer de gauche à droite les slides.

- Swipe Min Finger :  pour le nombre de doigts à utiliser pour faire défiler les slides (par défaut 50 signifie que l'option est bloquée. 1 ou 2 peut-être une solution plus adaptée).

- Swipe Direction :  pour que votre navigation se fasse à l'horizontale ou à la verticale

Navigation (6/7)

Misc. (=Miscellaneous) : en activant  l'option "Keyboard Navigation" (= Navigation avec clavier) en Mode On, cela vous permet d'utiliser les touches de navigation de votre clavier pour faire glisser les slides.

Vous pouvez configurer :

- Key Direction :  pour utiliser les flèches directionnelles du clavier gauche et droite pour précédent et suivant à l'horizontal et haut et bas pour la verticale.

- Mouse Scroll Navigation en mode ON pour sensibiliser le scroll de votre souris à la navigation de votre slider si votre curseur se trouve dans l'élément.

- Reverse Mouse Scroll pour inverser le scroll.

Navigation (7/7)

Une fois que vous avez modifié les différentes sections du bloc Navigation, pensez à sauvegarder vos modifications en pressant le bouton vert "Enregistrer les paramètres".

https://www.themepunch.com/revslider-doc/navigation/

Consulter la documentation officielle pour en savoir plus sur Navigation:

Parallax & 3D (1/2)

Enable Parallax & 3D : permet d'activer et configurer l'effet parallax et/ou 3D sur les supports desktop, portable et mobile.

Pour l'effet Parallax > Sensibilité de la souris :

- Vous pouvez attribué un évènement comme :  au Déplacement de la souris,  scroll position (= lorsque vous scrollez la page) ou Mouvement et défilement (chaque option est à tester pour bien comprendre)

- Parallax origo (= Origine parallax) vous pouvez attribuer un point d'entrée pour le commencement de l'effet (Mouse Enter Point ou Slider Center)

- Animation Speed (= vitesse d'animation) vous pouvez choisir le nombre de milliseconds pour que l'action s'éxécute

En activant l'effet 3D, vous pouvez donner de l'effet à votre slider et activer des options variées :

Pour le Niveaux Parallax :

- Vous pouvez configurer jusqu'à 15 niveau d'éxécution que vous pouvez personnaliser. Par exemple vous pouvez attribuer la valeur de 80 à Level Depth 15. Une fois effectué, vous pourrez paramétrer le niveau à la slide dans l'éditeur de slide.

Parallax & 3D (2/2)

Une fois que vous avez modifié les différentes sections du bloc Parallax & 3D, pensez à sauvegarder vos modifications en pressant le bouton vert "Enregistrer les paramètres".

https://www.themepunch.com/revslider-doc/parallax-3d/

Consulter la documentation officielle pour en savoir plus sur le Parallax & 3D :

Vous avez terminé la configuration des paramètres et vous avez bien enregistré votre configuration.

Cliquez à présent sur l'onglet "Slide Editor" pour commencer à créer votre première slide

Rappel "Nouveau Slider" est le titre du Slider que nous avons renseigné dans Param. Slider. Cela veut dire que ce titre est changeant en fonction du projet et qu'apparaîtra le titre que vous avez attribué à ce slider.

Pour éditer une slide, nous atterrissons sur une zone de travail comme celle-ci :

Liste des slides : permet d'ajouter des slides individuels et ou de paramétrer un slide existant. en passant le curseur dessus :

- Vous pouvez le faire apparaître (quand il met en avant le check vert        ou le rendre inactif visuellement quand il est en Mode

- Vous pouvez le dupliquer pour avoir la même configuration puis remplacer les visuels et contenus

- Vous pouvez aussi l'Enregistrer comme modèle  ou l'Effacer

Zone de configuration de la slide individuelle : permet d'ajouter un fond d'écran de plusieurs manières, d'attribuer des paramètres généraux pour cette slide individuelle ou encore d'y ajouter les vignettes, intégrer une animation....  

Slide Layers (= couche de slides) : Cette partie est l'éditeur de slide qui permet de mettre en forme le rendu, en y superposants des layers (= couches) de contenus :  textes, images, boutons...

Et l'ajuster, et de l'adapter à tous les supports.

Pour bien comprendre le slide Editeur nous allons créer :

une slide composé :  

  - d'un fond d'écran avec effet parallax

  - d'un texte

  - d'un bouton

  - adapté à tous les supports

Première étape : Téléchargez une image d'arrière plan

Cochez la première case intitulée "Image Arrière-Plan / Principale". Puis pressez le bouton bleu "Media Library" pour télécharger une image ou en sélectionner une déjà stockée dans votre Bibliothèque de Médias. Validez votre choix d'image d'Arrière Plan en pressant le bouton "Insert".

Note : En pressant cette option,  des sous-onglets sont apparus  : Source, Configuration de la source, Filters, Parallax/3D, Ken Burns

Première étape : Téléchargez une image d'arrière plan

Une fois téléchargée l'image apparaît instantanément dans la liste des slides et la zone de l'éditeur de slides (= Slide layers)

Cela nous permet de voir comment l'image d'arrière plan s'affiche, nous allons la configurer.

Retournez à la zone de configuration de la slide individuelle et cliquez le sous-onglet "Configuration de la source"

Vous pourrez jouer avec les paramètres de l'image mais surtout vous avez l'option de positionner votre image d'arrière plan comme vous le souhaitez via l'action :  "Position d'arrière plan".

Note : (x%, y%) permettent d'ajuster les abcisses (x) et les ordonnées (y) au plus juste.

Si vous pressez le sous-onglet suivant : "Filters" vous pouvez attribué un filtre spécifique à l'image. C'est le même procédé que Instagram donc si vous n'avez pas arrangé l'image sur votre Desktop vous pouvez le faire ici avec 22 filtres à tester.

Première étape : Téléchargez une image d'arrière plan

Dans le sous-onglet suivant : Parallax / 3D, nous allons ajouté un effet parallax à notre slide.

Nous avons juste à enclencher le fichier déroulant :  Niveau Parallax pour choisi quel niveau nous souhaitons (c.f. Param. Sliders)

La première étape est validée : Nous avons ajouté une image d'arrière plan + un effet Parallax.

Pensez à sauvegarder vos modifications

Note :  Nous ne traiterons pas la partie Ken Burns dans cet exemple

Deuxiéme étape : Ajout du texte et un bouton

Nous allons travailler dans l'éditeur de Slides. Pressez le bouton bleu                                 pour ajouter des couches de contenu comme du Texte, Image, Audio, Video, Boutom, Forme, Objet ou importer ses propres contenus.                                     

Nous allons ajouter du texte. Sélectionnez Texte et cliquez  sur le lien pour faire apparaître du texte.

Une fois cliqué vous pouvez modifier directement le texte qui par défaut est "Caption Text". Notez que vous êtes dans l'onglet style                    pouvez jouer sur la Police, la taille de la Police, la graisse, la couleur...

Vous pouvez centré parfaitement votre texte en pressant, ces 2 icônes qui représentent le centre de votre zone

Deuxiéme étape : Ajout du texte et un bouton

Nous allons ajouter à présent ajouter un bouton d'action.

En cliquant "Bouton" vous allez ajouter votre bouton mais avant vous aller le  styler le  comme vous le souhaitez avec les couleurs d'Arrière plan, du texte, bordure et icône que vous déterminerez pour l'Idle State (= Etat de Repos) ou Etat initial         , l'Etat de survol          ainsi que l'ajout du Texte personnalisé     

Deuxiéme étape : Ajout du texte et un bouton

Une fois le bouton ajouté sur la zone, vous pouvez le styler et l'aligner comme lors de l'ajout du texte :

Nous allons ajouter un lien cliquable au bouton et qui renvoie sur une page de notre site

Cliquer sur l'onglet "Actions"                      en vous assurant que vous avez bien sélectionné le bouton.

Laissez l'action "Clic" pour que le bouton soit cliquable. Dans le second fichier vous allez choisir l'action : "simple lien" permet d'ajouter l'URL de la page. Vous pouvez ensuite décider l'ouverture sur la même fenêtre ou pas.

Deuxiéme étape : Ajout du texte et un bouton

La deuxième étape est validée : Nous avons ajouté du Texte et un bouton

Pensez à sauvegarder vos modifications

Troisième étape : Adapté le contenu à tous les supports

Dans la zone d'édition nous voyons 4 icônes représentants les différents formats de navigation pour un site web

Desktop

Portable

Tablette

Mobile

Troisième étape : Adapté le contenu à tous les supports

Le contenu (Texte + Bouton) pour la version Mobile est trop gros. Il faut le réduire.

Problème : On ne peut pas réduire la police et réduire le bouton car cela s'impactera automatiquement sur les autres Formats

Comment faire ?

La taille de la Police est trop grande et le bouton aussi

:/

Troisième étape : Adapté le contenu à tous les supports

La Solution est de réécrire le même texte avec une taille adaptée et recharger un bouton plus petit pour qu'il rentre dans cet espace.

Deuxième Problème : Si on créé un contenu adapté pour le format Mobile, il va apparaître sur tous les autres formats et donc il y aura une duplication des textes et boutons sur tous les formats

Quelle est la Solution ?

Troisième étape : Adapté le contenu à tous les supports

La Solution : Nous allons rendre invisible le contenu présent pour Mobile

Utilisons l'onglet Visibilité

Par défaut tous la visibilité est attribuée à tous les formats pour le texte et le bouton

Sélectionnez le texte et glissez le bouton en Mode OFF pour le Mobile

Sélectionnez le bouton et glissez le bouton en Mode OFF pour le Mobile

Troisième étape : Adapté le contenu à tous les supports

Le texte est le bouton n'apparaissent plus en visuel sur le format Mobile

Faites un aperçu pour être complétement sûre

Troisième étape : Adapté le contenu à tous les supports

A présent le terrain est libre pour créer un texte plus petit,

ajouter un bouton et rendre invisible ce nouveau contenu sur les autres formats !!

Créez à nouveau les contenus en utilisant "Add Layer",

en veillant à rajouter le lien pour le bouton

N'hésitez pas à glisser/déposer les autres contenus sur les côtés, il n'y aura aucun impact car ils sont inactifs sur ce format

Dans Visibilité, Sélectionnez le texte créé et désactivez-le visibilité sur Desktop, Portable et Tablette

Dans Visibilité, Sélectionnez le bouton créé et désactivez-le visibilité sur Desktop, Portable et Tablette

Testez sur Aperçu.

Ça fonctionne.

Troisième étape : Adapté le contenu à tous les supports

La troisième étape est validée : Nous avons adapté le contenu sur les formats Desktop, Portable, Tablette et Mobile

Pensez à bien sauvegarder vos modifications

Vérification des contenus et des formats

Desktop

Portable

Tablette

Mobile

Pour en savoir plus :

https://www.themepunch.com/revslider-doc/second-steps/