Examen du plugin WordPress Slider Revolution et guide pratique

Revolution Slider WordPress Plugin Review & How To Guide

Slider Revolution est un curseur premium disponible en tant que plugin WordPress, plugin jQuery et plugin Joomla. Il a gagné en popularité dans la communauté WordPress en raison de sa vaste gamme de fonctionnalités et de sa facilité d’utilisation.


Dans cet aperçu, nous allons couvrir uniquement les principales caractéristiques du Plugin WordPress Slider Revolution, et nous vous montrerons à quel point il est facile de créer vos propres curseurs à partir de zéro.

Obtenez Slider Revolution gratuitement! Le plugin Slider Revolution est inclus gratuitement avec l’achat de notre thème Total WordPress, non seulement vous obtenez un plugin génial, vous obtiendrez également le thème Total ainsi que le plugin Visual Composer qui est également inclus gratuitement!

Obtenez Slider Revolution

Slider Revolution: ce qui rend ce plugin WordPress si génial

Il y a des tonnes de fonctionnalités géniales intégrées à Slider Revolution pour faciliter la création de curseurs personnalisés pour votre site Web. Voici quelques-uns de nos favoris.

Mises en page réactives

Le plugin est réactif et comprend plusieurs options de disposition de curseur pour vous faciliter la vie. Choisissez d’abord votre type de curseur: curseur standard, scène de héros (diapositive unique) ou curseur de carrousel. Sélectionnez ensuite une mise en page: automatique, pleine largeur ou plein écran.

le mise en page automatique L’option vous permet de définir la taille de votre curseur en utilisant des pixels exacts, avec des options supplémentaires pour définir les tailles de curseur à différentes largeurs d’écran (ordinateur de bureau, ordinateur portable, tablette et téléphone). Si vous laissez cette option sur son paramètre par défaut, elle étirera votre curseur jusqu’à la largeur du conteneur principal définie par votre thème WordPress.

le mise en page pleine largeur est exactement ce que cela ressemble – une option de curseur pleine largeur qui s’étendra complètement de gauche à droite. Vous devrez toujours définir la hauteur de votre curseur.

L’option de mise en page la plus unique est plein écran. Avec cette option, vous pouvez créer des curseurs fantastiques qui remplissent littéralement tout votre écran, quelle que soit la taille de votre navigateur ou de votre appareil (vous pouvez même utiliser cette option pour ajouter des curseurs plein écran avec des vidéos pour encore plus d’impact).

Plusieurs sources de contenu

Vous voulez créer un curseur pour vos publications? Ou pour vos produits WooCommerce? Pas de problème – choisissez parmi 11 sources de contenu différentes lors de la création de votre curseur.

Au moment de la rédaction de cet article, Slider Revolution prend en charge le contenu basé sur les articles de blog, les articles spécifiques, l’article / la page actuelle (idéal si vous souhaitez ajouter un curseur en vedette à l’article de blog ou à l’élément de portefeuille), Flickr, Instagram, WooCommerce, Twitter, Facebook , YouTube, Vimeo ou le curseur par défaut (téléchargez vos propres images / vidéo).

Options faciles

Slider Revolution vous permet de créer facilement des curseurs personnalisés en ajoutant des options pour à peu près tout. Choisissez le délai de votre diapositive, les flèches de navigation, les polices personnalisées, ajoutez des arrière-plans de parallaxe, l’emplacement du curseur (ajoutez des marges), ajoutez des calques multimédias, insérez des boutons, sélectionnez des transitions de diapositives et bien plus encore en utilisant les menus déroulants du plugin.

Et en plus de cela, vous pouvez personnaliser à peu près tout et même enregistrer vos propres préréglages pour simplifier la réutilisation des styles de police, les transitions de diapositives, les animations de calque et bien plus encore..

Support média

Ajoutez du texte, des liens, des images et des vidéos en quelques clics de souris. Cela vous donne la possibilité de créer des diapositives riches en informations auxquelles vos lecteurs et clients pourront s’identifier. De plus, chacun de ces types de médias est ajouté en tant que son propre calque avec des animations, un timing et des styles uniques que vous définissez à l’aide des super options de Slider Revolution.

Installation de Slider Revolution

