À quoi ça sert
Websource Slider affiche un slider : une série de diapositives qui défilent. Chaque diapositive porte une image, un titre, un texte, un ou deux boutons et un lien.
Vous pouvez l'utiliser pour :
- mettre en avant une promotion ou une nouvelle collection sur la page d'accueil ;
- afficher un bandeau d'information en haut de vos fiches produit ;
- illustrer une page de contenu.
Le slider s'adapte au téléphone, se pilote au clavier et au doigt, et s'arrête tout seul quand le visiteur le survole. Il reprend les couleurs et les arrondis de votre thème.
Installation
- Dans l'administration de WordPress, ouvrez Extensions > Ajouter une extension.
- Cliquez sur Téléverser une extension, choisissez le fichier
websource-slider.zip, puis cliquez sur Installer maintenant. - Cliquez sur Activer l'extension.
- Ouvrez Apparence > Websource Slider.
L'extension fonctionne avec ou sans WooCommerce. Si WooCommerce est actif, vous pouvez en plus cibler les fiches produit, les catégories, le panier, etc.
Prise en main en 5 minutes
- Ouvrez Apparence > Websource Slider.
- Cliquez sur + Nouveau slider (ou Créer mon premier slider).
- Donnez-lui un nom, par exemple « Accueil ». Ce nom n'est vu que par vous.
- Laissez Avec une diapositive prête à modifier coché, puis cliquez sur Créer le slider.
- Cliquez sur la diapositive pour l'ouvrir.
- Dans Image sur ordinateur, cliquez sur Choisir une image et prenez une image de votre médiathèque.
- Remplacez le Titre et le Sous-titre par les vôtres.
- Cliquez sur + Ajouter un bouton. Saisissez le Texte du bouton et le Lien du bouton.
- Regardez le résultat dans Aperçu en direct, à droite.
- Cochez Afficher sur le site, puis cliquez sur Enregistrer.
Le slider apparaît en haut du contenu de votre page d'accueil.
Réglages
Tableau de bord des sliders
L'écran Apparence > Websource Slider liste vos sliders.
| Réglage | Rôle |
|---|---|
| + Nouveau slider | Crée un slider, avec une diapositive d'exemple ou vide. |
| Modifier | Ouvre l'éditeur du slider. |
| Afficher / Masquer | Rend le slider visible ou invisible sur le site, sans le supprimer. |
| Dupliquer | Crée une copie masquée du slider. |
| Supprimer | Supprime définitivement le slider. Les images restent dans la médiathèque. |
| Pastille Affiché / Masqué | Indique si les visiteurs voient le slider. |
| Pastille Modifications non publiées | Un brouillon attend dans l'éditeur. Ouvrez le slider et cliquez sur Enregistrer. |
Code [websource_slider slider="…"] | Code court à coller dans une page pour y afficher ce slider. |
Éditeur : Vos diapositives
Un slider contient jusqu'à 12 diapositives. Cliquez sur une diapositive pour l'ouvrir.
| Réglage | Rôle |
|---|---|
| Poignée ⠿ | Glissez-la pour changer l'ordre des diapositives. Les flèches ↑ et ↓ font la même chose. |
| × | Supprime la diapositive. |
| Afficher cette diapositive | Décochez pour masquer une diapositive sans la supprimer. |
| Image sur ordinateur | Image principale. Format paysage conseillé, 1920 px de large. |
| Image sur téléphone (facultatif) | Image dédiée aux petits écrans. Sans elle, l'image ordinateur est recadrée. |
| Texte alternatif de l'image | Décrit l'image pour les lecteurs d'écran et les moteurs de recherche. |
| Titre | Texte principal, 120 caractères au plus. |
| Sous-titre | Phrase d'accompagnement, 300 caractères au plus. |
| Boutons (2 maximum) | Pour chaque bouton : Texte du bouton, Lien du bouton et Style (Plein ou Clair). |
| Lien de toute la diapositive (facultatif) | Rend toute l'image cliquable. |
| Ouvrir dans un nouvel onglet | Ouvre le lien de la diapositive dans un nouvel onglet. |
| Position verticale du texte | En haut, Au milieu ou En bas. |
| Position horizontale du texte | Au début, Au centre ou À la fin. |
| Alignement du texte | Suit la position, ou force un alignement. |
| Zone de l'image à garder visible | Partie de l'image à préserver quand elle est recadrée. |
| Couleur du texte de cette diapositive | Remplace la couleur du texte pour cette diapositive seulement. |
| Couleur du voile de cette diapositive | Remplace la couleur du voile pour cette diapositive seulement. |
| Opacité du voile (-1 = réglage du slider) | Force du voile, de 0 à 85. Laissez -1 pour suivre le slider. |
| Durée d'affichage (secondes, 0 = réglage du slider) | Temps d'affichage propre à cette diapositive. |
Écrire un lien. Vous pouvez saisir une adresse complète (https://…), une adresse du site (/promotions), ou un raccourci :
page:shopmène à la boutique. Autres valeurs :page:home,page:blog,page:cart,page:checkout,page:account;post:12mène à la page, à l'article ou au produit numéro 12. Le numéro est visible dans l'adresse de l'écran de modification (post=12).
Ces raccourcis donnent toujours la bonne adresse, même si vous renommez la page.
Éditeur : Défilement et hauteur
| Réglage | Rôle |
|---|---|
| Effet de transition | Glissement (les images coulissent) ou Fondu (elles se remplacent en douceur). |
| Niveau des titres | Balise du titre : h1, h2, h3 ou simple paragraphe. Une page ne doit avoir qu'un seul titre principal (h1). |
| Défilement automatique | Fait défiler les diapositives toutes seules. |
| Secondes entre deux diapositives (2 à 30) | Rythme du défilement automatique. |
| Afficher le bouton pause | Laisse le visiteur arrêter le défilement. Conseillé pour l'accessibilité. |
| Revenir à la première diapositive à la fin (boucle) | Reprend au début après la dernière diapositive. |
| Afficher les flèches | Affiche les flèches précédent / suivant (masquées sur téléphone, où l'on glisse au doigt). |
| Afficher les points | Affiche un point par diapositive. |
| Hauteur | Selon le format de l'image ou Hauteur fixe. |
| Format sur ordinateur / Format sur téléphone | Proportions du slider (par exemple 16:6). Si le texte est long, le slider s'agrandit pour ne rien couper. |
| Hauteur sur ordinateur (px) / Hauteur sur téléphone (px) | Hauteur en pixels, en mode Hauteur fixe. |
Éditeur : Couleurs et style
| Réglage | Rôle |
|---|---|
| Reprendre le design de mon site (conseillé) | Couleurs, arrondis et ombres suivent votre thème. |
| Largeur | Dans la page (aligné sur le contenu) ou Pleine largeur (d'un bord à l'autre de l'écran). |
| Arrondis | Comme le thème, Aucun (angles droits), Légers, Moyens ou Très arrondis. |
| Couleur du voile sur les images | Couleur posée sur les images pour rendre le texte lisible. |
| Opacité du voile (0 à 85 %) | Force du voile. Augmentez-la sur les photos claires. |
| Couleur du texte | Couleur des titres et des textes. Vide = blanc. |
| Fond des boutons | Couleur des boutons Plein. Vide = couleur principale du thème. |
| Texte des boutons | Couleur du texte des boutons Plein. |
| Revenir à la valeur automatique | Efface la couleur choisie et reprend celle du thème. |
Éditeur : Où l'afficher ?
Cliquez sur + Ajouter un emplacement, choisissez un Endroit, puis Sur quelles pages ?. Un slider accepte jusqu'à 8 emplacements.
| Réglage | Rôle |
|---|---|
| Page d'accueil, dans le contenu | En haut du contenu de la page d'accueil. |
| Sous l'en-tête, en haut des pages | Une bande juste sous le menu. |
| En haut du contenu de la page | Au début de la zone principale. |
| En bas du contenu de la page | À la fin de la zone principale. |
| Juste au-dessus du pied de page | Une bande avant le pied de page. |
| Dans le pied de page | À la fin du pied de page. |
| Autre emplacement (avancé) | Nom d'une action WordPress ou WooCommerce de votre thème, par exemple woocommerce_before_shop_loop. À réserver aux utilisateurs avancés. |
| Sur quelles pages ? | Toutes les pages, page d'accueil, page boutique, catégories de produits, fiches produit, pages marques, pages de contenu, blog, résultats de recherche, connexion, espace client, panier, validation de la commande, page introuvable. |
| Retirer cet emplacement | Supprime cet emplacement. |
Sans emplacement, le slider ne s'affiche que là où vous placez son bloc ou son code court.
Bloc « Websource Slider »
Dans l'éditeur de pages, cliquez sur +, cherchez « Websource Slider », puis choisissez le Slider à afficher dans le panneau de droite.
| Réglage | Rôle |
|---|---|
| Slider à afficher | Le slider à montrer à cet endroit de la page. |
| Alignement Grande largeur / Pleine largeur | Élargit le slider au-delà du texte de la page. |
| Gérer mes sliders | Ouvre Apparence > Websource Slider dans un nouvel onglet. |
Export, import et désinstallation
En bas du tableau de bord, ouvrez Export, import et désinstallation.
| Réglage | Rôle |
|---|---|
| Télécharger l'export | Enregistre un fichier avec tous vos sliders (réglages, emplacements, diapositives, adresses des images). |
| Importer | Charge un fichier d'export. Les images sont téléchargées dans la médiathèque, ou réutilisées si elles y sont déjà. |
| Fusionner | Ajoute les sliders du fichier. Ceux qui portent le même identifiant sont mis à jour. |
| Remplacer | Vos sliders deviennent exactement ceux du fichier. Les autres sont supprimés. |
| Conserver mes sliders si je désinstalle l'extension | Garde vos sliders en base si vous supprimez l'extension. |
Cas d'usage
Un grand visuel sur la page d'accueil
- Créez un slider « Accueil » avec deux ou trois diapositives.
- Dans Où l'afficher ?, gardez Page d'accueil, dans le contenu.
- Dans Défilement et hauteur, choisissez le Format sur ordinateur 16:6 et le Format sur téléphone 4:3.
- Ajoutez une Image sur téléphone à chaque diapositive si le sujet de la photo est coupé sur petit écran.
Un bandeau d'information sur les fiches produit
- Créez un slider « Bandeau » avec une ou deux diapositives courtes.
- Dans Défilement et hauteur, choisissez Hauteur fixe et une hauteur de 260 px.
- Dans Couleurs et style, choisissez la LargeurPleine largeur et les ArrondisAucun (angles droits).
- Dans Où l'afficher ?, choisissez Sous l'en-tête, en haut des pages, puis Fiches produit.
Un slider au milieu d'une page
- Créez le slider et retirez son emplacement.
- Cochez Afficher sur le site et enregistrez.
- Ouvrez la page, insérez le bloc Websource Slider et choisissez le slider.
Reprendre les sliders d'une boutique PrestaShop
- Dans PrestaShop, exportez le thème avec le module Websource (section « Sliders »).
- Dans WordPress, ouvrez Export, import et désinstallation, choisissez le fichier, puis cliquez sur Importer.
- Vérifiez les liens et les emplacements : ceux qui n'existent pas dans WordPress sont signalés et ignorés.
Questions fréquentes
Le slider ralentit-il mon site ? Non. Sa feuille de style et son script ne sont chargés que sur les pages qui affichent un slider. Le script n'est chargé que si le slider a plusieurs diapositives. Seule la première image est chargée tout de suite.
Quelle taille d'image faut-il ? 1920 px de large en paysage pour l'ordinateur. WordPress crée lui-même les versions plus petites, et le navigateur choisit la bonne.
Puis-je afficher plusieurs sliders sur la même page ? Oui. Chaque slider fonctionne de façon indépendante.
Que se passe-t-il si le visiteur a désactivé les animations ? Le défilement automatique ne démarre pas. Les flèches et les points restent utilisables.
Mes modifications sont-elles enregistrées si je ferme la page ? Un brouillon est enregistré automatiquement pendant que vous travaillez. Il n'est visible sur le site qu'après un clic sur Enregistrer. À la réouverture, le message « Un brouillon non publié a été retrouvé » vous le signale.
Puis-je traduire mes sliders ? Oui, avec Polylang ou WPML. Les titres, textes, boutons et liens apparaissent dans leur écran de traduction des chaînes (groupe « Websource Slider »). Sans ces extensions, le slider a une seule langue.
L'extension gère-t-elle plusieurs boutiques ? Non. WordPress n'a pas de multiboutique : les sliders sont ceux du site.
Dépannage
Le slider n'apparaît pas sur le site. Vérifiez dans l'ordre : la case Afficher sur le site est cochée ; le slider a au moins une diapositive affichée, avec une image ou un texte ; il a un emplacement qui correspond à la page consultée ; vous avez cliqué sur Enregistrer. Videz ensuite le cache de votre site si vous en utilisez un.
Le slider n'apparaît pas à l'emplacement choisi avec mon thème. Les emplacements Sous l'en-tête et Dans le pied de page dépendent de la structure du thème. S'ils ne conviennent pas, utilisez le bloc, le code court, ou demandez à votre intégrateur d'utiliser Autre emplacement (avancé).
Un bouton n'apparaît pas.
Un bouton a besoin d'un texte et d'un lien valides. Un lien vers une page supprimée (post:12) est ignoré.
Le texte est difficile à lire sur l'image. Augmentez l'Opacité du voile dans Couleurs et style, ou pour la seule diapositive concernée.
L'image est mal cadrée sur téléphone. Ajoutez une Image sur téléphone, ou changez la Zone de l'image à garder visible.
L'import signale une image introuvable. L'adresse de l'image n'est plus accessible. Ajoutez l'image à la médiathèque, puis choisissez-la dans la diapositive.
Désinstallation
- Ouvrez Extensions > Extensions installées.
- Cliquez sur Désactiver sous Websource Slider. Vos sliders sont conservés, mais ne s'affichent plus.
- Cliquez sur Supprimer pour retirer l'extension.
À la suppression, les sliders et les réglages de l'extension sont effacés. Les images restent dans la médiathèque. Pour garder vos sliders, cochez d'abord Conserver mes sliders si je désinstalle l'extension dans Apparence > Websource Slider, ou téléchargez un export.
Les blocs et codes courts restés dans vos pages n'affichent plus rien : pensez à les retirer.