Saviez-vous qu’un site web intuitif et ergonomique est susceptible d’augmenter les taux de conversion ? C’est pourquoi l’UX, expérience utilisateur, joue un rôle tellement important de nos jours. 

Pour cela, les sliders sont des outils utiles à la fois pour la navigation, mais surtout pour faire une bonne première impression aux visiteurs. 

Par conséquent, cet article va s’occuper d’un élément essentiel de la page d’accueil : le slider. Créé avec un plugin comme Slider Revolution WordPress, il se trouve dans la plupart des cas juste après le menu de navigation.

Créé avec un plugin comme Slider Revolution WordPress, il se trouve dans la plupart des cas juste après le menu de navigation. 

En effet, il s’agit du deuxième élément, après le menu de navigation, avec lequel les visiteurs entrent en contact, et son impact sur leur décision de continuer la visite est considérable. Un bon slider pour continuer à capter l’attention du visiteur fait toute la différence.

Vous ne devez donc pas négliger sa création et je me charge de vous guider « pas à pas » durant tout le processus. Par ailleurs, n’hésitez pas à consulter la vidéo qui accompagne cet article et qui vient appuyer les étapes qui y sont décrites.

Le slider Revolution

Aujourd’hui, je vous présente dans ma vidéo comment faire pour créer et paramétrer un slider revolution. Je vais le faire dans le cadre de ma création de site web pour mon agence SEO Twaino :

Qu’est ce qu’un slider revolution ?

Un slider est une fonctionnalité grâce à laquelle il est possible d’afficher diverses informations en boucle ou pas. Ces informations peuvent se composer de textes, d’images, de vidéos, de liens… et sont regroupées par « slide ».

Ainsi, un slider peut comprendre un seul ou plusieurs « slides » dont les éléments multimédias peuvent être animés ou interactifs pour réagir aux actions des utilisateurs.

Plusieurs outils sont disponibles pour créer un slider, mais nous allons nous servir de « Slider Revolution » dans ce guide. Il s’agit en réalité d’un plugin premium WordPress très puissant et très populaire avec plus de 4 millions d’utilisateurs.

Pourquoi choisir Slider Revolution plutôt qu’un autre plugin ?

Il existe des dizaines de plugins de diaporamas WordPress sur le marché. Alors pourquoi choisir le plugin « Slider Revolution » ? Voici les fonctionnalités qui le distinguent des autres solutions.

Tout d’abord, Slider Revolution pour WordPress propose un éditeur visuel « glisser-déposer » extrêmement complet. 

Contrairement à d’autres plugins qui se limitent à une simple fonctionnalité de carrousel d’images, Slider Revolution vous permet de créer de véritables compositions visuelles comprenant des calques de texte, des boutons, des images et même des vidéos, le tout avec des animations pouvant être réglées à la milliseconde près.

En plus, ce plugin Revolution Slider pour WordPress comprend une bibliothèque de modèles prédéfinis. Si vous manquez d’inspiration ou de temps, vous pouvez partir d’un modèle professionnel et le personnaliser pour l’adapter à l’identité visuelle de votre entreprise. Cela vous permet de gagner un temps considérable, surtout si vous débutez.

Troisièmement, la compatibilité est un véritable atout. Slider Revolution fonctionne avec la plupart des thèmes WordPress les plus populaires, tels qu’Avada, BeTheme, Flavor et Flavor. De plus, il est souvent inclus gratuitement dans ces thèmes, vous n’avez donc pas besoin de l’acheter séparément.

Pour finir, des mises à jour sont régulièrement proposées. L’équipe à l’origine du plugin ajoute sans cesse de nouvelles fonctionnalités, des options avancées pour l’arrière-plan vidéo de Slider Revolution, ainsi que des correctifs de sécurité. C’est un plugin qui évolue au rythme des standards du Web, ce qui n’est pas le cas de tous ses concurrents.

Les différentes options de WordPress slider

Avec Slider Revolution WordPress, vous avez le choix entre plusieurs styles de slider et il y en a principalement trois. Notez que le choix de l’un ou de l’autre dépend fortement des produits ou des services que vous souhaitez mettre en avant sur votre site.

Image avec texte superposé