Vous devez d’abord obtenir une copie du plugin WordPress Slider Revolution. Il existe différentes méthodes pour installer le plugin selon que vous avez acheté votre propre copie du plugin ou si elle a été incluse avec votre thème premium.

1. Installez votre copie de Slider Revolution

Téléchargez le plugin Slider Revolution

Si vous avez acheté votre propre copie de Slider Revolution de CodeCanyon, connectez-vous à votre compte Envato et accédez à votre page de téléchargements (vous pouvez accéder à cette page en survolant votre nom d’utilisateur). Localisez ensuite votre copie de Slider Revolution et sélectionnez l’option de téléchargement pour «Fichier WordPress installable uniquement».

Téléchargez le fichier Zip du plugin

Ensuite, connectez-vous à votre site WordPress et accédez à Plugins> Ajouter un nouveau et cliquez sur le bouton “Télécharger le plugin” en haut à gauche de votre écran.

À partir d’ici, utilisez le bouton «Choisir un fichier» pour sélectionner le fichier de plug-in que vous venez de télécharger depuis CodeCanyon, puis cliquez sur le bouton «Installer maintenant». Après cela, activez simplement le plugin et vous êtes prêt à commencer à construire des curseurs!

Décompressez le dossier du plugin à télécharger via FTP

Remarque: Vous pouvez également installer votre plugin via FTP en vous connectant à votre serveur et en téléchargeant le plugin extrait (décompressé) dans votre dossier situé dans wp-content / plugins.

2. Installez Slider Revolution inclus avec un thème Premium

De nombreux thèmes premium incluent des copies de plugins premium avec le téléchargement du thème. Si c’est ainsi que vous souhaitez installer votre copie de Slider Revolution, vous devrez faire référence à la documentation de votre thème. Mais la plupart des développeurs font de leur mieux pour faciliter ce processus.

Total des plugins recommandés

Par exemple, si vous utilisez le thème Total WordPress, vous devriez voir une invite à l’écran qui vous recommande d’installer Slider Revolution (et les autres plugins inclus avec le thème). Cliquez simplement sur le lien pour commencer l’installation puis activez le plugin.

Installez Slider Revolution avec Total

Total inclut également une option personnalisée dans l’importateur de démonstration pour installer et activer Slider Revolution lors de l’importation d’échantillons de données. Si Slider Revolution a été utilisé pour créer la démo que vous importez, vous devez être invité à installer le plug-in comme indiqué ci-dessus.

Importer des curseurs Slider Revolution avec Total

Assurez-vous ensuite que l’option «Importer les curseurs» est sélectionnée, et le thème importera automatiquement tous les curseurs personnalisés de la démo. Facile!

Slider Revolution Guide

Après avoir installé le plug-in, il devrait ajouter un élément de menu à votre tableau de bord WordPress principal. Cliquez dessus pour accéder à la page principale de gestion des curseurs de Slider Revolution.

Paramètres de révolution du curseur principal

De là, vous pouvez créer ou modifier des curseurs, activer votre licence si vous avez acheté votre propre copie du plugin (si le curseur était inclus avec votre thème, vous pouvez ignorer cette section) et voir si votre copie du plugin est à jour.

Paramètres globaux de Slider Revolution

Avant de commencer la construction, nous vous recommandons de visiter le Paramètres globaux option (qui est un élément de sous-menu sous Slider Revolution).

curseur Paramètres globaux de révolution

Il existe de nombreuses options importantes ici pour les paramètres de grille réactifs par défaut (qui s’appliquent lors de la construction de nouveaux curseurs), l’URL de chargement de police personnalisée, la création de base de données pour le plugin et plus encore. Mais il y a deux options que nous vous recommandons de modifier.

La première option que vous devriez envisager de modifier est Afficher la permission du plugin que vous pouvez utiliser pour restreindre l’accès aux plugins aux administrateurs uniquement. C’est un moyen facile de vous assurer que votre concepteur Web ou d’autres administrateurs sont les seuls à créer des curseurs sur votre site (particulièrement utile si vous avez des auteurs invités sur votre blog).

La deuxième option que vous voudrez peut-être désactiver est la Activer les notifications option. Si vous utilisez une copie de Slider Revolution incluse avec un thème premium, vous verrez peut-être des avis «mettre à niveau» ou «saisir votre licence» quand cela n’est pas nécessaire. Désactivez simplement cette option pour masquer les notifications. Enregistrez ensuite vos paramètres.

