Mini-sites — Guide de l'utilisateur complet
Qu'est-ce que les Mini-sites ?
Les Mini-sites vous permettent de créer et de publier votre propre site web directement dans OrbitingFox — sans besoin de coder. Chaque site obtient sa propre URL publique, des pages personnalisées, des images et un formulaire de contact. Vous pouvez parcourir tous les sites publiés à /sites/.
Créer votre premier site
- Allez dans Tableau de bord des Mini-sites cliquez sur + Nouveau Site.
- Remplissez un titre, un slug interne (surnom sûr pour l'URL) et une description facultative.
- Cliquez sur Créer — vous arrivez dans le Builder.
Le Builder
Le Builder a deux zones principales :
- Barre latérale gauche — votre liste de pages. Cliquez sur une page pour l'éditer. Utilisez l'icône de l'œil de visibilité pour contrôler qui voit chaque page.
- Toile (droite) — votre éditeur de blocs. Chaque bloc est un morceau de contenu (texte, image, bouton, etc.).
La barre supérieure a des boutons d'accès rapide :
- Aperçu — voir la vue publique de votre page
- Paramètres — paramètres globaux du site (couleurs, logo, SEO, style de navigation)
- Exporter ZIP — téléchargez l'intégralité du site sous forme de fichier portable
- Révisions — parcourez et restaurez des instantanés précédents
Pages & sections
Chaque site est composé de pages (appelées sections). Les pages apparaissent automatiquement dans la navigation de votre site.
- Cliquez sur + Ajouter une page dans la barre latérale pour créer une nouvelle page.
- Donnez-lui une étiquette (ce qui apparaît dans la navigation) et un slug (nom court sûr pour l'URL, par exemple
services). - Faites glisser les pages vers le haut/vers le bas pour réorganiser la navigation.
- Visibilité par page : Public (tout le monde), Propriétaire uniquement (uniquement vous), Caché (non affiché dans la navigation).
Pages secondaires
Vous pouvez imbriquer des pages jusqu'à 4 niveaux de profondeur. Pour faire d'une page l'enfant d'une autre, définissez sa page parente lors de l'ajout/de l'édition. Les sous-pages apparaissent comme des éléments déroulants dans la navigation.
Types de blocs
Cliquez sur + Ajouter un bloc dans une page pour insérer du contenu. Types de blocs disponibles :
| Bloc | Ce qu'il fait |
|---|---|
| Texte | Éditeur de texte enrichi (gras, italique, listes, liens). Idéal pour les paragraphes et le contenu formaté. |
| HTML brut | Collez du HTML Bootstrap 5 — conçu pour des mises en page générées par l'IA. Dispose d'une aide intégrée pour les invites AI. |
| Image | Affichez une image à partir d'une URL, avec une légende et un contrôle de largeur optionnels. |
| Bouton | Un lien d'appel à l'action stylisé. Utilisez #page-slug comme URL pour faire défiler vers une autre page sur le même site. |
| Réduire | Un panneau extensible — parfait pour les FAQ. Les visiteurs cliquent sur le titre pour révéler la réponse. |
| Formulaire | Formulaire de contact intégré. Ne fonctionne que sur une page nommée contact. Les soumissions apparaissent dans votre boîte de messages. |
| Carte | Intégrez une carte Google à l'aide d'une adresse ou d'un nom de lieu. |
| YouTube | Intégrez une vidéo YouTube par URL. |
| Vidéo | Liez ou téléchargez un fichier vidéo. |
| Fichier | Téléchargez ou liez un fichier PDF, markdown ou HTML pour que les visiteurs puissent le télécharger/voir. |
| Intégrer | Collez n'importe quel code d'intégration iframe (ex. Calendly, Google Form, Typeform). |
| Colonnes | Colonnes d'agencement côte à côte — parfait pour des sections d'information à deux colonnes. |
| Table des matières | Table des matières générée automatiquement basée sur les titres de la page. |
| Barre de navigation | Une barre de navigation secondaire dans la page. |
| Séparateur / Espace | Une règle horizontale ou un espace vertical vierge pour une séparation visuelle. |
Aide à la saisie AI (blocs HTML bruts)
Lorsque vous ajoutez un bloc HTML brut, un panneau violet Personnaliser avec l'IA apparaît. Cliquez dessus pour l'agrandir — il montre une invite AI prédéfinie pour ce type de section.
- Faites défiler vers le
[MODIFIER CETTE PARTIE]au bas de l'invite et remplacez l'exemple par votre propre contenu. - Cliquez sur Copier l'invite.
- Collez dans ChatGPT ou Gemini (tous deux gratuits).
- Copiez le HTML que l'IA renvoie collez-le dans la boîte de code cliquez sur Enregistrer.
Astuce — lier des boutons aux sections : Si l'IA vous donne un bouton comme <a href="#">En savoir plus</a>,
remplacez # par #your-page-slug. Exemple : <a href="#services">Nos Services</a> fait défiler à la page avec le slug services.
Un panneau vert Conseils en dessous de l'aide AI explique cela et vous rappelle d'utiliser le bloc Formulaire intégré pour les formulaires de contact (pas pour les formulaires HTML générés par l'IA).
Onglet Paramètres
Ouvrez l'onglet Paramètres dans le builder pour configurer les options à l'échelle du site :
- Basics — titre, slug, description, titre/description/mots-clés SEO, titre de la bannière
- Branding — image d'en-tête, logo, favicon, logo animé
- Couleurs — fond, zone de logo, en-tête, pied de page (sélecteurs de couleur hex)
- Carrousel de logos — téléchargez plusieurs logos pour une bande défilante ; contrôlez l'intervalle de défilement, l'alignement
- Navigation — mise en page (Barre latérale gauche / Barre supérieure / Barre latérale droite), thème (Clair / Sombre / Transparent)
- Formulaire de contact — montrer le basculement du champ téléphone, rendre le téléphone/l'email requis
- Badge OrbitingFox — montrer ou cacher le badge d'attribution du site
- Publication — définir votre URL publique, mode de visibilité et boutons Publier/Dépublier
Publier votre site
- Dans la section Paramètres Publication, entrez une URL publique (un slug unique, par exemple
my-bakery). Votre site sera disponible à/sites/my-bakery/. - Choisissez Visibilité de la publication:
- Public — listé dans le répertoire /sites/, tout le monde peut le trouver
- Non répertorié — accessible uniquement par URL directe, non listé dans le répertoire
- Groupe — accessible uniquement aux membres d'un groupe de contact sélectionné
- Cliquez sur Publier. Un instantané de révision est enregistré automatiquement.
- Pour mettre votre site hors ligne, cliquez sur Dépublier.
Messages de contact
Lorsque quelqu'un soumet votre formulaire de contact, le message apparaît dans Tableau de bord votre site Messages.
Chaque message a un statut que vous pouvez mettre à jour :
- Nouvelle Lu Répondu Archivé
Répondez en cliquant sur l'email de l'expéditeur (ouvre votre client de messagerie avec une adresse pré-remplie).
Historique des révisions
Chaque fois que vous cliquez sur Publier, OrbitingFox enregistre un instantané de votre site entier. Visitez Révisions (bouton de la barre supérieure) pour parcourir les instantanés.
- Chaque carte montre la date, l'heure et un résumé des pages et des blocs à ce moment-là.
- Cliquez sur Restaurer cette version pour revenir en arrière. Une boîte de dialogue de confirmation vous avertit que le changement est immédiat.
- L'importation d'un ZIP dans un site existant crée également une paire de révisions avant/après.
Dupliquer un site
Dans le Tableau de bord, cliquez sur le menu à côté d'un site Dupliquer. Une copie complète est créée (toutes les pages, blocs, paramètres, images) avec un nouveau slug interne. L'URL publique n'est pas copiée — vous devez en définir une nouvelle.
Export ZIP, import & flux de travail VSCode
Exporter votre site existant
Barre supérieure du Builder Exporter ZIP. Le ZIP contient :
site.json— toutes vos pages, blocs et paramètres dans un format lisibleimages/etfiles/— tous les médias téléchargésREADME.md— guide étape par étape pour les utilisateurs et assistants IAAI_CONTEXT.md— référence technique complète pour les agents IA et les développeurs
Télécharger un modèle vierge de démarrage
Tableau de bord Modèle de démarrage. Même format ZIP, pré-rempli avec une page d'accueil (bloc héros) et une page de contact (bloc formulaire). Commencez ici si vous souhaitez concevoir à partir de zéro dans VSCode.
Éditer dans VSCode avec l'IA
- Dézippez ouvrez le dossier dans VSCode.
- Dites à un assistant IA : "Lisez d'abord AI_CONTEXT.md, puis aidez-moi avec mon site web."
- Décrivez les changements en anglais simple. L'IA édite
site.jsonpour vous. - Re-zippez et téléchargez.
Re-télécharger (importer)
Tableau de bord Importer ZIP.
- Laissez le menu déroulant vide crée un nouveau site brouillon.
- Sélectionnez un site existant dans le menu déroulant remplace le contenu de ce site et enregistre automatiquement une révision afin que vous puissiez revenir en arrière.
Ce qui n'est PAS importé
- URL publique — vous devez définir la vôtre
- État publié — commence toujours comme un brouillon privé
- Messages de contact — restent sur le serveur d'origine
- Restrictions de groupe — les groupes sont spécifiques au serveur
Sécurité
OrbitingFox scanne chaque ZIP téléchargé pour détecter un contenu dangereux. Les ZIP rejetés incluent une explication en anglais simple sur la raison pour laquelle ils ont été bloqués (par exemple, "HTML dangereux détecté", "type de fichier non autorisé").
Liens rapides
Note (2026-08-17) — pas le même que le système de conception de la plateforme.
Les paramètres de couleur décrits ci-dessus sont des paramètres par site (ou par élément) appartenant à l'utilisateur qui a créé ce site. Ils ne représentent pas la norme visuelle de la plateforme. Les couleurs, tailles de texte et composants de la plateforme se trouvent dans le système de conception — voir
Admin → Système de Design et
docs/design/DESIGN.md — et sont définis globalement sur
Apparence.
This guide was translated automatically. Read the English original.