Comment créer facilement un slider responsive dans WordPress

Avez-vous déjà atterri sur un site web et été impressionné par une belle galerie coulissante sur la page d'accueil ? C'est un excellent moyen de présenter votre meilleur contenu, mais le rendre agréable sur tous les appareils peut être un vrai casse-tête.

Nous savons à quel point il est frustrant qu'un slider soit parfait sur votre ordinateur mais qu'il soit maladroit ou cassé sur un smartphone. Une mauvaise expérience mobile peut facilement faire fuir les visiteurs.

Après avoir testé des dizaines d'outils sur nos propres sites, nous avons trouvé les moyens les plus simples de créer des sliders qui fonctionnent parfaitement partout. Vous n'avez besoin d'aucune compétence en codage pour en créer un qui captivera l'attention de vos visiteurs.

Dans cet article, nous vous montrerons quelques méthodes simples pour ajouter un slider responsive à votre site WordPress.

Pourquoi ajouter un slider WordPress responsive à votre site web ?

Un slider de contenu ou un diaporama est un excellent moyen de mettre en avant vos produits WooCommerce les plus populaires, les dernières vidéos YouTube, les avis clients, et plus encore.

Certains sliders sont en lecture automatique, ils défilent donc entre les diapositives automatiquement. Cela vous permet d'afficher beaucoup d'informations dans un petit espace, laissant beaucoup de place pour d'autres contenus.

N'oubliez pas que la clé d'un excellent slider est d'utiliser des images de haute qualité mais bien optimisées. Cela permettra à votre slider de rester net sans ralentir votre site web. 👍

Pour cette raison, de nombreux sites Web utilisent des curseurs sur leurs pages les plus importantes, telles qu'une page de destination, la page d'accueil ou une page de vente.

Même si un curseur est configuré pour le défilement automatique, les visiteurs peuvent généralement passer d'une diapositive à l'autre manuellement à l'aide des boutons de navigation. De cette façon, un curseur encourage les visiteurs à interagir avec votre site, ce qui le rend plus attrayant.

Vous pouvez voir dans le GIF ci-dessous à quel point un curseur vidéo peut dynamiser une page.

Cela dit, voyons comment vous pouvez facilement créer un curseur réactif dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.

• Méthode 1. Créer un curseur WordPress réactif à l'aide d'un plugin (rapide et facile)
• Méthode 2. Créer un curseur réactif à l'aide d'un constructeur de pages (plus personnalisable)
• Méthode 3. Créer un curseur à l'aide de Smash Balloon (idéal pour les publications et les avis sociaux)
• Questions fréquemment posées sur les curseurs réactifs
• Ressources supplémentaires

Méthode 1. Créer un curseur WordPress réactif à l'aide d'un plugin (rapide et facile)

Si vous souhaitez créer un curseur simple qui a fière allure sur ordinateur et mobile, nous vous recommandons d'utiliser le plugin Soliloquy.

Ce plugin de curseur WordPress vous permet de créer des diapositives à l'aide d'images de votre médiathèque et peut également afficher des vidéos hébergées sur des plateformes tierces comme YouTube.

Vous pouvez également ajouter du texte alternatif et des légendes à chaque diapositive, ce qui est idéal pour créer un contenu optimisé pour le référencement.

Tout d'abord, vous devrez créer un compte Soliloquy. Ensuite, vous pourrez installer et activer le plugin Soliloquy sur votre site web. Pour plus de détails, suivez notre guide sur comment installer un plugin WordPress.

Après activation, allez dans Soliloquy » Paramètres dans le tableau de bord WordPress et entrez votre clé de licence.

La clé se trouve en vous connectant à votre compte sur le site web de Soliloquy. Après avoir saisi ces informations, cliquez sur le bouton « Vérifier la clé ».

Une fois cela fait, vous pouvez ajouter un nouveau slider à votre site WordPress en allant dans Soliloquy » Ajouter nouveau.

Vous pouvez commencer par taper un titre. Ceci est juste pour votre référence, vous pouvez donc utiliser tout ce qui vous aide à identifier le slider dans votre tableau de bord WordPress.

Ensuite, il est temps d'ajouter des images et des vidéos au curseur. Vous pouvez soit faire glisser et déposer des fichiers sur l'éditeur, soit cliquer sur « Sélectionner des fichiers d'autres sources ».

Si vous souhaitez utiliser des images, vous pouvez ajouter ces fichiers de la même manière que vous ajoutez des images dans l'éditeur de blocs WordPress.