Vous pouvez maintenant commencer à construire vos curseurs! Vous avez trois options – commencer à partir de zéro, attraper un fichier d’exportation gratuit à partir des «exemples d’utilisation» de Slider Revolution ou importer des exemples de curseurs inclus avec votre thème.

Importer un exemple de curseur

Slider Revolution Sample Sliders

Si vous choisissez d’importer un exemple de curseur à partir du exemples d’utilisation téléchargez d’abord le fichier de curseur à partir de leur site, puis revenez à votre WordPress en cliquant sur le Curseur d’importation option. À partir d’ici, recherchez l’exemple de fichier que vous avez téléchargé et cliquez sur Télécharger. Cela devrait ajouter l’exemple de curseur et tous ses paramètres afin que vous puissiez l’utiliser comme base pour un nouveau curseur.

Créer un nouveau curseur

Si vous créez un curseur à partir de zéro, cliquez sur le Nouveau curseur option. Commencez maintenant par le haut

Source de contenu Slider Revolution

Sélectionnez une source de contenu: choisissez la manière dont vous souhaitez ajouter du contenu à votre curseur. Vous avez le choix entre 11 sources de contenu, mais pour la plupart, vous souhaiterez sélectionner défaut option.

Slider Revolution Title & Shortcode

Ajouter un titre de curseur et un shortcode: Sélectionnez un nom pour votre curseur qui vous aidera à vous souvenir de son contenu ou de la page sur laquelle vous l’utilisez. C’est également là que vous trouverez le shortcode facile à insérer pour votre curseur dans les publications et les pages.

Type de révolution de curseur

Sélectionnez un type de curseur: Choisissez un type de curseur et sélectionnez un préréglage pour charger les préréglages inclus dans le plugin.

Disposition Révolution du curseur

Choisissez une disposition des diapositives: Sélectionnez la disposition et la grille de votre curseur (en pixels). Vous pouvez définir des tailles de grille personnalisées en fonction de la taille de l’écran, bien que le plein écran remplisse tout l’écran de votre navigateur. Quelle que soit l’option que vous choisissez, vous devrez ajouter une largeur et une hauteur de grille qui détermineront la taille de votre conteneur de calques.

Ensuite, faites défiler vers le haut de votre écran pour commencer à modifier les paramètres généraux de votre curseur.

Paramètres du curseur

À droite, vous verrez un tas d’options de curseur.

réglages généraux: Définir les options du diaporama, définir la durée par défaut de la diapositive (durée d’affichage d’une diapositive), modifier les transitions / animations et arrière-plans par défaut, activer la barre de progression (et modifier la position et le style), modifier les paramètres de la 1ère diapositive, activer la diapositive suivante sur la mise au point et désactiver le flou.

Mise en page et visuel: Modifiez les ombres, les superpositions, l’arrière-plan du curseur principal, activez une flèche de chargement, désactivez votre curseur sur mobile (ou sous des largeurs spécifiques) et sélectionnez une position de curseur sur la page.

La navigation: Personnalisez les options et les paramètres des flèches, puces, onglets et miniatures. Activez également la navigation tactile, le balayage, la navigation au clavier et le défilement de la souris.

Parallax et 3D: Activez la prise en charge de la parallaxe et / ou de la 3D et modifiez la sensibilité de la souris et les niveaux de profondeur de parallaxe.

Performance et référencement: Activer le chargement paresseux et surveiller les performances du curseur.

Gestion des problèmes: Activez les solutions de secours et résolvez les erreurs de curseur.

Google Fonts: Chargez des familles de polices Google personnalisées spécialement pour votre curseur (ajoutez les polices que vous souhaitez ou devez ajouter des couches de texte qui correspondent au reste de votre site Web à vos diapositives).

Importer / Exporter / Remplacer: Importez des modèles personnalisés, exportez votre curseur actuel pour le réutiliser sur un autre site Web et utilisez des options pour remplacer les URL dans votre curseur.

Fonctions API: Modifier les méthodes et les événements de l’API (nous vous recommandons d’ignorer cet onglet sauf si vous êtes un développeur avancé).

Liens rapides de Slider Revolution

