skip to Main Content

Comment afficher un diaporama Revolution Slider sur WordPress

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

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

Avec plus de 554.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 continuons aujourd’hui notre guide sur Revolution Slider, mais cette fois, nous allons parler de l’affichage de diaporama dans une page/article WordPress, mais aussi nous allons effectuer quelques configurations avancées sur votre slider. J’espère que depuis le début de ces guides vous pratiquez chez vous (c’est un avantage considérable de toujours pratiquer). Si vous rencontrez un problème, je vous rappelle que vous pouvez me poser des questions, je me ferai un plaisir d’y répondre.

Pour ceux qui débute par la lecture de ce tutoriel, je vous invite à ne pas manquer le début de ces tutoriels sur Revolution Slider :

Si vous êtes passé par ces étapes, alors on peut continuer, sinon vous aurez beaucoup de mal à me suivre.

Ce qu’il faut savoir sur l’affichage de Diaporama

Revolution Slider est un plugin qui ne dépend d’aucun thème. En principe, les diaporamas de ce dernier pourront s’afficher sur tout type de thème, mais ce n’est pas toujours vrai. En effet, tout thème dispose des règles de style CSS qui peuvent constituer un obstacle à l’affichage correct des sliders. Parfois lorsque vous choisirez un slider une mise en page « pleine largeur », ce dernier débordera et ne s’affichera pas comme il le faut.

Au lieu de rechercher un thème gratuit qui sera éventuellement compatible avec Revolution Slider, je vous recommande de choisir un thème premium qui est déjà compatible avec Revolutio Slider, et l’un des thèmes que je vois en premier est « Total » de WPExplorer.

the-total-theme-wordpress-framework

L’un des exemples qui justifie le fait que vous devez prendre un thème premium est l’affichage d’un slider sur le thème Twenty Fourteen par exemple.

revolution-slider-tutoriel-wordpress-affichage-revolution-slider

Vous pouvez remarquer que sur cette image, la zone en rouge représente tout l’espace actuel du thème. La zone en bleu représente le débordement du slider sur le thème. Vous pouvez constater que l’affichage n’est pas optimal. Vous retrouverez plusieurs thèmes WordPress compatibles avec Revolution Slider sur themeforest

Ceci étant dit découvrons comment afficher un slider sur un article / page

Monstroid : Le thème WordPress le plus Polyvalent

Découvrez "ONE", l'offre de TemplateMonster qui vous permet de Télécharger plus de 8500 thèmes et plugins WordPress pour le prix de $19/mois seulement !!! [ Recommandé ]

Comment afficher un slider sur un article

Revolution Slider vous propose d’ajouter des sliders sur vos pages/articles de deux façons.

En utilisant le shortcode

Vous accédez à la page de configuration et récupérer le shortcode. Dans la section « Slider Title & Shortcode », vous remarquerez 3 champs. Le 3e champ qui contient un shortcode qui débute ainsi« [rev_slider… » est celui dont vous devez copier le contenu.

revolution-slider-recuperation-de-shortcode

Tout ce qui vous reste à faire maintenant, c’est d’ajouter le shortcode dans un article ou page de votre choix.

En utilisant le bouton d’ajout de slider sur l’éditeur visuel

Si vous n’avez pas envie à chaque fois de revenir vers la page de configuration d’un slider, vous pouvez utiliser le bouton ajouté par révolution slider dans l’éditeur visuel.

ajouter-un-slider-tutoriel-wordpress

En cliquant dessus, une nouvelle fenêtre s’ouvrira où vous pourrez choisir le slider que vous souhaitez ajouter à votre page.

ajouter-un-slider-a-une-page-wordpress

En sélectionnant un slider, vous pourrez spécialement changer l’ordre des slides. Cette modification ne sera effective qu’avec le shortcode personnalisé qui sera généré. Pour modifier l’ordre des slides, cliquez sur « Quick Modify Slider ». Vous accéderez à la liste des slides, que vous pourrez réorganiser par « Drag and Drop ».

drag-and-drop-revolution-slider

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]

Une fois que c’est fait, vous remarquerez un shortcode ajouté à l’éditeur visuel.

shortcode-revolution-slider

Tout ce qu’il vous reste à faire maintenant, c’est de prévisualiser votre article. C’est tout, désormais vous avez les bases pour créer un slider sur WordPress.

Quelques astuces sur l’utilisation avancée de Revolution Slider

Maintenant que vous savez comment utiliser Revolution Slider, je vous donnerai quelques astuces qui vous aideront à être plus productif dans l’utilisation de ce plugin.

Utilisez les raccourcis du clavier

Revolution Slider se veut être un éditeur de diaporama complet. Par conséquent, il vous permet d’utiliser certains raccourcis du clavier qui vous permettront de travailler plus rapidement.

  • CTRL + S : pour sauvegarder votre travail
  • Flèches directionnelles : pour déplacer un élément sur votre scène
  • Maj + Flèches directionnelles : permet de déplacer les éléments plus rapidement
  • Maj + Redimensionnement : permet d’effectuer un redimensionnement proportionnel
  • Double clic : permet d’ouvrir la modification d’un élément

Maitrisez les outils de l’éditeur de slide

Le slide vous propose des outils qui vous permettront de facilement déplacer vos éléments. Déjà nous vous avons parlé d’une grille, mais également, vous pouvez faire usage des bouton d’alignement proposé par Revolution Slider.

alignement-des-elements-revolutions-slider

Ces boutons d’alignement vous permettent de placer l’élément, pour la première ligne de gauche à droite, à l’extrémité gauche de la scène, au milieu de la scène et à l’extrémité droite de la scène. Pour la seconde ligne, à l’extrémité haute de la scène, au milieu de la scène et à l’extrémité base de la scène. En utilisant correctement ces boutons, vous pourrez centrer des éléments facilement en deux clics.

element-centre-revolution-slider

Utilisez l’outil de navigation entre les éléments d’une scène

Pour facilement retrouver des éléments disponibles dans une scène, vous pouvez utiliser le « timeline » ou l’explorateur d’élément d’une scène. Ce dernier se situe tout en haut de l’éditeur de scène.

explorateur-de-slide-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]

En cliquant sur la liste de l’explorateur, vous pourrez effectuer diverses opération sur les éléments, notamment :

  • Modifier un élément : icône en forme de crayon
  • Redimensionner les proportions de l’élément : icône ayant les flèches directionnelles
  • Supprimer l’élément : icône en forme de corbeille
  • Dupliquer l’élément : icône en forme de double page
  • Masquer un élément : icône en forme d’œil
  • Verrouiller un élément : icône en forme de cadenas

Si vous faites un peu attention à cette même zone, vous remarquerez des boutons de test de l’extensibilité du slider, ceci vous permettra de prévisualiser l’affichage de votre slider sur des appareils mobiles.

mode-responsive-revolution-slider

C’est tout pour ce tutoriel. Vous êtes désormais armé pour créer un slider impressionnant. SI vous avez des questions, n’hésitez pas à me les poser.

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
16 Partages
Partagez10
Tweetez1
Enregistrer5
WhatsApp