CHAPITRE 09 — Tour de l'interface Studio
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.
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.
Étape 1 — Accéder au Studio
- Connectez-vous à votre Dolibarr.
- Dans le menu supérieur, cliquez sur Outils.
- Dans le menu latéral qui apparaît, repérez la section InfraS.
- Cliquez sur InfraSStudio.
Vous arrivez sur le tableau de bord du Studio.
Conseil — Vous pouvez ajouter cette page à vos favoris dans votre navigateur. Vous y reviendrez fréquemment.
Étape 2 — Comprendre le tableau de bord
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.
Recommandé — Cliquez sur Éditer pour entrer dans l'éditeur principal. C'est par cette voie que vous passerez la majorité de votre temps.
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 et taille totale en mégaoctets.
Actions rapides
Cinq cartes cliquables conduisent directement aux opérations courantes :
- Nouvel article : créer un billet de blog en deux clics.
- Éditer une page : ouvrir l'éditeur unifié.
- Gérer les produits : accéder à la section produits dans l'éditeur.
- Traductions produits : ouvrir l'éditeur multilingue dédié aux fiches produit.
- 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.
Étape 3 — Entrer dans l'éditeur
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.
Colonne | Rôle |
|---|---|
Gauche — Arborescence | 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. |
Centre — Aperçu | 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. |
Droite — Inspecteur | 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. |
Conseil — Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster la mise en page à la taille de votre écran.
Étape 4 — Le déroulement d'une session d'édition
Voici le déroulement type d'une session d'édition :
- Vous cliquez sur une page dans la colonne de gauche.
- L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur.
- Vous cliquez sur un texte de l'aperçu, par exemple le titre principal.
- L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle.
- Vous modifiez le texte. Le système enregistre automatiquement après une demi-seconde d'inactivité.
- L'aperçu se met à jour. À ce stade, votre modification reste à l'état de brouillon, invisible pour les visiteurs du site.
- Lorsque vous êtes satisfait, vous cliquez sur le bouton « Publier les modifications » en haut à droite. Votre travail devient alors visible publiquement.
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.
Étape 5 — Les boutons de la barre d'outils centrale
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.
Bouton | Effet |
|---|---|
SEO | Ouvre une fenêtre avec un aperçu du résultat Google en direct. Voir le Chapitre 16. |
Dupliquer | Crée une copie de la page courante. Cette fonction est particulièrement utile pour les articles de blog. |
Mettre en ligne / Retirer du site | Modifie la visibilité publique de la page. À distinguer de « Publier les modifications » dont la fonction est différente. |
Publier les modifications | Publie l'ensemble des brouillons en attente sur la page. Une pastille indique le nombre de modifications concernées. |
Annuler les modifications | Supprime tous les brouillons et restaure la version actuellement publiée. |
Voir public | Ouvre la page publique dans un nouvel onglet du navigateur. |
Supprimer | Réservé aux administrateurs. Une confirmation est demandée. Voir l'avertissement ci-dessous. |
Avertissement — Le bouton Supprimer efface définitivement la page, ses traductions, ses slots, son fichier tpl.php et son wrapper Apache. Aucun retour en arrière n'est possible. Réservez son usage aux cas véritablement nécessaires.
Étape 6 — Naviguer dans la liste des pages
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 ».
Étape 7 — L'inspecteur
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.
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.
Étape 8 — Changer de langue dans l'aperçu
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.).
- Cliquez sur le drapeau d'une autre langue.
- L'aperçu se recharge dans cette langue.
- Lorsque vous éditez un slot, le champ principal de l'inspecteur correspond à la langue actuellement affichée.
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.
Récapitulatif
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.