Comment créer un carrousel d'images WordPress (3 méthodes faciles) 

La plupart des plugins de carrousel WordPress semblent impressionnants en démo mais prennent une éternité à configurer, et les plus populaires sont connus pour alourdir les pages.

Que vous créiez un portfolio, une boutique WooCommerce ou une page de destination, il existe une méthode de carrousel d'images WordPress conçue pour votre configuration. Je vais vous montrer les trois options les plus rapides.

Comment créer un carrousel d'images WordPress ?

La méthode la plus rapide est le bloc Carrousel d'images de SeedProd. Faites-le glisser sur n'importe quelle page, téléchargez vos images et définissez la vitesse de lecture automatique en environ 5 minutes.

Pour les articles WordPress, Jetpack ajoute une fonctionnalité de diaporama gratuite. Les pages produits WooCommerce peuvent utiliser le plugin gratuit Product Gallery Slider.

Comment créer des carrousels d'images pour des pages WordPress personnalisées

SeedProd est le meilleur constructeur de sites web WordPress, avec plus d'un million d'utilisateurs. Il comprend un plugin de carrousel WordPress intégré qui facilite l'ajout de curseurs d'images sans code. Avec son constructeur de site web par glisser-déposer, vous pouvez ajouter plusieurs carrousels et curseurs d'images à n'importe quelle page de votre site sans coder.

Dans cet esprit, examinons comment ajouter un carrousel d'images à votre site web en utilisant 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 de destination 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 pour cela, suivez ces instructions pour installer un plugin WordPress.

Après avoir activé le plugin, allez dans SeedProd » Paramètres, où vous pourrez saisir votre clé de licence SeedProd. Vous pouvez trouver votre clé de licence dans votre espace compte SeedProd dans la section Téléchargements.

Étape 2 : Créer une page de destination WordPress

La prochaine étape consiste à accéder à SeedProd » Pages pour créer une nouvelle page de destination.

En haut de cette page se trouvent 4 modes de page différents que vous pouvez activer en un seul clic, notamment :

• Bientôt disponible – Activez une page « Bientôt disponible » pour informer les visiteurs (et Google) de votre nouveau site web.
• Mode maintenance – Informez les visiteurs que votre site est temporairement en maintenance.
• Connexion – Activez et créez une page de connexion WordPress personnalisée.
• 404 – Activez une page d’erreur 404 personnalisée sur votre site WordPress.

Sous la section des modes de page, vous verrez toutes les pages de destination 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 de destination pour créer une nouvelle page. Cela affiche la bibliothèque de modèles de pages de destination réactifs de SeedProd. modèles de pages de destination.

Vous pouvez choisir n’importe quel design de page de destination que vous aimez, mais nous vous suggérons de choisir un modèle qui ressemble à ce que vous voulez que votre page ressemble. Ainsi, vous n’aurez pas à faire trop de changements.

Pour cet article, j’ai utilisé le modèle de page de webinaire de voyage, que vous pouvez trouver en cliquant sur l’onglet Webinaire en haut de l’écran.

Pour choisir ce modèle, placez votre souris sur la miniature et cliquez sur l’icône de coche orange.

Ensuite, vous verrez une fenêtre contextuelle où vous pouvez ajouter un nom de page. Le nom de la page n’apparaîtra pas sur le design de votre page de destination, mais il définit l’URL de votre page. Choisissez donc un nom qui a du sens pour vos visiteurs lorsqu’ils visitent votre page.

Cliquez maintenant sur le bouton Enregistrer et commencer à modifier la page.

Étape 3 : Personnaliser le contenu de votre page de destination

Une fois le modèle chargé, vous verrez le constructeur de site web par glisser-déposer de SeedProd. Passez à l’étape 4 pour ajouter le carrousel.

Étape 4 : Ajouter le bloc de carrousel d’images WordPress

Contrairement aux plugins de carrousel autonomes, le bloc Carrousel d’images de SeedProd est intégré directement dans le constructeur de site web. Aucun plugin séparé à installer, et aucun chargement JavaScript supplémentaire sur votre page.

Mais la raison pour laquelle vous êtes ici est d’ajouter facilement un carrousel à votre page. Pour ce faire, vous pouvez utiliser le bloc Carrousel d’images de SeedProd.

Pour cet exemple, vous remplacerez l’image principale par un carrousel coulissant. Donc, d’abord, survolez l’image existante et cliquez sur l’icône de la poubelle 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 sur votre page pour voir les paramètres du carrousel. Par exemple, cliquer sur la section Image 1 affiche une option pour utiliser votre propre image depuis votre ordinateur ou votre médiathèque, ou choisir une image d’archive libre de droits.

Personnalisation de votre carrousel d'images

