ZLO

# Guide Administrateur

Systeme de Gestion de Contenu (CMS)
Site Principal & Sous-site FBO

Version 1.0

ZLO Technologies

Documentation Complete

Fevrier 2026

# 1. Introduction au CMS

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.

A propos de ce guide

Ce document couvre l'administration complete de deux sites :

- Site principal ZLO : Site corporate bilingue (FR/EN)
- Sous-site FBO : Boutique en ligne Forever Living Products

## 1.1 Architecture du systeme

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

## 1.2 Acces au panneau d'administration

Pour acceder au panneau d'administration :

1
Ouvrir le site principal

Naviguez vers l'URL de votre site deploye (ex: `https://votre-site.ok.kimi.link`)

2
Acceder a la page admin

Ajoutez `/admin.html` a la fin de l'URL :
`https://votre-site.ok.kimi.link/admin.html`

3
Interface d'administration

Le panneau d'administration s'affiche avec tous les onglets de gestion disponibles.

Important

Le panneau d'administration est accessible publiquement. Pour une securite accrue en production, envisagez d'ajouter une authentification.

# 2. Gestion du Site Principal ZLO

Le site principal comprend plusieurs sections modifiables independamment. Chaque section peut etre personnalisee via le panneau d'administration.

## 2.1 Modifier le contenu textuel

Pour modifier n'importe quel texte du site :

1
Selectionner la langue

Dans le panneau admin, choisissez l'onglet correspondant a la langue (FR ou EN).

2
Modifier le champ

Cliquez dans le champ de texte souhaite, effectuez vos modifications.

3
Sauvegarder

Cliquez sur le bouton "Sauvegarder" pour enregistrer les changements.

## 2.2 Gerer les images

Les images sont gerees via des URLs. Vous pouvez :

- Utiliser une image externe : Collez l'URL directe de l'image
- Uploader une image : Utilisez un service comme Cloudinary, Imgur, ou votre propre serveur

Conseil

Formats recommandes : JPG pour les photos, PNG pour les logos et images avec transparence. Taille ideale : 1920x1080px pour les hero images.

## 2.3 Section Hero

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

## 2.4 Section A Propos

La section A Propos presente votre entreprise :

- Titre de section : "Qui sommes-nous ?"
- Description : Paragraphe principal
- Mission : Texte de mission
- Vision : Texte de vision
- Image : Photo d'equipe ou bureau

## 2.5 Section Services

Les services sont organises en cartes. Pour chaque service :

1
Titre du service

Ex: "Developpement Web", "Design UI/UX"

2
Description

Description detaillee du service (2-3 phrases)

3
Icone

Selectionnez une icone parmi la bibliotheque disponible

## 2.6 Section Projets

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)

## 2.7 Section Equipe

Presentez les membres de votre equipe :

- Nom complet : Prenom et nom
- Poste : Titre du poste
- Bio : Courte biographie
- Photo : Photo de profil (format carre recommande)
- Reseaux sociaux : LinkedIn, Twitter (optionnel)

## 2.8 Section Contact

Les informations de contact sont essentielles :

Informations modifiables

- Adresse email
- Numero de telephone
- Adresse physique
- Liens reseaux sociaux
- Formulaire de contact (activation/desactivation)

# 3. Gestion du Sous-site FBO

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.

## 3.1 Acces au sous-site FBO

Le sous-site FBO est accessible de deux facons :

1
Depuis le site principal

Cliquez sur le bouton vert "FBO" dans la navigation. Le sous-site s'ouvre dans un nouvel onglet.

2
Directement

Accedez directement via :
`https://votre-site.ok.kimi.link/fbo.html`

## 3.2 Catalogue de produits

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

## 3.3 Ajouter un produit

Pour ajouter un nouveau produit au catalogue :

1
Acceder a la gestion FBO

Dans le panneau admin, selectionnez l'onglet "FBO".

2
Cliquer "Ajouter un produit"

Le formulaire d'ajout s'affiche avec tous les champs.

3
Remplir les informations

