Slider Revolution : le guide ultime

Slider Revolution est littéralement l'un des plugins WordPress les plus populaires aujourd'hui. Avec plus de 400 000 ventes et une note moyenne de 4,75, le plugin a prouvé son efficacité et sa grandeur.

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

Slider Revolution a été développé par Themepunch. Ce plugin est un constructeur pour créer un contenu riche et dynamique pour les pages Web. L'accent est mis sur "dynamique", car il vous permet de créer des diapositives passionnantes en ajoutant du mouvement aux pages.

Le plugin est fourni avec un constructeur facile à utiliser et des tonnes d'options. Des packs de paramètres bien élaborés permettent à l'utilisateur d'ajuster chaque détail du curseur et permettent de travailler avec des types de contenu absolument différents. Des curseurs peuvent être créés pour des articles séparés, pour les pages entières et leurs petites parties. Pour être plus précis avec le plugin vous pouvez créer :

• curseurs d'image et carrousels
• curseurs de messages en vedette
• flux de médias sociaux
• galeries de médias
• blocs de héros et premières pages

Raisons pour lesquelles vous devriez utiliser Slider Revolution avec votre site Web

Vous ne pouvez pas vous tromper avec Slider Revolution. Un plugin complet avec des outils conviviaux est une solution parfaite pour créer de beaux curseurs, et voici les raisons pour lesquelles.

Plugin fourni

Aujourd'hui, presque tous les thèmes WordPress sont livrés avec un plugin Slider Revolution. Habituellement, le package de thème inclut la version gratuite du plugin. Le plugin fourni est limité à des fonctionnalités très basiques, mais il est néanmoins très pratique d'obtenir le thème avec le générateur de curseurs.

Cependant, si vous souhaitez accéder à de nombreuses fonctionnalités du plugin, vous avez la possibilité d'acheter le plugin indépendant. La licence régulière vous coûtera 29 $ et vous pouvez l'obtenir sur le marché Codecanyon.

Pour la licence étendue, vous devrez payer environ 150 $ et bénéficier d'un an de support technique pour seulement 9 $.

Oui, le plugin peut vous coûter de l'argent, mais vous pouvez toujours créer de superbes curseurs même avec la licence standard du plugin.

Modèles

Le plugin incroyable ne vous impressionnera pas seulement avec les outils et les fonctionnalités, mais il a également une collection de belles mises en page prédéfinies. Une merveilleuse collection de modèles prédéfinis et la bibliothèque d'objets multimédias gratuits que vous pouvez utiliser sur votre diapositive simplifieront et accéléreront la création de la diapositive. Vous pouvez sélectionner le modèle pour tous vos projets et au lieu de créer un curseur à partir de zéro, vous pouvez gagner du temps et continuer avec la mise en page prédéfinie.

Importez simplement le modèle que vous avez choisi et commencez à créer immédiatement.

En plus de cela, vous aurez accès à la grande bibliothèque gratuite de différents objets tels que les icônes de police, les images d'arrière-plan, les objets PNG transparents, SVG et autres. Vous pouvez les utiliser et les insérer facilement dans vos diapositives.

Éditeur visuel

Slider Revolution est fourni avec un incroyable éditeur WYSIWYG qui facilite la création et la modification de modèles de slider. De nombreux propriétaires de sites Web ont du mal à écrire des codes complexes ou à embaucher une équipe distincte pour cette tâche. Grâce à l'éditeur de diapositives, vous pouvez gagner du temps et profiter de la fonction glisser-déposer pour créer des diapositives exceptionnelles.

Le plugin Slider vous permet d'être plus créatif avec les sliders que vous créez et de les présenter facilement sur votre site Web. Vous aurez des tonnes d'options personnalisées comme la création d'un emplacement de curseur personnalisé, le choix du délai du curseur, l'ajout de transitions, l'ajout de couches multimédias, etc. cela peut être fait en un rien de temps en utilisant la liste déroulante. De plus, le plugin possède de nombreuses fonctionnalités de navigation qui vous permettent de modifier le style de navigation et d'ajouter des flèches, des puces, des onglets et des vignettes.

Performances à grande vitesse

Slider Revolution est bien codé pour se charger rapidement. Tous les aspects des curseurs sont optimisés et il utilise des options de débogage avancées pour résoudre tous les problèmes, charge automatiquement les fichiers principaux et s'adapte aux fonctionnalités utilisées. Il utilise également un chargement paresseux intelligent et est optimisé pour le référencement.

Mises en page réactives

L'un des plus gros problèmes rencontrés par de nombreux développeurs Web est que les curseurs manquent de réactivité. Par conséquent, ces curseurs ne fonctionnent pas bien sur les petits appareils ou ne s'affichent pas du tout. La réactivité est une composante essentielle de l'expérience utilisateur. Avec l'énorme quantité de trafic provenant des mobiles, il serait dommage que vos curseurs ne fonctionnent pas bien sur d'autres appareils.

Slider Revolution n'est pas qu'un simple curseur. Le plugin est réactif, donc quelles que soient les diapositives que vous créez, vous pouvez être sûr qu'elles seront optimisées pour l'appareil sur lequel elles seront utilisées.

Slider Revolution s'est assuré de définir les points d'arrêt réactifs pour chaque curseur, ce qui rend toute conception superbe sur différents appareils et petits écrans. Quelle que soit l'option que vous choisissez - curseur unique, carrousel ou standard, vous pouvez être sûr qu'il est parfait sur n'importe quel appareil.

Options de personnalisation

Un autre avantage du plugin Slider Revolution est ses diverses options de personnalisation. Vous pouvez définir des délais de diapositive, choisir des flèches de navigation, des arrière-plans de parallaxe, ajouter des couches multimédias, insérer des boutons, définir des polices personnalisées, ajouter des marges et bien d'autres.

