Créer des pages sans HTML – xoContentEditor
Créez des pages d'accueil, des descriptions de catégories et des fiches produits en quelques clics, sans avoir à programmer : vous sélectionnez des modules, remplissez les champs et visualisez dans l'aperçu la mise en page sur ordinateur et sur mobile. Ce guide vous accompagne de la mise en route jusqu’à la page finale et vous explique comment intégrer des widgets provenant de services tiers.
Le guide en vidéo (3 min 25 s) : mise en route, structure du système modulaire, insertion de modules, mise en page pour ordinateur et mobile, aperçu, modèles et widgets tiers. Vous trouverez les chapitres et la transcription sur la page de la vidéo. Les sous-titres peuvent être activés dans le lecteur. Voix off générée par IA.
En bref
- Où : pages CMS, catégories (description et texte SEO), produits, actualités, FAQ et fabricants. Un bouton situé au-dessus de la zone de contenu active le constructeur de pages, par langue.
- Structure : une page est composée de blocs de contenu. Chaque bloc comporte jusqu’à 16 éléments, et chaque élément correspond à l’un des 22 modules disponibles.
- Aperçu : affichage côte à côte sur ordinateur et sur mobile. Les polices et les couleurs de votre boutique ne s’affichent que sur la page de la boutique.
- Modèles : vous pouvez enregistrer une mise en page terminée en tant que modèle et la réutiliser sur d’autres pages ou dans d’autres langues.
- Widgets tiers : l’éditeur supprime le code de script lors de l’enregistrement. La boutique dispose de ses propres paramètres pour Trusted Shops, le widget Google Store, Sovendus et la mention PayPal « Payer plus tard ».
- Activation : xoContentEditor est un module complémentaire. Il est inclus dans les forfaits XONIC à partir de la formule Basic, mais pas dans les anciens modèles de contrat. Sans activation, le bouton n’apparaît pas. XONIC Premium: Content Editor
Dans ce guide
Fonctionnalités de xoContentEditor
Un éditeur modulaire au lieu d’un simple champ de texte.
Sans xoContentEditor, vous saisissez votre contenu dans un seul et même grand champ de texte. Tout ce qui va au-delà d’un texte continu et d’une image insérée – deux colonnes côte à côte, des fiches avec image et bouton, une frise chronologique, un témoignage client – devrait être écrit manuellement en HTML ou programmé par un développeur.
Avec xoContentEditor, vous composez plutôt la page à partir de modules prêts à l’emploi. Chaque module dispose de ses propres champs de saisie : le module « Carte » vous demande une image, un titre, du texte et la destination du bouton, et veille lui-même à ce que le résultat s’affiche correctement sur n’importe quel écran. Vous remplissez les champs, la mise en page se crée automatiquement.
Où pouvez-vous l’utiliser ?
Six sections dans le back-end – le même fonctionnement partout.
Pages CMS
Pages d’atterrissage, « À propos de nous », guides pratiques, pages promotionnelles. Sous CMS → Gestionnaire CMS, bouton « Contenu (xoContentEditor) » au-dessus du champ « Contenu de la page CMS ».
Catégories
Description et texte SEO, chacun avec son propre bouton « Utiliser xoContentEditor ». C'est ainsi qu'une liste de produits se transforme en page thématique. Sous Produits → Catégories / Produits.
Produits
La description du produit sous forme de page mise en page avec un tableau comparatif, des onglets et des images détaillées. Bouton « Description du produit (xoContentEditor) ».
Actualités
Articles avec sous-titres, citations et galeries d’images. Sous CMS → Articles d’actualité, bouton « Contenu (xoContentEditor) ». La biographie des auteurs peut également être mise en page de cette manière.
FAQ
Réponses avec des sections déroulantes, des encadrés d'information et des tableaux. Sous CMS → Articles FAQ, bouton « Contenu (xoContentEditor) ».
Fabricants
Pages de marque avec logo, histoire de la marque et sélection de produits. Sous Produits → Fabricants, bouton « Utiliser xoContentEditor ».
Activation : un clic par champ
L'éditeur ne remplace pas le champ de texte, il prend sa place.
Lorsque le bouton « Contenu (xoContentEditor) » est activé, le bloc-construction, avec sa barre d'en-tête et les blocs de contenu de cette langue, apparaît à la place du champ de texte. Cliquez pour agrandir.
Un bouton se trouve au-dessus de la zone de contenu. S'il est désactivé, vous voyez la zone de texte habituelle. Activez-le pour que l'éditeur s'affiche au même endroit. Selon la rubrique, le bouton s'intitule « Contenu (xoContentEditor) », « Description du produit (xoContentEditor) » ou « Utiliser xoContentEditor ».
Le bouton s'applique à chaque langue. Vous pouvez créer la version allemande d'une page à l'aide de l'éditeur visuel et laisser la version anglaise sous forme de texte simple dans un premier temps – ou inversement.
L'interface : des blocs de contenu sur trois colonnes
En haut, la barre d'en-tête ; en dessous, les blocs de contenu. Chaque bloc comporte les onglets Structure, Édition et Aperçu.
Voici à quoi ressemble l’éditeur ouvert. Les trois colonnes fonctionnent de concert : vous sélectionnez un élément à gauche, vous le remplissez au centre et vous voyez à droite comment il est disposé.
Barre d'en-tête
« Tout réduire » ferme tous les blocs, « Gestionnaire de modèles » ouvre les modèles. Le bouton « Ajouter un nouvel élément » situé dans la barre d’en-tête et à la fin de la liste permet de créer un nouveau bloc de contenu.
Dans le back-end, un bloc s’appelle « Mise en page flexible ». Plusieurs blocs s’affichent les uns sous les autres ; vous pouvez modifier leur ordre en faisant glisser l’en-tête d’un bloc.
En-tête d’un bloc de contenu
L'en-tête affiche le nombre d'éléments. Le bouton « Actif » vous permet de masquer un bloc dans la boutique sans le supprimer. Ce changement prend effet dès la prochaine sauvegarde.
La corbeille supprime immédiatement l’intégralité du bloc du masque, sans demande de confirmation. Il n’est définitivement supprimé qu’après enregistrement : si vous quittez la page sans enregistrer, il est conservé.
Deux boutons, deux fonctions : « Ajouter un nouvel élément » dans la barre d’en-tête crée un nouveau bloc de contenu, tandis que « Ajouter un nouvel élément » sous la structure ajoute un élément supplémentaire dans ce bloc. Cliquez pour agrandir.
1. Structure
La liste des éléments de ce bloc. « Ajouter un nouvel élément » ajoute un élément; 16 au maximum par bloc. Vous pouvez réorganiser les éléments en les faisant glisser ; cela définit l'ordre identique pour les versions bureau et mobile.
2. Édition
Les champs de l’élément sélectionné. Tout en haut se trouvent les onglets « Contenu » et « Mise en page et présentation ». Dans l’onglet « Contenu », vous trouverez le nom de l’élément (qui apparaît dans l’aperçu au-dessus de la vignette) et le type de composant, suivis des champs du module. La fonction « Supprimer l’élément » en haut de la page supprime l’élément après confirmation ; le dernier élément d’un bloc est conservé.
3. Aperçu
Deux vues côte à côte : ordinateur de bureau et mobile. Vous pouvez voir d’un seul coup d’œil si une rangée de cartes sur trois colonnes s’affiche correctement sur un téléphone portable. Un clic sur une vignette sélectionne l’élément.
6 étapes pour créer votre première page
Exemple : une page thématique en tant que page CMS ou en tant que catégorie.
| Étape | Ce que vous devez faire | Ce à quoi vous devez faire attention |
|---|---|---|
| 1 | Créer une page – en tant que page CMS sous CMS → Gestionnaire CMS (onglet « Insérer ») ou en tant que catégorie sous Produits → Catégories / Produits. | Une catégorie apparaît dans la navigation comme n’importe quelle autre catégorie. Vous pouvez créer un lien vers une page CMS dans le pied de page ou dans l’en-tête à l’aide de l’option « Ajouter un lien vers une page CMS dans la navigation de l’en-tête », voir Gestionnaire CMS. |
| 2 | Activez le bouton situé au-dessus de la zone de contenu. | Le bouton s'applique à chaque langue – il faut l'activer séparément pour chaque version linguistique. |
| 3 | Dans le premier élément, sélectionnez « Hero / Scène » comme type de composant. | Le « Hero » est la grande zone d’en-tête comprenant une image, un titre et un bouton : c’est la première chose que voit le visiteur. |
| 4 | Ajoutez d’autres éléments à l’aide de « Ajouter un nouvel élément » : texte, cartes, liste de produits, témoignage client. | L'ordre peut être modifié ultérieurement par glisser-déposer. Commencez par une structure générale, puis peaufinez-la. À partir de 16 éléments, créez un nouveau bloc de contenu. |
| 5 | Vérifiez les deux affichages à droite dans l’aperçu. | Il est particulièrement utile de jeter un œil à l’affichage mobile, notamment pour les tableaux et les lignes à plusieurs colonnes. |
| 6 | Enregistrer. | Ouvrez ensuite la page dans la boutique ; pour les pages CMS, cliquez sur « Afficher dans la boutique ». Ce n’est qu’à ce moment-là que vous la verrez avec vos polices et vos couleurs. |
Conseil pour débuter : ne créez pas votre première page sur une page importante de votre catalogue. Créez une nouvelle page CMS, ne la reliez à aucune autre page et désactivez l’option « Inclure dans les plans de site XML pour les moteurs de recherche ». Grâce à « Voir dans la boutique », vous pouvez vérifier le résultat sans que les clients ne trouvent la page. En revanche, une page inactive n’est pas affichée du tout par la boutique, pas même pour vous.
Sélectionner et remplir les modules
Un champ de sélection détermine les champs de saisie qui s’affichent.
Voici comment procéder
Un nouvel élément est vide. Vous sélectionnez dans le champ « Type de composant » ce que vous souhaitez en faire, et l'éditeur charge les champs de saisie correspondants.
Le type peut être modifié ultérieurement. Les champs que le nouveau module ne reconnaît pas sont alors ignorés. Les paramètres de l'onglet « Mise en page et affichage » sont conservés. En cas de doute, créez un nouvel élément et supprimez l'ancien dès que le nouveau est prêt.
Dans le bloc de texte, sélectionnez les titres (en-têtes 2 à 6) via le menu déroulant de la barre d'outils. à partir de 4.9.0
Mise en page pour ordinateur et mobile
Vous configurez la largeur, l’ordre et la visibilité pour chaque élément, et l’arrière-plan et le carrousel pour chaque bloc.
Par élément : « Mise en page et présentation »
Dans l'onglet « Mise en page et affichage », vous pouvez définir la largeur, le retrait, l'ordre et l'alignement séparément pour les ordinateurs de bureau et les appareils mobiles, ainsi que la visibilité et la couleur d'arrière-plan. Cliquez pour agrandir.
À l’aide du bouton « Ordinateur » / « Mobile », vous définissez séparément pour les deux affichages :
- la largeur, le décalage (retrait à gauche) et l’ordre,
- l'alignement vertical et horizontal.
En dessous se trouvent les options « Visibilité » (Toujours visible, Uniquement sur ordinateur, Uniquement sur mobile), la couleur d’arrière-plan, les « Classes personnalisées » et un « ID personnalisé », par exemple pour créer un lien vers cet emplacement précis de la page. Le terme « ordinateur » désigne les écrans d’une largeur minimale de 1 200 pixels.
Pour chaque bloc : « Options du widget »
Les options du widget s’appliquent à l’ensemble du bloc : ici, une bande colorée sur toute la largeur, dans laquelle trois témoignages de clients défilent sous forme de carrousel. Cliquez pour agrandir.
La section déroulante « Options du widget (largeur, arrière-plan, affichage) » s’applique à l’ensemble du bloc :
- Largeur : largeur de la page, pleine largeur avec le contenu dans le conteneur ou pleine largeur sans bordures – pour les bandes de couleur s'étendant sur toute la largeur de l'écran.
- Arrière-plan : couleur ou image, avec ou sans effet de parallaxe, ainsi qu’un espacement intérieur vertical.
- Affichage : grille ou « carrousel / diaporama » avec lecture automatique, flèches, points et plusieurs fiches par diapositive.
Les éléments « Hero / Scène » et « Liste de produits / Slider de produits » occupent toujours toute la largeur de leur bloc ; l’éditeur masque les champs de largeur pour ces éléments.
Le catalogue de modules
22 modules – classés par fonction, avec leur nom dans le champ de sélection.
| Bloc | À quoi sert-il ? |
|---|---|
| Texte et structure | |
| Texte | Texte continu avec titre facultatif et alignement du texte – le module le plus utilisé. |
| Hero / Scène | Grande zone d’en-tête avec titre, sous-titre, bouton et image d’arrière-plan, au choix avec un fond sombre ou clair et une hauteur minimale. |
| Onglets / Navigation par onglets | Plusieurs contenus regroupés de manière compacte derrière des onglets. |
| Accordéon / Zones dépliables | Sections à ouvrir et à fermer – idéales pour les questions et réponses. |
| Espace vide / Espaceur | Espace vide ou colonne libre ; sur mobile comme sur ordinateur, masqué ou avec un espacement personnalisé. |
| Image et médias | |
| Image | Image unique avec légende (texte alternatif), bords arrondis en forme de cercle, recadrage et mise au point. Le bloc « Image » ne comporte pas de lien. |
| Vidéo | YouTube, Vimeo ou un fichier vidéo personnel, avec lecture automatique (son coupé) et boucle infinie. |
| Fiche / Carreau avec image, texte et bouton | Image, titre, texte et bouton formant un ensemble cohérent – le module permettant de créer des rangées de vignettes. |
| Boîte d’icônes / Boîte de fonctionnalités | Icône, titre et texte court, avec en option un lien vers la tuile complète – pour présenter les avantages et les prestations. |
| Vendre et convaincre | |
| Liste de produits / diaporama de produits | De véritables articles de votre boutique intégrés au cœur du texte – issus d’une catégorie, via « Sélectionner des produits » ou parmi les best-sellers, les nouveautés et les offres. Sous forme de galerie ou de liste, éventuellement sous forme de diaporama, avec un bouton « Panier ». |
| Bouton / Appel à l'action | Un bouton unique avec une destination, un style et une icône. |
| CTA / Icône + texte + bouton | Encadré mis en avant avec titre, texte et bouton – la conclusion classique d’un argumentaire. |
| Témoignage / Avis client | Citation avec nom, fonction ou entreprise, photo de profil et note par étoiles. |
| Compteur / Compteur animé (à la hausse) | Chiffre clé qui augmente au fur et à mesure du défilement – pour les années d’expérience, les clients satisfaits, les articles de la gamme. |
| Compte à rebours (Live Shopping, lancement) | Compte à rebours jusqu’à une date donnée, suivi de votre message de fin d’événement. |
| Informations | |
| Tableau / Tableau responsive | Comparaisons et caractéristiques techniques, défilement horizontal sur mobile. |
| Chronologie / Ligne du temps | Chronologie des événements et histoire de l'entreprise sous forme de jalons. |
| Alerte / Encadré d'alerte | Encadré coloré pour les avertissements, les conseils et les messages de réussite, pouvant être fermé si vous le souhaitez. |
| Carte / Intégration de carte | Carte OpenStreetMap ou Google Maps avec repère. La fonction « Déterminer les coordonnées à partir de l'adresse » renseigne la position à partir de votre adresse. Google Maps nécessite une clé, à configurer dans Paramètres → Design → Général → Clé API Google Maps. |
| Contact et aspects techniques | |
| Formulaire / Formulaire intégré | Un formulaire créé sous CMS → Formulaires s'affiche à cet endroit. |
| Newsletter / Formulaire d’inscription | Inscription à la newsletter, avec civilité et nom si souhaité. Un e-mail de confirmation est envoyé si l’option « double opt-in » est activée. |
| Code / HTML personnalisé à partir de 4.9.21 | Code HTML personnalisé pour tout élément ne disposant pas de bloc dédié, par exemple une image liée ou une intégration via iframe. Ce code n’est pas traduit. L’éditeur supprime le code de script ; voir « Widgets externes ». |
Bien interpréter l’aperçu
Deux vues et deux modes d’affichage.
Ordinateur de bureau et mobile côte à côte
L'aperçu affiche les deux vues simultanément, avec la largeur, l'indentation, l'alignement et l'ordre. Ce qui correspond à trois fiches côte à côte sur ordinateur devient trois fiches les unes en dessous des autres sur mobile : vous le voyez immédiatement, au lieu de le découvrir plus tard.
« Pseudo » ou « Live »
En haut de l’aperçu, vous pouvez basculer entre « Pseudo » et « Live ». Le mode « Pseudo » affiche pour chaque élément une vignette avec une icône et le nom du module – idéal pour vérifier la disposition et l’ordre. Le mode « Live » affiche un aperçu réduit du contenu avec des textes abrégés. Ces deux vues sont des esquisses du backend ; vous ne pouvez voir les polices, les couleurs et les espacements de votre boutique que sur la page ouverte dans la boutique.
Modèles : réutiliser une structure
Une fois créée, réutilisez-la autant de fois que vous le souhaitez, y compris dans d’autres langues.
Enregistrer un modèle
Dans l'onglet « Appliquer », un modèle remplace la structure existante ou est ajouté à la fin ; si la case « Reprendre le contenu du modèle » n'est pas cochée, seule la structure est reprise. Cliquez pour agrandir.
- Enregistrez d’abord la page. Seule une version enregistrée peut servir de modèle.
- Ouvrez le « Gestionnaire de modèles » dans la barre d'en-tête, puis l'onglet « Enregistrer ».
- Saisissez un nom (obligatoire dans la langue par défaut, facultatif dans les autres langues).
- Laissez la case « Enregistrer le contenu » cochée pour inclure les textes et les images, ou décochez-la pour n’enregistrer que la structure et la mise en page.
- « Enregistrer comme modèle ».
Dans l’onglet « Gérer », vous pouvez renommer ou supprimer des modèles ; sous « Import/Export », vous pouvez les échanger sous forme de fichier avec une autre boutique.
Appliquer un modèle
Dans l’onglet « Appliquer », sélectionnez un modèle (« Aperçu » vous le montre au préalable), puis :
- « Remplacer (écraser le contenu existant) »: la structure actuelle de cette langue est remplacée.
- « Insérer (ajouter au contenu) »: les blocs du modèle sont ajoutés à la fin.
Si vous ne cochez pas la case « Reprendre le contenu du modèle », seule la structure vide est appliquée.
Important : l’application du modèle entraîne le rechargement de la page ; les modifications non enregistrées dans d’autres champs seront alors perdues. Enregistrez ensuite la page une fois, sinon la boutique continuera d’afficher l’ancienne version.
Reprendre la structure dans une autre langue
Enregistrez la version allemande finalisée en tant que modèle avec son contenu. Passez dans l’onglet de la langue cible, activez-y l’éditeur, enregistrez, puis appliquez le modèle en cliquant sur « Remplacer ». Remplacez ensuite les textes par la traduction.
Pour créer des modèles sans lien avec une page, rendez-vous dans CMS → Gestionnaire de modèles (xoContentEditor) et cliquez sur « Nouveau modèle ».
Widgets tiers et code HTML personnalisé
Labels de qualité, bons d’achat partenaires, informations sur les paiements échelonnés : commencez par utiliser l’intégration intégrée, puis le bloc de code.
Ce que permet le bloc de code
Le bloc « Code / HTML personnalisé » est adapté à l'intégration via iframe ; l'éditeur supprime les scripts lors de l'enregistrement. Cliquez pour agrandir.
« Code / HTML personnalisé » affiche votre code HTML tel quel, sans modification ni conversion – à une exception près, voir ci-dessous. Cela convient pour une image liée, une intégration via