À quoi ça sert
Websource Builder ajoute une catégorie « Websource » dans l'éditeur de WordPress, avec des blocs pensés pour une boutique : bannière d'accueil, atouts, cartes, image et texte, appel à l'action, questions fréquentes, avis clients, chiffres clés, vidéo, bandeau d'annonce, produits, colonnes…
- Chaque bloc se règle dans le panneau de droite : textes, images, couleurs, espace, largeur. Aucune ligne de code.
- Des compositions regroupent vos blocs et s'affichent à l'endroit choisi : en haut de toutes les pages, sur l'accueil, sous le bouton d'achat des fiches produit, au-dessus des catégories, dans le pied de page…
- Des gabarits prêts à l'emploi (accueil, page « À propos », FAQ, page de lancement…) vous font gagner du temps.
- La fiche produit WooCommerce se réorganise en quelques clics : six dispositions, blocs à afficher ou masquer.
- Les blocs prennent les couleurs de votre thème. Avec le thème Websource, ils reprennent exactement sa palette ; avec un autre thème, ils restent sobres et lisibles.
WooCommerce est facultatif : sans lui, le bloc « Produits » et les emplacements de la boutique ne sont simplement pas proposés.
Installation
- Dans l'administration, ouvrez Extensions > Ajouter une extension.
- Cliquez sur Téléverser une extension et choisissez le fichier
websource-builder.zip. - Cliquez sur Installer maintenant, puis sur Activer.
- Un menu Websource Builder apparaît dans la colonne de gauche.
Prise en main en 5 minutes
- Ouvrez Websource Builder > Pages du site.
- Dans la rubrique Créer depuis un gabarit, cliquez sur Accueil : bannière + atouts. L'éditeur s'ouvre avec une bannière et trois atouts déjà en place, rattachés à la page d'accueil.
- Cliquez sur la bannière, puis modifiez le Titre, le Sous-titre et le Texte du bouton dans le panneau de droite.
- Cliquez sur Image de fond > Choisir une image pour ajouter une photo.
- Cliquez sur Publier en haut à droite.
- Ouvrez votre site : la bannière est en haut de la page d'accueil.
Réglages
Les blocs dans l'éditeur
Dans n'importe quelle page ou article, cliquez sur + et cherchez la catégorie Websource, ou tapez le nom du bloc (« bannière », « atouts »…).
| Bloc | Rôle |
|---|---|
| Bannière d'accueil | Grand titre, sous-titre, bouton et image de fond. Deux hauteurs. |
| Titre | Titre de section avec sous-titre ; importance H2 ou H3 pour Google. |
| Texte | Un ou plusieurs paragraphes avec gras, liens et listes. |
| Image | Une image, avec légende et lien facultatifs. |
| Bouton | Un bouton plein ou contour vers une page. |
| Espace ou séparateur | Un espace vertical (3 tailles) ou un trait. |
| Atouts / réassurance | Livraison, paiement, service client… : icône, titre, texte, 2 à 4 colonnes. |
| Cartes avec image | Cartes cliquables : catégories, services, articles. |
| Image et texte | Une image à gauche ou à droite d'un texte avec bouton. |
| Appel à l'action | Un encart avec un ou deux boutons ; 8 mises en forme (dégradé, sombre, image, icône…). |
| Questions fréquentes | Questions / réponses repliables, données structurées pour Google. |
| Avis clients | Citations avec nom, fonction, photo, note et date. |
| Chiffres clés | Des chiffres qui rassurent. |
| Vidéo | YouTube ou Vimeo, sans cookie tant que le visiteur ne lance pas la lecture. |
| Bandeau d'annonce | Une ligne d'information (promotion, livraison offerte), avec lien. |
| Produits | Les produits d'une catégorie ou les nouveautés (WooCommerce). |
| Code HTML libre | Votre propre code, pour les utilisateurs avancés. |
| Contenu de la page | Titre, chapeau et texte riche d'une page de contenu. |
| Colonnes | 1 à 6 colonnes de largeur réglable ; chaque colonne accueille d'autres blocs. |
Le panneau de chaque bloc comporte trois parties :
| Panneau | Rôle |
|---|---|
| Contenu | Les textes, images, liens et listes du bloc. Les listes (atouts, cartes, questions, avis, chiffres) se réordonnent avec Monter / Descendre, se dupliquent et se suppriment. |
| Apparence | Fond (aucun, teinte douce, couleur des cartes, couleur principale, sombre), Espace autour (petit, moyen, grand), Largeur (dans le cadre du site, fond pleine largeur, bord à bord), Alignement du texte. |
| Style avancé | En surcharge du style d'origine : couleurs avec transparence, dégradé, boutons, cartes, bordure, ombre, marges internes et externes, police. Un champ vide garde la valeur du thème. Réinitialiser le style avancé efface tout. |
| Layouts | Des présentations toutes faites, dans les couleurs de votre thème. Vos textes et images sont conservés. |
Dans un texte ou un lien, vous pouvez écrire des jetons qui s'adaptent tout seuls : {price:60} affiche « 60 € » dans la devise de la boutique ; {link:home}, {link:contact}, {link:shop}, {link:cart}, {link:account}, {link:page:ID}, {link:product:ID}, {link:category:ID} donnent l'adresse de la page, traduite si votre site est multilingue.
Colonnes
- Insérez le bloc Colonnes.
- Dans Préréglages de colonnes, choisissez par exemple 2 colonnes égales ou 1/3 + 2/3.
- Cliquez dans une colonne et insérez-y n'importe quel bloc, Websource ou non.
- Pour chaque colonne, réglez sa Largeur relative (1 à 6 parts). Espace entre les colonnes et Alignement vertical sont dans le panneau du bloc Colonnes.
Sur mobile, les colonnes passent les unes sous les autres.
Compositions et emplacements
Une composition est une page de blocs enregistrée à part, que vous affichez ailleurs que dans le texte d'une page.
- Ouvrez Websource Builder > Ajouter une composition (ou un bouton Ajouter une composition ici du tableau de bord).
- Donnez un nom à la composition et insérez vos blocs.
- Dans l'onglet Composition du panneau de droite, réglez l'emplacement :
| Réglage | Rôle |
|---|---|
| Type de page | Où afficher : toutes les pages, accueil, boutique, catégories, fiches produit, pages de contenu, articles, blog, connexion, inscription, mot de passe oublié, mon compte, mes commandes, panier, commande, contact, recherche, page 404. |
| Position | Tout en haut sous l'en-tête, avant ou après le contenu, tout en bas, dans le pied de page, section de l'accueil, au-dessus des produits d'une catégorie, sous le bouton d'achat, sous la fiche produit, sous le formulaire de connexion, dans le compte client, au-dessus du panier ou de la commande… La liste s'adapte au type de page. |
| Seulement ce contenu | Pour les pages, articles, produits et catégories : l'identifiant du contenu visé (0 = tous). |
| Ordre | Priorité entre plusieurs compositions au même endroit (10 par défaut, le plus petit en premier). |
| Texte natif de la page | Pour la position Contenu de la page : masquer le texte d'origine, ou l'afficher au-dessus ou au-dessous de la composition. |
| Avancé : un autre hook du thème… | Pour les développeurs : le nom d'un hook du thème. |
- Ajouter un emplacement permet d'afficher la même composition à plusieurs endroits.
- Langue : toutes les langues, ou une seule si votre site est multilingue (Polylang, WPML).
- Cliquez sur Publier. Tant que la composition est en brouillon, elle n'apparaît pas sur le site. Prévisualiser sur le site affiche la version enregistrée, visible par vous seul.
Sans emplacement, copiez le Shortcode affiché ([wsb_composition id="12"]) dans n'importe quelle page ou widget.
Websource Builder > Compositions liste toutes vos compositions ; Pages du site les montre page par page, avec un bouton Voir la page.
Si le connecteur Websource MCP (Claude) a préparé un brouillon pour une composition déjà en ligne, un bandeau Un brouillon préparé par le connecteur Claude est en attente apparaît dans l'éditeur : Charger ce brouillon dans l'éditeur pour le relire, puis Mettre à jour pour le publier, ou L'abandonner.
Fiche produit (WooCommerce)
Websource Builder > Fiche produit réorganise les fiches produit. Rien ne change tant que vous n'avez pas cliqué sur Enregistrer la disposition.
| Réglage | Rôle |
|---|---|
| Mise en forme | Classique, Galerie XL, Vitrine, Minimal, Achat toujours visible, Magazine. |
| Replacer les blocs dans les zones de la disposition choisie | Remet chaque bloc dans sa zone par défaut pour la mise en forme choisie. |
| Détails | Description, caractéristiques et avis en onglets, en accordéon ou en sections empilées ; Automatique suit la mise en forme. |
| Blocs de la fiche produit | Pour chaque bloc (pastilles, galerie, titre, prix, description courte, achat, réassurance, détails, produits liés et avis) : Affiché, Zone (galerie, colonne d'achat, dessous pleine largeur, haut) et Ordre dans la zone. |
| Revenir à la fiche produit du thème | Efface la disposition : le thème reprend la main. |
Le bloc Réassurance est l'endroit où s'affichent les compositions rattachées à « Dans la fiche produit, sous le bouton d'achat ».
Outils et réglages
| Réglage | Rôle |
|---|---|
| Exporter les compositions | Télécharge un fichier JSON avec vos compositions, vos sections réutilisables et la disposition de la fiche produit. Les pages, produits et catégories y sont désignés par leur slug : le fichier se réimporte sur un autre site. |
| Importer | Depuis un fichier ou un JSON collé. Fusionner ajoute et met à jour ; Remplacer reproduit l'état exact du fichier (les autres compositions vont à la corbeille). Analyse à blanc montre ce qui changerait sans rien écrire : laissez-la cochée pour un premier essai. |
| Page de contact | La page utilisée par le jeton {link:contact} et le type de page « Page de contact ». Par défaut, la page nommée « contact ». |
Cas d'usage
Un bandeau de promotion sur tout le site. Gabarit Bandeau de promotion : un bloc Bandeau d'annonce, type de page Toutes les pages du site, position Tout en haut. Écrivez « Livraison offerte dès {price:60} d'achat » : le montant suit la devise de la boutique.
Rassurer sous le bouton d'achat. Nouvelle composition avec un bloc Atouts / réassurance en 2 colonnes, type de page Fiches produit, position Dans la fiche produit, sous le bouton d'achat. Pour un seul produit, indiquez son identifiant dans Seulement ce contenu.
Une page « À propos » sans toucher au texte existant. Gabarit Page « À propos » (titre, image et texte, chiffres clés, appel à l'action), type de page Pages de contenu, identifiant de votre page, position Avant le contenu de la page.
Remplacer le texte d'une page par une mise en page riche. Position Contenu de la page, Texte natif de la page sur Masqué (remplacé par la composition).
Une FAQ qui ressort dans Google. Gabarit Page « Questions fréquentes » : le bloc Questions fréquentes produit automatiquement les données structurées FAQPage.
Des produits sur une page de contenu. Insérez directement le bloc Produits dans la page : choisissez la catégorie (ou Nouveautés), le nombre de produits et les colonnes.
Sans l'éditeur de blocs. Chaque bloc existe en shortcode : [wsb_hero title="Bienvenue" button_label="Voir" button_url="{link:shop}"], [wsb_features columns="3"][wsb_item icon="icon:truck" title="Livraison rapide" text="Sous 48 h"][/wsb_features].
Questions fréquentes
Les blocs prennent-ils les couleurs de mon thème ? Oui. Avec le thème Websource (et l'extension Websource Theme Config), ils suivent exactement la palette, l'arrondi et les polices réglés. Avec un autre thème, ils utilisent des couleurs neutres de repli et la couleur de lien du thème quand elle est déclarée.
Puis-je mettre un bloc WordPress ordinaire dans une composition ? Oui. Une composition accepte tous les blocs de l'éditeur (paragraphe, image, galerie, blocs WooCommerce…), et le bloc Colonnes aussi.
L'extension ralentit-elle le site ? Non. Les feuilles de style sont chargées seulement sur les pages qui contiennent le bloc concerné, et il n'y a aucun JavaScript côté visiteur.
Comment afficher une composition dans une seule langue ?
Dans l'onglet Composition, choisissez la Langue. Avec WPML, les compositions se traduisent aussi comme n'importe quel contenu (fichier wpml-config.xml fourni).
Les gabarits sont-ils modifiables ? Oui. Un gabarit n'est qu'un point de départ : une fois inséré, chaque bloc se modifie, se déplace ou se supprime.
Que se passe-t-il si je désactive WooCommerce ? Le bloc Produits n'affiche rien et les emplacements de la boutique ne sont plus proposés. Le reste fonctionne.
Dépannage
Ma composition n'apparaît pas. Vérifiez qu'elle est publiée (pas en brouillon), que le Type de page correspond bien à la page regardée et que Seulement ce contenu vaut 0 ou l'identifiant exact du contenu. Pour une langue précise, vérifiez la Langue.
La composition apparaît deux fois. Elle a deux emplacements qui se recoupent (par exemple « Toutes les pages du site » et « Page d'accueil »). Retirez l'un des deux.
Le bloc Produits est vide. WooCommerce doit être actif et la catégorie choisie doit contenir des produits publiés et visibles.
Les couleurs ne correspondent pas à mon thème. Avec le thème Websource, enregistrez une fois la page Apparence > Websource Theme Config. Avec un autre thème, utilisez le Style avancé du bloc pour fixer vos couleurs.
Une page de contenu a perdu son texte. Une composition est rattachée à cette page avec la position Contenu de la page et Texte natif de la page sur Masqué. Passez sur Au-dessus ou Au-dessous, ou retirez l'emplacement.
L'import ne retrouve pas une page ou un produit. Le rapport d'import liste les références manquantes : les liens concernés pointent vers l'accueil. Créez le contenu avec le même slug, puis relancez l'import en mode Fusionner.
Désinstallation
- Extensions > Extensions installées, ligne Websource Builder : Désactiver.
- Puis Supprimer.
La suppression efface les compositions, la disposition de la fiche produit et les réglages de l'extension. Les pages et articles qui contenaient des blocs Websource restent en place : leurs textes réapparaissent comme du contenu ordinaire. Pensez à Exporter les compositions avant, si vous voulez pouvoir les remettre un jour.