Une fois vos sélections terminées, cliquez sur le bouton fichier vert en haut de l’écran pour enregistrer vos modifications. Après cela, cliquez sur le crayon bleu pour commencer l’édition des diapositives!

Ajouter ou modifier des diapositives

Ajouter ou modifier des diapositives de révolution de curseur

Vous pouvez maintenant commencer à ajouter vos diapositives. Il existe deux ou trois options de diapositives selon que vous partez de zéro ou utilisez un exemple de curseur: Couches statiques / globales, toutes les diapositives déjà créées et Ajouter une diapositive.

Couches statiques / globales sera vu comme une superposition au-dessus de toutes les diapositives que vous créez. C’est un excellent moyen d’ajouter un logo ou un filigrane, d’inclure un bouton “Acheter maintenant” pour votre produit ou même un lien pour vous abonner à votre newsletter.

Choisissez un sortie de la diapositive pour apporter des modifications à une diapositive que vous avez précédemment créée ou importée dans le cadre d’un exemple de curseur. C’est l’un des moyens les plus simples de démarrer avec Slider Revolution si vous êtes nouveau dans le plugin, car leurs exemples de curseurs montrent comment utiliser correctement les différentes fonctionnalités du plugin pour créer des curseurs impressionnants..

Cliquer sur Ajouter une diapositive pour commencer à créer une diapositive à partir de zéro.

Révolution du curseur: définir l'arrière-plan de la diapositive

Tout d’abord, utilisez le Contexte principal options pour sélectionner l’arrière-plan de votre diapositive: image, URL externe, transparent (remarque – si vous définissez un arrière-plan du curseur principal dans les paramètres généraux du curseur, il sera visible), couleur unie ou vidéo. Utilisez ensuite des options pour les paramètres de source multimédia, les filtres, le niveau de parallaxe (%) et Ken Burns (un effet de panoramique et de zoom animé) si vous souhaitez personnaliser davantage votre diapositive..

Révolution du curseur: définir les paramètres généraux de la diapositive

Passez ensuite au réglages généraux. C’est ici que vous pouvez définir un délai de diapositive si vous ne voulez pas que votre curseur soit animé dès son chargement, modifier les options de bouclage des diapositives ou ajouter une date d’expiration (idéal si vous créez un curseur pour un jour férié ou une promotion). Une autre fonctionnalité utile de cet onglet est la possibilité de définir votre État de la diapositive à non publié – de cette façon, vous pouvez continuer à modifier votre diapositive et à la prévisualiser sur le backend de votre site Web sans que la nouvelle diapositive ne soit visible par les visiteurs de votre site Web.

Si vous utilisez une navigation par vignettes pour votre curseur, le La vignette L’onglet offre des options pour sélectionner une image et des dimensions de diapositive personnalisées. Mais si vous avez choisi de ne pas utiliser ce style de navigation, vous pouvez ignorer cet onglet.

Révolution du curseur: définir l'animation des diapositives

Cela fait, vous pouvez passer au Animation de diapositives onglet pour personnaliser votre animation de transition de curseur. Il existe plus de 80+ animations parmi lesquelles choisir, ainsi que des options de rotation, de durée et d’accélération.

Revolution Slider offre également des options pour Lien et référencement réglages, Infos sur la diapositive (paramètres personnalisés et description) et Écraser la navigation pour ajouter des flèches de navigation, des puces ou des miniatures personnalisées spécifiquement à votre diapositive.

C’est le moment idéal pour cliquer dessus fichier vert icône en haut de l’écran pour enregistrer vos paramètres avant d’ajouter des calques et des styles à votre diapositive.

Ajouter des couches de diapositives

Révolution du curseur: ajouter des couches de curseur