Si vous souhaitez inclure des vidéos, nous vous recommandons de les téléverser sur un site d'hébergement vidéo comme YouTube ou Vimeo. Téléverser des vidéos directement sur votre site Web n'est pas une bonne idée, car cela peut ralentir votre site Web et consommer beaucoup d'espace de stockage.

Pendant ce temps, des plateformes comme YouTube sont optimisées pour la vidéo, vous pouvez donc afficher des vidéos haute résolution dans vos curseurs sans affecter négativement votre site Web.

Après avoir choisi une plateforme d'hébergement vidéo, vous devez téléverser toutes les vidéos que vous souhaitez inclure dans le curseur WordPress. Si vous ne savez pas comment téléverser des vidéos, nous vous recommandons de lire la documentation officielle ou le manuel d'utilisation de la plateforme vidéo choisie.

Une fois cela fait, cliquez simplement sur le bouton « Sélectionner des fichiers d'autres sources », puis sélectionnez « Insérer une diapositive vidéo ».

Vous pouvez maintenant coller l'URL de la vidéo dans le champ « URL de la vidéo ».

Soliloquy affiche tous les formats de liens pris en charge sur le côté droit, assurez-vous donc que votre lien utilise l'un de ces formats.

Une fois cela fait, vous pouvez taper un titre dans le champ « Titre ». Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez. Vous pouvez également ajouter du texte alternatif, ce qui aidera les moteurs de recherche à comprendre de quoi parle cette diapositive.

Après cela, vous pouvez saisir une légende facultative dans le champ « Légende ». Celle-ci s'affichera dans une barre grise en bas de la vidéo avant que le visiteur n'appuie sur « Lecture ».

Si vous ne souhaitez pas afficher cette barre, laissez simplement le champ « Légende » vide.

Lorsque vous êtes satisfait des informations que vous avez saisies, vous pouvez créer d'autres diapositives en cliquant sur « Ajouter une autre diapositive vidéo ».

Pour configurer cette nouvelle diapositive, suivez simplement le même processus décrit ci-dessus.

Une fois que vous avez créé toutes vos diapositives, cliquez sur « Insérer dans le curseur ».

Vous verrez maintenant toutes vos diapositives dans la section « Actuellement dans votre curseur ».

Ensuite, vous pouvez cliquer sur l'onglet « Configuration » et utiliser les paramètres du curseur pour le personnaliser. Par exemple, vous pouvez choisir un nouveau thème de curseur, modifier la taille de l'image et modifier la position du curseur et des légendes.

Vous pouvez également personnaliser les flèches du curseur et le bouton pause/lecture, ajuster la vitesse de transition, modifier le délai, et plus encore.

Ensuite, vous voudrez vous assurer que votre curseur est aussi beau sur les appareils mobiles que sur les ordinateurs et les ordinateurs portables.

Cela dit, cliquez sur l'onglet « Mobile » et cochez la case à côté de « Créer des images de curseur mobile ».

Vous pouvez ensuite saisir les tailles que vous souhaitez utiliser pour les images et les vidéos sur les appareils mobiles. Pour prendre ces décisions, il peut être utile de visualiser la version mobile de votre site WordPress sur un ordinateur.

Par défaut, Soliloquy masquera les légendes pour les utilisateurs mobiles. Souvent, cela permet aux diapositives de mieux s'adapter aux écrans plus petits généralement utilisés par les smartphones et les tablettes.

Pour cette raison, nous vous recommandons de laisser ce paramètre désactivé, mais vous pouvez cocher la case à côté de « Afficher les légendes sur mobile » si vous préférez.

Une fois cela fait, cliquez sur l'onglet « Divers ». Ici, vous pouvez ajouter du CSS personnalisé à votre slider, modifier le titre et le slug du slider, et exporter le slider.

Lorsque vous êtes satisfait de la configuration du slider, cliquez sur le bouton « Publier ».

Soliloquy créera automatiquement un shortcode que vous pourrez ajouter à n'importe quelle page, publication ou zone prête pour les widgets.

Pour plus d'informations sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode dans WordPress.

Pour les utilisateurs avancés, Soliloquy fournit également des extraits de code qui peuvent être ajoutés directement aux fichiers de votre thème WordPress. Cette méthode offre un contrôle plus précis mais n'est recommandée que si vous êtes à l'aise avec la modification de code. Pour la plupart des utilisateurs, utiliser le bloc ou le shortcode est la méthode la plus simple et la plus sûre !