Généralement, ce style de slider revolution comprend des visuels associant une image imposante, un message clair et concis, de même qu’un appel à l’action. Il est le plus répandu puisqu’il permet de conserver l’essentiel des informations que vous souhaitez mettre en avant.   

Par conséquent, il répond bien à un site internet qui souhaite présenter un produit ou un service phare, qui fait une offre ou une promotion limitée dans le temps.

Personnellement, je préfère ce type de slider qui est très économique en termes de ressource et qui permet donc d’avoir un site web rapide et efficace.

Le diaporama ou carrousel

Plusieurs sites WordPress optent pour ce style de revolution slider qui présente une certaine dynamique. Il est donc très facile de penser qu’il est le meilleur choix pour offrir aux utilisateurs une belle interface. De plus, cette option offre la possibilité de pouvoir mettre en avant plusieurs informations.

En revanche, les chiffres démontrent qu’il n’est pas la solution idéale puisqu’à peine 1 % des utilisateurs cliquent sur les diaporamas ou les carrousels. Cette remarque a été faite après une étude sur le site ND University sur la base de 3 755 297 visites de la page d’accueil.

Du reste, sachez que 89,1 % de ceux qui ont cliqué l’on fait sur la première page uniquement. Ces statistiques indiquent donc que le carrousel n’est pas la meilleure option à afficher sur vos web pages pour espérer augmenter les conversions.

Je vous recommande donc de le choisir uniquement si vous le trouvez pertinent pour votre site et pour ce que vous souhaitez mettre en avant. Pour le réussir, optez pour trois slides au maximum et prenez soin de les classer en fonction de leur priorité.

De plus, faites le choix d’un défilement manuel du carrousel pour permettre aux utilisateurs d’avoir le choix de défiler ou pas vos slides. Mais n’attendez-vous pas à ce que les internautes s’intéressent vraiment aux derniers slides.    

Vidéo

L’option slider revolution video background a de plus en plus de succès puisque, contrairement au diaporama, la vidéo crée un impact très fort de façon immédiate et présente un taux de conversion beaucoup plus intéressant.

Raison pour laquelle de plus en plus d’entreprises choisissent cette option pour mettre en avant un produit innovant et sophistiqué ou une offre spéciale. 

Ce qui est d’ailleurs susceptible d’attirer rapidement l’intérêt des visiteurs.

Pour cela, vous devez vous assurer d’avoir une séquence de vidéo qui s’aligne parfaitement à votre enseigne et qui soit de qualité professionnelle. N’hésitez pas à avoir recours à un photographe qui a une grande maîtrise des vidéos ou apprenez à le faire vous-même.

Slider Revolution permet d’intégrer facilement un arrière-plan vidéo à partir de fichiers HTML5, YouTube ou Vimeo. Le slider revolution video background est particulièrement efficace pour les sites vitrines ou les pages de lancement de produit, car il capte instantanément l’attention sans que le visiteur ait besoin de cliquer.

Comment utiliser un arrière-plan vidéo dans Slider Revolution

L’arrière-plan vidéo est l’une des fonctionnalités les plus appréciées de Slider Revolution et pour cause. Elle transforme complètement l’aspect et l’ambiance de votre page d’accueil. Voici comment la configurer.

Dans l’éditeur Slider Revolution pour WordPress, vous pouvez accéder aux options d’arrière-plan lorsque vous créez ou modifiez une diapositive. En fonction de votre source vidéo, sélectionnez « Vidéo YouTube », « Vidéo Vimeo » ou « Vidéo HTML5 ».

Si vous choisissez YouTube ou Vimeo, il vous suffit de coller l’URL de la vidéo dans le champ prévu à cet effet. Le plugin s’occupe du reste. 

Pour une vidéo HTML5, vous devrez télécharger votre fichier vidéo directement dans la médiathèque WordPress, de préférence au format MP4 afin de garantir une compatibilité optimale.

Quelques conseils pour créer un superbe arrière-plan vidéo avec Slider Revolution :

• Utilisez de préférence des vidéos courtes (de 15 à 30 secondes) qui peuvent être lues en boucle sans interruption.
• Désactivez le son par défaut. Une vidéo qui démarre avec le son peut être gênante et faire fuir les visiteurs.
• Ajoutez un filtre de couleur semi-transparent sur la vidéo afin de garantir la lisibilité du texte à l’écran.
• Faites attention à la taille du fichier. Une vidéo trop volumineuse ralentira le chargement de votre page. Compressez-la autant que possible avant de l’intégrer.
• Veillez à fournir une image de secours pour les appareils mobiles, car certains navigateurs mobiles bloquent la lecture automatique des vidéos.

