Content Editor

Inhaltsverzeichnis

Introduction

L'éditeur de contenu vous permet de créer en un clin d'œil des pages de contenu uniques pour votre boutique en ligne. Dans ce guide, nous vous expliquons pas à pas l'éditeur de contenu et, en dernier lieu, l’affectation de la page créée dans le menu.

Vidéo d’instruction

Dans cette courte vidéo, vous voyez la conception d’une page d’accueil possible avec l'éditeur de contenu.

Créer une page

Dans l’administration de la boutique, sous Contenu -> Pages, vous pouvez créer une nouvelle page ou modifier une page existante.

Figure 1 : Pages

Interface utilisateur Content Editor

Vous vous trouvez maintenant dans l’interface de l'éditeur de contenu.

Figure 2 : Éditeur de contenu

Explication des numéros
1 Conception adaptée	Modifiez l’affichage pour voir à quoi ressemble votre site pour les appareils mobiles. Vous ne pouvez toutefois modifier que partiellement les affichages de manière indépendante. Par exemple, vous pouvez modifier la taille d’une image dans l’affichage mobile, mais l’ancienne taille est toujours affichée dans l’affichage de bureau. Mais vous ne pouvez pas adapter la position de l’image par vue.
2 Lien	En cliquant sur le crayon, vous pouvez adapter le lien de la page. Si vous cliquez directement sur le lien, vous accédez à la page de la boutique en ligne.
3 Undo/Redo	Avec ces flèches, vous avez l’option d’annuler ou de reprendre les dernières opérations.
4 Afficher les lignes de guidage	Les lignes d’aide vous aident à vous orienter.
5 Aperçu	Dans l’aperçu, vous pouvez voir votre page (y compris les modifications non encore enregistrées) du point de vue du client.
6 Publier	La page que vous avez créée est automatiquement enregistrée. Si vous êtes prêt, vous pouvez publier la page ici.

Éléments

Sur le côté droit se trouvent les éléments qui peuvent être placés facilement par glisser-déposer. Il y a trois éléments.

Modèles

Les modèles sont des éléments déjà prêts avec une image et un texte qui servent d’inspiration.

Figure 3 : Modèles

Mises en page

Les mises en page vous donnent une structure générale.

Figure 4 : Layouts

Contenu

Vous pouvez faire glisser les contenus directement dans les mises en page ou les modèles. Il y a un contenu pour chaque bouton, image, titre, texte et vidéo.

Créez donc d’abord votre structure à partir des modèles ou des mises en page et remplissez-la ensuite avec les contenus.

Figure 5 : Contenu

Paramètres des éléments

En cliquant sur un élément, les paramètres de l'élément s’ouvrent à droite. Selon l’endroit où vous cliquez, d’autres options s’ouvrent. Dans les réglages des éléments, vous pouvez définir la largeur de la boîte, adapter l’arrière-plan ou déterminer l’orientation.

Boîte / Mise en page

Vous pouvez définir l’arrière-plan de chaque boîte. Pour cela, il suffit de cliquer sur l’arrière-plan. Les paramètres de l'élément s’ouvrent alors à droite. En plus d’un arrière-plan transparent, vous avez la possibilité de choisir une image, une vidéo ou une couleur.

Figure 6 : Boîte/disposition

Vous pouvez également effectuer des réglages pour la plus petite boîte (mise en page). Cliquez sur l’arrière-plan du layout, vous pouvez alors procéder aux réglages suivants.

Figure 7 : Mise en page

Formater les titres

La structure des titres n’est pas seulement importante pour l’apparence, mais aussi pour l’optimisation des moteurs de recherche (SEO).

Veillez à ce qu’il n’y ait qu’un seul titre H1 (titre 1) par page !

Vous pouvez régler les titres au niveau de la taille de la police :

Figure 8 : Taille de la police

Bouton

Vous disposez également de diverses possibilités de réglage lorsque vous cliquez sur le bouton. Définissez ici la destination du bouton, sa taille, son arrière-plan, etc.

Illustration 9 : Bouton

Image / Vidéo

Cliquez sur l’image ou sur la vidéo, là aussi le masque d'édition s’ouvre à droite. Téléchargez l’image souhaitée en cliquant sur l’icône dans l’image.

Figure 10 : Image

Maintenant, l’Asset Manager s’ouvre, à l’aide de cet assistant, vous pouvez télécharger les images ou les sélectionner directement à partir des images des produits.

Figure 11 : Gestionnaire d’actifs

Cliquez sur l'élément vidéo pour modifier les paramètres suivants. Vous pouvez télécharger des vidéos depuis Youtube ou Vimeo. Insérez en dessous le lien vers la vidéo ou l’ID de la vidéo.

Figure 12 : Vidéo

Traitement rapide

En plus des paramètres des éléments, vous pouvez également modifier les contenus directement sur la boîte. En cliquant sur le contenu souhaité, vous pouvez déplacer, dupliquer ou supprimer la boîte. Vous pouvez également adapter ici le format du texte.

Illustration 13 : Personnaliser le titre

Dès que vous avez terminé la page, vous pouvez maintenant l’attribuer à un menu. Sous Contenu -> Menu, vous trouverez la page nouvellement créée sous « Pages récentes ». Vous pouvez maintenant sélectionner la page, choisir le menu souhaité dans le menu déroulant et ajouter la page.

Illustration 14 : Menu

Vous attribuez les pages fixes comme les CGV, la page d’accueil, etc. directement dans leur édition. Allez sous Contenu -> Pages et éditez par exemple les CGV.

Nouveautés à partir de la v10

À partir de la version 10 de PepperShop, l'éditeur de contenu présente diverses nouveautés. Les fonctions avancées de l'éditeur de contenu vous aident à créer facilement et rapidement des contenus utiles et des expériences de marque personnalisées.

Outre le gestionnaire d’actifs élargi avec des images de prdoukte ainsi que des icônes de paiement et de logistique, dans lequel il est désormais possible de télécharger le format d’image Webp, des vidéos Loon, des GIF animés, par exemple pour les cinemagraphs, il y a quelques nouvelles fonctionnalités formidables :

Faire voler les textes et les images

Vous pouvez maintenant ajouter des effets à vos textes et images.

Figure 15 : Effets

Sélectionnez le texte souhaité et ouvrez les « Paramètres d’effet ». Définissez tout simplement de quel côté (en haut, en bas, à gauche, à droite) l'élément doit être affiché.

Intégrer son propre code

Les textes sources HTML et JS sont désormais intégrés directement dans l'éditeur de contenu. L’intégration se fait via un nouvel élément de contenu.

Figure 16 : Code

Celui-ci est simplement glissé sur la page de l'éditeur de contenu. Il est ainsi possible d’intégrer des extraits de Google Maps, des évaluations Google, des flux de médias sociaux ou des catalogues.

Selon le widget à intégrer, le fournisseur tiers propose immédiatement un code d’intégration à copier ou vous pouvez créer un code de widget avec un configurateur de widgets.

Petite astuce : avec « elfsight », vous pouvez facilement générer des codes de widget, comme par exemple Social Feed.

https://go.elfsight.io/click?pid=828&offer_id=3&l=1677843061

Page “Merci beaucoup”

Vous souhaitez attirer l’attention de vos clients sur quelque chose ou leur faire part de quelque chose après l’achat ?

La page de fin de commande du processus de commande est désormais une page standard et peut être facilement configurée selon vos souhaits dans l'éditeur de contenu. Y compris l’intégration d'éléments dynamiques via « intégrer son propre code », ce qui offre de toutes nouvelles possibilités.

Illustration 17 : Merci de tout cœur

Pied de page flexible

Le pied de page, le bas de la page de votre boutique en ligne, est également une page standard pour les boutiques PepperShop nouvellement installées, qui peut être éditée dans l'éditeur de contenu. Le nouveau pied de page est conçu de manière simple et claire afin de rendre la navigation plus conviviale.

Si vous mettez à jour une boutique existante, le pied de page est bien entendu conservé et n’est pas écrasé.

Exemples et inspiration

Figure 18 : Exemple

Figure 19 :

Figure 20 :

Abbildung 21:

Figure 22 :

Aide supplémentaire

Vous avez besoin d’une aide supplémentaire ? PepperShop met à votre disposition différentes possibilités.

Souvent, un clic dans l’administration en haut à droite sur l’icône en forme de point d’interrogation aide. Ici, vous obtenez directement de l’aide sur le sujet concerné.
Vous trouverez diverses réponses dans la FAQ. Celles-ci peuvent également être consultées dans l’administration de la boutique sous Aide&News -> Archives d’aide. Ou sur notre site https://www.peppershop.com/de/services/support/faq/
Dans la PepperShop Academy https://www.peppershop.com/de/services/academy/, vous pouvez trouver facilement diverses instructions vidéo gratuites.
Nous sommes également à votre disposition par e-mail ou par téléphone (CHF 195./h) support@glarotech.ch ou +41 71 923 08 58.