Pour des instructions étape par étape, consultez notre guide sur comment ajouter facilement du code personnalisé dans WordPress.

La façon la plus simple d'ajouter le slider à votre site est d'utiliser le bloc Soliloquy dans l'éditeur Gutenberg. Allez simplement sur la page ou l'article où vous souhaitez afficher le slider, puis cliquez sur le bouton ‘+’.

Dans la fenêtre contextuelle qui apparaît, tapez ‘Soliloquy’.

Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à votre blog ou site Web WordPress.

Après cela, ouvrez le bloc Soliloquy et sélectionnez le slider que vous venez de créer.

Vous pouvez maintenant cliquer sur le bouton ‘Mettre à jour’ ou ‘Publier’ pour rendre le slider visible.

Méthode 2. Créer un curseur réactif à l'aide d'un constructeur de pages (plus personnalisable)

Si vous souhaitez créer un simple slider vidéo ou image, un plugin comme Soliloquy est un excellent choix. Cependant, si vous souhaitez intégrer un slider de manière transparente dans un design de page entièrement personnalisé, comme une page de destination ou une page d'accueil, nous vous recommandons d'utiliser un plugin de constructeur de pages à la place.

SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer. Il vous permet de concevoir des pages de destination personnalisées et même de créer un thème WordPress personnalisé sans avoir à écrire une seule ligne de code.

Il dispose également d'un bloc Carrousel d'images que vous pouvez utiliser pour créer des sliders impressionnants.

Vous pouvez simplement déposer ce bloc prêt à l'emploi n'importe où sur une page, puis le personnaliser à l'aide de l'éditeur puissant par glisser-déposer.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après avoir activé le plugin, SeedProd vous demandera votre clé de licence.

Vous pouvez trouver cette clé de licence sous votre compte sur le site Web de SeedProd. Après avoir saisi les informations, cliquez sur le bouton « Vérifier la clé ».

Une fois cela fait, allez dans SeedProd » Pages de destination dans votre tableau de bord WordPress.

1. Choisissez un modèle de page

SeedProd est livré avec plus de 180 modèles conçus par des professionnels, regroupés par catégories. En haut, vous verrez des catégories qui vous permettent de créer de belles pages 'Bientôt disponible', d'activer le mode maintenance, de créer une page de connexion personnalisée pour WordPress, et plus encore.

Tous les modèles de SeedProd sont faciles à personnaliser, vous pouvez donc utiliser le design que vous souhaitez. Lorsque vous trouvez un modèle qui vous plaît, survolez-le simplement avec votre souris et cliquez sur l'icône en forme de coche.

Vous pouvez maintenant taper un nom pour votre page de destination dans le champ 'Nom de la page'. SeedProd créera automatiquement une 'URL de page' en utilisant le nom de la page.

Il est judicieux d'inclure des mots-clés pertinents dans cette URL autant que possible, car cela aidera les moteurs de recherche à comprendre de quoi traite la page. Cela peut souvent améliorer votre SEO WordPress.

Pour modifier l'URL générée automatiquement de la page, tapez simplement dans le champ « URL de la page ».

Lorsque vous êtes satisfait des informations que vous avez saisies, cliquez sur « Enregistrer et commencer à modifier la page ». Cela chargera l'interface du constructeur de pages SeedProd.

2. Personnalisez la mise en page de votre page

Le constructeur glisser-déposer de SeedProd affiche un aperçu en direct de la conception de votre page à droite. À gauche se trouve un menu avec tous les différents blocs et sections que vous pouvez ajouter à la page.

Lorsque vous trouvez un bloc que vous souhaitez ajouter, faites-le simplement glisser et déposez-le sur votre modèle.

Pour personnaliser un bloc, cliquez simplement pour sélectionner ce bloc dans l'éditeur SeedProd. Le menu de gauche se mettra alors à jour pour afficher tous les paramètres que vous pouvez utiliser pour le personnaliser.

Pendant que vous construisez la page, vous pouvez déplacer les blocs dans votre mise en page en les faisant glisser et déposer. Pour des instructions plus détaillées, veuillez consulter notre guide sur comment créer une page de destination avec WordPress.

3. Ajoutez et concevez votre curseur réactif

Pour créer un curseur réactif à l'aide de SeedProd, trouvez simplement le bloc Carrousel d'images dans le menu de gauche, puis faites-le glisser sur votre mise en page.

Ensuite, cliquez pour sélectionner le bloc Carrousel d'images dans l'éditeur de page.