Lorsqu’il est correctement configuré, un arrière-plan vidéo confère instantanément à votre site web un aspect professionnel et moderne. Il s’agit d’un diaporama qui captive les visiteurs dès les premières secondes.

Les bonnes pratiques pour créer un bon Slider Revolution

Avant de créer un slider revolution, gardez à l’esprit que vous devez faire ressortir les points les plus pertinents sur votre page d’accueil, puisque l’attention des internautes est très limitée dans le temps. Quel que soit votre objectif, vous devez vous servir de votre slider pour diriger votre attention après leur atterrissage sur votre site.

Choisir les visuels qu’il faut  

Presque tous les sites web font usage d’images, d’illustrations ou de vidéos pour communiquer ce qu’ils offrent de façon visuelle. Il faut donc vous assurer que les visuels que vous allez utiliser pour la conception de votre slider revolution agissent exactement dans ce sens et qu’ils soient de qualité.

Pour cela, je vous suggère de ne pas vous limiter à la beauté de vos visuels, mais de les choisir parce qu’ils représentent ce que vous souhaitez que les visiteurs comprennent en un coup d’œil lorsqu’ils arrivent sur votre site web.   

Limiter les informations et les animations avec votre revolution slider

N’embrouillez pas les visiteurs en surchargeant votre slider avec beaucoup d’informations. S’ils sont embrouillés, ils risquent de vite quitter votre site web. Alors, préférez plutôt un message clair et précis avec un bouton qui appelle à l’action.

Je vous suggère de prendre le temps de bien réfléchir et de dégager les messages les plus pertinents pour votre activité. Aussi, sachez que de la même manière que beaucoup d’informations peuvent faire fuir les internautes, trop peu d’informations peuvent parfois avoir le même résultat.

En effet, trop d’espace libre sans visuels et sans message percutants n’attire pas l’intérêt des visiteurs qui risquent de quitter votre site web.

D’un autre côté, je vous recommande d’utiliser raisonnablement les animations de votre slider sur vos web pages et de ne pas en abuser pour permettre aux internautes de vite trouver ce qu’ils recherchent sur votre site.    

Création d’un Slider résolution étape par étape

Compte tenu de la maquette de mon site WordPress que j’ai eu l’occasion de réaliser, j’ai eu l’occasion de vous montrer dans mon dernier article comment réaliser un menu de navigation sur WordPress. 

Suite à quoi, je vais maintenant créer un slider revolution sur la page d’accueil qui n’en comporte pas. Ce tutoriel Slider Revolution vous guidera à travers chaque étape du processus.

Pour le faire, nous allons utiliser le plugin Slider Revolution, le Revolution Slider le plus utilisé sur WordPress. Il offre une panoplie d’options pour créer et paramétrer des sliders professionnels. 

Pour l’installer, vous n’avez qu’à vous rendre dans l’espace des plugins afin de télécharger le plugin Slider Revolution comme tout autre plugin. Bien évidemment vous aurez plusieurs plugins après votre recherche.

Toutefois, je préfère vous avertir que son utilisation n’est pas aisée et il faut de la pratique pour rapidement se retrouver.

Par ailleurs, je note quatre grandes étapes dans la création du slider :

• Choisir l’emplacement du slider et faire les configurations ;
• La mise en place des visuels : Couleur du fond, textes, boutons, images ;
• Le redimensionnement du slider ;
• L’optimisation du slider pour les différents supports.

Erreurs courantes à éviter lors de l’utilisation de Slider Revolution

Même avec un outil complet comme Slider Revolution pour WordPress, les débutants rencontrent souvent certaines difficultés. En identifiant ces problèmes dès le début, vous gagnerez du temps et éviterez de nuire à l’expérience de vos visiteurs.

Un diaporama trop lourd qui ralentit le site web

C’est l’erreur la plus courante. Slider Revolution offre tellement de fonctionnalités (animations, vidéos, effets de parallaxe) qu’il est tentant de toutes les utiliser en même temps. Résultat : la page met plusieurs secondes à se charger. 