Le plugin Slider Revolution vous permet de personnaliser n'importe quoi. Afin de gagner du temps, vous pouvez enregistrer des préréglages pour les utiliser ultérieurement dans les transitions de diapositives, les styles de police et les animations de calque.

Modules Slider Revolution

Envie de complexifier vos sliders et de les diversifier avec des effets de transition, des animations ?

Tu es prêt! Slider prend en charge différents types de contenu, comme les articles de blog et les articles actuels, il vous permet d'utiliser les flux de plateformes sociales comme Twitter, Facebook, Vimeo, YouTube et Instagram. Vous pouvez ajouter des liens, des vidéos, des images et du texte en un rien de temps. Avec l'aide de la fonction Variations, vous pouvez créer une diapositive riche en fonctionnalités et riche en informations que les visiteurs peuvent utiliser.

Sécurité

La sécurité est l'un des aspects les plus importants lorsqu'il s'agit de sites Web. Vous entendrez peut-être qu'il y a quelques années, la vulnérabilité de la guerre a été affectée par Slider Revolution. Depuis lors, Themepunch a renforcé la protection du logiciel et utilise désormais une organisation tierce pour auditer régulièrement les problèmes de plugin. Vous pouvez donc être sûr que le plugin est hautement sécurisé.

Soutien technique

Le plugin est livré avec la documentation détaillée et une grande section FAQ avec les questions les plus populaires sur le plugin. C'est pourquoi il est très facile de démarrer avec la révolution du curseur, même si vous n'avez aucune expérience de travail avec. La disponibilité des didacticiels détaillés simplifie la création de la diapositive du site Web pour tout le monde.

Sources de contenu

Le plugin gère avec succès la création de curseurs pour diverses sources de contenu. Qu'il s'agisse d'un produit WooCommerce ou d'un article commun, Slider Revolution a les outils.

Des fonctionnalités puissantes font de ce plugin un choix numéro 1 pour tout le monde. Son principal avantage est qu'il présente la catégorie d'une solution tout-en-un. Vous n'avez pas besoin de plugins supplémentaires, tout est à l'intérieur du plugin.

Nous devons également mentionner qu'il est abordable. La licence régulière vous coûtera 26 $. Compte tenu du nombre de fonctionnalités que vous obtenez pour le prix, Slider Revolution est le plugin de curseur le plus abordable du secteur.

Dans ce guide ultime, nous couvrirons tout, de l'installation du plugin à l'ajout d'une nouvelle diapositive et à son placement sur le site Web.

Installation du plugin et configuration principale

De nombreux développeurs de thèmes incluent Slider Revolution dans le package des thèmes.

Si vous avez acheté l'un des thèmes WordPress premium de StylemixThemes, vous n'avez pas besoin d'installer le plugin manuellement. Slider Revolution sera installé automatiquement avec l'importation de la démo.

Si le package du thème que vous utilisez n'inclut pas le plugin, vous devez le télécharger et l'installer manuellement. Pour obtenir une copie de Slider Revolution, suivez ce lien .

Vous devrez acheter le plugin. Connectez-vous à votre compte Envato et passez votre achat. Après cela, téléchargez le fichier - sélectionnez l'option de téléchargement pour "Fichier WordPress installable uniquement".

Vous devez maintenant ajouter un nouveau plugin à votre site. Accédez à votre tableau de bord — Plugins > Ajouter un nouveau . Une fois l'installation terminée, activez le plugin.

Félicitations, vous êtes prêt et vous pouvez commencer à créer votre premier slider !

Comment mettre à jour Slider Revolution

Themepunch publie des mises à jour régulières du plugin slider. Pour le mettre à jour, ouvrez Slider Revolution depuis votre tableau de bord et suivez l'onglet Mises à jour. Sur cette page, vous pouvez trouver une petite section avec le titre "Mises à jour des plugins". Il est précisé ici quelle version du plugin est actuellement installée sur votre site web et une version disponible pour mise à jour.

Vous pouvez également utiliser la méthode standard et accéder à Tableau de bord> Mises à jour et installer la nouvelle version du plugin à partir de là.

Slider Revolution : Premiers pas

Si vous utilisez le curseur pour la première fois, il se peut qu'il ne soit pas assez clair avec toute la terminologie qui y est utilisée. Il y a trois éléments principaux avec lesquels vous pouvez être confondu. Ce sont des modules, des diapositives et des calques. Chacun d'eux peut faire partie d'un autre ainsi que travailler individuellement.

Par exemple, vous pouvez créer un module conçu pour agir comme un curseur et il contiendra des diapositives. En plus de cela, vous pouvez créer des modules tels que des menus de navigation ou des en-têtes, qui ne sont pas du tout des curseurs, mais ils contiendront toujours des diapositives. La raison en est que Slider Revolution a été initialement créé en tant que constructeur de curseurs, mais il est maintenant également utilisé comme éditeur de site Web complet. Ainsi, avec l'aide de celui-ci, vous pouvez créer bien plus que de simples diapositives.

Relation entre les modules, les diapositives et les calques

Les modules sont des conteneurs pour les diapositives qui sont des conteneurs pour les calques.

Les modules existent pour contenir des diapositives. Chaque module doit avoir au moins une diapositive. Lorsque vous créez un module vierge, une diapositive vide est ajoutée automatiquement. Vous pouvez créer des diapositives supplémentaires ou tout ajouter à une seule diapositive. Cela dépend entièrement du type de contenu que vous créez.