Vous pouvez maintenant ajouter toutes les images que vous souhaitez afficher dans le curseur. Pour commencer, cliquez sur l'élément « Image 1 » que SeedProd crée par défaut.

Vous pouvez maintenant utiliser une photo de la bibliothèque intégrée de SeedProd ou cliquer sur « Utiliser votre propre image » et choisir un fichier dans la médiathèque WordPress.

Après avoir choisi une image, vous pouvez ajouter une légende qui apparaîtra sous cette image. SeedProd n’affiche pas les légendes par défaut, mais nous vous montrerons comment les activer plus loin dans cet article.

Lorsque vous êtes satisfait de la configuration de la diapositive, cliquez sur le bouton « Ajouter des images » pour créer une autre diapositive.

Pour ajouter d’autres diapositives, suivez simplement le même processus décrit ci-dessus.

Après avoir ajouté toutes les images à votre carrousel, il est temps de personnaliser son apparence et son comportement.

Dans le menu de gauche, cliquez pour développer la section « Paramètres du carrousel ».

Pour commencer, vous pouvez basculer entre les modes clair et sombre pour les boutons de navigation du carrousel.

Pour essayer ces différents modes, cliquez sur les boutons à côté de « Mode de couleur de navigation ». L’aperçu en direct se mettra à jour automatiquement afin que vous puissiez voir quel mode vous préférez.

Par défaut, le carrousel affiche une seule diapositive, et les visiteurs devront utiliser les contrôles de navigation pour voir plus de contenu.

Cependant, vous voudrez peut-être afficher plusieurs diapositives à la fois en ouvrant le menu déroulant « Diapositives à afficher » et en choisissant un nombre dans la liste. Cela peut être utile si le carrousel contient beaucoup de contenu et que vous craignez que les visiteurs ne cliquent pas sur toutes les diapositives.

Par défaut, les visiteurs devront cliquer pour voir la diapositive suivante. Dans cet esprit, vous voudrez peut-être activer la lecture automatique, car cela augmente souvent le nombre de diapositives qu’un visiteur voit.

Pour ce faire, cliquez pour activer le commutateur « Lecture automatique », puis spécifiez combien de temps chaque diapositive doit rester à l’écran en tapant un nombre dans « Vitesse de lecture automatique ».

Si vous avez ajouté des légendes à vos images, assurez-vous de cliquer sur le curseur « Afficher la légende » pour le faire passer de « Non » à « Oui ».

Vous pouvez également modifier l’alignement de la légende.

En fonction de la couleur d'arrière-plan, vous devrez peut-être changer la couleur de la légende avant qu'elle ne soit visible par les visiteurs.

Pour ce faire, cliquez sur l'onglet « Avancé », puis utilisez les paramètres « Couleur de la légende ».

Vous pouvez styliser davantage le texte en cliquant sur le bouton « Modifier » à côté de « Typographie de la légende ».

Cela ajoute des paramètres où vous pouvez changer la taille de la police, la hauteur de ligne, l'espacement, et plus encore.

Lorsque vous êtes satisfait de l'apparence des légendes, vous pouvez ajouter différentes ombres portées aux diapositives en utilisant le menu déroulant « Styles d'image du curseur ».

Ces ombres peuvent vraiment faire ressortir les diapositives, il vaut donc la peine d'essayer différentes ombres pour voir si elles correspondent à la conception de votre page.

Dans l'onglet « Avancé », vous trouverez également des paramètres qui vous permettent d'ajouter une bordure, de modifier l'espacement et même de créer une animation d'entrée.

N'hésitez pas à explorer ces paramètres avancés pour découvrir tous les différents effets que vous pouvez créer. Par exemple, vous pouvez ajouter une bordure pour faire ressortir votre curseur ou utiliser des animations pour attirer l'attention de vos visiteurs ! ✨

4. Publiez votre page de destination

Lorsque vous êtes satisfait de l'apparence du curseur, vous pouvez continuer à travailler sur le reste de la page. Faites simplement glisser des blocs sur votre conception, puis personnalisez-les à l'aide des paramètres du menu de gauche.

Si vous souhaitez supprimer un bloc, survolez-le simplement, puis cliquez sur l'icône de la corbeille lorsqu'elle apparaît.

Lorsque l'on vous le demande, cliquez sur « Oui, supprimez-le ».

Lorsque vous êtes satisfait de l'apparence de la page, cliquez sur le bouton « Enregistrer » pour la rendre active. Enfin, sélectionnez « Publier » pour rendre votre curseur actif.