N’oubliez pas que chaque animation et chaque image non compressée ont un impact sur la vitesse de votre site web. Optimisez systématiquement vos images avant de les intégrer.

Le carrousel contient trop de diapositives

Comme nous l’avons vu dans la section précédente, les statistiques parlent d’elles-mêmes : les visiteurs interagissent presque exclusivement avec la première diapositive. 

Si vous utilisez un carrousel, limitez-vous à trois diapositives au maximum. Au-delà de trois diapositives, vous surchargerez la page avec du contenu que personne ne verra.

Ne négligez pas l’affichage sur les appareils mobiles

Un Revolution Slider qui s’affiche parfaitement sur un écran de 24 pouces peut s’avérer illisible sur un smartphone. C’est une erreur que beaucoup commettent, car ils oublient de vérifier et d’ajuster la mise en page adaptative. Prenez toujours le temps d’optimiser le Revolution Slider pour chaque type d’écran.

Un texte illisible sur l’arrière-plan

Que vous utilisiez une image ou une vidéo Slider Revolution en arrière-plan, veillez à ce qu’il y ait un contraste suffisant entre le texte et l’arrière-plan. 

Par exemple, un texte blanc sur une image de couleur claire est tout simplement invisible. Utilisez des calques (filtres semi-transparents) pour résoudre ce problème.

Ne mettez pas le plugin à jour

Slider Revolution a déjà présenté des failles de sécurité qui ont été corrigées par des mises à jour. Si vous utilisez une version obsolète du plugin, votre site web risque d’être vulnérable aux attaques. Veillez à ce que votre plugin Slider Revolution soit toujours à jour.

Connectez-vous au compte « Admin » de votre site WordPress

Avant de débuter la création du slider, vous devez premièrement vous connecter au compte administrateur de votre site WordPress. Pour cela, il vous suffit d’ajouter « …./wp-admin » à l’URL de votre site. Sur l’interface qui s’affiche, remplissez les cases avec vos identifiants et valider pour accéder au « Dashboard » de WordPress.

Choisir l’emplacement du slider et faire les configurations

1) Modifiez la page d’accueil

Une fois connecté à « Dashboard », je vais me rendre sur la page d’accueil de mon site Twaino.com dans la mesure où il s’agit de l’endroit où je souhaite intégrer mon slider.

Cliquez ensuite sur la fenêtre « Modifier la page » précédée d’une icône de crayon et qui se trouve en haut, juste après « + Créer ».

Sur l’interface qui se présente, vous avez dans la rubrique « Builder » de « Fusion Builder », la mention « Slider Revolution » qui vous permettra d’insérer votre Slider. Notez que vous pouvez ajouter des Sliders à certaines ou à toutes vos pages selon vos besoins.  

Dans le cas où vous avez plusieurs sliders sur différentes pages, vous pouvez accéder directement à leur ensemble en vous rendant sur la rubrique « Slider Revolution » de la barre latérale gauche du dashboard puis en cliquant sur l’option portant le même nom.

2) Allez sur l’interface de configuration du Slider

Dans la rubrique « Builder » portant la mention « Slider Revolution », cliquez sur le bouton bleu « Edit Slider » pour entrer dans l’espace de configuration du slider.

La page qui s’affiche offre les options de la fenêtre portant l’inscription « Param. Slider », cliquez sur la première fenêtre à gauche « All Sliders ».

3) Dupliquez le slider par défaut

Pour aller plus vite, je vous conseille de dupliquer le slider par défaut afin d’y apporter les modifications nécessaires. Vous allez non seulement gagner du temps, mais vous éviterez de vous perdre dans les différents paramètres de l’outil.

Pour cela, appuyer sur la flèche pointant vers bas qui se trouve juste à côté du nom de votre slider, le mien se nomme « 1# avada-seo-hero ».

Ensuite, sélectionnez l’option « Dupliquer » pour avoir une copie du slider.

Inscrivez le titre du slider dupliqué dans la boîte de dialogue qui s’affiche, j’inscris à mon niveau « Twaino Home Page ».

Appuyez ensuite sur le bouton « Duplicate » pour valider la duplication.

4) L’interface de configuration votre slider

