Éditeur IA pour les pages web

Pour :Administrateur

Vue de la page « editeur ia pages »

L'Éditeur IA – Page web d'Unisoft est un éditeur de pages CMS qui fonctionne par conversation : vous décrivez la page que vous voulez ajouter à votre site public, l'IA la génère sous vos yeux, vous l'affinez par messages successifs. À la fin, la page est publiée à l'URL que vous avez choisie sous votre domaine https://[votre-organisation].unisoft.world.

Cette page explique comment générer une page web par chat, les règles de design appliquées (responsive, container 1200 px, polices modernes), la gestion automatique du multilingue (français, anglais, hébreu…) et toutes les particularités à connaître.

ℹ

Disponibilité

L'Éditeur IA est en bêta. Le sélecteur Éditeur IA lors de la création d'une page CMS n'est visible que dans les environnements non-production (staging, test). Si vous ne le voyez pas dans votre backoffice, c'est normal — votre organisation utilise l'éditeur classique pour l'instant. Pour une vue d'ensemble de la fonctionnalité, voir Comprendre l'Éditeur IA.

Quand l'utiliser

L'Éditeur IA – Page web est particulièrement utile pour :

• Créer une page « Qui sommes-nous » rapidement, avec photo, présentation du rabbin, valeurs, calendrier des offices.
• Annoncer un projet : présentation d'un nouveau Beth Habad, lancement d'une école juive, projet de Mikvé… page avec hero visuel, sections, bouton de don.
• Présenter une équipe : trombinoscope du rabbin, du gabay, du chef de chœur, des bénévoles.
• Publier un manifeste / une charte : page éditoriale avec sections numérotées.
• Lancer une page projet : page dédiée à une collecte, à un voyage en Israël organisé par la communauté…

À l'inverse, si vous avez besoin de fonctionnalités interactives complexes (formulaire personnalisé, calendrier dynamique, intégration tierce sophistiquée), l'éditeur classique reste préférable.

Activer le mode IA à la création

L'Éditeur IA se choisit au moment de la création d'une page CMS.

1. 1

   Ouvrir Mes pages

   Rendez-vous sur /app/web/pages (entrée Mes pages sous Site Web dans la sidebar admin).

2. 2

   Cliquer Ajouter

   Bouton bleu en haut à droite. La fenêtre d'édition s'ouvre.

3. 3

   Remplir les infos de base

   Renseignez le titre, la description, l'URL (slug de la page sur votre site public, par exemple qui-sommes-nous) et les éventuels champs SEO.

4. 4

   Sélectionner Éditeur IA

   Dans le champ Type d'éditeur, choisissez Editeur IA au lieu de Editeur Classique. Ce champ n'est visible qu'en environnement non-production le temps de la bêta.

5. 5

   Valider

   Cliquez sur Valider. La page est créée en base. De retour sur la liste, vous voyez votre page apparaître avec une icône violette « édition IA » dans la colonne Éditeur. Cliquez dessus pour ouvrir l'Éditeur IA (route /editor/ai/web?id=[ID]).

⚠

Choix figé

Une fois la page créée en mode Éditeur IA, on ne peut pas la rebasculer vers l'éditeur classique (et inversement). Si vous avez choisi le mauvais mode, supprimez la page et recréez-la.

L'interface en détail

L'éditeur prend tout l'écran : la barre latérale du backoffice est masquée le temps de l'édition. Deux panneaux séparés par une barre de redimensionnement que vous pouvez tirer à la souris.

Panneau de gauche – la discussion

De haut en bas :

• En-tête : avatar IA + nom de la page + sous-titre « Créez votre page par la discussion ».
• Panneau Images (repliable) : zone de glisser-déposer pour vos visuels. Cliquez sur l'en-tête Images (N) pour le déployer.
• Historique de la conversation : vos prompts (en bulles noires à droite) + badges « ✅ Email généré » (lire : page générée) + récapitulatifs IA en français listant les modifications + suggestions pour la suite.
• Champ de prompt en bas : un textarea qui s'agrandit jusqu'à 160 px de hauteur, un bouton flèche pour envoyer (ou Entrée), et un bouton Stop carré pendant la génération si vous voulez interrompre.

Panneau de droite – l'aperçu

De haut en bas :

