# CHAPITRE 09 — Tour de l'interface Studio

[![Capture d'écran 2026-08-26 181820.png](https://wiki.infras.fr/uploads/images/gallery/2026-08/scaled-1680-/Dly8Dnz4oepZKgW4-capture-decran-2026-08-26-181820.png)](https://wiki.infras.fr/uploads/images/gallery/2026-08/scaled-1680-/Dly8Dnz4oepZKgW4-capture-decran-2026-08-26-181820.png)Ce chapitre constitue votre première visite guidée du Studio. Vous allez parcourir l'ensemble des écrans sans encore éditer quoi que ce soit. À la fin, vous saurez où chercher chaque élément et comment vous repérer.

<p class="callout info">**Note —** Le module InfraSStudio doit être activé sur votre instance Dolibarr et au moins un site doit être configuré. Si ce n'est pas le cas, consultez d'abord la Partie II.</p>

#### <span style="color: rgb(35, 111, 161);">Étape 1 — Accéder au Studio</span>

1. Connectez-vous à votre Dolibarr.
2. Dans le menu supérieur, cliquez sur **Outils**.
3. Dans le menu latéral qui apparaît, repérez la section **InfraS**.
4. Cliquez sur **InfraSStudio**.

Vous arrivez sur le tableau de bord du Studio.

<p class="callout info">**Conseil —** Vous pouvez ajouter cette page à vos favoris dans votre navigateur. Vous y reviendrez fréquemment.</p>

#### <span style="color: rgb(35, 111, 161);">Étape 2 — Comprendre le tableau de bord</span>

Le tableau de bord constitue votre point d'entrée. Il se divise en plusieurs zones, présentées de haut en bas.

##### **L'en-tête personnalisé**

Une salutation contextuelle (« Bonjour », « Bon après-midi », « Bonsoir » selon l'heure) est suivie de la date du jour. Cet élément constitue un simple repère visuel.

##### **Vos sites**

Une grille de cartes affiche un site géré par carte. Pour chacun, vous retrouvez :

- Le nom du site, par exemple *monsite*.
- Un lien direct vers le site public, accessible via une icône globe.
- Trois compteurs colorés : pages publiées, pages en brouillon et articles de blog.
- Trois boutons d'action : Éditer, Articles et Produits.

<p class="callout success">**Recommandé —** Cliquez sur **Éditer** pour entrer dans l'éditeur principal. C'est cette voie que vous utiliserez la majorité de votre temps.</p>

##### **Statistiques globales**

Quatre indicateurs sont présentés en permanence :

- nombre de produits publiés
- nombre de produits en brouillon
- nombre de médias dans la bibliothèque
- taille totale en mégaoctets.

##### **Actions rapides**

Cinq cartes cliquables conduisent directement aux opérations courantes :

1. **Nouvel article** : créer un billet de blog en deux clics.
2. **Éditer une page** : ouvrir l'éditeur unifié.
3. **Gérer les produits** : accéder à la section produits dans l'éditeur.
4. **Traductions produits** : ouvrir l'éditeur multilingue dédié aux fiches produit.
5. **Bibliothèque médias** : accéder à la gestion centralisée des fichiers.

##### **Activité récente**

Une frise chronologique affiche les huit derniers contenus modifiés (slots et produits), avec un lien **Ouvrir** qui vous permet de reprendre votre travail là où vous l'aviez laissé.

##### **Aide à la prise en main**

Un panneau dépliable « Comment utiliser InfraSStudio ? » présente quatre étapes guidées. Il s'avère particulièrement utile pour vos collègues qui découvrent l'outil.

#### <span style="color: rgb(35, 111, 161);">Étape 3 — Entrer dans l'éditeur</span>

Cliquez sur le bouton **Éditer** de la carte d'un site. Vous accédez alors à l'écran central du Studio : l'éditeur en trois colonnes.

<table id="bkmrk-colonner%C3%B4legauche-%E2%80%94-" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Colonne

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Rôle

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235); vertical-align: top; width: 25%;">**Gauche — Arborescence**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Liste des pages du site, regroupées par type (pages standards, articles de blog, en-tête, pied de page).

Recherche en temps réel.

Compteur de slots par page.

Indicateurs visuels pour les brouillons en attente.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235); vertical-align: top;">**Centre — Aperçu**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Aperçu en direct de la page sélectionnée, présenté dans un cadre qui imite un navigateur.

Onglets de langue avec drapeaux.

Boutons de basculement entre les vues bureau, tablette et mobile.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235); vertical-align: top;">**Droite — Inspecteur**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Lorsqu'aucun slot n'est sélectionné, l'inspecteur présente la liste de tous les emplacements éditables de la page.

