À quoi ça sert
Websource Builder est l'éditeur visuel du thème Websource. Vous composez une page avec des blocs prêts à l'emploi (bannière, atouts, cartes, questions fréquentes, produits…), vous voyez le résultat tout de suite, puis vous mettez en ligne d'un clic. Aucun code n'est nécessaire.
Le module regroupe cinq outils, accessibles par une barre de navigation commune :
- Live builder de l'accueil : l'éditeur de la page d'accueil ;
- Organiser les modules de l'accueil : l'ordre des modules dans chaque emplacement de la page ;
- Pages de contenu (CMS) : l'édition d'une page de contenu avec les mêmes blocs ;
- En-tête et pied de page : le choix d'une variante d'en-tête, de menu mobile et de pied de page ;
- Fiche produit : la disposition des fiches produit.
Pages et contenus est le tableau de bord qui liste toutes les pages du site et tous vos contenus. Le lien Importer / Exporter le thème ouvre l'écran de Websource Theme Config.
Les couleurs, les arrondis et les bordures des blocs suivent les réglages de votre thème (module Websource Theme Config).
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
websourcebuilder.zip. - Ouvrez Apparence > Websource Builder dans le menu du back-office.
En multiboutique, choisissez d'abord une boutique : un contenu appartient à une seule boutique.
Prise en main en 5 minutes
Exemple suivi sur la boutique de test : une bannière et trois atouts en haut de la page d'accueil.
- Ouvrez Apparence > Websource Builder, puis cliquez sur Pages et contenus.
- Cliquez sur + Créer un contenu.
- Dans la fenêtre Par quoi voulez-vous commencer ?, choisissez le modèle Accueil : bannière + atouts.
- Dans Dernière étape, saisissez le Nom du contenu (visible de vous seul), choisissez Sur quelle page ? (Page d'accueil) et À quel endroit de la page ? (Tout en haut, sous l'en-tête). Cliquez sur Créer et ouvrir l'éditeur.
- Dans l'aperçu, cliquez sur la bannière. À droite, remplacez Titre, Sous-titre, Texte du bouton et Lien du bouton. L'aperçu suit votre saisie.
- Le brouillon est enregistré tout seul (« Enregistré automatiquement à … »). Tant que vous n'avez pas publié, vos visiteurs ne voient rien.
- Cliquez sur Mettre en ligne. Le message « Votre contenu est en ligne » s'affiche et l'étiquette passe de Brouillon à En ligne.
Réglages
Pages et contenus (tableau de bord)
| Réglage | Rôle |
|---|---|
| + Créer un contenu | Ouvre le choix du modèle : Page vide, Accueil : bannière + atouts, Accueil complet : bannière + widgets, Bandeau de promotion, Page « À propos », Page « Questions fréquentes », Connexion : réassurance, Page de lancement. |
| Modifier la page d'accueil | Boutons Ouvrir le live builder de l'accueil et Organiser les modules de l'accueil. |
| Pages du site | Une ligne par page : Page d'accueil, Pages catégories, Fiches produit, Pages de contenu (CMS) et chacune de vos pages, Page de connexion, Page d'inscription, Mot de passe oublié, Mon compte (tableau de bord), Mes commandes, Panier, Page de contact, Page introuvable (404). L'étiquette indique Aucun contenu ou le nombre de contenus. |
| Construire la page (aperçu en direct) | Ouvre la vue des emplacements de cette page (voir « Organiser les modules »). |
| Créer avec le builder / Modifier / Ajouter une section | Crée un contenu pour cette page, ou ouvre celui qui existe. |
| Modifier avec le builder | Sur une page de contenu : ouvre son texte dans le builder. |
| Voir la page | Ouvre la page sur la boutique. |
| Tous vos contenus | Une carte par contenu : nom, état (Brouillon ou En ligne), langue, emplacement (« Affiché : … »), boutons Modifier, Dupliquer, Traduire, Supprimer et un interrupteur pour afficher ou masquer un contenu en ligne. |
Emplacements proposés à la création (« À quel endroit de la page ? ») : Tout en haut, sous l'en-tête (pleine largeur) ; Avant le contenu de la page ; Après le contenu de la page ; Tout en bas, au-dessus du pied de page (pleine largeur) ; Section de l'accueil. Selon la page s'ajoutent : dans la fiche produit sous le bouton d'achat, sous la fiche produit, sous le formulaire de connexion, au-dessus ou sous le formulaire d'inscription, dans les liens du compte client.
Éditeur (live builder)
Barre du haut :
| Réglage | Rôle |
|---|---|
| Mes contenus | Retour au tableau de bord. |
| Nom du contenu | Modifiable à tout moment. |
| Brouillon / En ligne | État du contenu. |
| Emplacement (par exemple « Page d'accueil · Section de l'accueil ») | Change la page et l'endroit où le contenu s'affiche. |
| Icônes ordinateur, tablette, mobile | Largeur de l'aperçu. |
| Précédent / Suivant | Annule ou rétablit la dernière action (aussi Ctrl+Z et Ctrl+Y). |
| Exporter / Importer | Enregistre la page dans un fichier .json, ou en charge une. |
| Mettre en ligne | Publie le brouillon. |
Colonne de gauche :
| Réglage | Rôle |
|---|---|
| Ajouter | Palette de blocs. Glissez un bloc dans la page, ou cliquez dessus pour l'ajouter à la fin. |
| Structure | Liste des blocs de la page, dans l'ordre. |
| Mes sections | Vos sections enregistrées, réutilisables dans n'importe quelle page. |
Blocs de la palette :
| Famille | Blocs |
|---|---|
| Sections | Bannière d'accueil, Atouts / réassurance, Cartes avec image, Image et texte, Appel à l'action, Questions fréquentes, Avis clients, Chiffres clés, Bandeau d'annonce, Colonnes. Les widgets des modules Websource installés s'y ajoutent : Slider, Magasin / horaires, Newsletter, Réassurance. |
| Texte | Titre, Texte, Bouton, Espace ou séparateur, Contenu de la page. |
| Médias | Image, Vidéo. |
| Boutique | Produits, et selon les modules installés : Langue et devise, Marques, Nouveautés, Avis Google. |
| Avancé | Code HTML libre. |
Colonne de droite, après un clic sur un bloc (exemple de la Bannière d'accueil) :
| Réglage | Rôle |
|---|---|
| Titre, Sous-titre, Texte du bouton | Textes du bloc. |
| Lien du bouton | Adresse complète, ou un jeton : {link:home}, {link:contact}, {link:cms:ID}, {link:category:ID}, {link:product:ID}. Le lien s'adapte à la langue et à la boutique du visiteur. |
| Image de fond | Choisir une image ou coller son adresse. Facultatif ; une image large (1600 px) convient. |
| Hauteur | Moyenne ou Grande. |
| Apparence — Fond | Aucun, Teinte douce, Couleur des cartes, Couleur principale, Sombre. |
| Apparence — Espace autour | Petit, Moyen, Grand. |
| Apparence — Largeur | Dans le cadre du site (boxed), Fond pleine largeur contenu centré (wide), Bord à bord (aucune marge). |
| Apparence — Alignement du texte | Début de ligne ou Centré. |
| Style avancé | Couleurs, Boutons, Cartes, Bordure, Marges internes, Marges externes, Police. Un champ vide garde le style du thème. Bouton Réinitialiser le style avancé. |
| Layouts | Mises en forme prêtes, aux couleurs de votre thème. Un clic les applique ; vos textes et images sont conservés. |
| Dupliquer, + Ajouter une colonne, Enregistrer la section, Exporter, Supprimer | Actions sur le bloc. Les mêmes actions sont dans la petite barre qui apparaît sur le bloc dans l'aperçu, avec la poignée de déplacement et les flèches monter / descendre. |
Dans un texte, le jeton {price:60} affiche 60 dans la devise par défaut, converti dans la devise du visiteur.
Organiser les modules de l'accueil
Écran Construire : Page d'accueil. La même vue existe pour chaque page (bouton Construire la page (aperçu en direct)).
| Réglage | Rôle |
|---|---|
| Emplacements | Regroupés par zone : En-tête du site (Bandeau tout en haut, Barre du haut gauche et droite, En-tête : zone centrale, Menu principal), Haut de la page, Contenu de la page (Sections de la page d'accueil), Bas de la page, Pied de page (Avant le pied de page, Colonnes du pied de page, Après le pied de page). |
| Poignée et flèches ↑ ↓ | Changent l'ordre des modules dans un emplacement. L'ordre est appliqué immédiatement sur le site. |
| Réglages du module | Ouvre la configuration du module concerné. |
| + Ajouter un contenu personnalisé ici | Crée un contenu du builder à cet endroit. |
| Ordinateur, Tablette, Mobile, Actualiser l'aperçu, Ouvrir le site | Commandes de l'aperçu, à droite. |
Pages de contenu (CMS)
| Réglage | Rôle |
|---|---|
| Page de contenu | Liste de vos pages (Livraison, Mentions légales…). |
| Texte natif seul | Indique, pour chaque langue, que la page affiche encore son texte PrestaShop d'origine. |
| Importer le texte et modifier avec le builder | Transforme le texte actuel en bloc Contenu de la page, que vous pouvez modifier, déplacer ou compléter par d'autres blocs. Tant que rien n'est mis en ligne, la page reste telle quelle. |
En-tête et pied de page
Choisissez une variante : l'aperçu s'actualise à droite. Rien n'est publié avant « Enregistrer le design ».
| Réglage | Rôle |
|---|---|
| En-tête (ordinateur) | Classique, Centré, Compact, Équilibré, Bandeau de menu, Sombre, Large et aéré, Collant. |
| Dimensions de l'en-tête (ordinateur) | Hauteur minimale de l'en-tête (0 à 400 px, 0 = automatique), Marge intérieure haute et Marge intérieure basse (0 à 120 px). Appliquées à partir de 992 px de large. |
| Langue et devise | Pied de page (par défaut), Barre du haut à gauche, Barre du haut à droite. |
| Barre de recherche : largeur | Étroite, Moyenne, Large, Pleine largeur. |
| Barre de recherche : position | À gauche, Centrée, À droite. |
| Connexion, compte et panier | À droite du logo, ou Dans la barre du haut. |
| En-tête (mobile) | Icônes à droite du logo, Logo centré, Recherche visible. |
| Menu (mobile) | Barre en bas (par défaut) ou Bouton Menu en haut. |
| Pied de page | Sombre classique, Clair, Couleur de marque, Centré, Minimal, Bandeau accent, Deux tons, Fort contraste. |
| Plein écran, Nouvelle fenêtre, Ordinateur, Tablette, Mobile, Voir le haut, Voir le pied de page | Commandes de l'aperçu. |
| Enregistrer le design | Publie vos choix. |
Fiche produit
Rien n'est publié avant « Enregistrer ».
| Réglage | Rôle |
|---|---|
| Disposition | Classique, Galerie XL, Vitrine, Minimal, Achat toujours visible, Magazine. Le choix replace les blocs dans leurs zones. |
| Détails du produit | Selon la disposition, Onglets, Accordéon ou Sections empilées. |
| Blocs par zone | Quatre zones : En haut (pleine largeur), Galerie, Colonne d'achat, Dessous (pleine largeur). Blocs : Pastilles (nouveau, promo…), Galerie photos, Titre, Prix, Description courte, Achat (déclinaisons, quantité, panier), Réassurance, Détails, Produits liés et avis. Glissez un bloc d'une zone à l'autre ou utilisez ↑ ↓ ; l'œil l'affiche ou le masque. |
| Style | Style du bloc sélectionné (dans la liste ou dans l'aperçu). |
| Précédent, Suivant, Plein écran, Nouvelle fenêtre, Enregistrer | Commandes de l'écran. |
Cas d'usage
Annoncer une opération sur tout le site. Créez un contenu avec le modèle Bandeau de promotion, page Toutes les pages du site, puis mettez en ligne. Pour l'arrêter, basculez l'interrupteur de sa carte dans Tous vos contenus.
Rassurer sur la page de connexion. Modèle Connexion : réassurance : vos atouts s'affichent sous le formulaire de connexion.
Refaire la page « À propos ». Ouvrez Pages de contenu (CMS), choisissez la page, cliquez sur Importer le texte et modifier avec le builder, puis ajoutez une section Chiffres clés ou Image et texte.
Composer l'accueil avec vos modules. Dans le live builder de l'accueil, glissez les widgets Nouveautés, Marques, Réassurance ou Newsletter entre vos sections. Quand le widget d'un module est en ligne dans l'accueil, le module n'est plus affiché une seconde fois à son emplacement habituel ; il y revient si vous retirez le widget.
Réutiliser une section. Sur un bloc, cliquez sur Enregistrer la section. Elle apparaît dans l'onglet Mes sections de toutes vos pages (100 sections au plus par boutique).
Traduire un contenu. Dans Tous vos contenus, Traduire crée une copie liée dans une autre langue. Sans traduction publiée, la version de la langue par défaut s'affiche.
Questions fréquentes
Mes visiteurs voient-ils mes essais ? Non. Vous travaillez sur un brouillon enregistré automatiquement. Seul Mettre en ligne publie.
Puis-je revenir en arrière ? Oui, avec Précédent (60 étapes) tant que l'éditeur est ouvert.
Un contenu peut-il s'afficher dans toutes les langues ? Oui : sa carte indique Toutes les langues. Un contenu peut aussi être propre à une langue.
Les prix saisis dans un texte suivent-ils la devise ? Oui si vous écrivez {price:60} au lieu de « 60 € ».
Puis-je ajouter du code ? Le bloc Code HTML libre accepte du HTML. Pour du CSS, utilisez Websource Page Styles.
L'éditeur fonctionne-t-il sur tablette ? Sous 1024 px, l'aperçu, les blocs et les réglages s'empilent. Le glisser-déposer est pensé pour la souris : au doigt, cliquez sur un bloc de la palette puis utilisez les flèches.
Dépannage
Dans la fenêtre « Dernière étape », je ne vois pas de bouton pour valider. Sur la boutique de test, le bouton Créer et ouvrir l'éditeur s'affiche en blanc sur blanc, à droite de Retour. Il est bien présent : cliquez juste à droite de Retour.
Le panneau « Réglages » est coupé à droite dans l'éditeur. La barre de navigation de l'éditeur demande environ 1 420 px de large. Agrandissez la fenêtre du navigateur ou réduisez le zoom (Ctrl et −).
Mon contenu est « En ligne » mais n'apparaît pas. Vérifiez son emplacement (« Affiché : … ») et l'interrupteur de sa carte. Vérifiez aussi la langue du contenu.
Un module a disparu de l'accueil. Son widget est sans doute présent dans le contenu en ligne de l'accueil : le builder évite ainsi le doublon. Retirez le widget et remettez en ligne pour retrouver le module à sa place d'origine.
L'ordre des modules a changé sur le site sans que j'enregistre. C'est le fonctionnement de l'écran Organiser les modules : chaque déplacement est appliqué tout de suite. Utilisez Précédent pour revenir en arrière.
Une image est refusée. Le poids maximal est de 5 Mo.
L'import d'un fichier .json échoue. Le fichier doit venir d'un export du builder et peser moins de 2 Mo. Le message indique si le format ou certains blocs sont inconnus.
Désinstallation
- Ouvrez Modules > Gestionnaire de modules.
- Sur Websource Builder, ouvrez le menu de la flèche et cliquez sur Désinstaller.
La désinstallation supprime vos contenus et vos sections enregistrées. Exportez-les auparavant (bouton Exporter de l'éditeur, ou Importer / Exporter le thème). Pour masquer un seul contenu, utilisez plutôt son interrupteur ; pour tout couper temporairement, désactivez le module.