Sommaire
- Une note sur les tailles d’image
- Installation de Smart Slider 3
- Création d’un carrousel d’images
- Ajouter des images à un nouveau slider
- Pour faire défiler automatiquement les images du carrousel
- Carrousel d’images sous forme de widget
- Insertion d’un carrousel dans le code du site Web
- Glisser ou ne pas glisser, telle est la question.
Même si vous n’êtes pas familier avec le terme, vous savez ce qu’est un carrousel d’images. Il s’agit d’un groupe de grandes images généralement placées en haut d’une page Web. Les images tournent automatiquement ou “glissent” dans et hors de la vue. Et des outils comme Smart Slider 3 permettent de les ajouter assez facilement.
Dans certains cas, les images ne tournent pas automatiquement car le visiteur navigue manuellement à travers elles à l’aide d’une flèche ou de liens à points.
Selon l’imagerie, les carrousels d’images ou les “curseurs” peuvent être des déclarations audacieuses et en dire long sur votre site sans dire un mot. Si vous vous êtes toujours demandé comment obtenir l’effet carrousel sur votre site Web, ne vous posez plus la question.
Dans ce tutoriel, nous allons installer un carrousel d’images dans WordPress appelé Smart Slider 3.
Avant de nous lancer, il y a une mise en garde. Si vous vendez un produit sur votre site Web, il est préférable d’éviter les carrousels d’images. Ils ne sont pas forcément adaptés si votre objectif est de réaliser des conversions.
Mais si vous gérez un site Web de design ou de photographie, ou si vous les trouvez simplement esthétiquement attrayants et que vous en voulez un sur votre site personnel, lisez la suite.
Une note sur les tailles d’image
Le plugin Smart Slider 3 redimensionne et recadre les images pour que leur hauteur soit cohérente et qu’elles s’adaptent à la taille de la présentation que vous choisissez.
Cela signifie que les très grandes images seront réduites et les petites images augmentées. Comme vous le savez peut-être, lorsque vous augmentez la taille des petites images, la qualité en souffre généralement. Essayez donc d’éviter d’utiliser des images plus petites que les dimensions de votre curseur/carrousel.
Les grandes images sont généralement plus belles dans un carrousel d’images. Mais n’oubliez pas que les grandes images ont un temps de téléchargement plus long. Vous devez trouver un équilibre entre la taille et la qualité de l’image et parvenir à un compromis qui soit toujours agréable à regarder.
Un carrousel d’images est une fonction horizontale. Un carrousel composé d’images larges sera donc beaucoup plus esthétique qu’un carrousel composé d’images carrées.
Installation de Smart Slider 3
Connectez-vous à votre panneau d’administration WordPress.
Dans la colonne de navigation de gauche, passez la souris sur le lien “Plugins” et cliquez sur le lien “Add New”.
Dans la case “Rechercher des plugins…”, entrez “Smart Slider 3”.
Une fois que vous avez localisé le plugin, cliquez sur le bouton “Installer maintenant”.
Lorsque le plugin a été installé, cliquez sur le bouton “Activer”.
Création d’un carrousel d’images
Smart Slider 3 tire des images de votre bibliothèque multimédia. Avant de configurer un carrousel, téléchargez les images que vous avez l’intention d’utiliser.
Nous allons suivre le processus de configuration du slider en utilisant tous les paramètres par défaut. Puis nous ajouterons un carrousel à un article pour que vous puissiez vous faire une idée du fonctionnement du système. Plus tard, nous aborderons des paramètres, une configuration et des utilisations plus spécifiques.
Dans la colonne de navigation de gauche, cliquez sur le lien “Smart Slider”.
Vous avez la possibilité de regarder une vidéo d’introduction “Apprendre Smart Slider 3” qui explique en détail les bases de la configuration d’un slider ou d’un carrousel d’images.
Vous voudrez peut-être jeter un coup d’œil à la vidéo, ou vous pouvez audacieusement aller de l’avant avec nous maintenant et cliquer sur la tuile “NEW SLIDER” pour commencer.
Entrez les options de base dans la fenêtre popup.
Nom du carrouselest juste un nom pour vos propres besoins. Rendez-le descriptif si vous avez l’intention de mettre en place plusieurs carrousels.
La largeur et la hauteursont les dimensions du carrousel. Il n’est pas nécessaire de saisir des valeurs en pixels ici si vous avez l’intention de configurer le carrousel pour qu’il occupe toute la largeur de la fenêtre du navigateur ou du périphérique.
Préset – “Par défaut” correspond aux dimensions que vous avez fournies dans les champs Largeur et Hauteur. “Largeur complète” ignore les dimensions et crée un carrousel réactif qui s’étend sur toute la largeur de la fenêtre du navigateur ou du périphérique.
Cliquez sur le bouton “CREER”.
Ajouter des images à un nouveau slider
Le slider que nous venons de créer est vide, alors ajoutons quelques images.
Cliquez sur la tuile “ADD SLIDE”.
Cliquez sur la tuile “Image”.
Sélectionnez les images du carrousel dans la bibliothèque multimédia de WordPress.
Cliquez sur le bouton “Select”.
Les images que vous avez sélectionnées s’afficheront alors dans le plugin.
Faites défiler la page jusqu’à la section “Publier”.
Copiez le shortcode ou allez dans l’éditeur de post. Il y a également un extrait de PHP que vous pouvez copier si vous souhaitez insérer le carrousel dans le code du site.
Commencez un nouvel article. Saisissez un titre, puis cliquez sur l’icône “ajouter un bloc”.
Cliquez sur la tuile “Smart Slider 3”.
Si vous utilisez l’éditeur classique de WordPress, cliquez sur l’icône “Smart Slider 3”.
Cliquez sur le bouton “SELECT SLIDER”.
Cliquez sur votre curseur pour l’insérer dans le message.
Publiez l’article.
Le carrousel est maintenant publié dans un article avec des liens “avant” et “arrière” de chaque côté de l’image.
Par défaut, les images ne défilent pas automatiquement, mais nous pouvons changer cela.
Pour faire défiler automatiquement les images du carrousel
Dans la colonne de navigation gauche du panneau d’administration de WordPress, cliquez sur le lien “Smart Slider”.
Dans la section du tableau de bord Smart Slider, passez la souris sur votre slider et cliquez sur le bouton “EDITER”.
Cliquez sur le lien “AUTOPLAY” et basculez l’interrupteur “Enable”. Le temps par défaut entre les images est de 8000 ms (8 secondes).
Faites défiler vers le haut et cliquez sur le bouton “SAVE”.
Maintenant votre carrousel va automatiquement faire défiler les images.
Carrousel d’images sous forme de widget
Smart Slider est également un widget WordPress de type slider. Vous pouvez ajouter un slider partout où vous pouvez ajouter un élément widget, comme dans la barre latérale.
- Dans la colonne de navigation de gauche, cliquez sur le lien “Apparence”, puis sur le lien “Widgets”.
- Dans la section “Widgets disponibles”, cliquez sur le bouton “Smart Slider”.
- Choisissez l’endroit où vous souhaitez que le curseur s’affiche et cliquez sur le bouton “Ajouter un widget”.
- Smart Slider se déplace vers la liste des widgets actifs. Sélectionnez votre curseur dans la liste déroulante et cliquez sur le bouton “Enregistrer”.
Insertion d’un carrousel dans le code du site Web
Plus tôt, j’ai mentionné que vous pouvez copier et coller le code PHP pour insérer le carrousel dans le code du site Web ou le modèle WordPress.
La méthode pour modifier l’en-tête d’un site WordPress varie en fonction de la version de WordPress et du thème que vous utilisez.
Dans tous les cas, vous pouvez simplement copier le code PHP et le coller à l’endroit qui vous convient.
Glisser ou ne pas glisser, telle est la question.
La conception de sites Web est une chose subjective. Ce qu’une personne trouve attrayant, une autre peut ne pas le trouver. Cela ne changera jamais. Mais la conception de sites Web passe également par des modes et des phases, et les carrousels d’images ont certainement eu un moment de popularité lorsqu’ils semblaient être partout.
Nous en savons désormais plus sur l’efficacité ou l’inefficacité des carrousels. Donc, avant de décider de mettre en place un carrousel, assurez-vous de connaître les avantages et les inconvénients. Pour un site strictement visuel et créatif, ils peuvent encore être utiles et efficaces. Cependant, ils le sont moins pour votre site de commerce électronique typique.
Avez-vous déjà utilisé un carrousel d’images sur un site ? Vous préoccupez-vous des effets de vos choix de conception ou vous contentez-vous de ce qui vous semble le plus beau ? (Il n’y a rien de mal à faire ce que vous trouvez beau, malgré ce que les “experts” peuvent croire).