• Bandeau de langues (visible si votre organisation a configuré plusieurs langues, voir plus bas).
• Barre d'outils : bouton Quitter (rouge), sélecteur Desktop / Mobile, bouton Enregistrer, navigation ← → dans l'historique, bouton Historique qui ouvre la liste complète des versions.
• Iframe d'aperçu : rendu en direct du HTML généré. Vous pouvez basculer en largeur fixe 390 px (frame mobile) pour vérifier le responsive.

Sur mobile, les deux panneaux deviennent deux onglets en bas (Chat / Aperçu).

Importer des images

L'IA ne fabrique pas d'images ; vous devez fournir vos propres visuels.

1. 1

   Ouvrir le panneau Images

   Cliquez sur l'en-tête Images (0) dans le panneau de gauche pour le déployer.

2. 2

   Importer

   Glissez-déposez vos fichiers dans la zone pointillée, ou cliquez dessus pour ouvrir le sélecteur de fichiers. Les formats acceptés sont tous les formats image (image/*).

3. 3

   Référencer les images dans un prompt

   Une fois importées, les images apparaissent en miniatures dans le panneau. L'IA peut les « voir » : vous pouvez écrire des prompts comme « Mets la première image en bannière plein écran en haut de la page, avec un dégradé sombre par-dessus et un titre en gros par-dessus ».

Pour retirer une image, cliquez sur la petite croix noire en haut à droite de sa miniature.

★

Photos officielles, pas de captures

Pour un rendu pro, utilisez des photos officielles : votre rabbin en portrait, une vue d'un événement de la communauté, une photo du bâtiment, une image symbolique (livre de Torah, bougies de Chabbat). Évitez les captures d'écran ou les visuels basse qualité — l'IA les utilisera tels quels.

Règles de design appliquées par l'IA

Contrairement à un email (qui doit être ultra-compatible), une page web Unisoft peut utiliser tout le CSS moderne. L'IA suit néanmoins des règles précises pour assurer un rendu propre et performant.

Règle	Détail
CSS moderne autorisé	Flexbox, grid, variables CSS, animations @keyframes, hover, transitions.
Polices Google Fonts	Inter, Plus Jakarta Sans, DM Sans — importées via @import.
Icônes Lucide	Bibliothèque d'icônes vectorielles modernes injectée via CDN (vous pouvez demander : « Mets une icône de cœur ici »).
Container 1200 px max	Tout le contenu visible reste dans un container centré (max-width: 1200px, margin: 0 auto) avec padding latéral 24 px desktop / 16 px mobile. Les sections « pleine largeur » (hero avec image de fond) peuvent déborder, mais leur contenu interne reste dans le container.
Responsive mobile-first	Media queries ≤ 640px pour adapter chaque section.
Uniquement le <main> de la page	L'IA ne génère pas le header (logo + menu) ni le footer (réseaux sociaux + mentions). Ils sont ajoutés automatiquement par le thème du site lors du rendu sur votre domaine public.

⚠

Pas d'unités viewport (vh, vmin, vmax)

Pour des raisons techniques (l'iframe d'aperçu ajuste sa hauteur dynamiquement), l'IA n'utilise jamais vh, vmin ni vmax pour les hauteurs — sinon une boucle infinie de redimensionnement se déclencherait.

À la place, l'IA utilise des valeurs en px, rem ou des min-height fixes. Si vous demandez « une section qui prend toute la hauteur de l'écran », l'IA fera un min-height: 600px ou min-height: 800px, ce qui rend bien sur la grande majorité des écrans.

Le vw pour les largeurs reste, lui, autorisé.

Le multilingue automatique

C'est l'une des fonctionnalités les plus puissantes de l'Éditeur IA pour les pages web : chaque texte généré est automatiquement préparé pour la traduction, sans que vous ayez à toucher au HTML.

Comment ça marche

À chaque enregistrement, Unisoft analyse le HTML que l'IA a produit et ajoute automatiquement un attribut data-i18n sur chaque texte visible :

<h1 data-i18n="auto_1">Bienvenue dans notre communauté</h1>
<p data-i18n="auto_2">Une famille spirituelle au cœur de Paris</p>
<a data-i18n="auto_3" href="...">Nous contacter</a>

Pour les attributs traduisibles (alt, title, placeholder, aria-label), une variante data-i18n-alt, data-i18n-title, etc. est ajoutée. Les éléments décoratifs (conteneurs vides, balises <style> / <script>) ne reçoivent pas de clé.

Chaque clé est unique et stable : si vous modifiez le texte mais gardez la clé, la traduction existante est préservée.

★

Pourquoi `auto_1`, `auto_2`… et pas un nom parlant ?

L'IA peut, si elle le juge utile, produire elle-même des clés sémantiques (par exemple data-i18n="hero_title"). Mais tout texte qui n'a pas reçu de clé explicite reçoit automatiquement une clé technique auto_1, auto_2, auto_3… au moment de l'enregistrement, dans l'ordre où les textes apparaissent dans le HTML. Du point de vue utilisateur, le nom de la clé n'a aucune importance : les traductions fonctionnent identiquement et restent stables. Vous n'avez jamais à manipuler ces clés vous-même.

Le bandeau de langues

Si votre organisation a configuré plusieurs langues (français + anglais, ou français + hébreu, etc.), un bandeau de langues apparaît au-dessus de l'aperçu :

• Un onglet par langue, avec le drapeau du pays correspondant.
• Un indicateur de traductions manquantes (par exemple : « 5 textes non traduits en anglais »).
• Un bouton Traduire tout qui demande à l'IA de remplir d'un coup toutes les traductions manquantes pour la langue courante.

Cliquer sur une langue secondaire bascule l'aperçu dans cette langue : l'iframe applique le dictionnaire de traductions à la place des textes en langue principale. Si une traduction manque, le texte de la langue principale est affiché en fallback.

Éditer une traduction à la main

Sur l'aperçu en langue secondaire, les textes traduisibles sont cliquables : un clic ouvre un mini-éditeur inline pour modifier la traduction. C'est la façon la plus rapide d'ajuster un mot ou de corriger une nuance que l'IA n'aurait pas saisie.

Si votre organisation est mono-langue

Le bandeau de langues n'apparaît pas, les clés data-i18n sont quand même générées en arrière-plan (sans coût pour vous), au cas où vous activeriez d'autres langues plus tard.

Bonnes pratiques de prompting

L'IA produit ce que vous lui demandez. Plus votre brief est riche, meilleur est le rendu.

Commencez par un brief général

Crée une page Qui sommes-nous pour notre communauté Beth David à Paris,
avec :
- Un hero en haut avec une photo de la synagogue et un titre accueillant
- Une section présentation en 3 paragraphes courts
- Une carte de l'équipe avec 3 personnes (rabbin Yossi Mizrahi,
  gabay David Cohen, secrétaire Sarah Lévy)
- Une section "Nos valeurs" avec 4 cartes
- Un appel à l'action pour rejoindre la communauté

L'IA va produire une page complète, responsive, dans le style moderne Unisoft.

Affinez par messages courts

Remplace la photo du hero par celle que je viens d'importer

La section valeurs est trop chargée, simplifie en 3 cartes au lieu de 4

Mets un dégradé bleu nuit derrière le titre du hero pour qu'il ressorte
mieux sur la photo

Ajoute un bouton "Nous rejoindre" qui scrolle vers la section contact

Exemples de prompts pour une communauté

• Page d'accueil dédiée : « Page d'accueil pour le Beth Habad de Marseille avec un hero plein écran (image du shaliach), une présentation chaleureuse, un calendrier des cours de la semaine en cartes, et un grand bouton Faire un don ».
• Page projet de construction : « Page projet pour la construction d'un nouveau Mikvé. Hero avec le rendu architectural, section "Pourquoi ce projet" en 4 paragraphes, jauge de collecte, section témoignages, bouton Soutenir le projet en orange ».
• Page rabbin : « Page de présentation du rabbin Eli Benhamou, photo en portrait à gauche, biographie à droite, liste de ses cours hebdomadaires en dessous, citation inspirante en milieu de page ».
• Page projets sociaux : « Page Nos actions solidaires avec 3 cartes (aide aux familles, repas Chabbat, jeunes en difficulté), chaque carte avec icône Lucide, titre, paragraphe, et lien Soutenir ».
• Page voyage : « Page pour un voyage organisé en Israël (12 au 22 nissan), programme jour par jour en timeline verticale, photos par étape, bouton S'inscrire ».

Donnez le ton et le style

Précisez si vous voulez :

• Sobre vs chaleureux vs festif vs institutionnel ;
• Couleurs traditionnelles (bleu, blanc, or) vs palette moderne (bordeaux, ocre, terracotta) ;
• Lourd en images vs texte d'abord ;
• Sections espacées (aérées, modernes) vs dense (beaucoup d'infos).

Naviguer dans l'historique

Chaque prompt produit une nouvelle entrée d'historique. Trois boutons en haut à droite de l'aperçu :

• ← : reculer d'une version.
• → : avancer (si vous étiez revenu en arrière).
• Historique : ouvre une popup avec la liste complète. Chaque entrée affiche le début du prompt qui l'a générée et son heure de génération.

ℹ

L'historique est local à votre session

L'historique ne survit pas à un rechargement de la page : c'est une pile en mémoire le temps de votre édition. Quand vous cliquez Enregistrer, c'est la version courante (celle affichée) qui est persistée. Si vous voulez garder plusieurs variantes en parallèle, dupliquez la page côté Mes pages une fois enregistrée.

Enregistrer et publier

Le bouton Enregistrer change d'aspect selon l'état :

• Gris : aucune modification depuis le dernier enregistrement.
• Noir : modifications en attente — un clic les enregistre.

À l'enregistrement, le serveur :

1. Injecte les data-i18n manquantes sur les nouveaux textes (préserve les clés existantes pour ne pas casser les traductions déjà saisies).
2. Fusionne le dictionnaire de traductions : les traductions déjà entrées dans les langues secondaires sont conservées pour les clés qui existent toujours ; les clés obsolètes sont nettoyées.
3. Stocke le HTML, la liste des images importées, la langue principale et le dictionnaire i18n.

ℹ

Pas de vignette PNG pour les pages web

Contrairement aux modèles d'email (qui génèrent une vignette PNG côté serveur pour l'affichage en grille de cartes), l'enregistrement d'une page web ne produit aucune image dérivée. Seuls le HTML, le dictionnaire i18n et la liste des images importées sont persistés.

Une fois la page enregistrée, elle est immédiatement publiée à l'URL que vous avez choisie sur votre site public (par exemple https://beth-david.unisoft.world/qui-sommes-nous). Pas d'étape « publier / dépublier » distincte — l'enregistrement vaut publication.

Si vous tentez de quitter l'éditeur sans enregistrer, une confirmation s'affiche pour éviter une perte involontaire.

★

Penser à ajouter votre page au menu

Créer une page ne suffit pas pour qu'elle soit trouvable : par défaut elle est accessible uniquement à son URL directe. Pour qu'elle apparaisse dans la navigation du site, ajoutez-la au menu via Menu du site (/app/web/menu) — voir Menu du site.

Page sur ordinateur vs mobile

Tous les visiteurs ne consultent pas le site depuis un ordinateur. Une page CMS Unisoft générée par l'IA est responsive par construction (mobile-first, media queries ≤ 640px), mais vérifiez systématiquement le rendu mobile avant d'enregistrer une nouvelle page :

1. Cliquez sur Mobile dans la barre d'outils — l'aperçu passe en frame 390 px.
2. Faites défiler la page : vérifiez que les images ne débordent pas, que les titres ne sont pas coupés, que les boutons restent assez gros pour être touchés au doigt.
3. Si quelque chose se passe mal en mobile, demandez-le à l'IA : « Sur mobile la grille à 3 colonnes est trop tassée, passe-la en une seule colonne avec plus d'air entre les cartes ».

Limites à connaître

• Fonctionnalité en bêta : visible uniquement dans les environnements non-production pour l'instant.
• Pas de génération d'images par l'IA : importez vos visuels via le panneau Images.
• Pas de bascule Éditeur IA ↔ Éditeur Classique : le choix fait à la création est figé.
• Pas d'édition bloc-par-bloc dans l'UI : tout passe par le chat ou par un retour à une version précédente via l'Historique.
• Pas de header ni footer dans l'éditeur : seul le <main> de la page est généré. Le header et le footer sont ajoutés par le thème du site sur le rendu public.
• Pas d'unités vh, vmin, vmax pour les hauteurs (limite technique de l'iframe d'aperçu).
• Versions complètes uniquement dans l'historique : pas de micro-undo par opération.
• Pas de quota explicite affiché à ce jour. Restez raisonnable.

Pour aller plus loin

• Comprendre l'Éditeur IA — vue d'ensemble transversale.
• Mes pages — la page de gestion des pages CMS (création, duplication, suppression, URL).
• Menu du site — pour rendre une page visible dans la navigation.
• Thème du site — pour personnaliser l'apparence globale (couleurs, polices) du site qui contient votre page.
• Éditeur IA pour les emails — la variante équivalente pour les modèles d'email.