Une fois la duplication effectuée, cliquez sur la copie que vous venez de faire pour procéder aux modifications. Sur l’interface de configuration, vous allez voir en première position le nombre de slides, j’en ai trois à mon niveau.

En deuxième position, il y a différentes options :

• Image Arrière-Plan ou background images / Principale ;
• URL Externe ;   
• Transparente ;
• Colored ;
• YouTube Video ;
• Vimeo Video ;
• HTML5 Video.

Notez que les trois dernières options (YouTube Video, Vimeo Video, HTML5 Video) vous permettent de configurer un slider revolution video background. C’est un choix de plus en plus populaire pour donner un aspect moderne et immersif à votre page d’accueil.

Ces différentes options permettent de choisir le type de visuel que vous souhaitez placer au niveau du slide. A mon niveau, c’est « Colored » qui est sélectionné et en modifiant, je constate que le fond de mon premier slide change de couleur.

En troisième position, on retrouve une projection du slider qui montre directement à quoi, il ressemble à chaque modification. Juste en bas, il y a les réglages pour les différents éléments qui vont s’agencer en fonction de vos besoins et du timing que vous souhaitez.

En appuyant sur le bouton « Play », vous obtiendrez un aperçu des animations paramétrées. Sachez que vous avez la possibilité de changer à volonté la configuration des timings à la seconde près, mais je choisis personnellement de ne pas le faire maintenant car il s’agit d’un paramétrage très consommateur en temps pour le mettre en place correctement.

5) Supprimer les slides inutiles

A mon niveau, j’ai trois slides alors que je ne souhaite avoir qu’un seul et pour cela, je vais supprimer les deux derniers.

Pour le faire, allez sur les slides en question et glissez vers le bas pour choisir « Effacer » dans le menu déroulant.

Ensuite, vous pouvez enregistrer en allant cliquer sur le bouton vert comportant l’icône d’enregistrement. Je vous suggère de procéder souvent à des enregistrements afin de valider vos modifications.

Pour la suite, j’ai déjà la maquette de mon site qui m’indique vers quel résultat je souhaite tendre.. Il me suffit donc de m’en servir pour avoir le rendu final et je vous conseille vivement de faire de même. Vous pouvez également confier la création aux designers afin  d’avoir une maquette professionnelle.

La mise en place des visuels : couleur du fond, textes, boutons, image 

1) Modifiez la couleur du fond

Pour le faire, je vais directement copier le code couleur que je veux utiliser dans le logiciel Adobe Illustrator.

Si vous avez aussi la maquette de votre site et que vous ne connaissez pas forcément le code couleur que vous souhaitez utiliser, il suffit de le demander à votre graphiste. Ce code est généralement composé de 6 caractères dont des chiffres et des lettres.

Cliquez ensuite sur la zone en couleur de l’option « Colored » dont j’ai parlé au point 4. A ce niveau, vous pouvez choisir une couleur unie ou un gradient de couleur, selon vos envies et vos besoins.

Il s’agit d’un gradient composé de deux couleurs à mon niveau, donc je sélectionne « Gradient Color » et je fais double-clique sur chaque flèche du bas du gradient pour insérer les codes de mes couleurs.

2) Insérez un texte sur le slide

Je souhaite ensuite insérer le texte « Vous souhaitez augmenter votre trafic organique ? » sur le slide. Pour cela, cliquez sur le texte par défaut qui est chez moi « We Provide The Best Seo Services ».

Vous allez constater que le même test apparaît sur un rectangle noir en haut et que le texte présent sur le slide est encadré, ce qui montre que je peux le modifier.

Allez donc copier votre texte que vous allez coller dans le rectangle noir à la place de l’autre texte. Vous allez remarquer que votre texte apparaît désormais sur le slide.

Si vous y voyez la mention «
», sachez qu’il s’agit d’une balise qui permet d’aller à la ligne. J’ai alors dans le rectangle noir, mon texte qui se présente de cette manière :

« Vous souhaitez augmenter votre trafic organique ? »

Mais qui se présente comme je le souhaite sur le slide :

« Vous souhaitez augmenter

votre trafic organique ? »    

En cliquant sur le texte, vous allez constater qu’il y a des options de texte qui se présentent en haut du champ de configuration. Pour changer la police de ce texte, indiquez le nom de la police que vous souhaitez avoir dans le cadre adéquat. J’inscris dans mon cas « Gudea » à la place de « Source sans pro ».

