Skip to main content

CHAPITRE 9 -- Tour de l'interface Studio

🧭 CHAPITRE 9 -- EN MODE MANUEL : Tour de l'interface Studio

Ce chapitre estconstitue votre première visite guidée du Studio. NousVous allonsallez faireparcourir le tourl'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 Prérequis— — Le module InfraSStudio doit être activé sur votre instance Dolibarr et au moins un site managé doit être configuré. Si ce n'est pas le cas, voyezconsultez d'abord la Partie II.

🚪

Étape 1 — Accéder au Studio

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

Vous arrivez sur le tableau de bord du Studio.

💡Conseil Astuce— — Vous pouvez mettreajouter cette page enà favorivos favoris dans votre navigateur,navigateur. vousVous y reviendrez souvent.fréquemment.

📊

Étape 2 — Comprendre le tableau de bord

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

🎉

L'en-tête personnalisé

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

🌐

Vos sites

Une grille de cartes,cartes uneaffiche parun site géré par lecarte. Studio.Pour Chaquechacun, cartevous afficheretrouvez :

  • Le nom du sitesite, (ex.par exemple keaticwebmonsite).
  • Un lien direct « Ouvrirvers le site publicpublic, »accessible (via une icône globe) qui pointe sur le virtualhost.globe.
  • Trois compteurs en couleurcolorés : pages publiées, pages brouillons,en brouillon et articles de blog.
  • Trois boutons d'action : Éditer, Articles,Articles et Produits.

✅Recommandé Bonne pratique— — Cliquez sur Éditer pour entrer dans l'éditeur principal. C'est par làcette voie que vous passezpasserez 80la %majorité dude votre temps.

📦 Stats

Statistiques globales

ToujoursQuatre visiblesindicateurs sont présentés en hautpermanence : nombre de produits publiés, nombre de produits en brouillon, nombre de médias dans la bibliothèque,bibliothèque et taille totale en MB.mégaoctets.

⚡

Actions rapides

Cinq grandes cartes cliquables qui vous mènentconduisent 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é.dédié aux fiches produit.
  5. Bibliothèque médias —: accéder à la gestion centralisée des fichiers.

🕒

Activité récente

LaUne timelinefrise deschronologique 8affiche les huit derniers contenus modifiés (slots et produits), avec un lien Ouvrir pourqui vous permet de reprendre votre travail là où vous vousl'aviez êteslaissé.

arrêté
Aide à la dernièreprise fois.

en

❓ Onboarding

main

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

🎨

Étape 3 — Entrer dans l'éditeur

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

Colonne

Rôle

🌳Gauche Gauche
(Arborescence)— Arborescence

Liste des pages du site, groupéesregroupées par type (pages standards, articles de blog, header,en-tête, footer,pied …)de page). Recherche en temps réel. Compteur de slots par page. Indicateurs visuels pour les brouillons en attente.

👁️Centre Centre
(Aperçu)— Aperçu