Lors de l’ajout ou de la modification de diapositives, Slider Revolution regorge d’options et elles ne cessent de venir. Vous pouvez choisir parmi 8 différents Ajouter un calque options:

  • Texte / HTML les calques sont parfaits pour ajouter des titres, des descriptions ou même des liens. Ajoutez tout ce que vous voulez dire sur votre diapositive.
  • Images sont parfaits pour insérer votre logo, ajouter de la profondeur sur les diapositives de parallaxe, insérer des ensembles avant / après, etc..
  • L’audio & Vidéo les couches sont assez simples. Choisissez le média que vous souhaitez insérer et sélectionnez un fichier dans votre bibliothèque multimédia ou insérez un lien (YouTube, SoundCloud, etc.). Ajoutez ensuite des paramètres pour activer le bouclage, la lecture automatique, la diapositive suivante à la fin, le volume de base, le début / fin du segment et le préchargement. C’est un moyen facile d’ajouter de vrais témoignages à votre curseur, une vidéo d’introduction ou un tutoriel.
  • Bouton Les options de calque incluent 21 combinaisons de taille et de rayon de bordure pour lesquelles vous pouvez modifier la couleur, l’arrière-plan, la couleur de la bordure, l’icône, la police, l’état de survol et le texte. De plus, il existe un certain nombre de préréglages utiles pour les icônes de défilement de souris animées de liens sociaux, le menu hamburger ou même la lecture / pause.
  • Formes peut être utilisé pour ajouter des effets (comme pulser ou rayonner une couleur derrière un bouton), pour définir une partie d’un calque de texte (utilisez une forme pour mettre en surbrillance un seul mot ou une phrase) ou pour ajouter un intérêt visuel. Sélectionnez votre arrière-plan, la couleur / taille de la bordure, le rayon de la bordure de la forme (0 pour un carré, 100 pour un cercle), la taille de la forme en pixels et le remplissage.
  • Objet les calques peuvent être utilisés pour insérer un png, jpg, svg ou une icône de la bibliothèque de ressources gratuites de ThemePunch.
  • Importation pour copier un calque ou une diapositive à partir d’un autre curseur de votre bibliothèque. Rapide et simple!

Cliquez sur le bouton bleu «Ajouter une couche» pour commencer, puis utilisez les options pour vraiment personnaliser ou superposer.

Options de calque

Si vous regardez juste au nord de la section d’aperçu du curseur principal, vous devriez voir une barre blanche avec de nombreuses options que vous pouvez utiliser pour modifier et personnaliser vos calques lorsque vous les ajoutez..

Slider Revolution Layer Style

Utilisez le Style options pour modifier vos polices, couleurs et emplacement des calques. Cela inclut tout, depuis une police Google personnalisée, la taille de la police, la hauteur de la ligne, la couleur du texte, l’arrière-plan du calque, le rembourrage / la marge, la perspective, le survol, la bascule, etc..

Animation du calque Révolution du curseur

le Animation l’onglet est exactement comme vous vous y attendez – il contient une option pour ajouter et personnaliser les animations d’entrée et de sortie pour votre couche. Sélectionnez un modèle d’animation prédéfini, ajoutez une accélération et modifiez la durée de l’animation.

Boucle de couche Slider Revolution

Boucle les paramètres sont simples: laissez désactivé pour que votre calque se charge simplement avec l’animation que vous avez déjà sélectionnée, ou activez le bouclage en sélectionnant le type. Choisissez parmi pendule, rotation, sideloop, impulsion et vague pour donner à votre couche une animation en boucle constante.

Visibilité de la couche Slider Revolution

Les paramètres mobiles se trouvent sous Visibilité. De là, vous pouvez spécifier si un calque doit être visible sur des appareils spécifiques, caché sous une largeur définie ou n’apparaître qu’en vol stationnaire.

Comportement du calque Revolution Slider

Comportement comprend quelques bascules utiles pour personnaliser vos paramètres de calque. Le premier est un paramètre permettant d’activer la réactivité automatique des calques et la réactivité des éléments enfants. Par défaut, les calques des diapositives se rétrécissent à mesure que la fenêtre du navigateur se rétrécit, désactivez ces paramètres pour conserver la taille des calques. Vous pouvez également modifier l’alignement de votre calque et le décalage réactif à partir d’ici.

Actions de la couche Révolution du curseur

Utilisez le Actions onglet pour ajouter des paramètres de calque personnalisés sur clic, entrée de souris ou sortie de souris. Les actions incluent le défilement, la bascule, la lecture multimédia, la pause, l’accès en plein écran, la désactivation du son, etc..

Attributs du calque Revolution Slider

Pour les utilisateurs avancés ou les développeurs, le Les attributs La section peut être utilisée pour ajouter votre propre ID, classes et wrappers à cibler avec du code personnalisé.

