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 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.
Vous voilà dans l’administration du 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.
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.
Et voila ce que ça donne :
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
Bonjour, il s’agit du module diaporama de base dans prestashop 1.6. Il est donc installé par défaut.
Bonne journée
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
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
Bonsoir,
Merci pour cette réponse rapide.
Bonne soirée
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
Bonjour,
Normalement le texte est sur l’image, vous voulez le mettre à coté ?
Ou en bas de l’image ?
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
Problème résolu
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.
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 ?
Non aucune, êtes vous certain que les zones de texte sont bien remplies ?
Bonne journée
Bonjour,
J’ai un filtre sur les images de mon slider. Est-ce que vous pouvez me dire comment l’enlever?
merci
Bonjour qu’entendez-vous par filtre ? pouvez vous me donner l’adresse de votre site ?(je ne la publierai pas)
Bonne journée
Bonjour,
Est il possible de créer deux boutons sur la même slide ?
Bonne journée.
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.
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
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.
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
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 !
Bonjour,
Ca ne serai pas le configurateur de thème ?
Bonjour,
J’ai viré les blocs à droite et je voudrais centrer le diaporama mais mes images restent à gauche. Comment faire ?
Merci d’avance !
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 🙂
Bonjour
Comment changer la couleur de background du bouton « Shop » et la couleur du texte ?
Merci
Bonjour, les couleurs de texte et de fond se changent directement dans l’éditeur de texte.
Bonne journée
Bonjour,
Je souhaiterai savoir comment ajouter un bouton voir, et afficher le tarif du produit en question.
Merci
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.
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…
Bonjour,
Est-il possible d’ajouter des images supplémentaires? Je voudrais mettre 5 images dans mon slide
Merci d’avance.
Bonjour,
Oui c’est tout à fait possible, il faut cliquer sur le + en haut à droite
Bonjour,
Merci pour tous vos conseils précieux. J’aimerais mettre le texte et le bouton sous la photo, est-ce possible avec ce module ?
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
Bonjour,
je voudrais centrer le diaporama mais mes images restent à gauche, j’ai un carré blanc à droite, comment faire ?
Merci d’avance !
Bonjour,
Sur quelle version de prestashop êtes-vous ?
Bonne journée
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 ? ><
Bonjour,
Je n’ai pas eu de problème avec le carrousel, pouvez vous me donner l’url du site pour que je regarde.
Bonne journée
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
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
Bonjour,
Les images de mon caroussel apparaissent qu’a moitié (problème de taille je suppose) comment remédier à ce problème ?
Lien du site http://ergonomito.cluster023.hosting.ovh.net
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
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.
Bonjour,
Je ne vois pas de module qui pourrait faire cela, mais il faut juste styliser vos bloc pour leur donner la forme et la taille voulue.
Bonne journée
Bonjour,
Pouvons nous personnaliser les visuels en fonctions de la catégorie client ?
Merci d’avance.
Bonjour,
Oui il faut faire des conditions en fonction du type de clients.
Bonne journée
Simple commentaire pour te remercier ! Tu viens de me faire gagner de précieuses heures !