Aperçu en direct de la page sélectionnée, présenté dans uneun iframecadre avecqui «imite chromeun » de navigateur (les trois pastilles macOS et la barre d'URL).navigateur. Onglets de langue avec drapeaux. BoutonBoutons de basculement Desktopentre /les Tablettevues /bureau, Mobile.tablette et mobile.

📝Droite Droite
(Inspecteur)— Inspecteur

Quand Lorsqu'aucun slot n'est sélectionnésélectionné, :l'inspecteur présente la liste « Contenu de la page » de tous les emplacements éditables.éditables Quandde la page. Lorsqu'un slot est sélectionnésélectionné, :il bascule sur le formulaire d'édition correspondant, avec onglets de langue.correspondant.

💡Conseil Astuce— — Les trois colonnes sont redimensionnables. Faites glisser les séparateurs verticaux pour ajuster selonla mise en page à la taille de votre écran.

🔄

Étape 4 — Le fluxdéroulement d'une session d'édition typique

Voici commentle sedéroulement dérouletype d'une session d'édition normale, étape par étape :

  1. Vous cliquez sur une page dans la colonne de gauche.
  2. L'aperçu se charge au centre, avec la page rendue exactement comme la verra un visiteur.
  3. Vous cliquez sur un texte dansde l'aperçuaperçu, (par exemple le titre principal).principal.
  4. L'inspecteur s'ouvre à droite avec un champ de saisie pré-rempli avec la valeur actuelle.
  5. Vous modifiez le texte.texte. Le système enregistre automatiquement après 500une msdemi-seconde d'inactivité (auto-save).inactivité.
  6. L'aperçu se met à jour.jour. MaisÀ pource l'instant,stade, votre modification estreste enà brouillonl'état —de brouillon, invisible pour les visiteurs du site.
  7. QuandLorsque vous êtes satisfait,satisfait, vous cliquez sur le bouton « Publier les modifications » en haut à droite. Votre travail devient alors visible publiquement.

✅Recommandé Bonne pratique— — Préparez plusieurs modifications avant de publier. Le bouton « Publier les modifications » publie tout ce qui estapplique en brouillonune seule fois l'ensemble des modifications en attente sur la page, ence une seule fois. C'est ainsi qu'onqui évite que les visiteurs voient des versions intermédiaires bizarres pour les visiteurs.incohérentes.

🎯

Étape 5 — Les boutons de la barre d'outils centrale

Au-Une barre d'actions est présentée au-dessus de l'aperçu,aperçu. vousVoici voyezla une rangéefonction de boutonschaque d'action contextuels. Voici ce qu'ils font,bouton, dans l'ordre :d'apparition.

Bouton

Effet

🔍 SEO

Ouvre une modalefenêtre avec un aperçu du résultat Google SERP en direct. Voir le Chapitre 16.

📋 Dupliquer

Crée une copie de la page courantecourante. (Cette fonction est particulièrement utile surtout pour les articles de blog).blog.

🌐 Mettre en ligne / Retirer du site

BasculeModifie la

visibilité

 publique de la pagepage. (publiéeÀ vs cachée). Différentdistinguer de « Publier les modifications » !dont la fonction est différente.

🚀 Publier les modifications

Publie tousl'ensemble lesdes

brouillons en attente

desur la page. LeUne badge à côtépastille indique combienle ilnombre yde enmodifications a.concernées.

↩️ Annuler les modifications

JetteSupprime tous les brouillons et revient àrestaure la version actuellement publiée.

🔗 Voir public

Ouvre la page publique dans un nouvel onglet du navigateur.

🗑️ Supprimer

Réservé aux administrateurs. DemandeUne confirmation.confirmation est demandée. Voir l'avertissement ci-dessous.

⚠️Avertissement Attention— — 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 utiliserson avecusage parcimonie.aux cas véritablement nécessaires.

🌳

Étape 6 — Naviguer dans la liste des pages (colonne gauche)

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

Le sélecteur de section

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

La recherche en temps réel

TapezSaisissez quelques lettrescaractères dans le champ « Rechercher » : la liste se filtre instantanément. ChercheLa dansrecherche porte sur le titre, le slug et la catégorie.

Les groupes de pages

Les pages sont groupéesregroupées par type de conteneur :

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

Les indicateurs visuels
  • Une pastille orange à côté d'une page =indique qu'elle acomporte des modifications brouillons en attente.brouillon.
  • Un nombre entre crochetscrochets, par exemple [3], =donne le nombre de slots éditables sur la page.
  • Une icône grisegrisée ausignale lieu de colorée =que la page est en mode « Retirée du site » (status=0).

Le bouton « + Nouveau »

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

  • Sur unela page d'index ded'un blogblog, (configuréeil via les paramètres) :devient « + Nouvel article ».
  • Sur les autres pagespages, :il devient « + Nouvelle page ».

📝

Étape 7 — L'inspecteur (colonne droite)

L'inspecteur aconnaît deux états très différents.distincts.

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

Quand Lorsqu'aucun slot n'est sélectionné dans l'aperçu, l'inspecteur afficheprésente tousla lesliste exhaustive des slots de la page,page, groupésregroupés par section. Pour chacun :

  • Une icône qui indiqueprécise le type (📝 texte, 🖼️ image, 🎨 couleur, ⭐ icône, …etc.).
  • Le libellé du slot.slot est affiché.
  • Un aperçu de la valeur actuelle (60est caractèresproposé, max).limité à soixante caractères.
  • Un badgerepère orange « modifié » sisignale qu'un brouillon est en cours.

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

État édition : le formulaire

Quand Lorsqu'un slot est sélectionné, l'inspecteur bascule en mode éditionédition. avecVous 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 actuellement dans l'aperçu.
  • Une section repliabledépliable « Autres langues » pour saisir les versions dans les autres locales.linguistiques.
  • Une section repliabledépliable « Options avancées » oùqui vouspermet pouvez d'accéder à la valeur canonique partagéepartagée. (Son usage est à éviterréserver saufà des cas particulier).particuliers.

💡Conseil Astuce— —L'enregistrement L'auto-saveautomatique fonctionnese 500déclenche msune demi-seconde après lavotre dernière frappe.saisie. Vous voyez un petitUn indicateur affiche successivement « Enregistrement... » puis « Enregistré ». àAucun côté du champ. Pas besoinbouton de cliquersauvegarde surn'est un bouton « Sauvegarder ».nécessaire.

🌍

Étape 8 — Changer de langue dans l'aperçu

Au-dessus de l'aperçu, une rangée d'onglets avecaccompagnés desde drapeaux : 🇫🇷 FR, 🇬🇧 EN, 🇩🇪 DE, etc. Selonreprésente les langues activées sur votre site.site (FR, EN, DE, etc.).

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

ℹ️Note À retenir— — La langue par défautprincipale du site (généralement le français) estconstitue la langue canonique.canonique. Les autres langues sont des traductions surnuméraires.complémentaires. Si Lorsqu'une traduction est manquante,manque, le visiteur voit la version canonique. VoirLe Chapitre 13 pourdétaille lece détail.mécanisme.

🏁

Récapitulatif

✅ Vous savez maintenantdésormais :

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

DansLe lechapitre prochainsuivant chapitre,aborde onconcrètement entrela dansmodification le concret : éditer d'un texte.texte.

Back to top