Modifiez aussi la taille selon votre convenance, je la mets à « 55 » pour ce texte. Je fais de même pour ajouter le second texte « Découvrez notre méthodologie, et nos conseils pour augmenter votre visibilité ». Sauf que cette fois-ci, la police est « Dosis » et la taille « 25 ».

3) Modifiez les boutons du slide

3-1) Modifiez le texte et donnez une première couleur au bouton  

Pour modifier les boutons du slider, il faut procéder en deux étapes :

• Remplacer le texte ;
• Changer la couleur du bouton.  

Pour la première étape, vous devez cliquer sur le texte du bouton. Vous allez retrouver le rectangle noir qui comporte le texte par défaut. Je le change en écrivant à la place « BLOG » et pour le second bouton « SERVICES ».

Pour avoir la couleur exacte qui se trouve sur la maquette, copiez le code de celle-ci. Ensuite, cliquez sur le bouton lui-même et vous aurez juste en haut du champ, plusieurs options dont « Arrière-Plan », située à droite de « Police ». Sélectionnez-le et choisissez la couleur souhaitée ou collez le code pour avoir précisément un certain coloris.

Je profite aussi pour modifier la police et la taille du texte dans le menu en haut de celle de « Arrière-Plan », et ce, avec « Gudea » comme caractère et « 15 » comme taille.

3-2) Donnez une seconde couleur interactive aux boutons du slide

Après avoir donné une couleur aux boutons, je vais ajouter une seconde qui s’affichera lorsqu’un internaute passera le curseur sur le bouton. Pour cela, rendez-vous sur « Survol » qui se trouve sur la même ligne que « Arrière-plan » et complètement à droite.

Vous avez alors le menu de « Survol » qui comprend aussi « Police », « Arrière-plan » et d’autres options. Cliquez ensuite sur « Arrière-plan » et sur « Color » pour choisir le type de couleur que vous souhaitez. Vous pouvez aussi changer la police du texte, comme je l’ai fait avec le mien.

Retournez ensuite sur le menu « Idle » qui se trouve juste à côté de « Survol » pour revenir sur les précédents paramètres de configuration.

Enregistrez les modifications et en passant sur le bouton, vous allez constater qu’il change bien de couleur.

Après, je fais exactement la même chose pour le second bouton « SERVICES ».

4) Changez l’image de votre slide

Pour changer l’image, il vous suffit de faire un double-clique sur l’image par défaut pour accéder à la « Bibliothèque de médias ».

Appuyez ensuite sur « Téléverser les fichiers » qui vous permet d’uploader votre image avec l’option « Sélectionner des fichiers ».

J’importe donc mon image et je prends soin de la nommer.

Notez qu’au préalable, j’ai regardé la taille de l’image par défaut pour adapter la taille de la mienne. Pour cela, vous pouvez vous rendre dans la rubrique « Médias » de la barre latérale gauche du tableau de bord et ensuite sur « Bibliothèque ».

Vous aurez alors la galerie de toutes les images du site web et il vous suffit de rechercher l’image en question puis de cliquer sur elle pour voir ses détails.

Pour le mien, j’ai les dimensions 613 x 650 pixels.

5) Associer le nouveau slider à la bonne page

Les modifications précédentes n’apparaîtront pas directement sur votre page d’accueil lorsque vous allez vous y rendre. Pour voir à quoi elle ressemble, vous allez associer le slider que vous venez de créer à la page d’accueil en question.

Rendez-vous dans un premier temps sur la page d’accueil puis cliquez sur la fenêtre « Modifier la page » précédée d’une icône de crayon et située tout en haut.

Vous avez ensuite les paramètres de « Fusion Builder » et vous allez défiler en bas vers le menu « Sliders » de la rubrique « Fusion Slider Options »

Cliquez sur la barre déroulante de « Select Slider Revolution Slider » et sélectionnez le nom de votre thème. Moi, je choisis « Twaino Home Page (#4) » et je clique sur le bouton bleu « Update » situé dans le coin bas à droite pour enregistrer le changement.

Cliquez directement sur « Preview » qui se trouve juste à côté de « Update » pour voir le rendu de la page d’accueil.

J’ai bien à mon niveau la prise en compte des modifications, mais mon slider comporte beaucoup d’espaces inutiles que je vais réduire.

Le redimensionnement du slider

1) Diminuez la taille du slide