La diapositive est un conteneur pour les calques. Chaque diapositive doit avoir au moins une couche. Lorsqu'une nouvelle diapositive est créée, un calque d'arrière-plan est ajouté automatiquement. Ce calque est toujours là, il peut être renommé et rendu invisible, mais il ne peut pas être supprimé. Cette zone d'arrière-plan peut être remplie de calques.

Les calques contiennent des éléments visuels, audio ou de mise en page et sont ajoutés aux diapositives. Le texte, le bouton, l'image, l'audio, la vidéo, le groupe et la ligne sont tous des types de calques. Chaque couche représente un seul média. Les calques peuvent être animés de la manière qui correspond le mieux à votre idée.

Comment utiliser Slider Revolution : paramètres globaux

Comme nous l'avons déjà mentionné, Slider Revolution a des tonnes d'options, et ce n'est pas une exagération. C'est pourquoi, avant de commencer à créer le curseur, nous vous recommandons de parcourir d'abord les paramètres globaux et d'apprendre les grands principes de l'utilisation du plugin.

Si vous cliquez sur Slider Revolution depuis votre tableau de bord, vous pourrez ouvrir l'écran de configuration du plugin.

Écran de configuration

En haut de l'écran, vous pouvez trouver l'onglet avec les options suivantes :

Modules, mises à jour, activation, actualités, globals, FAQ, support.

À ce stade, nous ne travaillerons qu'avec les deux modules : Modules - pour en créer un nouveau, et Globals - pour examiner les paramètres globaux du plug-in.

Paramètres globaux

Nous allons commencer par les Globals . Les paramètres globaux sont principalement divisés en plusieurs sections de :

• Général
• Points d'arrêt de la grille de mise en page par défaut
• Polices
• Divers

Ces paramètres sont responsables des options de grille réactive par défaut qui s'appliquent lors de la création d'un nouveau curseur, du chargement de polices personnalisées, de la création de bases de données, etc.

Il n'y a que plusieurs options sur lesquelles vous devrez vous concentrer. Tout d'abord, la réactivité, pour vous assurer que vos futurs curseurs s'affichent bien sur tous les appareils. Voici un guide rapide sur les appareils et leurs tailles.

Dans la section Point d' arrêt de la grille de mise en page par défaut , vous pouvez définir la largeur en pixels pour différents types d'appareils : ordinateur de bureau, ordinateur portable, tablette et mobile.

Tant que chaque appareil a sa propre taille, entrez la largeur exacte pour chaque type afin d'assurer l'affichage correct d'un curseur.

