Voulez-vous intégrer un carrousel d'images WordPress sur votre site web ?
Depuis plus de 10 ans que je travaille avec WordPress, j'ai découvert que les carrousels d'images sont un moyen visuellement frappant d'améliorer l'engagement sur n'importe quel site web. Mais il est souvent difficile de trouver un plugin de carrousel WordPress qui soit à la fois puissant et facile à utiliser si vous êtes débutant.
Dans cet article, je vous montrerai comment créer facilement un carrousel d'images sur votre site WordPress.
Table des matières
Qu'est-ce qu'un carrousel d'images dans WordPress ?
Un carrousel d'images est une fonctionnalité de conception web WordPress qui vous permet d'afficher plusieurs images dans un format coulissant. C'est comme si vous aviez une mini-galerie sur votre page web où les visiteurs peuvent voir différentes images en cliquant dessus ou en les faisant défiler.
Vous vous demandez peut-être : "Quel est le meilleur endroit pour utiliser un carrousel d'images sur mon site ?" Eh bien, il y a plusieurs façons de les utiliser :
- Pour présenter un grand nombre de photos ensemble : Si vous êtes photographe ou artiste, vous pouvez utiliser un carrousel réactif pour présenter vos œuvres en un seul endroit. Ainsi, votre page reste ordonnée et vos visiteurs peuvent voir vos photos sans avoir à les faire défiler.
- À propos des pages contenant beaucoup de mots: Il arrive qu'une page contienne beaucoup de texte, comme un billet de blog ou un article. Dans ce cas, un carrousel peut apporter une touche ludique en permettant d'inclure plusieurs images que les lecteurs peuvent regarder en même temps qu'ils lisent. Cela permet de casser le texte et de rendre votre page plus intéressante.
- Pour les boutiques en ligne : Si vous avez une boutique de commerce électronique sur votre site, les carrousels de produits sont parfaits pour présenter vos produits. Les clients peuvent facilement cliquer et voir différents produits, couleurs ou styles WooCommerce sans quitter la page. C'est un moyen pratique de leur permettre de voir tout ce que vous avez.
L'utilisation de carrousels rend votre site web plus agréable et plus facile à utiliser. Les visiteurs peuvent voir de nombreuses images sans encombrement, ce qui est particulièrement intéressant pour les téléphones et les tablettes, où l'écran n'est pas très spacieux.
Il existe plusieurs façons de créer un carrousel d'images dans WordPress. Vous pouvez utiliser un constructeur de pages par glisser-déposer pour ajouter des carrousels d'images sans code ou utiliser un plugin WordPress gratuit de slider ou de galerie.
Suivez les méthodes ci-dessous pour apprendre à le faire.
Créer un carrousel d'images WordPress avec un constructeur de pages
J'ai utilisé plusieurs constructeurs de pages au fil des ans, notamment Elementor, Beaver Builder et Divi, et SeedProd s'est toujours avéré être le plus efficace pour créer des pages d'atterrissage conviviales.
SeedProd est le meilleur constructeur de pages d'atterrissage WordPress sur le marché. Son éditeur visuel drag-and-drop SEO-friendly facilite la création de pages d'atterrissage sans avoir à engager un développeur ou à écrire du code PHP.
J'apprécie le fait que les puissants blocs de pages d'atterrissage de SeedProd vous permettent d'ajouter une variété de caractéristiques et de fonctionnalités. Je les sélectionne en fonction de la façon dont ils ont augmenté les taux de conversion sur les projets que j'ai menés.
Par exemple, vous pouvez ajouter :
- Formulaires d'optin pour collecter des adresses électroniques et développer votre liste d'adresses électroniques
- Tableaux de prix pour mettre en évidence vos meilleurs plans
- Google Maps pour indiquer votre emplacement physique
- Des comptes à rebours pour créer un sentiment d'urgence
- Des liens vers les médias sociaux pour stimuler l'engagement et augmenter le nombre d'adeptes
- Boutons d'appel à l'action pour générer des prospects
- Des titres animés pour attirer l'attention sur votre offre
- Texte dynamique pour des pages personnalisées
- Vidéos (YouTube et Vimeo) avec fonctionnalité de vidéo collante et de popout
- Des témoignages pour une preuve sociale
- Et plus encore
SeedProd dispose également d'un bloc Image Carousel prêt à l'emploi pour ajouter plusieurs carrousels WP à votre page d'atterrissage. Le slider intelligent vous permet d'intégrer des carrousels de logos, des carrousels d'images de produits, ou tout autre type de slider d'images que vous souhaitez. Et le meilleur, c'est qu'il est très facile à utiliser.
Voyons maintenant comment ajouter des carrousels d'images aux pages d'atterrissage avec SeedProd.
Étape 1 : Installer et activer le plugin SeedProd
La première étape consiste à télécharger une copie du plugin SeedProd. Bien que SeedProd ait une version gratuite pour créer des pages d'atterrissage simples, nous utiliserons la version Pro pour accéder à toutes les fonctionnalités avancées.
Ensuite, téléchargez, installez et activez le plugin sur votre site web WordPress. Si vous avez besoin d'aide, suivez ces instructions pour installer un plugin WordPress.
Après avoir activé le plugin, allez dans SeedProd " Settings, où vous pouvez entrer votre clé de licence SeedProd. Vous pouvez trouver votre clé de licence dans votre compte SeedProd, dans la section Téléchargements.
Étape 2 : Créer une page d'atterrissage WordPress
L'étape suivante consiste à naviguer vers SeedProd " Pages pour créer une nouvelle page d'atterrissage.
En haut de cette page se trouvent 4 modes de page différents que vous pouvez activer d'un simple clic :
- Prochainement - Activez une page "Prochainement " pour informer les visiteurs (et Google) de votre nouveau site web.
- Mode maintenance - Faites savoir aux visiteurs que vous êtes temporairement hors service pour des raisons de maintenance.
- Login - Activer et créer une page de connexion WordPress personnalisée.
- 404 - Permet d'activer une page d'erreur 404 personnalisée sur votre site WordPress.
Dans la section page mode, vous verrez toute page d'atterrissage que vous créez avec le plugin SeedProd. Vous pouvez créer autant de pages WordPress personnalisées que vous le souhaitez.
Cliquez sur le bouton Créer une nouvelle page d'atterrissage pour créer une nouvelle page. Cela permet d'afficher la bibliothèque de modèles de pages d'atterrissage réactives de SeedProd.
Vous pouvez choisir n'importe quel modèle de page d'atterrissage, mais nous vous conseillons de choisir un modèle proche de l'aspect que vous souhaitez donner à votre page. De cette façon, vous n'aurez pas à faire trop de changements.
Pour ce billet, j'ai utilisé le modèle de page de webinaire de voyage, que vous pouvez trouver en cliquant sur l'onglet Webinar en haut de l'écran.
Pour choisir ce modèle, passez votre souris sur la vignette et cliquez sur l'icône orange de la coche.
Ensuite, une fenêtre contextuelle s'affiche pour vous permettre d'ajouter un nom de page. Le nom de la page n'apparaîtra pas dans la conception de votre page d'atterrissage, mais il définit l'URL de votre page. Choisissez donc un nom qui ait du sens pour vos visiteurs lorsqu'ils se rendent sur votre page.
Cliquez maintenant sur le bouton Enregistrer et commencer à éditer la page.
Étape 3 : Personnaliser le contenu de votre page d'atterrissage
Après avoir lancé votre modèle, vous verrez l'écran du constructeur de pages de SeedProd. Avec l'interface drag-and-drop, vous pouvez éditer chaque partie de votre template.
La barre latérale de gauche propose une large sélection de blocs que vous pouvez faire glisser et déposer sur votre page. Une fois qu'un bloc se trouve sur votre page, vous pouvez cliquer dessus pour afficher le contenu, les modèles et les paramètres de personnalisation avancés.
Par exemple, si vous souhaitez ajouter votre logo à votre page de destination, il vous suffit de faire glisser le bloc Image depuis le panneau de gauche et de le déposer sur votre page.
À partir de là, vous pouvez télécharger une nouvelle image ou choisir un logo dans votre bibliothèque de médias WordPress. Vous pouvez également ajuster la taille et l'alignement et ajouter un lien.
Si vous souhaitez personnaliser les couleurs, les polices et les arrière-plans de votre page, c'est tout aussi simple. Dans la partie inférieure gauche de votre constructeur de pages, cliquez sur l'icône en forme d'engrenage pour afficher le panneau des paramètres globaux et les options de personnalisation.
Vous pouvez cliquer sur les onglets Polices, Couleurs ou Arrière-plan pour personnaliser votre page de destination. Par exemple, si vous cliquez sur l'onglet Arrière-plan, vous pouvez télécharger une image d'arrière-plan personnalisée ou modifier le dégradé ou la superposition de couleurs.
Vous avez également la possibilité d'utiliser un arrière-plan vidéo ou un diaporama.
Étape 4 : Ajouter le bloc WordPress Image Carousel
Mais la raison pour laquelle vous êtes ici est d'ajouter facilement un carrousel à votre page. Pour ce faire, vous pouvez utiliser le bloc Image Carousel de SeedProd.
Dans cet exemple, vous remplacerez l'image principale du héros par un carrousel coulissant. Commencez par survoler l'image existante et cliquez sur l'icône de la corbeille pour la supprimer.
Ensuite, sélectionnez le bloc Carrousel d'images dans le panneau Blocs avancés et faites-le glisser sur votre page.
Vous pouvez cliquer sur le bloc de votre page pour afficher les paramètres du carrousel. Par exemple, en cliquant sur la section Image 1 , vous avez la possibilité d'utiliser votre propre image à partir de votre ordinateur ou de votre médiathèque, ou de choisir une image de stock libre de droits.
Personnalisation du carrousel d'images
Après avoir ajouté une image au carrousel, vous pouvez saisir une légende et cliquer sur le bouton Ajouter des images pour insérer d'autres photos dans le carrousel.
Pour s'assurer que votre carrousel s'affiche parfaitement sur tous les appareils, SeedProd ajuste automatiquement vos images pour les ordinateurs de bureau, les tablettes et les smartphones.
Dans le panneau Paramètres du carrousel, vous pouvez ajuster davantage votre curseur d'image. Par exemple, vous pouvez :
- Choisissez une couleur de navigation claire ou foncée
- Choisissez la lecture automatique de votre galerie carrousel
- Sélectionnez la vitesse de lecture automatique en secondes
- Afficher ou masquer les légendes des images
- Sélectionner l'alignement de la galerie
Si cela ne suffit pas, vous pouvez cliquer sur l'onglet Modèles pour modifier le style de votre image de galerie en quelques clics. Par exemple, j'ai choisi un style avec une ombre portée de l'image.
Dans l'onglet Avancé, vous pouvez personnaliser la typographie, les bordures et l'espacement des légendes et choisir des couleurs et des styles qui correspondent à votre marque.
Lorsque vous êtes satisfait de l'aspect de votre carrousel de page d'atterrissage, cliquez sur le bouton vert Enregistrer dans le coin supérieur droit de votre écran.
Étape 5 : Configurer les paramètres de votre page d'atterrissage
Après avoir perfectionné la conception de votre page d'atterrissage, vous pouvez configurer plusieurs paramètres.
Tout d'abord, vous pouvez cliquer sur l'onglet Connecter en haut de votre écran pour connecter votre service de marketing par courriel préféré. C'est un excellent moyen de vous assurer que tous les nouveaux clients potentiels sont automatiquement ajoutés à votre liste d'adresses électroniques.
SeedProd s'intègre à tous les principaux fournisseurs de services de marketing par courriel, y compris :
- MailerLite
- Sendy
- Constant Contact
- GetResponse
- Mad Mimi
- Et plus encore
Consultez la documentation sur l'intégration de l'email pour vous aider à connecter votre liste d'emails.
Ensuite, cliquez sur l'onglet Paramètres de la page pour voir les autres paramètres que vous pouvez configurer dans SeedProd. Il y a généralement 5 sections sur la page des paramètres, mais cela dépend du type de page que vous construisez et de votre plan SeedProd.
Par exemple, vous pouvez modifier vos paramètres généraux et donner à votre page un nouveau nom et une nouvelle adresse URL, ou la mettre en mode brouillon ou publication.
Vous pouvez également connecter un plugin Google Analytics et des plugins WordPress SEO pour suivre et améliorer les performances de votre page.
Dans la zone Scripts, vous pouvez ajouter des scripts et des extraits de code personnalisés, tels que des cookies et des pixels de suivi.
Enfin, la section Domaine personnalisé vous permet de connecter votre page à n'importe quel nom de domaine sans y installer WordPress.
Lorsque vous avez terminé de configurer les paramètres de votre page, n'oubliez pas de cliquer sur le bouton Enregistrer.
Étape 6 : Publier votre page d'atterrissage
Avant de publier votre page d'atterrissage, il est conseillé de la prévisualiser sur mobile. Cela vous permettra de vous assurer que votre conception est adaptée aux utilisateurs mobiles, faute de quoi vous risquez de nuire à leur expérience utilisateur.
Pour voir un aperçu de votre page, cliquez sur l'icône d'aperçu mobile en bas de votre écran.
Vous pouvez ensuite visualiser votre page telle qu'elle apparaîtrait à une personne naviguant à partir d'un appareil mobile et apporter des modifications à l'aide de l'éditeur visuel.
Vous pouvez également passer rapidement d'un élément de texte pour ordinateur à un élément de texte pour téléphone portable dans n'importe quel bloc avec des paramètres de typographie. Vous pouvez ainsi apporter des modifications à votre page mobile ou de bureau sans changer de mode d'affichage.
Lorsque vous êtes satisfait des versions mobile et de bureau de votre page d'atterrissage, cliquez sur la flèche déroulante du bouton vert d'enregistrement et sélectionnez Publier.
Ensuite, vous pouvez cliquer sur le bouton Voir la page en direct dans l'écran suivant pour prévisualiser votre page d'atterrissage.
Voici à quoi ressemble mon carrousel d'images sur mon site web de test :
Votre page est maintenant en ligne, avec un carrousel d'images WordPress entièrement réactif pour présenter plusieurs images à la fois.
Créer un carrousel d'images gratuit sur WordPress
Je recommande souvent Jetpack à ceux qui débutent parce qu'il est non seulement robuste et polyvalent, mais aussi parce qu'il offre un processus d'installation facile que j'ai rationalisé au fil des ans.
Jetpack est un plugin gratuit qui ajoute une tonne de fonctionnalités utiles à votre site WordPress.
Par exemple, il peut analyser votre site pour détecter les problèmes de sécurité et offrir une protection par force brute contre les robots et les pirates. Vous pouvez également l'utiliser pour charger des images paresseusement, partager du contenu sur les médias sociaux, etc.
Plus important encore, Jetpack dispose d'une fonctionnalité qui vous permet d'afficher des galeries de carrousels en plein écran dans les posts et les pages. Elle fonctionne parfaitement avec l'éditeur de blocs (éditeur Gutenberg), ce qui simplifie l'ajout de carrousels à vos posts et pages directement.
Continuez à lire pour découvrir comment utiliser la fonction gratuite de carrousel d'images de Jetpack pour WordPress.
Étape 1 : Installer et activer le plugin Jetpack
La première étape consiste à installer et à activer Jetpack. Pour ce faire, allez dans votre zone d'administration WordPress et cliquez sur Plugins " Ajouter un nouveau.
De là, faites défiler vers le bas jusqu'à ce que vous voyiez le plugin Jetpack, et cliquez sur Installer maintenant, puis sur Activer.
Étape 2 : Activer la galerie Carousel en plein écran
L'étape suivante consiste à aller dans Jetpack " Paramètres dans le panneau de navigation de gauche et à cliquer sur l'onglet Écriture.
En haut de l'écran suivant, vous verrez le panneau Média. Dans cette zone, cliquez sur l'option Afficher les images dans un carrousel plein écran pour l'activer.
Vous pouvez également choisir de :
- Afficher les métadonnées Exif des photos dans le carrousel
- Afficher la zone de commentaires dans le carrousel
Choisissez une palette de couleurs blanche ou noire.
Veillez à cliquer sur le bouton Enregistrer les modifications avant de poursuivre.
Étape 3 : Ajouter un diaporama à vos articles ou pages WordPress
Vous êtes maintenant prêt à créer gratuitement un carrousel d'images dans n'importe quel article ou page de WordPress.
Pour ajouter facilement un carrousel à un article WordPress, créez un nouvel article ou modifiez un article existant. Cliquez ensuite sur l'icône plus dans l'éditeur de blocs pour ajouter un nouveau bloc WordPress, puis cliquez sur le bloc Diaporama pour l'ajouter à votre article.
Ensuite, vous pouvez cliquer sur le bouton Télécharger pour commencer à télécharger des images dans votre galerie à partir de votre ordinateur. Vous pouvez également cliquer sur le bouton Bibliothèque de médias pour insérer des images qui se trouvent déjà dans votre bibliothèque de médias WordPress.
Choisissez maintenant les images que vous souhaitez ajouter et cliquez sur le bouton Créer une nouvelle galerie.
Sur l'écran suivant, vous pouvez ajouter des légendes à vos photos pour en expliquer le contenu. Il vous suffit ensuite de cliquer sur le bouton Insérer une galerie pour l'ajouter à votre message.
Étape 4 : Publier votre carrousel d'images WordPress
Vous devriez maintenant voir un aperçu de votre carrousel d'images dans votre article WordPress. Il comporte des flèches qui vous permettent de naviguer entre les photos et des points de pagination qui indiquent le nombre d'images contenues dans la galerie.
Dans le panneau de configuration du diaporama situé à droite, vous pouvez captiver votre public à l'aide d'effets de transition. Il existe toute une série d'animations pour le glissement ou le fondu entre les images, ce qui vous permet de créer une expérience visuelle dynamique qui suscite l'intérêt de vos visiteurs.
Vous pouvez également modifier la taille de l'image, faire jouer les diapositives automatiquement et retarder les transitions.
Lorsque vous êtes satisfait de l'aspect de votre carrousel d'images, cliquez sur le bouton Publier ou Mettre à jour. Vous pouvez maintenant prévisualiser votre article pour voir votre carrousel d'images en action.
FAQ sur le carrousel d'images WordPress
Quelle est la différence entre un slider et un carrousel dans WordPress ?
Les curseurs et les carrousels présentent tous deux des contenus tels que des images ou du texte, mais la différence essentielle réside dans la visibilité : les curseurs affichent un élément à la fois, tandis que les carrousels présentent plusieurs éléments côte à côte, à la manière d'un porte-revues rotatif. Choisissez un curseur pour mettre l'accent sur le contenu et un carrousel pour mettre en valeur la variété et encourager la navigation.
Dois-je avoir un carrousel sur mon site web ?
Les carrousels de messages, les carrousels de vidéos et les carrousels d'images peuvent être des éléments de conception de site web tentants, mais ils présentent souvent des inconvénients. De nombreux utilisateurs ne s'y intéressent pas et ils peuvent même nuire aux taux de conversion. Si vous devez utiliser un carrousel, veillez à ce qu'il soit simple, avec 3 à 5 diapositives qui présentent votre contenu le plus important, et évitez la rotation automatique.
Quelle est la meilleure taille pour un carrousel dans WordPress ?
La "meilleure" taille dépend de la présentation et des objectifs de votre site web. Toutefois, une largeur de 1200 px et une hauteur de 500 à 800 px constituent un choix populaire pour un bon équilibre entre les ordinateurs de bureau et les appareils mobiles. Visez au moins la largeur de votre contenu principal et donnez la priorité à la qualité de l'image pour les écrans rétina. Optimisez les images pour un chargement plus rapide, quelle que soit leur taille !
Comment ajouter un carrousel à WordPress sans plugins ?
Pour ajouter un carrousel à WordPress sans utiliser de plugins, vous pouvez utiliser du code HTML, CSS et JavaScript personnalisé. Toutefois, cela nécessite des connaissances en matière de codage et peut ne pas être aussi simple que l'utilisation d'un plugin.
Ensuite, d'autres conseils sur les images WordPress
J'espère que cet article vous a aidé à apprendre comment créer un carrousel d'images dans WordPress.
Créer et personnaliser n'importe quelle page WordPress avec SeedProd est très facile. Il n'y a pas besoin de code, vous n'aurez pas besoin d'engager un développeur, et le résultat est une page d'atterrissage axée sur la conversion de votre trafic en prospects et en ventes.
Alors, qu'attendez-vous ?
Vous aimerez peut-être aussi les guides suivants pour améliorer vos images WordPress :
- Comment ajouter une image en vedette sur WordPress
- Comment créer une galerie d'images de produits dans WooCommerce
- Comment ajouter des images Hotspot à WordPress
- Comment ajouter du texte sur une image dans WordPress
- Comment créer une boîte à lumière dans WordPress pour les images
- Comment atténuer une image de fond dans WordPress sans CSS
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