Allez sur la rubrique « Slider Revolution » se trouvant sur la barre latérale du tableau de bord et ensuite sur la fenêtre « Param. Slider ».

Vous avez alors différents paramètres dont :

• Centent Source ;
• Slider Title & ShortCode ;
• Sélectionnez un type de Slider ;
• Slider Layout ;
• Customize, Buil & Implement ;

Le paramètre « Sélectionnez un type de Slider » vous permet d’avoir le type de slider que vous souhaitez. Moi, je choisis le slider qui n’a pas de flèche « Hero Scene » pour avoir mon unique slide.

Le paramètre « Slider Layout », quant à lui, vous permet de modifier la taille du slide.

Il y a dans un premier temps la disposition « Pleine Largeur » qui me convient déjà très bien. Juste en bas se trouve les dimensions que je vais modifier, mais j’ai besoin de connaître tout au moins la largeur de mon site web pour le faire.

Pour connaître cette largeur, allez sur dans les options de votre thème.

Je clique donc sur « Avada » puis sur « theme options » et dans « Layout », vous allez trouver « Site Width » qui représente la largeur de votre site web.

Copiez la dimension que vous trouvez juste devant l’option « Site Width », la mienne est « 1260 px ».

Ensuite, allez tout simplement la coller dans le paramètre « Slider Layout » et précisément dans le premier rectangle juste en dessous du dessein de l’écran d’ordinateur comportant la mention « Desktop Large ».

Diminuez aussi la hauteur du slide, je modifie donc les « 820 px » par défaut en « 600 px ». Je fais de même avec le l’écran de droite portant la mention « Portable » en prenant soin de coller la largeur dans la case adéquate et d’inscrire les « 600 px » dans la deuxième case.

Notez que vous pouvez à tout moment modifier ces dimensions à votre convenance. Enregistrez ensuite vos modifications pour le valider et une fois sur la page d’accueil, je constate bien que les nouvelles dimensions ont été prises en compte.

Toutefois, il faut maintenant recentrer les textes et l’image du slide.

2) Recentrez les contenus de votre slider

Allez sur la rubrique « Slider Revolution » se trouvant sur la barre latérale du tableau de bord et ensuite sur la fenêtre « Slide Editor ». A ce niveau, il vous suffit de cliquer sur chaque élément et de les remonter.

Sauvegardez cette modification et rendez-vous sur la page d’accueil pour apprécier le résultat.

Je vous conseille de faire plusieurs ‘’aller-retours’’ si nécessaire pour avoir le bon ajustement.

Notez qu’il s’agit bien ici de l’affichage sur un grand écran et que la présentation peut être différente d’un support à un autre.

L’optimisation du slider pour les différents supports

Un point essentiel lorsque vous paramétrez votre Slider Revolution WordPress : les sliders ne s’affichent pas de la même manière sur les ordinateurs que sur les portables ou les tablettes. 

Pour cela, allez sur la fenêtre « Slide Editor » de « Slider Revolution » et une fois dans le champ de configuration, vous allez trouver en haut à droite, les trois icônes symbolisant l’ordinateur de bureau, l’ordinateur portable et le téléphone portable.

Cliquez sur chacune de ces icônes pour voir à quoi ressemble votre site web sur ces différents supports. Dans mon cas, la première présente bien mon site web contrairement aux deux dernières icônes où le contenu n’est pas encore centré et certaines parties des textes sont coupées.

1- Optimisez l’affichage sur Ordinateur portable

Pour recentrer le contenu de votre slide sur l’ordinateur portable, cliquez sur l’icône en question et remontez chaque élément comme dans l’étape précédente.

Vous pouvez aussi procéder à la modification de la taille des textes si vous voulez.

Notez néanmoins que ces modifications n’affectent pas du tout les autres types d’affichage.

2- Optimisez l’affichage sur téléphone portable

Pour le téléphone portable, cliquez sur l’icône correspondante pour procéder à l’optimisation.

Je constate à mon niveau qu’il y a deux traits qui encadrent mon slider.