Après avoir ajouté une image au carrousel, vous pouvez entrer une légende d’image et cliquer sur le bouton Ajouter des images pour insérer plus de photos dans votre carrousel.

Pour garantir que votre carrousel soit superbe sur n’importe quel appareil, 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’images. Par exemple, vous pouvez :

• Choisissez une couleur de navigation sombre ou claire
• Choisissez de lire votre galerie carrousel automatiquement
• Sélectionnez la vitesse de lecture automatique en secondes
• Afficher ou masquer les légendes des images
• Sélectionnez l'alignement de la galerie

Si cela ne suffit pas, vous pouvez cliquer sur l'onglet Templates pour changer le style de vos images de galerie en moins de clics. Par exemple, j'ai choisi un style avec une ombre portée sur l'image.

Dans l'onglet Avancé, vous pouvez personnaliser la typographie des légendes, les bordures et l'espacement, et choisir des couleurs et des styles qui correspondent à votre marque.

Lorsque vous êtes satisfait de l'apparence de votre carrousel de page de destination, cliquez sur le bouton vert Enregistrer en haut à droite de votre écran.

Étape 5 : Configurez les paramètres de votre page de destination

Cliquez sur Paramètres de la page pour donner un nom à votre page et la définir pour publication.

Étape 6 : Publier votre page de carrousel d'images

Avant de publier votre page de destination, prévisualisez-la sur mobile pour vous assurer que votre conception convient aux utilisateurs mobiles. Sinon, cela peut nuire à leur expérience utilisateur.

Pour voir un aperçu de votre page, cliquez sur l'icône Aperçu mobile en bas de votre écran.

Vous pourrez alors voir votre page telle qu'elle apparaîtrait à toute personne naviguant depuis un appareil mobile et apporter des modifications avec l'éditeur visuel.

Vous pouvez également passer rapidement d'un élément de texte mobile à un élément de texte de bureau dans n'importe quel bloc avec des paramètres de typographie. Cela vous permet d'apporter des modifications à votre page mobile ou de bureau sans changer de mode d'affichage.

Lorsque vous êtes satisfait de vos versions mobile et de bureau de votre page de destination, cliquez sur la flèche déroulante du bouton d'enregistrement vert et sélectionnez Publier.

Ensuite, vous pouvez cliquer sur le bouton Voir la page en direct sur l'écran suivant pour prévisualiser votre page de destination.

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.

Comment ajouter des carrousels d'images aux articles WordPress

Je recommande souvent Jetpack aux débutants car il est facile à utiliser et est livré avec un curseur d'images intégré pour les articles et les pages WordPress.

Jetpack est un plugin gratuit qui ajoute une tonne de fonctionnalités utiles à votre site WordPress.

Par exemple, il peut analyser votre site à la recherche de problèmes de sécurité et offrir une protection contre les attaques par force brute de la part des robots et des pirates. Vous pouvez également l'utiliser pour charger des images paresseusement, partager du contenu sur les réseaux sociaux, et plus encore.

Plus important encore, Jetpack dispose d'une fonctionnalité qui vous permet d'afficher des galeries carrousels en plein écran dans les articles et les pages. Cette fonctionnalité fonctionne parfaitement avec l'éditeur de blocs (éditeur Gutenberg), ce qui permet d'ajouter facilement des carrousels directement à vos articles et pages.

Continuez à lire pour découvrir comment utiliser la fonctionnalité gratuite de carrousel d'images WordPress de Jetpack.

Étape 1 : Installer et activer le plugin Jetpack

La première étape consiste à installer et activer Jetpack. Pour ce faire, accédez à votre zone d'administration WordPress et cliquez sur Extensions » Ajouter.

À partir 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 carrousel plein écran

La prochaine étape consiste à aller dans Jetpack » Paramètres depuis 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 le bouton Afficher les images dans une galerie en 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

Et choisir un schéma de couleurs blanc ou noir.

Assurez-vous de cliquer sur le bouton Enregistrer les modifications avant de continuer.

Étape 3 : Ajouter un diaporama à votre article ou vos pages WordPress

Maintenant, vous êtes prêt à créer un carrousel d'images dans n'importe quel article ou page WordPress gratuitement.

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, et 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 depuis votre ordinateur. Ou vous pouvez cliquer sur le bouton Médiathèque pour insérer des images qui sont déjà dans votre médiathèque WordPress.

Maintenant, choisissez 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 expliquer de quoi il s'agit. Ensuite, cliquez simplement sur le bouton Insérer la galerie pour l'ajouter à votre article.

É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 aura des flèches qui vous permettront de naviguer entre les photos et des points de pagination qui indiquent le nombre d'images dans la galerie.

Dans le panneau des paramètres du diaporama à droite, vous pouvez captiver votre public avec des effets de transition. Une gamme d'animations vous permet de faire glisser ou de fondre entre les images, créant une expérience visuelle dynamique qui engage vos visiteurs.