Completez tous les champs obligatoires (marques d'asterisque).

4
Sauvegarder

Cliquez sur "Sauvegarder le produit". Le produit est immediatement visible sur le site FBO.

## 3.4 Modifier un produit

1
Trouver le produit

Dans la liste des produits FBO, utilisez la barre de recherche ou faites defiler.

2
Cliquer "Modifier"

Le formulaire s'ouvre avec les donnees actuelles pre-remplies.

3
Effectuer les modifications

Modifiez les champs souhaites.

4
Sauvegarder

Cliquez sur "Mettre a jour" pour enregistrer.

Suppression d'un produit

La suppression est definitive. Assurez-vous de vouloir supprimer le produit avant de confirmer.

## 3.5 Gerer le panier

Le systeme de panier FBO permet aux visiteurs de :

- Ajouter des produits au panier
- Modifier les quantites
- Supprimer des articles
- Voir le total

Note importante

Le panier est sauvegarde dans le navigateur du client (localStorage). Il persiste entre les sessions mais n'est pas synchronise entre appareils.

# 4. Telechargement de la Brochure

Le bouton "Download our brochure" genere automatiquement une brochure PDF basee sur le contenu actuel du site.

### Fonctionnement

1
Clic sur le bouton

Le visiteur clique sur "Download our brochure" dans la section Hero.

2
Generation

Une brochure HTML est generee avec les informations actuelles du site.

3
Telechargement

Le fichier est telecharge automatiquement au format HTML (convertissable en PDF).

### Contenu de la brochure

La brochure generee inclut automatiquement :

- Page de couverture avec logo ZLO
- Presentation de l'entreprise (section A Propos)
- Liste des services avec descriptions
- Portfolio de projets
- Informations de contact

Personnalisation

Le contenu de la brochure reflete automatiquement les modifications faites via le CMS. Aucune action supplementaire n'est necessaire.

# 5. Sauvegarde et Restauration

Le CMS stocke toutes les donnees dans le localStorage du navigateur. Il est crucial de sauvegarder regulierement.

## 5.1 Exporter les donnees

1
Acceder aux parametres

Dans le panneau admin, allez dans l'onglet "Parametres".

2
Cliquer "Exporter"

Cliquez sur le bouton "Exporter toutes les donnees".

3
Sauvegarder le fichier

Un fichier JSON est telecharge. Conservez-le dans un endroit sur.

## 5.2 Importer les donnees

1
Acceder aux parametres

Dans le panneau admin, allez dans l'onglet "Parametres".

2
Selectionner le fichier

Cliquez sur "Choisir un fichier" et selectionnez votre fichier JSON de sauvegarde.

3
Importer

Cliquez sur "Importer les donnees". Les donnees sont restaurees.

Attention

L'importation ecrase toutes les donnees actuelles. Assurez-vous d'avoir une sauvegarde avant d'importer.

# 6. Resolution des Problemes

### Probleme : Les modifications ne s'affichent pas

Solution :

1. Verifiez que vous avez clique sur "Sauvegarder"
2. Rechargez la page (F5 ou Ctrl+R)
3. Videz le cache du navigateur (Ctrl+Shift+R)

### Probleme : Le sous-site FBO est inaccessible

Solution :

1. Verifiez l'URL : doit se terminer par `/fbo.html`
2. Assurez-vous que le fichier fbo.html existe sur le serveur
3. Verifiez la connexion internet

### Probleme : Les images ne s'affichent pas

Solution :

1. Verifiez que l'URL de l'image est correcte
2. Assurez-vous que l'image est accessible publiquement
3. Verifiez le format (JPG, PNG recommandes)

### Probleme : Le panier ne fonctionne pas

Solution :

1. Verifiez que JavaScript est active dans le navigateur
2. Desactivez les bloqueurs de publicites (peuvent bloquer localStorage)
3. Essayez avec un autre navigateur

### Probleme : Donnees perdues

Solution :

1. Restaurez depuis votre dernier fichier de sauvegarde JSON
2. Si pas de sauvegarde, les donnees sont malheureusement irrecuperables
3. Mettez en place une routine de sauvegarde reguliere

# 7. Bonnes Pratiques

Sauvegarde reguliere

Exportez vos donnees au moins une fois par semaine, ou apres chaque session de modifications importantes.

Optimisation des images

Compressez vos images avant upload (outils recommandes : TinyPNG, Squoosh). Cela ameliore les performances du site.

Coherence linguistique

Maintenez la coherence entre les versions FR et EN. Modifiez les deux versions lors d'une mise a jour.

Test avant publication

Verifiez toujours vos modifications sur le site public apres sauvegarde pour vous assurer du rendu.

Stockage des URLs

Conservez une liste de vos URLs importantes : site principal, admin, FBO, et sauvegardes.

### Checklist de maintenance hebdomadaire

- Sauvegarder les donnees (export JSON)
- Verifier que tous les liens fonctionnent
- Verifier l'affichage des images
- Tester le formulaire de contact
- Verifier le fonctionnement du panier FBO
- Mettre a jour les informations si necessaire

Support

En cas de probleme persistant, contactez votre developpeur ou consultez la documentation technique du projet.