Lorsqu'un slot est sélectionné, il bascule sur le formulaire d'édition correspondant.

</td></tr></tbody></table>

<p class="callout info">**Conseil —** Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster la mise en page à la taille de votre écran.</p>

#### <span style="color: rgb(35, 111, 161);">Étape 4 — Le déroulement d'une session d'édition</span>

Voici le déroulement type d'une session d'édition :

1. Vous cliquez sur une page dans la colonne de gauche.
    - [x] L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur.
2. Vous cliquez sur un texte de l'aperçu, par exemple le titre principal.
    - [x] L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle.
3. Vous modifiez le texte. Le système enregistre automatiquement après une demi-seconde d'inactivité.
4. L'aperçu se met à jour. À ce stade, votre modification reste à l'état de brouillon, invisible pour les visiteurs du site.
5. Lorsque vous êtes satisfait, vous cliquez sur le bouton **« Publier les modifications »** en haut à droite. 
    - [x] Votre travail devient alors visible publiquement.

<p class="callout success">**Recommandé —** Préparez plusieurs modifications avant de publier. Le bouton « Publier les modifications » applique en une seule fois l'ensemble des modifications en attente sur la page, ce qui évite que les visiteurs voient des versions intermédiaires incohérentes.</p>

#### <span style="color: rgb(35, 111, 161);">Étape 5 — Les boutons de la barre d'outils centrale</span>

Une barre d'actions est présentée au-dessus de l'aperçu. Voici la fonction de chaque bouton, dans l'ordre d'apparition.

<table id="bkmrk-boutoneffetseoouvre-" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col style="width: 30%;"></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45); width: 30%;">Bouton

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Effet

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**SEO**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Ouvre une fenêtre avec un aperçu du résultat Google en direct. Voir le Chapitre 16.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Dupliquer**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Crée une copie de la page courante. Cette fonction est particulièrement utile pour les articles de blog.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Mettre en ligne / Retirer du site**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Modifie la visibilité publique de la page. À distinguer de « Publier les modifications » dont la fonction est différente.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Publier les modifications**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Publie l'ensemble des brouillons en attente sur la page. Une pastille indique le nombre de modifications concernées.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Annuler les modifications**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Supprime tous les brouillons et restaure la version actuellement publiée.

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Voir public**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Ouvre la page publique dans un nouvel onglet du navigateur.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Supprimer**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Réservé aux administrateurs. Une confirmation est demandée. Voir l'avertissement ci-dessous.

</td></tr></tbody></table>

<p class="callout warning">**Avertissement —** Le bouton **Supprimer** efface définitivement la page, ses traductions, ses slots, son fichier `<span class="editor-theme-code">tpl.php</span>` et son wrapper Apache. Aucun retour en arrière n'est possible. Réservez son usage aux cas véritablement nécessaires.</p>

#### <span style="color: rgb(35, 111, 161);">Étape 6 — Naviguer dans la liste des pages</span>

La colonne de gauche est plus puissante qu'il n'y paraît. Voici comment l'exploiter.

##### **Le sélecteur de section**

En haut de la colonne, deux onglets : **Pages** et **Médias**. Selon la configuration du site, un troisième onglet **Produits** peut apparaître si le catalogue dynamique est activé.

##### **La recherche en temps réel**

Saisissez quelques caractères dans le champ **Rechercher** : la liste se filtre instantanément. La recherche porte sur le titre, le slug et la catégorie.

##### **Les groupes de pages**

Les pages sont regroupées par type :

- **page** : pages standards (accueil, contact, à propos, etc.).
- **blogpost** : articles de blog.
- **other** : éléments structurels (en-tête, pied de page, menu).

##### **Les indicateurs visuels**

- Une pastille orange à côté d'une page indique qu'elle comporte des modifications en brouillon.
- Un nombre entre crochets, par exemple **\[3\]**, donne le nombre de slots éditables sur la page.
- Une icône grisée signale que la page est en mode « Retirée du site ».

##### **Le bouton Nouveau**

Le bouton est situé tout en bas de la liste. Selon le contexte :

- Sur la page d'index d'un blog, il devient « + Nouvel article ».
- Sur les autres pages, il devient « + Nouvelle page ».

#### <span style="color: rgb(35, 111, 161);">Étape 7 — L'inspecteur</span>

L'inspecteur connaît deux états distincts.

##### **État vide : la liste « Contenu de la page »**