Vous pouvez également modifier la taille de l'image, lancer la lecture automatique des diapositives et retarder les transitions.

Lorsque vous êtes satisfait de l'apparence de votre carrousel d'images, cliquez sur le bouton Publier ou Mettre à jour. Maintenant, vous pouvez prévisualiser votre article pour voir votre galerie de carrousel d'images en action.

Comment créer des carrousels d'images de produits WooCommerce

Si vous avez une boutique en ligne qui utilise WooCommerce, vous pouvez facilement afficher les photos de produits dans un attrayant curseur d'images. Pour cela, j'utiliserai le plugin gratuit Product Gallery Slider WordPress.

Après avoir installé et activé le plugin, accédez à Codeixer » Galerie de produits depuis votre tableau de bord WordPress. Ici, vous pouvez choisir votre type de curseur, les dimensions, les options de navigation, le style, et plus encore.

Ensuite, allez à la page produit où vous souhaitez ajouter le carrousel d'images. Dans la barre latérale droite, vous verrez un nouveau panneau appelé Galerie de produits.

C'est ici que vous ajouterez les images pour votre carrousel de produits. Cliquez simplement sur Ajouter des images pour sélectionner des images dans votre médiathèque, ou faites-les glisser depuis votre ordinateur.

À partir de là, mettez à jour le produit, et c'est tout. Maintenant, vous pouvez afficher la page et voir votre carrousel d'images WooCommerce en action.

Ce plugin est l'un des moyens les plus simples d'ajouter un curseur d'images à vos pages de produits WordPress. Pour une galerie de produits complète avec prise en charge de la lumière, consultez notre guide sur la création d'une galerie d'images de produits WooCommerce.

Questions supplémentaires sur les carrousels d'images WordPress

Comment ajouter un carrousel à WordPress sans plugin ?

Le bloc Galerie natif de WordPress vous permet d'ajouter plusieurs images en un seul endroit, et notre guide sur l'ajout d'une galerie aux pages WordPress couvre les étapes. Pour un carrousel complet avec commandes de lecture automatique et de navigation, le bloc Carrousel d'images de SeedProd est le meilleur choix, sans nécessiter de plugin séparé.

Quelle est la différence entre un curseur d'images WordPress et un carrousel ?

Un curseur affiche une image à la fois dans une zone d'affichage pleine largeur. Un carrousel affiche plusieurs images côte à côte que les utilisateurs peuvent faire défiler. Les curseurs fonctionnent bien pour les sections principales et les messages ciblés. Les carrousels sont mieux adaptés aux galeries de produits, aux portfolios et aux collections où vous souhaitez montrer plusieurs articles à la fois.

Quelle est la meilleure taille pour un carrousel d'images WordPress ?

La taille la plus courante est de 1200x600 pixels, ce qui équilibre la qualité de l'image et la vitesse de chargement. Si votre carrousel occupe toute la largeur de la page, augmentez jusqu'à 1600 pixels de large. Gardez toutes les images de votre carrousel aux mêmes dimensions afin qu'elles ne se déplacent pas ou ne soient pas coupées lors du défilement de la galerie.

SeedProd propose-t-il une fonctionnalité de carrousel gratuite ?

Le bloc Carrousel d'images de SeedProd est disponible dans les plans payants. La version gratuite de SeedProd n'inclut pas le bloc Carrousel d'images. Si vous avez besoin d'une option gratuite, Jetpack ajoute la fonctionnalité de carrousel aux articles et pages WordPress sans frais.

Qu'est-ce qui ralentit un site WordPress avec des carrousels d'images ?

La cause la plus fréquente est la taille excessive des images. Télécharger des images de 3000 pixels de large alors que votre carrousel s'affiche à 800 pixels oblige WordPress à charger beaucoup plus de données que nécessaire. Les plugins de carrousel qui chargent du JavaScript et du CSS sur chaque page, même celles sans carrousel, ajoutent également un poids inutile. Le bloc Carrousel d'images de SeedProd ne se charge que sur les pages où vous l'utilisez.

Ensuite, d'autres astuces pour les images WordPress

La création d'un carrousel d'images WordPress ne nécessite ni code ni développeur. Le bloc Carrousel d'images de SeedProd s'en charge en quelques minutes.

Vous pourriez également aimer les guides suivants pour améliorer vos images WordPress :

• Comment ajouter une image mise en avant à WordPress
• Comment créer une galerie d'images de produits dans WooCommerce
• Comment ajouter une galerie aux pages WordPress
• Comment ajouter des images avec points d'intérêt à WordPress
• Comment ajouter du texte sur une image dans WordPress
• Comment créer une lumière dans WordPress pour les images
• Comment estomper une image d'arrière-plan dans WordPress sans CSS

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.