Modifier les images et textes du carrousel (diaporama) de la page d’acceuil

Modifier les images et les textes du slider ou carrousel sur la page d’acceuil de prestashop 1.6

Dans ce tutoriel, nous allons voir comment modifier notre diaporama de la page d’acceuil. Changer les images et modifier le texte et le bouton.

modification du slider

 

Modification de l’image du carrousel

Dans votre back-office, passez la souris sur l’onglet MODULES, puis cliquez sur Modules, descendez jusqu’à la liste des modules. Tapez dans le champ recherche « diaporama » et enfin cliquez sur configurer.

recherche du module diaporama sur prestashop 1.6

 

Vous voilà dans l’administration du diaporama

paramètre du module diaporama

 

Largeur maximale de l’image, cela correspond à la largeur maximum des images que vous voulez mettre, vous ne pouvez que réduire cette taille. Si vous souhaitez l’agrandir il faut supprimer les vignettes sur le coté

Vitesse, cela correspond à la vitesse de passage d’une image à l’autre.

Pause, cela correspond au temps où chaque image est arrêtée.

Lecture automatique, si vous cliquez sur oui, les images défileront seules, si vous cliquez sur non, l’internaute devra cliquer sur les flèches pour voir les différentes images du diaporama.

Modifier les images

Vous pouvez soit ajouter une image en cliquant sur + dans le coin en haut à droite de la liste des diapositives, soit cliquer sur modifier d’une des diapositives existantes.

Modification d'une des images du diaporama

 

Cliquez sur « choisissez un fichier », afin de choisir une image. Pour s’intégrer parfaitement l’image doit être de taille 779px de large pour 448px de haut.

Le titre de la diapositive correspond au nom qui lui sera donné par prestashop, mais n’apparaitra pas à l’écran.

Target URL, cela correspond au lien vers la page qui sera ouverte lorsque l’on clique sur la diapositive. Ce n’est pas obligatoire, vous pouvez laisser ce champ vide.

Légende, c’est ce qui apparaîtra dans le alt de votre image, c’est à dire un texte alternatif lorsque l’image de n’affiche pas. C’est important de le remplir pour deux raisons, l’accessibilité de votre site et votre référencement.

Description : Ici vous allez inscrire le texte qui apparaîtra sur votre image, vous avez un certain nombre d’outils qui vous permettent de faire la mise en forme de votre choix.

Voilà comment j’ai rempli mon image et j’ai rajouté un bouton.

configuration d'une des images du diaporama

 

Et voila ce que ça donne :

 

modification d'une des images du carroussel

N'hésitez pas à laisser un commentaire

Vous pouvez vous abonner à notre newsletter mensuelle pour être informé de nos nouveaux tutoriels.

Vous pouvez aussi aimer notre page facebook.