Lorsqu'aucun slot n'est sélectionné dans l'aperçu, l'inspecteur présente la liste exhaustive des slots de la page, regroupés par section. Pour chacun :

- Une icône précise le type (texte, image, couleur, icône, etc.).
- Le libellé du slot est affiché.
- Un aperçu de la valeur actuelle est proposé, limité à soixante caractères.
- Un repère orange « modifié » signale qu'un brouillon est en cours.

Cliquez sur n'importe quelle ligne pour ouvrir le formulaire d'édition.

##### **État édition : le formulaire**

Lorsqu'un slot est sélectionné, l'inspecteur bascule en mode édition. Vous y trouvez :

- Un bouton « ← Retour » pour revenir à la liste.
- Le libellé du slot affiché en titre.
- Un champ d'édition principal pour la langue actuellement affichée dans l'aperçu.
- Une section dépliable « Autres langues » pour saisir les versions linguistiques.
- Une section dépliable « Options avancées » qui permet d'accéder à la valeur canonique partagée. Son usage est à réserver à des cas particuliers.

<p class="callout info">**Conseil —** L'enregistrement automatique se déclenche une demi-seconde après votre dernière saisie. Un indicateur affiche successivement « Enregistrement... » puis « Enregistré ». Aucun bouton de sauvegarde n'est nécessaire.</p>

#### <span style="color: rgb(35, 111, 161);">Étape 8 — Changer de langue dans l'aperçu</span>

Au-dessus de l'aperçu, une rangée d'onglets accompagnés de drapeaux représente les langues activées sur votre site (FR, EN, DE, etc.).

1. Cliquez sur le drapeau d'une autre langue.
2. L'aperçu se recharge dans cette langue.
3. Lorsque vous éditez un slot, le champ principal de l'inspecteur correspond à la langue actuellement affichée.

<p class="callout info">**Note —** La langue principale du site (généralement le français) constitue la langue canonique. Les autres langues sont des traductions complémentaires. Lorsqu'une traduction manque, le visiteur voit la version canonique. Le Chapitre 13 détaille ce mécanisme.</p>

#### <span style="color: rgb(35, 111, 161);">Récapitulatif</span>

**Vous savez désormais :**

- Accéder au Studio depuis Outils → InfraS.
- Lire le tableau de bord (sites, statistiques, actions rapides, activité récente).
- Entrer dans l'éditeur en trois colonnes.
- Identifier le rôle de chacune des trois colonnes (arborescence, aperçu, inspecteur).
- Reconnaître les boutons de la barre d'outils centrale.
- Naviguer entre les langues via les onglets dotés de drapeaux.
- Comprendre la distinction entre brouillon et publication.

Le chapitre suivant aborde concrètement la modification d'un texte.

### <span style="color: rgb(35, 111, 161);">La barre d'outils de l'éditeur (depuis la version 18.47)</span>

Au-dessus de l'aperçu, la barre d'actions contextuelle de la page rassemble :

<table id="bkmrk-commander%C3%B4lepublier-" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Commande

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Rôle

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Publier les modifs** (+ compteur)

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">publie tous les brouillons de la page — contenus et structure (chapitre 12).

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Liste cochée**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">revue des modifications en attente : qui, quand, quoi, avant / après (chapitre 12).

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**↺ Annuler les modifications**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">jette tous les brouillons en attente (irréversible).

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Mettre en ligne / Retirer du site**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">visibilité de la page elle-même.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Horloge**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">planifier une mise en ligne ou un retrait différé.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**SEO**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">titre, meta description, image de partage, aperçu Google.

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Horloge inversée**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">historique de la page : instantanés d'avant chaque publication, diff dépliable, restauration (chapitre 12).

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Dupliquer / Ouvrir public / Corbeille**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">copie de la page, ouverture dans un nouvel onglet, suppression (droit admin).

</td></tr></tbody></table>

### <span style="color: rgb(35, 111, 161);">La barre de contrôle des sections</span>

Dans l'aperçu, survolez une grande section de la page : une barre flottante sombre propose **déplacer** (flèches), **masquer / réafficher** (œil), **dupliquer**, **insérer** (plus) et **supprimer** (corbeille). Ces opérations alimentent le brouillon structurel de la page — rien ne change sur le site public avant publication. Le fonctionnement détaillé est au chapitre 12.

### <span style="color: rgb(35, 111, 161);">Annuler / rétablir dans la barre d'aperçu</span>

À droite des boutons bureau / tablette / mobile, deux boutons **↺ / ↻** annulent et rétablissent la dernière modification du contenu sélectionné (équivalents clavier : Ctrl+Z et Ctrl+Y).