À quoi ça sert
Websource Slider affiche des images qui défilent : promotions, nouveautés, univers de votre boutique. Chaque diapositive porte une image, un titre, un sous-titre, jusqu'à deux boutons et un lien.
- Vous envoyez une image ; le module crée seul les versions légères adaptées à chaque écran.
- Une image différente peut être utilisée sur téléphone.
- Le défilement automatique s'arrête au survol, au clavier, hors écran et avec un bouton pause.
- Les couleurs, les arrondis et les ombres reprennent ceux de votre thème.
- Vous choisissez où le slider s'affiche : accueil, sous l'en-tête, haut ou bas des pages, pied de page.
Installation
- Le module est installé et activé avec le thème Websource. Sinon, ouvrez Modules > Gestionnaire de modules, cliquez sur Installer un module et envoyez
websourceslider.zip. - Ouvrez Apparence > Slider.
- Si le module officiel Image Slider contient des diapositives, un bandeau propose Reprendre ses diapositives : un nouveau slider est créé masqué, l'ancien module n'est pas modifié.
Prise en main en 5 minutes
- Dans Apparence > Slider, cliquez sur Créer mon premier slider (ou + Nouveau slider).
- Saisissez le Nom du slider (vous seul le voyez), gardez Avec une diapositive prête à modifier, puis cliquez sur Créer le slider.
- Cliquez sur la diapositive pour l'ouvrir. Sous Image sur ordinateur, cliquez sur Choisir une image, puis sur Choisir des fichiers et envoyez votre image.
- Remplacez le Titre et le Sous-titre. L'Aperçu en direct, à droite, suit vos modifications.
- Dans Où l'afficher ?, gardez Page d'accueil, dans le contenu.
- Activez Afficher dans la boutique, puis cliquez sur Enregistrer.
Réglages
Écran Slider (liste)
| Réglage | Rôle |
|---|---|
| + Nouveau slider | Crée un slider, avec une diapositive de départ ou vide. |
| Reprendre ses diapositives | Copie les diapositives du module officiel Image Slider dans un nouveau slider masqué. |
| Carte d'un slider | Nom, état (Affiché ou masqué), nombre de diapositives, emplacements. |
| Modifier, interrupteur Afficher, Dupliquer, Supprimer | Actions sur le slider. |
| Conserver mes sliders et mes images si je désinstalle le module | Recommandé : vous les retrouvez en réinstallant le module. |
Éditeur : barre du haut
| Réglage | Rôle |
|---|---|
| ← Mes sliders | Retour à la liste. |
| Nom | Nom interne du slider. |
| État | « Brouillon enregistré à … (pas encore visible dans la boutique) » pendant vos modifications, puis « Enregistré à … ». |
| Afficher dans la boutique | Interrupteur. Un slider masqué n'est visible nulle part. |
| Enregistrer | Applique le brouillon à la boutique. |
Éditeur : Vos diapositives
Cliquez sur une diapositive pour ouvrir ses réglages. La poignée ⠿ et les flèches ▲ ▼ changent l'ordre ; ✕ supprime la diapositive ; + Ajouter une diapositive en crée une.
| Réglage | Rôle |
|---|---|
| Afficher cette diapositive | Décochée : la diapositive est conservée mais masquée. |
| Image sur ordinateur | Choisir une image, puis Changer ou Retirer. Format paysage conseillé, 1920 px de large. |
| Image sur téléphone (facultatif) | Sans image dédiée, l'image ordinateur est recadrée. |
| Texte alternatif de l'image | Décrit l'image pour les lecteurs d'écran. |
| Titre, Sous-titre | Textes de la diapositive, par langue. |
| Boutons (2 maximum) | Texte du bouton, Lien du bouton, Style (Plein ou Clair). |
| Lien de toute la diapositive (facultatif) | Adresse, ou raccourci : « cms:3 » ou « page:contact » donnent la bonne adresse dans chaque langue. |
| Ouvrir dans un nouvel onglet | Pour le lien de la diapositive. |
| Position verticale du texte | En haut, Au milieu, En bas. |
| Position horizontale du texte | Au début, Au centre, À la fin. |
| Alignement du texte | Comme la position, Au début, Centré, À la fin. |
| Zone de l'image à garder visible | Centre, Haut, Bas, Gauche, Droite : ce qui reste visible quand l'image est recadrée. |
| Couleur du texte, Couleur du voile de cette diapositive | Propres à la diapositive ; ↺ revient au réglage automatique. |
| Durée d'affichage (secondes) | 0 = réglage du slider. |
| Opacité du voile | -1 = réglage du slider. |
Éditeur : Défilement et hauteur
| Réglage | Rôle |
|---|---|
| Effet de transition | Glissement ou Fondu. |
| Défilement automatique, Secondes entre deux diapositives | De 2 à 30 secondes. |
| Revenir à la première diapositive à la fin (boucle) | Défilement sans fin. |
| Afficher les flèches, Afficher les points, Afficher le bouton pause | Commandes visibles. |
| Hauteur | Selon le format de l'image ou Hauteur fixe. |
| Format sur ordinateur | 16 : 5, 16 : 6, 16 : 7, 2 : 1, 16 : 9, 21 : 9, 3 : 1, 4 : 3. |
| Format sur téléphone | 1 : 1, 4 : 5, 3 : 4, 4 : 3, 16 : 9, 2 : 1. |
| Niveau des titres | Titre principal de la page (h1) sur la première diapositive seulement, h2, h3 ou Simple paragraphe. Une page ne doit avoir qu'un seul titre principal. |
Éditeur : Couleurs et style
| Réglage | Rôle |
|---|---|
| Reprendre le design de ma boutique (conseillé) | Couleurs, arrondis et ombres suivent votre thème. Une couleur choisie ci-dessous passe avant. |
| Largeur | Dans la page ou Pleine largeur. |
| Arrondis | Comme le thème, Aucun (angles droits), Légers, Moyens, Très arrondis. |
| Couleur du voile sur les images, Couleur du texte, Fond des boutons, Texte des boutons | Couleurs du slider ; ↺ revient à la valeur automatique. |
| Opacité du voile (0 à 85 %) | Un voile sombre améliore la lisibilité du texte sur les photos claires (35 % par défaut). |
Éditeur : Où l'afficher ?
| Réglage | Rôle |
|---|---|
| Endroit | Page d'accueil, dans le contenu ; Sous l'en-tête, en haut des pages ; En haut du contenu de la page ; En bas du contenu de la page ; Juste au-dessus du pied de page ; Dans le pied de page ; Autre emplacement (avancé). |
| Pages concernées | Pour les endroits autres que l'accueil : toutes les pages ou un type de page (catégories, fiches produit, marques, pages de contenu, recherche, connexion, espace client, panier, commande, contact, 404). |
| Retirer cet emplacement, + Ajouter un emplacement | Jusqu'à 8 emplacements. |
| Pour les utilisateurs avancés | Code à coller dans un fichier .tpl du thème, par exemple {widget name='websourceslider' slider='demo-a-accueil'}. Il fonctionne sans emplacement, si le slider est activé. |
Cas d'usage
Remplacer Image Slider. Cliquez sur Reprendre ses diapositives, vérifiez le nouveau slider, affichez-le, puis désactivez l'ancien module.
Une bannière fixe. Un slider avec une seule diapositive et le défilement automatique décoché.
Une image pensée pour le téléphone. Ajoutez une Image sur téléphone au format portrait et choisissez le Format sur téléphone 4 : 5.
Une annonce sous l'en-tête des catégories. Endroit Sous l'en-tête, en haut des pages, pages Pages catégories.
Dans une page construite avec Websource Builder. Glissez le bloc Slider de la palette.
Questions fréquentes
Quelles images puis-je envoyer ? JPG, PNG, WebP ou AVIF, 5 Mo et 6000 px au plus.
Dois-je redimensionner mes images ? Non. Des versions de 480 à 1920 px (et jusqu'à 2560 px) sont créées automatiquement, en AVIF ou WebP quand votre serveur le permet.
Le slider est-il accessible ? Oui : bouton pause, navigation au clavier, arrêt du défilement si le visiteur a demandé moins d'animations.
Mes modifications sont-elles visibles tout de suite ? Non. Le brouillon est enregistré automatiquement ; la boutique ne change qu'au clic sur Enregistrer.
Que deviennent mes sliders si je désinstalle le module ? Ils sont conservés si la case Conserver mes sliders et mes images est cochée.
Dépannage
Le bouton « + Ajouter un bouton » ne fait rien. Constaté sur la boutique de test : aucun champ n'apparaît au clic. En attendant le correctif, utilisez le Lien de toute la diapositive pour rendre l'image cliquable. Ce défaut est signalé à l'éditeur du module.
Le slider n'apparaît pas. Vérifiez l'interrupteur Afficher dans la boutique, la présence d'un emplacement et d'au moins une diapositive affichée, puis cliquez sur Enregistrer.
Deux sliders sur l'accueil. Le module officiel Image Slider est encore actif : désactivez-le.
L'image est refusée. Elle dépasse 5 Mo ou 6000 px, ou son format n'est pas accepté.
Le texte est peu lisible sur la photo. Augmentez l'Opacité du voile, ou changez la Couleur du texte.
Le sujet de la photo est coupé sur téléphone. Réglez la Zone de l'image à garder visible, ou ajoutez une image dédiée au téléphone.
Désinstallation
- Dans Apparence > Slider, laissez cochée la case Conserver mes sliders et mes images si je désinstalle le module si vous comptez le réinstaller. Décochez-la pour tout supprimer.
- Ouvrez Modules > Gestionnaire de modules, puis sur Websource Slider cliquez sur Désinstaller.