44 thoughts on “Modifier les images et textes du carrousel (diaporama) de la page d’acceuil

  1. Merci pour cet article très intéressant et qui m’est très utile. Quel est le nom de ce module ? Je trouve plusieurs résultats pour « diaporama » dans Addons mais leurs fonctionnalités ne semblent pas correspondre avec celles que vous décrivez (celles dont j’ai besoin) 🙂

    Merci

  2. Bonjour,
    Le texte de descriptions qui s’affiche sur l’image est limité en largeur (retour automatique à la ligne), comment régler la largeur du texte ?
    Belle journée

    1. Bonjour,
      Cela se passe dans le css du module, ouvrez le fichier homeslider.css qui se trouve dans prestashop –> themes –> votre theme –> css –> modules –> homeslider
      Moi je suis sur la dernière version à la ligne 42
      #homepage-slider .homeslider-description p {
      width: 50%;

      Changez le 50% par la valeur de votre choix.

      Belle journée

  3. Bonjour,
    Le texte s’affiche toujours en bas de l’image.
    Est ce qu’il ya un moyen de mettre le texte à coté de l’image?
    Merci

  4. Bonjour,

    Mon diaporama présente une seule image à la fois alors qu’il me semble il devrait en afficher 2
    J’ai du modifier un paramètre quelque part, mais je ne vois pas où.
    Pouvez vous me renseigner
    Merci

    1. Normalement le diaporama ne présente qu’une seule image à la fois et sur le coté il y à les vignettes.
      Tous les paramètre du caroussel se trouve dans le module diaporama.

  5. Bonjour,

    J’ai un soucis avec le diaporama. Lorsque je modifie une des slides exemples de départ tout fonctionne. Lorsque j’en créé une nouvelle, l’image s’affiche mais pas le texte ni le bouton, comme sur l’exemple. Je me retrouve donc avec la première slide OK image et texte + bouton et sur la slide 2 je n’ai que l’image.

    Les deux slides sont remplies pareil. Avez vous une idée ?

  6. Bonjour,
    Pour ma part lorsque j’ajoute une deuxième image à mon slider celle-ci s’affiche en dessous de la première au lieu de défiler l’une après l’autre. D’où peut venir le problème?

    Je vous remercie.

    1. Bonjour,

      Il s’agit probablement d’un problème de javascript, vous devriez contactez le développeur de votre thème pour qu’il règle le problème.
      Bonne journée

  7. Bonjour,

    Et merci pour vos tutos ! toujours clairs c’est une vrai mine.
    Pour ma part j’ai un petit souci, lorsque je rajoute un bouton, il ne se limite pas au texte, je me retrouve avec un petit texte dans un grand bouton. Visuellement..c’est moche lol y a-t-il une manipulation a faire pour réduire la taille du bouton ?

    Bonne journée.

    1. Bonjour,

      Normalement le bouton s’adapte à la taille du texte. Avez vous un lien vers votre site pour que je regarde ce qu’il se passe.

      Bonne soirée

  8. Bonjour,

    J’ai du texte sous 3 bannières qui sont elles-mêmes sous mon slider et je ne parviens pas à la changer (comprendre : impossible d’accéder au module qui me permettrait de changer quelques mots dans ce texte…Il n’a s’agit pas du bloc bannière, ni du diaporama, et pas non plus d’images slider…). Pas drôle du tout de ne pas trouver mais votre blog m’a déjà bien aidé ! merci d’avance !

    1. Bonjour,
      Dans homeslider.css il faut supprimer une ligne, mais je ne sais pas ou elle est. C’est écrit :

      .bx-wrapper {
      position: relative;
      padding: 0;
      zoom: 1;
      margin: 0 !important;
      }

      il faut supprimer la ligne : margin: 0 !important;
      N’hésitez pas à m’envoyer une bouteille de vin bio si ca marche 🙂

    1. Bonjour,

      C’esttout à fait possible, mais c’est une peu compliqué, cela va demander un développement spécifique, je ne peux pas vous donner un code tout fait.

  9. Bonjour, j’ai un soucis pour changer l’image, quand je mets l’image, et j’enregistre, celle ci n’est pas pris en compte… l’ancienne photo reste en place … je ne sais pas comment faire, et je ne trouve pas le code html pour le modifier…

    1. Bonjour,

      Vous pouvez repositionner le texte et le bouton en css, mais en fonction de ce que vous voulez faire il serait peut être plus judicieux de prendre un autre module comme le configurateur de thème ou l’éditeur de page d’accueil.

      Bonne journée

  10. Bonjour,
    J’ai un probleme par rapport au rajout des photos. Hier je m’entrainait a mettre de nouvelles photos dans le carousel donc j’ai rajoute une photo et desactive une autre sauf que celle que jai rajoute n’apparait pas ( y a que le titre qui apparait…) Ce matin bizarrement je rajoute encore une fois une photo et elle s’affiche mais ce sont les deux autres qui disparaissen :O Que faire ? ><

  11. Bonjour à tous,
    Je m’appelle Catherine et je suis débutante, j’ai commencé à créer un site internet de vente de sac à main et chaussures et je galère sur pas mal de choses, tout d’abord les diaporamas, enfin sur Prestashop 1.7 c’est caroussel, je mets mes photos tout va bien sur le back office mais elles ne s’affichent qu’à moitié sur mon site, j’ai beau les rétrécir c’est toujours le même probléme.
    Pouvez vous m’aider?
    Merci à tés bientôt

    1. Bonjour,

      Je vous aiderai avec plaisir, mais j’ai besoin de l’url du site pour essayer de comprendre ce qu’il se passe. Vous pouvez laisser l’url de votre site dans le champs prévu à cet effet afin qu’il ne s’affiche pas.

      Bonne journée

  12. Bonjour,

    J’ai mon texte qui s’affiche en dessous de l’image et non sur l’image .
    J’ai vu le code css et tout semble correct .
    D’ou pensez vous que cela peut venir ?
    Merci

  13. Bonjour,

    Merci pour cet article. Cependant mes images ne se positionnent en aucun cas à coté. comme sur l’image avec la grande et les petites à côté. Je ne vois pas comment régler le problème.
    Auriez-vous peut être un module gratuit dans l’un de vos tiroirs à me conseiller pour pouvoir gérer très librement ces encadrés.
    Dans l’idéal j’aurais souhaiter affiché comme ceux ci (en forme d’un long rectangle)
    – encadré cliquable de la catégorie -> image produit cliquable d’exemple-> image produit cliquable d’exemple- image produit cliquable d’exemple
    – pareil mais avec une autre catégorie
    – encore

    Cela permettrait de guider mes clients.

Répondre à crozier Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *