Systeme de Gestion de Contenu (CMS)
Site Principal & Sous-site FBO
Le Systeme de Gestion de Contenu (CMS) de ZLO Technologies vous permet de gerer dynamiquement l'ensemble du contenu de votre site web sans necessiter de connaissances techniques en programmation. Ce guide vous accompagne pas a pas dans l'utilisation de toutes les fonctionnalites disponibles.
Ce document couvre l'administration complete de deux sites :
Le CMS est base sur une architecture moderne utilisant les technologies suivantes :
| Composant | Technologie | Description |
|---|---|---|
| Frontend | React + TypeScript | Interface utilisateur reactive |
| Styles | Tailwind CSS | Framework CSS utilitaire |
| Stockage | LocalStorage | Donnees sauvegardees localement |
| Internationalisation | i18next | Support FR/EN |
Pour acceder au panneau d'administration :
Naviguez vers l'URL de votre site deploye (ex: https://votre-site.ok.kimi.link)
Ajoutez /admin.html a la fin de l'URL :
https://votre-site.ok.kimi.link/admin.html
Le panneau d'administration s'affiche avec tous les onglets de gestion disponibles.
Le panneau d'administration est accessible publiquement. Pour une securite accrue en production, envisagez d'ajouter une authentification.
Le site principal comprend plusieurs sections modifiables independamment. Chaque section peut etre personnalisee via le panneau d'administration.
Pour modifier n'importe quel texte du site :
Dans le panneau admin, choisissez l'onglet correspondant a la langue (FR ou EN).
Cliquez dans le champ de texte souhaite, effectuez vos modifications.
Cliquez sur le bouton "Sauvegarder" pour enregistrer les changements.
Les images sont gerees via des URLs. Vous pouvez :
Formats recommandes : JPG pour les photos, PNG pour les logos et images avec transparence. Taille ideale : 1920x1080px pour les hero images.
La section Hero est la premiere section visible sur la page d'accueil. Elements modifiables :
| Element | Description | Exemple |
|---|---|---|
| Titre principal | Grand titre accrocheur | "Solutions Digitales" |
| Sous-titre | Texte descriptif | "Transformons vos idees..." |
| Texte CTA | Bouton d'action | "Demarrer un projet" |
| Image de fond | Background hero | URL de l'image |
La section A Propos presente votre entreprise :
Les services sont organises en cartes. Pour chaque service :
Ex: "Developpement Web", "Design UI/UX"
Description detaillee du service (2-3 phrases)
Selectionnez une icone parmi la bibliotheque disponible
La section Projets met en avant vos realisations :
| Champ | Description |
|---|---|
| Nom du projet | Titre du projet realise |
| Client | Nom du client |
| Categorie | Type de projet (Web, Mobile, etc.) |
| Description | Details du projet |
| Image | Capture d'ecran ou mockup |
| Lien | URL vers le projet (optionnel) |
Presentez les membres de votre equipe :
Les informations de contact sont essentielles :
Le sous-site FBO (Forever Business Owner) est une boutique en ligne dediee aux produits Forever Living. Il dispose de son propre systeme de gestion.
Le sous-site FBO est accessible de deux facons :
Cliquez sur le bouton vert "FBO" dans la navigation. Le sous-site s'ouvre dans un nouvel onglet.
Accedez directement via :
https://votre-site.ok.kimi.link/fbo.html
Le catalogue FBO comprend les informations suivantes pour chaque produit :
| Champ | Description | Obligatoire |
|---|---|---|
| Reference | Code produit unique (ex: FLP-001) | Oui |
| Nom | Nom du produit | Oui |
| Categorie | bien-etre, beaute, nutrition, etc. | Oui |
| Prix | Prix en euros | Oui |
| Image | URL de l'image produit | Oui |
| Composition | Ingredients et composition | Non |
| Description | Description detaillee | Oui |
| Posologie | Mode d'emploi | Non |
| Benefices | Liste des benefices | Non |
| Stock | Disponible/Indisponible | Oui |
Pour ajouter un nouveau produit au catalogue :
Dans le panneau admin, selectionnez l'onglet "FBO".
Le formulaire d'ajout s'affiche avec tous les champs.
Completez tous les champs obligatoires (marques d'asterisque).
Cliquez sur "Sauvegarder le produit". Le produit est immediatement visible sur le site FBO.
Dans la liste des produits FBO, utilisez la barre de recherche ou faites defiler.
Le formulaire s'ouvre avec les donnees actuelles pre-remplies.
Modifiez les champs souhaites.
Cliquez sur "Mettre a jour" pour enregistrer.
La suppression est definitive. Assurez-vous de vouloir supprimer le produit avant de confirmer.
Le systeme de panier FBO permet aux visiteurs de :
Le panier est sauvegarde dans le navigateur du client (localStorage). Il persiste entre les sessions mais n'est pas synchronise entre appareils.
Le bouton "Download our brochure" genere automatiquement une brochure PDF basee sur le contenu actuel du site.
Le visiteur clique sur "Download our brochure" dans la section Hero.
Une brochure HTML est generee avec les informations actuelles du site.
Le fichier est telecharge automatiquement au format HTML (convertissable en PDF).
La brochure generee inclut automatiquement :
Le contenu de la brochure reflete automatiquement les modifications faites via le CMS. Aucune action supplementaire n'est necessaire.
Le CMS stocke toutes les donnees dans le localStorage du navigateur. Il est crucial de sauvegarder regulierement.
Dans le panneau admin, allez dans l'onglet "Parametres".
Cliquez sur le bouton "Exporter toutes les donnees".
Un fichier JSON est telecharge. Conservez-le dans un endroit sur.
Dans le panneau admin, allez dans l'onglet "Parametres".
Cliquez sur "Choisir un fichier" et selectionnez votre fichier JSON de sauvegarde.
Cliquez sur "Importer les donnees". Les donnees sont restaurees.
L'importation ecrase toutes les donnees actuelles. Assurez-vous d'avoir une sauvegarde avant d'importer.
Solution :
Solution :
/fbo.htmlSolution :
Solution :
Solution :
Exportez vos donnees au moins une fois par semaine, ou apres chaque session de modifications importantes.
Compressez vos images avant upload (outils recommandes : TinyPNG, Squoosh). Cela ameliore les performances du site.
Maintenez la coherence entre les versions FR et EN. Modifiez les deux versions lors d'une mise a jour.
Verifiez toujours vos modifications sur le site public apres sauvegarde pour vous assurer du rendu.
Conservez une liste de vos URLs importantes : site principal, admin, FBO, et sauvegardes.
En cas de probleme persistant, contactez votre developpeur ou consultez la documentation technique du projet.