Partie #04
Slider Revolution
Plugin (= Extension) Premium
objectif : configurer ses slides, intégrer une image, la positionner puis ajouter du contenu adapté à tous les supports.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4993186/pagelogo_2x.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4993594/Capture_d_écran_2018-06-05_à_14.46.08.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998537/Capture_d_écran_2018-06-06_à_13.41.24.png)
- 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/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998579/Capture_d_écran_2018-06-06_à_13.53.00.png)
Une fois le plugin Slider Revolution
installé puis activé...
Vous trouverez le lien du plugin dans la barre de menu de votre Tableau de bord.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994022/Capture_d_écran_2018-06-05_à_16.02.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994028/Capture_d_écran_2018-06-05_à_16.02.51.png)
Note : Il se peut que vous puissiez tombé sur des appellations différentes comme : The7 Slider Revolution qui fait référence au Template premium The 7. Seul le nom change pas la configuration.
En glissant le curseur sur le lien...
Vous observez plusieurs actions dont :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994022/Capture_d_écran_2018-06-05_à_16.02.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994368/4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
Slider Revolution : Lien renvoyant sur la page générale et Index du plugin pour créer ou éditer un slider. Plus vous pourrez avoir en un coup d'oeil les informations du plugin (version utilisée...)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994443/Capture_d_écran_2018-06-05_à_17.26.11.png)
Editeur Navigation : référence tous les éditeurs disponibles pour configurer sa navigation. A savoir les flèches de droite et de gauche et les puces.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994519/Capture_d_écran_2018-06-05_à_17.38.53.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
Paramètres généraux : permet de gérer la configuration générale des sliders comme la largeur et hauteur par défaut, les dimensions pour les différents supports (desktop, tablettes, smartphones)...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994586/Capture_d_écran_2018-06-05_à_17.47.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994368/4.png)
Add-Ons : permet d'acheter des fonctionnalités pour styler les effets de visualisation.
Créer un nouveau slider :
Slider Revolution ou The7 Slider Revolution pour créer un nouveau slider ou travailler un slider existant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994072/Capture_d_écran_2018-06-05_à_16.02.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994073/Capture_d_écran_2018-06-05_à_16.02.51.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4994989/Capture_d_écran_2018-06-05_à_18.40.10.png)
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995299/Capture_d_écran_2018-06-05_à_19.11.16.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995341/Capture_d_écran_2018-06-05_à_18.40.31_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
Partie centrale
Blocs accordéon
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995359/Capture_d_écran_2018-06-05_à_20.28.53.png)
Param. slider (2/5)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995341/Capture_d_écran_2018-06-05_à_18.40.31_2.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995472/param-slider-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995473/4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995473/4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995551/Capture_d_écran_2018-06-05_à_21.30.22.png)
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"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995626/parma-slider-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995630/5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995630/5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995672/Capture_d_écran_2018-06-05_à_22.01.27.png)
Une fois enregistré, nous retournons en haut de la page pour travailler les blocs en accordéon
Param. slider (5/5)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995775/Capture_d_écran_2018-06-05_à_22.23.13.png)
Nous allons nous intéresser à certaines actions dont les Paramètres généraux, la partie Layout & Visual, la Navigation et Parallax & 3D.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995812/4.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5000927/Capture_d_écran_2018-06-06_à_21.39.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5000936/Capture_d_écran_2018-06-06_à_21.39.43.png)
Vous pourrez :
- Gérer des durée en format Millisecondes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5000949/Capture_d_écran_2018-06-06_à_21.39.56.png)
- Cocher et choisir des effets via des fichiers déroulants
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5000956/Capture_d_écran_2018-06-06_à_21.40.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5000993/Capture_d_écran_2018-06-06_à_22.04.44.png)
- 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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5001003/Capture_d_écran_2018-06-06_à_22.08.20.png)
Paramètres généraux (1/3)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995789/Capture_d_écran_2018-06-05_à_22.23.20.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995790/Capture_d_écran_2018-06-05_à_22.23.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995793/Capture_d_écran_2018-06-05_à_22.23.34.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995795/Capture_d_écran_2018-06-05_à_22.23.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
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 :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997846/Capture_d_écran_2018-06-06_à_10.47.45.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
Paramètres généraux (3/3)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997942/Capture_d_écran_2018-06-06_à_11.08.38.png)
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".
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997913/Capture_d_écran_2018-06-06_à_11.01.21.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997920/Capture_d_écran_2018-06-06_à_11.02.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997921/Capture_d_écran_2018-06-06_à_11.01.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997984/Capture_d_écran_2018-06-06_à_11.15.22.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997929/Capture_d_écran_2018-06-06_à_11.02.20.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4997934/Capture_d_écran_2018-06-06_à_11.06.02.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
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://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998962/Capture_d_écran_2018-06-06_à_15.21.12.png)
Consulter la documentation officielle pour en savoir plus sur Layout & Visual :
Navigation (1/7)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998056/Capture_d_écran_2018-06-06_à_11.37.11.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998062/Capture_d_écran_2018-06-06_à_11.35.24_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998104/Capture_d_écran_2018-06-06_à_11.53.54.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
Navigation (2/7)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998116/Capture_d_écran_2018-06-06_à_11.37.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998132/Capture_d_écran_2018-06-06_à_12.04.51_2.png)
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998150/Capture_d_écran_2018-06-06_à_12.13.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958549/arrow-35_3.png)
Vous pouvez :
Navigation (3/7)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998178/Capture_d_écran_2018-06-06_à_12.22.26.png)
Voir l'exemple : https://revolution.themepunch.com/wordpress-content-tabs-slider/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998348/Capture_d_écran_2018-06-06_à_13.01.31.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
Détails de l'option : https://www.themepunch.com/revslider-doc/navigation/#tabs
Navigation (4/7)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998377/Capture_d_écran_2018-06-06_à_13.07.57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998656/Capture_d_écran_2018-06-06_à_14.08.28.png)
Détails de l'option : https://www.themepunch.com/revslider-doc/navigation/#tabs
Navigation (5/7)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998715/Capture_d_écran_2018-06-06_à_14.18.19.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998903/Capture_d_écran_2018-06-06_à_15.03.24.png)
Navigation (7/7)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
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://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4998952/Capture_d_écran_2018-06-06_à_15.19.13.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995812/4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4999047/Capture_d_écran_2018-06-06_à_15.36.06.png)
En activant l'effet 3D, vous pouvez donner de l'effet à votre slider et activer des options variées :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4999067/Capture_d_écran_2018-06-06_à_15.43.02.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4995812/4.png)
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".
Consulter la documentation officielle pour en savoir plus sur le Parallax & 3D :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5001028/Capture_d_écran_2018-06-06_à_22.21.00.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5003535/Capture_d_écran_2018-06-06_à_22.31.48.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5003771/Capture_d_écran_2018-06-07_à_13.58.14_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
Pour éditer une slide, nous atterrissons sur une zone de travail comme celle-ci :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
Liste des slides : permet d'ajouter des slides individuels et ou de paramétrer un slide existant. en passant le curseur dessus :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5003883/Capture_d_écran_2018-06-07_à_14.49.08.png)
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5003922/Capture_d_écran_2018-06-07_à_15.04.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5003927/Capture_d_écran_2018-06-07_à_15.05.04.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5003950/Capture_d_écran_2018-06-07_à_15.10.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004011/Capture_d_écran_2018-06-07_à_15.29.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004014/Capture_d_écran_2018-06-07_à_15.28.54.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004119/Capture_d_écran_2018-06-07_à_15.49.45.png)
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".
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
Note : En pressant cette option, des sous-onglets sont apparus : Source, Configuration de la source, Filters, Parallax/3D, Ken Burns
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004177/Capture_d_écran_2018-06-07_à_16.01.56.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004372/Capture_d_écran_2018-06-07_à_16.18.25.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004220/Capture_d_écran_2018-06-07_à_16.03.07.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004390/Capture_d_écran_2018-06-07_à_16.03.29.png)
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"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004428/Capture_d_écran_2018-06-07_à_16.26.47.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004433/Capture_d_écran_2018-06-07_à_16.50.19.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004466/Capture_d_écran_2018-06-07_à_16.27.10.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004523/Capture_d_écran_2018-06-07_à_17.05.23.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004590/Capture_d_écran_2018-06-07_à_17.13.47.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004591/Capture_d_écran_2018-06-07_à_16.40.10.png)
La première étape est validée : Nous avons ajouté une image d'arrière plan + un effet Parallax.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004602/Capture_d_écran_2018-06-07_à_17.16.36.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004660/Capture_d_écran_2018-06-07_à_17.20.45.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004011/Capture_d_écran_2018-06-07_à_15.29.09.png)
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...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004718/Capture_d_écran_2018-06-07_à_17.22.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004734/Capture_d_écran_2018-06-07_à_17.42.22.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004736/Capture_d_écran_2018-06-07_à_17.42.34.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004750/Capture_d_écran_2018-06-07_à_17.42.40.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004800/Capture_d_écran_2018-06-07_à_17.49.37.png)
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é
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004812/Capture_d_écran_2018-06-07_à_17.52.48.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004837/Capture_d_écran_2018-06-07_à_17.51.51.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004863/Capture_d_écran_2018-06-07_à_18.12.51.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960364/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960365/2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4960366/3.png)
Une fois ces 3 actions faites pressez le modèle d'un bouton pour l'ajouter
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 :
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004994/Capture_d_écran_2018-06-07_à_18.35.58.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005230/Capture_d_écran_2018-06-07_à_19.54.30.png)
Nous allons ajouter un lien cliquable au bouton et qui renvoie sur une page de notre site
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005282/Capture_d_écran_2018-06-07_à_19.47.07.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005290/Capture_d_écran_2018-06-07_à_20.09.30.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/4958550/arrow-35_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005307/Capture_d_écran_2018-06-07_à_19.47.35.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005320/Capture_d_écran_2018-06-07_à_20.16.48.png)
Deuxiéme étape : Ajout du texte et un bouton
La deuxième étape est validée : Nous avons ajouté du Texte et un bouton
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005332/Capture_d_écran_2018-06-07_à_17.53.23.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005355/Capture_d_écran_2018-06-07_à_20.25.02.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005358/Capture_d_écran_2018-06-07_à_19.05.46.png)
Desktop
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005393/Capture_d_écran_2018-06-07_à_19.05.52.png)
Portable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005399/Capture_d_écran_2018-06-07_à_19.05.58.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005402/Capture_d_écran_2018-06-07_à_19.06.06.png)
Tablette
Mobile
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3349390/Capture_d_e_cran_2016-12-18_a__23.34.08.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005402/Capture_d_écran_2018-06-07_à_19.06.06.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005402/Capture_d_écran_2018-06-07_à_19.06.06.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005480/Capture_d_écran_2018-06-07_à_20.29.05.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005486/Capture_d_écran_2018-06-07_à_20.28.55.png)
Utilisons l'onglet Visibilité
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005494/Capture_d_écran_2018-06-07_à_20.58.57.png)
Par défaut tous la visibilité est attribuée à tous les formats pour le texte et le bouton
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005500/Capture_d_écran_2018-06-07_à_20.59.02.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005519/Capture_d_écran_2018-06-07_à_21.07.36.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5004011/Capture_d_écran_2018-06-07_à_15.29.09.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005560/Capture_d_écran_2018-06-07_à_21.15.52.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005568/Capture_d_écran_2018-06-07_à_21.15.52.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005571/Capture_d_écran_2018-06-07_à_21.16.10.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005597/Capture_d_écran_2018-06-07_à_21.31.11.png)
Pensez à bien sauvegarder vos modifications
Vérification des contenus et des formats
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005620/Capture_d_écran_2018-06-07_à_21.36.20.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005622/Capture_d_écran_2018-06-07_à_21.36.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005623/Capture_d_écran_2018-06-07_à_21.36.49.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/5005627/Capture_d_écran_2018-06-07_à_21.36.56.png)
Desktop
Portable
Tablette
Mobile
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/565259/images/3350770/Capture_d_e_cran_2016-12-19_a__16.15.06.png)
Pour en savoir plus :
Toute la documentation officielle est à consulter ici :
Slider Revolution : plugin Premium Wordpress
By BlueWebOcean
Slider Revolution : plugin Premium Wordpress
configurer ses slides, intégrer une image, la positionner puis ajouter du contenu adapté à tous les supports.
- 42