Méthode 3. Créer un curseur à l'aide de Smash Balloon (idéal pour les publications et les avis sociaux)

Nous sommes plus susceptibles d'essayer des choses que nous voyons d'autres personnes acheter, utiliser ou recommander. C'est pourquoi c'est une bonne idée de montrer la preuve sociale sur votre site Web, y compris les avis clients, les témoignages ou même les commentaires positifs sur les réseaux sociaux.

La façon la plus simple d'afficher la preuve sociale sur votre site est d'utiliser Smash Balloon. Smash Balloon propose des plugins qui vous permettent d'intégrer du contenu d'Instagram, de Facebook, de Twitter et de YouTube.

Il dispose également d'un plugin de flux d'avis que vous pouvez utiliser pour afficher des avis de Facebook, Tripadvisor, Yelp, Trustpilot, WordPress.org et Google.

Cependant, afficher de nombreux commentaires et avis positifs sur votre boutique en ligne ou votre site web peut prendre beaucoup de place.

C'est pourquoi Smash Balloon est livré avec des mises en page et des modèles de carrousel intégrés que vous pouvez utiliser pour créer des curseurs réactifs. Cela vous permet de créer des diaporamas de médias sociaux et d'avis en quelques clics.

Mieux encore, Smash Balloon récupérera automatiquement le nouveau contenu, de sorte que le curseur affichera toujours les derniers messages.

Une autre option consiste à afficher le contenu de vos propres comptes de médias sociaux.

Si les visiteurs aiment ce qu'ils voient, ils pourraient décider de vous suivre sur les réseaux sociaux.

Pour vous aider à obtenir plus d'abonnés, Smash Balloon est livré avec des boutons d'appel à l'action prêts à l'emploi que vous pouvez ajouter à vos curseurs.

Pour des instructions détaillées étape par étape, veuillez consulter nos guides sur comment ajouter des flux de médias sociaux à WordPress, et comment afficher les avis Google, Facebook et Yelp dans WordPress.

Questions fréquemment posées sur les curseurs réactifs

Notre équipe reçoit beaucoup de questions sur l'utilisation des sliders dans WordPress. Vous trouverez ci-dessous les réponses à certaines des plus courantes que nous recevons de nos lecteurs.

Qu'est-ce qu'un slider WordPress responsive ?

Un slider responsive est un composant de diaporama qui ajuste automatiquement sa taille et sa disposition pour s'adapter à n'importe quel écran. Cela garantit qu'il est superbe et facile à utiliser sur les ordinateurs de bureau, les tablettes et les smartphones.

Les sliders sont-ils mauvais pour le SEO ?

Bien que les sliders mal codés puissent ralentir votre site et nuire au référencement, les plugins modernes sont conçus en pensant aux performances. Par exemple, un plugin comme Soliloquy utilise le chargement différé et une structure HTML appropriée pour être optimisé pour le référencement.

Il est également important d'ajouter du texte alternatif descriptif aux images de vos diapositives. Cela aide les moteurs de recherche à comprendre votre contenu.

Les sliders ralentissent-ils votre site web ?

Les sliders peuvent affecter les temps de chargement des pages s'ils contiennent des fichiers image volumineux et non optimisés. Cependant, les meilleurs plugins de slider WordPress sont légers et optimisés pour la vitesse.

Pour vous assurer que votre slider ne ralentit pas votre site, nous vous recommandons de compresser vos images avant de les télécharger sur WordPress. Cela réduit leur taille de fichier sans sacrifier la qualité.

Quel est le meilleur plugin de slider responsive pour WordPress ?

Le meilleur plugin dépend de vos besoins spécifiques. Nous recommandons Soliloquy comme le meilleur choix global pour sa facilité d'utilisation et ses performances rapides.

Si vous souhaitez créer des mises en page personnalisées, le bloc Carrousel d'images de SeedProd offre plus de flexibilité de conception. Pour afficher des flux de médias sociaux ou des avis clients dans un slider, Smash Balloon est l'outil idéal.

Ressources supplémentaires

Nous espérons que cet article vous a aidé à apprendre comment créer facilement un slider responsive dans WordPress. Vous voudrez peut-être aussi consulter ces autres guides sur notre site :

• Comment créer un slider vidéo et image WordPress (La méthode facile)
• Meilleurs plugins PDF pour WordPress (Visionneuse, Intégration et Téléchargements)

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.