Vidéo : Créer des pages avec le xoContentEditor
De la mise en route à la page finale dans la boutique : cette vidéo vous montre, à l'aide d'une boutique de démonstration, comment insérer des modules, les agencer pour les versions bureau et mobile, les réutiliser comme modèles et intégrer des widgets tiers. Vous pouvez accéder directement à chaque chapitre ci-dessous.
La vidéo (3 min 39 s) vous guide à travers le système modulaire en huit chapitres. Les sous-titres peuvent être activés dans le lecteur. Voix off générée par IA.
Chapitres et transcription
Un clic sur l'indication de temps lance la vidéo à cet endroit.
Transcription de la vidéo
0:00 · Introduction
Des pages conçues à partir de modules prêts à l'emploi, sans aucun code HTML : voilà ce qu'est l'xoContentEditor. Cette vidéo vous montre la marche à suivre, de la mise en route jusqu'à la page finale dans la boutique.
0:14 · Où puis-je activer l’xoContentEditor ?
L'xoContentEditor est disponible pour les pages CMS, les catégories, les produits, les actualités, la FAQ et les fabricants. Au-dessus de la zone de contenu se trouve un bouton ; pour les pages CMS, il s'intitule « Contenu (xoContentEditor) ». Activez-le pour remplacer la zone de texte par le bloc-construction. Le bouton s'applique à chaque langue. Mais attention : désactiver l'éditeur et enregistrer efface la mise en page. L'xoContentEditor est un module complémentaire inclus dans les forfaits XONIC à partir de la version Basic.
0:48 · Comment l’éditeur visuel est-il structuré ?
Une page est composée de blocs de contenu. Dans le backend, un bloc s’appelle « Mise en page flexible » et comporte trois colonnes : à gauche, la structure avec les éléments ; au centre, les champs de l’élément sélectionné ; à droite, l’aperçu. Le bouton « Actif » vous permet de masquer un bloc dans la boutique sans le supprimer. Pour créer un nouveau bloc, cliquez en haut sur « Ajouter un nouvel élément ».
1:13 · Comment insérer un module ?
Avec « Ajouter un nouvel élément » sous la structure, vous ajoutez un élément, jusqu’à 16 par bloc. Dans le champ « Type de composant », vous sélectionnez ce que cela doit devenir, par exemple une carte avec une image, du texte et un bouton. Vous avez le choix entre 22 modules. L’éditeur charge les champs de saisie correspondants : vous les remplissez, et la mise en page s’affiche automatiquement.
1:39 · Comment organiser le contenu pour les ordinateurs de bureau et les appareils mobiles ?
Vous définissez la disposition de chaque élément dans l’onglet « Mise en page et affichage » : largeur, retrait et ordre, séparément pour les ordinateurs de bureau et les mobiles. Sous « Visibilité », vous pouvez choisir d’afficher un élément uniquement sur ordinateur de bureau ou uniquement sur mobile. Les options de widget, telles que la pleine largeur, une couleur d’arrière-plan ou un carrousel, s’appliquent à l’ensemble du bloc.
2:03 · À quoi ressemble la page dans la boutique ?
À droite de l’aperçu, vous voyez côte à côte les versions pour ordinateur et pour mobile. « Pseudo » affiche une vignette pour chaque élément, ce qui est idéal pour la répartition et l’ordre, tandis que « Live » affiche un aperçu réduit du contenu. Vous ne verrez les polices et les couleurs de votre boutique qu’une fois dans la boutique : enregistrez la page et ouvrez-la via « Voir dans la boutique ».
2:28 · Comment réutiliser une mise en page ?
Enregistrez une mise en page terminée en tant que modèle : dans la barre d’en-tête, ouvrez le gestionnaire de modèles, sélectionnez l’onglet « Enregistrer », saisissez un nom et cochez « Enregistrer le contenu ». Sur une autre page, sélectionnez le modèle dans l’onglet « Appliquer », puis choisissez « Remplacer » ou « Insérer ». Cela vous permet également de transposer la structure dans une autre langue, car chaque langue dispose de son propre module de construction. Enregistrez ensuite la page.
2:57 · Où puis-je intégrer des widgets externes ?
Vous pouvez insérer votre propre code HTML à l’aide du bloc « Code / HTML personnalisé », par exemple pour intégrer un élément via une balise iframe. L’éditeur supprime le code de script lors de l’enregistrement. Vous trouverez tous les détails et les réponses aux questions fréquentes dans le guide « xoContentEditor » sur xonic-solutions.de. Et si vous avez besoin d’aide : notre équipe d’assistance de Chemnitz est là pour vous.