• Les moniteurs de bureau standard ont une largeur de 1920 pixels.
• Les appareils portables, qui incluent tous les ordinateurs portables, les MacBook et les tablettes orientées horizontalement, ont une largeur d'environ 1 600 pixels.
• Les tablettes orientées verticalement ont une largeur ne dépassant pas 778px (basé sur l'iPad).
• Et les appareils mobiles. C'est une partie importante, car de nos jours, plus de la moitié de tout le trafic Internet est généré via des appareils mobiles et il ne sera pas satisfaisant si les utilisateurs ne peuvent pas voir correctement les curseurs sur votre site Web. Cependant, cela peut être déroutant, et la raison en est que les smartphones modernes ont des tailles absolument différentes. Nous vous suggérons d'utiliser le nombre, pas au-dessus de 500px.

La deuxième chose que vous voudrez peut-être contrôler est l'accès au curseur. L' option Autorisation vous permet de refuser l'accès au plug-in aux autres utilisateurs, à l'exception des administrateurs et des éditeurs.

Vous pouvez maintenant commencer à construire vos curseurs ! Vous pouvez utiliser trois options. Vous pouvez commencer à partir de zéro et créer un nouveau curseur, vous pouvez exporter un fichier à partir des modèles Slider Revolution ou importer des exemples de curseurs inclus avec votre thème.

Dans notre article, nous examinerons la première option et créerons un nouveau curseur à partir de zéro. Cela nous permettra d'explorer plus de possibilités du plugin.

Création d'un nouveau curseur

Maintenant, lorsque nous avons terminé avec certaines configurations principales, nous pouvons procéder à la création d'une nouvelle diapositive. Ouvrez les paramètres de Slider Revolution et cliquez sur le nouveau module vierge.

Il vous sera proposé de parcourir le guide rapide. Cliquez sur Guide de démarrage si vous souhaitez suivre une courte leçon. Ou quittez le guide pour ignorer cette étape.

Votre écran sera divisé en plusieurs zones : à partir de votre gauche, il y a un cadre où tout le contenu est affiché, à partir de la droite — c'est un espace de travail avec des sections et des paramètres.

Options générales

Commençons par les Options générales . Cliquez sur l' icône d' engrenage pour ouvrir les paramètres. Tout d'abord, nous devons nommer notre module. Dans la section Titre , entrez le nom et dupliquez-le pour l'Alias ​​en minuscules et avec des tirets entre les mots au lieu d'espaces.

Un alias est nécessaire pour ajouter le curseur à une page. Vous pouvez également utiliser le shortcode fourni en le copiant et en le plaçant sur la page ou la publication sur laquelle vous souhaitez afficher votre slider.

Après cela, nous pouvons personnaliser le type et la hauteur et la largeur de la zone de couche du bureau. Ces paramètres se trouvent sous l'onglet Mise en page.

Pour le type , vous avez le choix entre trois options :

• Curseur - plusieurs diapositives animées qui tournent pour s'afficher une par une.
• Scène - une seule diapositive pouvant être utilisée comme module de contenu.
• Carrousel - de nombreuses diapositives avec plusieurs visibles en même temps.

Le paramètre suivant que nous devons spécifier est le dimensionnement. Trois options sont également disponibles :

Auto - c'est le paramètre par défaut qui étend votre curseur à la largeur du conteneur principal tel que défini par votre thème WordPress.

Pleine largeur - une option de curseur pleine largeur s'étend de gauche à droite (vous devez toujours définir la hauteur)

Plein écran - pour les grands curseurs remplissant tout l'écran, quelle que soit la taille de votre navigateur ou de votre appareil.

Avec le plugin Slider Revolution, vous pouvez animer chaque partie de la page du site Web. Veuillez tenir compte du fait que le poids de votre page augmentera et que le chargement de votre page prendra plus de temps. En conséquence, cela peut affecter négativement le classement SEO.

Paramètres de redimensionnement

Le redimensionnement classique ou linéaire garantit que votre curseur se comprimera en conséquence après avoir configuré les paramètres de taille de votre écran principal (par exemple, un curseur de 1000x400px se comprimera en un curseur de 500x200px avec les polices, les images et les autres éléments du curseur).

L'héritage intelligent permet la création automatisée de tailles d'appareils en fonction des paramètres de bureau que vous choisissez, avec la possibilité de les ajuster.

La configuration personnalisée ou manuelle vous permet de définir la taille de votre curseur à l'aide de pixels exacts, avec la possibilité de définir les tailles de curseur à différentes largeurs d'écran - ordinateur de bureau, ordinateur portable, tablette et téléphone.

Réactivité des slides

Passons à autre chose. Nous n'en avons pas encore fini avec la réactivité. Il existe une taille de zone de calque dans laquelle vous pouvez spécifier la largeur du navigateur.

Habituellement, les options sont définies par défaut sur Tailles automatiques et seuls les paramètres du bureau sont spécifiés. Vous pouvez faire de même pour les autres options en les activant.

De plus, si vous allumez l'appareil spécifique, votre zone de travail (conteneur de diapositives) sera ajustée aux paramètres de l'appareil sélectionné, ce qui signifie que vous pouvez contrôler l'affichage du curseur pour l'appareil concret.

Pour chaque appareil, il y aura des tailles de grille spécifiées à partir des paramètres globaux. La grille est la zone dans laquelle se trouvent vos calques de curseur. Il n'y a pas de chiffres stricts que vous devez entrer. Vous découvrirez ce qui vous convient le mieux après avoir essayé et exploré plusieurs options.  

Ce n'était que le début, quelques options générales qui faciliteront votre travail ultérieur avec le curseur. Et une fois que vous avez terminé avec cette partie, vous pouvez passer à l'étape suivante.

Zoom sur les options

Outre les options générales, il existe trois autres onglets avec lesquels vous interagirez beaucoup. Nous voulons vous guider à travers les principaux paramètres avec lesquels vous travaillerez. Fondamentalement, la création des diapositives prend en compte plusieurs composants impliqués dans le processus. Il s'agit des options générales, des paramètres de navigation, des options de diapositive et des calques.

Nous ne plaisantions pas en disant que Slider Revolution a des tonnes d'options. Il y a trop d'éléments à couvrir, décrivons-les tous légèrement, puis passons en revue de manière plus détaillée les plus importants.

1. Options générales

Nous avons déjà abordé certains éléments des options générales comme le titre et la mise en page. Cependant, en plus de cela, il y a d'autres choses que vous devez ajuster.

Dans l'ensemble, les options générales vous permettent de configurer les éléments suivants :

Titre — pour fournir le nom du curseur.
Disposition — sélectionnez le type de curseur (curseur, scène ou carrousel) et la taille (auto, pleine largeur ou plein écran). Cela permet de modifier les largeurs et les hauteurs de la zone de calque, la position de votre module, une couleur ou une image d'arrière-plan par défaut, etc.
Contenu — identifie la manière d'ajouter le contenu au curseur. Vous pouvez choisir parmi 9 sources de contenu.

• Valeurs par défaut - ici, nous vous suggérons de vous concentrer sur un paramètre important - la durée de la diapositive (combien de temps durera chaque diapositive).
• Général - cette section comprend les paramètres du diaporama pour la rotation automatique, l'arrêt au survol, la lecture en boucle des diapositives et la sélection d'une première diapositive désignée. Ici aussi, vous pouvez masquer ou désactiver votre curseur sur mobile ou sous des largeurs de pixels spécifiées.
• Sur le défilement - celui-ci permet aux utilisateurs de sélectionner des effets de défilement tels que la parallaxe, les profondeurs 3D, la chronologie, le fondu, le flou, les niveaux de gris, etc. Tous les effets vont avec des paramètres personnalisables.
• Spinner - ou préchargeur, et le plugin propose 15 options de spinner parmi lesquelles choisir.
• Les options avancées vous permettent d'activer le chargement différé, de sélectionner une image de secours ou de simplifier votre curseur sur les anciens navigateurs.
• CSS/jQuery - ici, vous pouvez ajouter votre propre code personnalisé aux curseurs. Notez que celui-ci est préférable d'être utilisé par des professionnels ou des utilisateurs familiers avec le concept de programmation et de codage.
• En tant que modal - cette option particulière est nécessaire si vous souhaitez créer un curseur qui apparaît sous forme de fenêtre contextuelle ou de lightbox et vous fournit les options de position du curseur, de couleur de couverture et de code abrégé à utiliser lors de l'insertion de votre curseur modal dans les pages.
• Peau - la peau présente le préréglage que vous pouvez créer et attribuer aux calques de texte (spécifie la couleur de la surbrillance, de l'en-tête, du texte du contenu).

Addons - vous trouverez ici des addons (remarque - les addons ne sont disponibles que si vous avez acheté votre propre licence de slider).

2. Options de navigation

Si vous prévoyez d'inclure plusieurs diapositives, les options de navigation vous aideront à ajouter des outils de navigation au curseur, tels que des puces, des flèches et des boutons.

Toutes les options incluent des paramètres faciles à personnaliser pour la position/l'alignement, le dimensionnement, la visibilité et le style/les préréglages globaux.

Les éléments de navigation incluent :

• Progression — barre ou cercle de progression qui visualise la progression de la diapositive en cours.
• Flèches - permettent aux visiteurs de cliquer facilement sur vos diapositives.
• Puces — 14 styles de points de navigation à ajouter à votre diapositive.
• Onglets - très utiles pour les curseurs de contenu où la navigation par onglets est nécessaire.
• Miniatures — est nécessaire pour afficher une image miniature comme option de navigation. Il y a 5 options disponibles.
• Taille précédente — spécifie la taille de l'image d'aperçu.
• Tactile — comprend des options pour le défilement des blocs, la vitesse et la direction.
• Clavier — vous pouvez activer la navigation au clavier (recommandé pour l'accessibilité).
• Souris — active le contrôle de la souris comme une fonction carrousel ou un défilement inversé.
• Éditeur de navigation - cette section permet de personnaliser les flèches, les puces, les onglets ou les vignettes avec votre propre code personnalisé.

3. Options de diapositive

La partie suivante des paramètres est liée aux options de diapositive.

• Arrière-plan : choisissez l'arrière-plan de votre diapositive. Choisissez entre transparent, coloré (vous pouvez ajouter un dégradé), image, image externe ou vidéo (YouTube, Vidéo ou HTML5).
• Vignette : Définissez la vignette visible par l'administrateur et la vignette utilisée pour la navigation.
• Animation : choisissez l'animation de transition pour vos diapositives.
• Filtres - 22 filtres différents à ajouter à vos diapositives.
• Progression — permet de personnaliser la longueur, la pause et la visibilité d'une diapositive.
• Règles de publication — contrôlez si votre diapositive est publiée ou non.
• Balises et lien - permet d'ajouter des données personnalisées de classe, d'ID et HTML pour votre diapositive ainsi qu'un lien.
• Paramètres - ajoutez jusqu'à 10 paramètres personnalisés à utiliser dans vos diapositives et votre navigation.
• Calques de boucle - gérez les paramètres de boucle si votre curseur n'a qu'une seule diapositive.
• Sur défilement - personnalisez vos effets de parallaxe et de défilement par diapositive.

Ajout de nouvelles diapositives

Une fois que vous avez terminé de définir le curseur et de régler toutes les options, il est temps d'ajouter une nouvelle diapositive au projet. Vous pouvez voir le cadre, qui affiche le contenu de la diapositive lorsque vous l'ajoutez. Maintenant c'est transparent. Vous pouvez modifier l'option d'arrière-plan et ajouter une image ou définir la couleur.

Vous pouvez télécharger une image depuis votre ordinateur ou utiliser une source externe (en ajoutant un lien). En outre, vous pouvez définir la couleur comme arrière-plan au lieu d'une image. Cela peut être fait assez facilement.

Sélectionnez simplement l'option Couleur dans la liste déroulante Type du panneau Source, puis cliquez sur le bouton Couleur BG pour choisir votre couleur. Si vous souhaitez utiliser la vidéo, ajoutez simplement la source.

Ajout d'un nouveau calque à la diapositive

En haut de l'écran, vous trouverez l' option + Ajouter une couche . Utilisez-le pour ajouter un nouveau calque à la diapositive. Il y a 8 options différentes.

Les options les plus populaires, cependant, sont les images et les textes avec le support des boutons si vous avez besoin d'ajouter des outils de navigation au curseur.

Options de calque : comment utiliser

La flexibilité de Slider Revolution repose sur la disponibilité de plusieurs options et la possibilité de configurer chaque détail séparément ainsi que d'ajuster l'ensemble du projet de curseur. Les calques ne font pas exception. Chaque fois que vous ajoutez un nouveau calque à la diapositive, vous pouvez contrôler toutes ses options. Dans l'exemple de l'ajout d'une nouvelle image à la diapositive, nous passerons en revue tous les paramètres que les options de calque vous permettent de modifier.

Lorsque vous souhaitez ajouter un calque d'image à votre diapositive, cliquez simplement sur Image dans la liste déroulante Ajouter un calque . Téléchargez ensuite l'image souhaitée.

À côté du cadre, vous trouverez diverses options de calque (contenu, style, taille et position, etc.).

Le contenu de la couche affiche des informations de base sur la couche. Vous pouvez définir le chargement différé et modifier son type de source.

En utilisant les options de style de calque , vous pourrez ajouter un arrière-plan de couleur.

L'option suivante est l ' Espacement . L'espacement nous aide à déplacer le calque de haut en bas, de gauche à droite, de bas en haut et de gauche à droite. Ils sont marqués de la lettre 'M'.

Position et taille. Définissez l'alignement ainsi que la position et la taille du calque d'image. L'alignement vertical et horizontal peut être modifié facilement, il suffit de cliquer sur l'une des icônes d'alignement.

Après cela, vous pouvez définir la position avec les options de décalage vertical à partir de la position alignée. Jouez avec les paramètres X et Y pour déplacer votre calque sur la diapositive.

Options avancées de calque

Les options de style avancé vous permettent de faire pivoter un calque horizontalement, verticalement et centralement et vous permettent d'ajouter des ombres aux calques.

Options d'animation de calque

L'animation est l'option principale de Slider Revolution. L'idée principale du plugin est d'ajouter à votre site des éléments animés au lieu de visuels statiques et standard.

Les options d'animation ajoutent du mouvement à vos diapositives, en utilisant cette action, vous pouvez animer les diapositives et définir des animations d'apparition et de sortie.

Il y a deux lignes pour les options d'apparition et de sortie : IN et OUT.

Chaque ligne est fournie avec un menu déroulant avec différents types d'animations. Par défaut, l'option de fondu d'entrée est définie pour tous les calques. Essayez quelques animations pour voir à quoi cela ressemble sur votre diapositive et choisissez la meilleure.

La section ci-dessous est utilisée pour Animation Duration, Animation Easing et pour définir l'animation Start . La durée définit le temps qu'il faut pour que l'animation se termine, l'option Démarrer définit la durée après laquelle l'animation commencera une fois la diapositive chargée. L'accélération définit la vitesse à laquelle l'animation progressera.

Chronologie des animations

Si plusieurs calques sont ajoutés à votre diapositive, vous ne souhaitez probablement pas qu'ils apparaissent tous en même temps. La chronologie de l'animation Slider Revolution peut vous aider à résoudre ce problème. Il est situé juste en dessous de notre cadre de travail.

Le début de trame par défaut pour chaque calque est défini sur 0 milliseconde, ce qui signifie que les calques apparaîtront à l'écran après 0 milliseconde de chargement. La durée d'apparition est généralement fixée à 3 secondes, ce qui signifie qu'un calque devient entièrement visible en 3 secondes. Pour modifier les options, choisissez le calque et modifiez-le en spécifiant une valeur différente.  

Assurez-vous de définir des valeurs différentes pour différents calques, afin qu'ils n'apparaissent pas en même temps et qu'ils aient l'air désordonnés.

Maintenant, regardons de plus près les options de Timeline

1.Vue de liste

Ces icônes peuvent être utilisées pour masquer ou afficher les calques et masquer ou afficher les lignes en fonction de l'alignement vertical. Seul l'administrateur du site a accès à ces options.

2. Durée de la chronologie
La durée totale de la chronologie est définie dans Options générales du module > Valeurs par défaut. En outre, il peut être défini individuellement dans Options des diapositives > Progression.

En faisant glisser le bloc dans la chronologie vers la gauche et vers la droite, vous pouvez facilement ajuster la longueur de la diapositive. Une autre option que vous pouvez faire est de cliquer sur l'icône de l'horloge et de la modifier en pourcentage.

3. Chronologie de l'aperçu

Pour prévisualiser la chronologie, vous devez cliquer sur l'icône de lecture ou simplement faire glisser le bloc inactif.

4. Renommer les calques

Pour renommer le calque, double-cliquez sur le texte du calque dans la chronologie et renommez-le. Vous pouvez également modifier le titre du calque en haut au centre de l'éditeur.

5. Calques z-index / Ordre d'empilement

Pour définir l'ordre z-index/empilement, il vous suffit de faire glisser les calques dans la chronologie.

6. Animations

Pour chaque calque, il existe une animation d'entrée et de sortie et des animations d'images clés supplémentaires. Toutes les animations sont présentées dans la chronologie.

Faites glisser un bloc d'animation pour ajuster le point de départ de l'animation dans la chronologie. Et modifiez la durée de l'animation en faisant glisser l'extrémité du bloc

Options de boucle de calque

L'onglet Boucle vous permet de créer des animations en boucle. Vous pouvez choisir un type d'animation, définir la vitesse et l'accélération de la boucle, et définir une heure de début et de fin pour la boucle.

Vous pouvez choisir parmi 8 types : Personnalisé, Boucles pendulaires, Boucles d'effets, Vague, Ondulations, Rotation, Glisser et survoler et Impulsion. Chaque animation de boucle a son propre ensemble d'options.

Le pendule fait osciller votre calque d'un côté à l'autre. Parmi les options que vous pouvez configurer, il y a le degré de fin et de début - cela identifie les degrés entre lesquels l'animation se produira, et le point d'origine X et Y - ce paramètre détermine le point d'axe à partir duquel le calque tournera, vous pouvez le spécifier dans pourcentages.

Les boucles d'effets vous permettent de choisir parmi plusieurs options - Niveaux de gris, Clignotement, Flattern et Lithing. Tous les effets ont un aspect différent, nous vous recommandons donc d'examiner chaque option pour choisir celle qui vous convient le mieux.

L' animation Vague fait tourner votre calque dans un mouvement similaire à la vague. Il tourne autour d'un axe extérieur au calque. Vous pouvez définir un point de rotation X et Y pour déterminer la position de l'axe autour duquel le calque tournera, un angle de départ pour identifier la position de départ de l'animation et un rayon pour l'orbite de la rotation.

La boucle Wiggle fera bouger votre calque d'un côté à l'autre - de haut en bas, de gauche à droite et vice versa. Utilisez le menu déroulant pour choisir l'option que vous aimez.

La boucle Rotation fait tourner votre calque autour du point d'axe défini. Le calque tournera et fera un cercle complet si vous choisissez le premier élément de la liste déroulante Rotation - l'élément Rotation.

Pour faire bouger votre calque de gauche à droite, de droite à gauche, de haut en bas, en diagonale, vous pouvez utiliser l'animation Slide and Hover. Vous pouvez définir une position de début et de fin pour l'animation.

L' animation Pulse permet à votre calque d'effectuer un zoom avant et arrière en continu. Spécifiez le début du zoom et la fin du zoom. Les valeurs par défaut ici sont 1 pour le début et la fin. Cela signifie que la couche restera à 100% de sa taille. En d'autres termes, il ne s'animera pas. Si vous entrez 0,5 pour le début du zoom, votre calque commencera à 50 % de sa taille et zoomera à 100 % de sa taille, puis reviendra à 50 %, etc.

Options de survol de calque

Les effets de survol sont les bases d'une bonne UX. Les effets de survol indiquent généralement que l'action est requise ou effectuée, d'autant plus que cette méthode est activement utilisée avec les curseurs. Avec Slider Revolution, vous pouvez modifier les calques, les textes et les images au survol.

Ajout d'effets de survol dans Slider Revolution

Tout d'abord, vous devez activer le survol du calque. Sélectionnez le calque auquel vous souhaitez ajouter l'effet et cliquez sur Survoler sous Options de calque. Cliquez sur Activé pour l'activer.

En dessous, vous trouverez toutes les options dont vous avez besoin pour définir le comportement de votre calque au survol. Si vous laissez tout tel quel, le calque ne montrera aucun changement.

Paramètres de survol

La première chose que vous pouvez définir ici est le curseur. Dans le menu déroulant, vous pouvez trouver différentes options pour le curseur. Auto et Par défaut remplissent les mêmes fonctions et ne refléteront aucune différence. Le réticule et le pointeur définissent la forme du curseur de votre souris à l'écran.

Il y a encore plus de styles de curseur ici. Certains d'entre eux sont assez inhabituels, cependant, la plupart d'entre eux indiquent l'action que la couche a lorsqu'elle est déclenchée. Par exemple, si vous liez la couche au centre de support, vous pouvez choisir le curseur d'aide.

Pointer Event par défaut est défini sur Auto. L'option Aucun est utilisée lorsqu'il n'y a pas de contenu lié. Cette section vous permet de choisir l'apparence du curseur lors du survol du calque, d'activer l'animation et de la configurer.

Animation de survol

Ensuite, il y a une animation de survol que vous pouvez définir en fonction de vos préférences. Il y a plusieurs choses dont vous devez être conscient. Tout d'abord, cela n'a pas l'air bien lorsque le calque change au survol et que la transition se produit à un moment donné. Toujours mieux quand la transition se fait avec du retard. . Par défaut, le délai est fixé à 300 ms, laissez-le ainsi si cela vous convient, ou modifiez la valeur.

Vous pouvez également définir l'accélération de la transition. Vous avez le choix entre plusieurs options.

Filtre

À votre couche, vous pouvez ajouter un filtre. En d'autres termes, vous pouvez brouiller la lyre dans une certaine mesure. L'option est exprimée en pixels. Plus la valeur est élevée, plus le flou est "épais".

Style

Il existe également une partie Style où vous pouvez configurer la couleur d'arrière-plan et ajuster la bordure, à savoir changer leur couleur et sélectionner le style de bordure.

Sur les options de calque de défilement

Les options de défilement permettent à la diapositive de se déplacer sur le défilement de la souris. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Comment créer un effet de parallaxe avec la révolution du curseur

La parallaxe est l'un des effets les plus populaires qui rend le site Web plus impressionnant et dynamique. Vous avez probablement vu de nombreux sites Web et thèmes intégrés avec cet effet particulier. Et maintenant, nous allons montrer comment vous pouvez en créer un vous-même en utilisant le plugin Slider Revolution.

Qu'est-ce que la parallaxe ?

L'effet de parallaxe peut être défini comme un effet où les éléments en arrière-plan et les éléments au premier plan se déplacent à des vitesses différentes et créent l'illusion de profondeur. Habituellement, les éléments de l'arrière-plan se déplacent plus lentement

Il existe différentes façons d'obtenir cet effet sur votre site Web. Heureusement pour nous, le Slider Revolution possède toutes les fonctionnalités pour vous aider à obtenir l'effet de parallaxe.

Créer une parallaxe dans Slider Revolution

Activez d' abord la parallaxe . Accédez à Module General Options > On Scroll > Scroll Based Features > Parallax et réglez le commutateur Parallax Enabled sur On .

Il existe de nombreuses valeurs de profondeur différentes proposées par le plugin. Sélectionnez celui qui vous convient le mieux. Vous pouvez également entrer vos propres valeurs.

Ajout de parallaxe aux images d'arrière-plan

Pour ajouter l'effet de parallaxe à votre image d'arrière-plan, accédez à Slide Options > On Scroll > Parallax & 3D Settings et choisissez la profondeur préférée dans la liste déroulante.

Il existe des règles strictes lors de la sélection de la profondeur. Il est préférable d'essayer différentes valeurs et de voir laquelle fonctionne le mieux avec votre curseur. Différentes profondeurs affectent directement et créent différents effets. C'est pourquoi nous vous recommandons de les essayer pour voir le résultat.

Ajout de parallaxe aux calques

Dans Slider Revolution, l'effet de parallaxe peut être ajouté non seulement aux images d'arrière-plan, mais également aux calques individuels. Ce qui est génial avec cet effet, c'est qu'il donne aux utilisateurs une illusion s'ils contrôlent les parties du curseur sur la page simplement en déplaçant leur souris. Cela a l'air vraiment sympa sur le site Web et en plus, c'est très facile à mettre en place.

Sélectionnez votre calque, accédez à l' onglet Options de calque > Sur défilement > Parallaxe et 3D et choisissez le niveau de profondeur souhaité.

En conséquence, vous obtiendrez le calque avec parallaxe qui s'active lors du mouvement de la souris.

Qu'il s'agisse d'une image d'arrière-plan ou d'un calque individuel, l'ajout de l'effet de parallaxe Slider Revolution est extrêmement simple. Bien que tous les curseurs n'aient pas besoin de parallaxe. Utilisez-le principalement pour les curseurs simples, car les curseurs dynamiques avec beaucoup d'animation s'en sortiront probablement mieux sans cet effet.

Ajout d'un calque de bouton

Avec Slider Revolution, vous pouvez créer et concevoir le bouton à ajouter à votre curseur pour la navigation. Pour ce faire, nous devons d'abord ajouter un calque de bouton au cadre de travail du curseur.

Lorsque vous ajoutez le bouton, il apparaîtra sous forme de texte, il vous suffit de le personnaliser. Sur le côté droit de l'écran, vous pouvez trouver de nombreuses options pour les boutons prédéfinis. Vous pouvez en sélectionner un pour votre bouton.

De plus, vous pouvez opter pour quelque chose d'original car il existe des variantes de boutons de lecture, de commutateurs et autres. En outre, il est possible d'ajouter un effet d'ombre et de rendre le bouton plus intéressant.

Une fois que vous avez choisi le style, vous pouvez modifier les paramètres avancés et personnaliser son apparence. Tous les paramètres se trouvent sous l'onglet Options de calque.

Vous pouvez modifier l'apparence initiale du bouton, modifier le texte, modifier son affichage au survol et configurer des animations.

Comment rendre Slider Responsive

Au tout début, nous avons déjà configuré certains paramètres pour rendre nos diapositives réactives. Ce n'est pas suffisant. Pour cela, vous devez également vous assurer que chaque couche de chacune de vos diapositives s'adapte de manière transparente à tous les appareils et tailles d'écran.

Ainsi, une fois que vous avez ajouté toutes vos diapositives et couches à votre curseur, il est temps de les ajuster pour tous les autres appareils disponibles.

Lorsque vous modifiez des diapositives dans le cadre de travail, vous les configurez principalement pour qu'elles s'affichent correctement sur les appareils de bureau. Lorsque vous êtes certain que tout semble parfait sur le bureau, vous pouvez commencer à jouer avec les mises en page pour d'autres appareils.

Vous pouvez maintenant choisir l'appareil que vous souhaitez émuler dans la liste déroulante. Allumez l'appareil dont vous souhaitez vérifier l'affichage du curseur. Les appareils disponibles sont : ordinateur de bureau, ordinateur portable, tablette, mobile.

Vous pouvez tout modifier pour chaque appareil. Par exemple, pour les calques de texte, vous pouvez définir différentes tailles de police, hauteur de ligne, épaisseur de police et couleur, le tout en fonction de l'appareil sur lequel votre curseur est affiché. Pour le calque d'image, afin de changer la taille de celui-ci, vous devez ajouter une largeur différente et la hauteur de l'image sera ajustée automatiquement en fonction de la largeur.

Faites attention aux bordures bleues de la grille. Ceux-ci définissent les bords de l'appareil avec lequel vous travaillez actuellement. Ainsi, si l'un de vos calques s'étend en dehors des bordures, assurez-vous de modifier les paramètres de ces calques.

Enfin, enregistrez votre curseur et vérifiez à quoi il ressemble en direct.

Ajout du Slider à la page

Vous avez fait du bon travail et il est maintenant temps de voir à quoi ressemble votre curseur sur la page. Pour ce faire, utilisez le shortcode Slider Revolution que vous avez créé précédemment. Ce shortcode se trouve sous l'onglet Titre de la section Options générales.

Ou si vous ouvrez Slider Revolution depuis votre tableau de bord. Recherchez le module actuel et sélectionnez l'option Intégrer.

Dans la fenêtre contextuelle, sélectionnez l'option Pour les pages et les publications et copiez le shortcode.

Le shortcode devrait ressembler à [rev_slider alias="title"][/rev_slider] avec le "title" basé sur l'alias que vous avez donné au slider.

Affichage du curseur avec Elementor

L'utilisation de la méthode du shortcode pour afficher le curseur sur la page est assez simple. Cependant, il existe un moyen qui pourrait être encore plus simple. Tous les curseurs que vous créez avec le plugin Slider Revolution peuvent être insérés sur la page à l'aide du widget Elementor. Sélectionnez la page sur laquelle vous souhaitez afficher le curseur et ouvrez-la via l'éditeur Elementor. Ensuite, faites simplement glisser et déposez l'élément sur le cadre de travail. Dans le panneau des widgets, recherchez le widget Slider Revolution 6 et ajoutez-le à la page. Lorsque vous faites glisser le widget, vous devrez choisir le curseur que vous souhaitez utiliser.

Utilisez cette méthode comme alternative au shortcode, car certains propriétaires de sites Web trouvent plus facile de travailler avec des widgets de création de pages.

Comment exporter des curseurs

Pour exporter le curseur, accédez à Slider Revolution en cliquant sur l'onglet correspondant dans le menu de votre tableau de bord. Tous les curseurs que vous avez importés ou créés y seront affichés.

Passez la souris sur la vignette du module que vous souhaitez exporter. Cliquez sur la petite flèche dans le coin inférieur droit. Parmi toutes les options apparues, sélectionnez Exporter et cliquez dessus.

Vous verrez la boîte de dialogue de confirmation qui vous informera que l'exportation peut prendre un certain temps. Cliquez sur "Oui, exporter le curseur" et le téléchargement commencera. Une fois le téléchargement terminé, vous aurez un fichier .ZIP de votre slider.

De conclure

Presque tous les thèmes développés par StylemixThemes incluent le plugin Slider Revolution dans le package. Nous aimons ce logiciel puissant qui nous donne la possibilité de rendre les sites Web plus attrayants, attrayants et interactifs.

Nous espérons que notre guide a aidé à mieux comprendre le processus de construction du slider avec ce plugin incroyable. Si vous cherchez plus d'informations, veuillez suivre la page principale de Slider Revolution.