En effet, ils délimitent la zone d’affichage et tout élément qui se trouve en dehors n’apparaît pas finalement sur le support.

Pour cela, je réduis la taille de mon texte qui déborde et j’augmente celle de mon second texte. Je vous recommande de grossir un peu plus les boutons et pour cela, cliquez sur chacun d’eux pour avoir les différentes options qui se trouvent juste en haut du champ de configuration.

Modifiez donc la taille du texte après avoir étiré le bouton. Pensez aussi à centrer le texte en cliquant sur la flèche du bouton bleu « Style » situé dans le coin haut à gauche puis sur la fenêtre « Space ».

Appuyez ensuite sur le menu déroulant « Inherit » et choisissez « Centre ».

D’un autre côté, il y aussi l’image que je vais recentrer en prenant soin de diminuer un peu sa taille pour un bon ajustement.

J’enregistre les modifications et en réduisant mon navigateur pour simuler l’affichage de mon site sur un téléphone portable, je constate que tout est bon.

Vérifiez une dernière fois les modifications

Cette dernière étape consiste à vérifier l’affichage final de votre site web sur tous les supports afin de voir comment il se présente. Pour cela, n’hésitez pas aussi à vous servir de votre smartphone ainsi que votre tablette et tout autre type de support pour effectuer la vérification.

Et voilà ! On vient de terminer la création du slider de la page d’accueil.

J’aurai l’occasion de vous présenter dans un autre article comment associer les boutons du slider avec des URLs ou des pages précises afin de faciliter la navigation.

Slider Revolution et le référencement naturel : Ce qu’il faut savoir

Un aspect souvent négligé lors de l’utilisation de Slider Revolution dans WordPress est l’impact que ce diaporama peut avoir sur le référencement naturel de votre site web. Voici quelques points clés à garder à l’esprit.

Les moteurs de recherche comme Google ont parfois du mal à indexer le contenu intégré dans des diaporamas, car celui-ci est généré dynamiquement via JavaScript. 

Pour limiter cet impact, veillez à ce que le texte et les informations clés de votre page ne se trouvent pas exclusivement dans le diaporama. Votre contenu principal doit rester dans le corps de la page, où il est accessible aux robots d’indexation.

En ce qui concerne les images, pensez à ajouter des attributs « alt » pour chaque image utilisée dans votre Revolution Slider. Il s’agit d’une mesure simple qui aide Google à comprendre le contenu de vos images et améliore votre visibilité dans Google Images.

La vitesse de chargement des pages est un autre facteur essentiel pour le référencement naturel (SEO). Un diaporama lent, en particulier s’il comporte une vidéo d’arrière-plan mal optimisée dans Slider Revolution, peut nuire à vos scores Core Web Vitals. 

Pour éviter cela, activez le chargement différé dans les paramètres de Slider Revolution et compressez vos fichiers multimédias autant que possible.

En fin de compte, utilisez votre diaporama comme un outil stratégique, et non comme un simple élément décoratif. 

Un diaporama bien conçu, qui dirige les visiteurs vers vos pages les plus importantes (page « Services », formulaire de contact, article de blog le plus populaire), contribue indirectement à votre référencement naturel (SEO) en améliorant les indicateurs clés d’engagement : temps passé sur le site, nombre de pages vues par session et taux de rebond.

Conclusion

Après la création du menu de navigation d’un site web, l’étape qui suit généralement est la création d’un slider pour votre page d’accueil. Et comme je l’ai mentionné, vous avez plusieurs options en termes de visuels parmi lesquelles on retrouve l’image fixe, le diaporama et la vidéo. 

Toutefois, vous vous devez de choisir un slider qui associe un bon design à une vitesse de chargement extrêmement rapide. Pour la simple raison que le slider fait partie des premiers éléments que voient les visiteurs et qu’il impacte énormément leur décision de poursuivre ou non leur navigation.

Par conséquent, je vous propose d’utiliser le plugin Slider Revolution WordPress, qui est un outil puissant et efficace, même s’il peut être assez complexe à prendre en main au début. 

J’espère que ce tutoriel Slider Revolution vous aidera à prendre en main l’outil rapidement. Que vous souhaitiez créer un slider revolution avec une image fixe, un carrousel ou un slider revolution video background, vous avez désormais toutes les clés pour le faire.

A bientôt pour la suite !