Slider Revolution Layer Parallax / 3D

Et enfin, le Parallax / 3D propose un sélecteur déroulant pour choisir le “niveau” d’effet de parallaxe que vous souhaitez ajouter à un calque. Plus le pourcentage est élevé, plus votre calque bougera.

Temps de trame des calques

En passant, sous votre aperçu du curseur, vous devriez voir un calendrier. À partir de là, vous pouvez modifier le délai de l’animation de vos calques sur votre diapositive. Vous pouvez également voir un calendrier visuel montrant la synchronisation des couches par rapport à la durée totale de la diapositive. La section bloquée correspond au temps d’animation de votre calque et la barre de couleur plus claire correspond à la durée totale de visibilité de votre calque..

Slider Revolution Layer Timing

Pour modifier la durée globale de votre diapositive, cliquez simplement et faites glisser la balise bleue en haut à droite du tableau.

Une fois que vous avez ajouté plusieurs couches, vous pouvez également utiliser cette section pour réorganiser vos couches en modifiant le numéro de position, l’heure d’entrée ou en faisant glisser et en déposant les couches dans l’ordre. De plus, vous pouvez utiliser cette section pour lire votre diapositive afin de prévisualiser votre timing lorsque vous effectuez des modifications.

Enregistrez votre diapositive

L’étape la plus importante consiste à enregistrer votre diapositive! Assurez-vous d’enregistrer ou de mettre à jour votre diapositive après avoir apporté des modifications. Si vous vous éloignez de votre diapositive (même s’il s’agit d’une autre diapositive), vous risquez de perdre tout votre travail acharné. Veillez donc à enregistrer, enregistrer, enregistrer!

Après l’enregistrement, vous pouvez continuer et travailler sur d’autres diapositives ou curseurs.

Utilisation de votre curseur

Pour ajouter votre fabuleux curseur à n’importe quelle publication ou page, utilisez le shortcode Slider Revolution que vous avez créé précédemment. Ce shortcode peut être trouvé en cliquant sur l’élément de menu Slider Revolution dans votre tableau de bord. Le shortcode devrait ressembler à [alias rev_slider] en fonction de l’alias que vous avez donné au curseur lorsque vous l’avez créé pour la première fois.

Collez simplement le shortcode dans le contenu de votre article ou de votre page. Ou si votre thème prend en charge des emplacements de curseur supplémentaires, vous pouvez également y ajouter le shortcode. Certains thèmes WordPress incluent même des modules spéciaux pour le curseur. Par exemple, le thème WordPress polyvalent total comprend Slider Revolution et avec le générateur de page intégré, vous pouvez ajouter des curseurs à n’importe quel article ou page simplement en insérant un module Slider Revolution. Tout ce que vous avez à faire est d’ajouter le module, sélectionnez un curseur dans la liste déroulante (il affichera une liste de tous les curseurs que vous avez déjà créés), insérez, puis faites glisser et déposez le curseur en place. Droit facile?

Emballer

Nous pensons que Slider Revolution est l’un des plugins de curseur premium les plus faciles à utiliser, d’autant plus qu’ils offrent un certain nombre de modèles gratuits (et encore plus de modèles premium si vous achetez votre propre licence pour le plugin), un éditeur visuel facile à utiliser et des tonnes des fonctionnalités intégrées afin que vous n’ayez pas à connaître CSS pour styliser vos diapositives (les boutons, les polices, les couleurs et plus sont déjà là!). Il s’agit d’un solide 5 étoiles et à notre avis, vous aurez du mal à trouver un meilleur plugin de curseur.

J’espère que notre guide vous a aidé à vous guider tout au long du processus de démarrage, mais pour en savoir plus (ou pour récupérer votre propre copie), visitez la page principale de Slider Revolution de ThemePunch. Ils montrent d’excellents exemples de leur curseur ainsi qu’un lien vers les démos en direct où vous pouvez voir ce que Slider Revolution peut faire.

En savoir plus sur Slider Revolution

Mais nous aimerions avoir de vos nouvelles. Faites-nous savoir ce que vous pensez de Slider Revolution dans les commentaires ci-dessous, ou n’hésitez pas à nous poser toutes les questions que vous pourriez avoir. Nous sommes heureux de vous aider!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map