1 - Barre d'outils supérieure

Le bandeau supérieur noir a été remplacé par une interface claire. Le changement fonctionnel principal concerne la fonction de recherche. Le champ de saisie textuel visible en v11 est remplacé par une icône Loupe située en haut à droite. Il est nécessaire de cliquer sur cette icône ou d'utiliser le raccourci clavier associé pour ouvrir la barre de recherche globale. Les fonctionnalités de profil utilisateur et de vidage de cache conservent leur emplacement habituel à droite.

2 - Menu des modules

Le menu de navigation principal, situé dans la colonne de gauche, abandonne le fond sombre pour un fond gris clair. Les icônes des modules (Page, Liste, Fichiers) ont été redessinées. Leur ordre et leurs fonctions restent inchangés. Vous retrouverez les modules de gestion de contenu en haut et le module de gestion de fichiers en bas de cette zone.

3 - Arborescence des pages

L'arborescence permettant de naviguer dans la structure du site présente une modification de l'indicateur de position. La page actuellement active (celle que vous êtes en train d'éditer) est désormais mise en évidence par un bandeau de couleur bleue. Cette distinction visuelle remplace le simple grisé de la version précédente et permet de repérer plus rapidement la page sélectionnée dans l'arborescence.

Une indication visuelle supplémentaire a été ajoutée concernant le contenu des pages. Lorsqu'une page contient un plugin spécifique (comme une liste d'actualités ou un événement), un petit logo s'affiche désormais au niveau de l'icône de la page. Cela permet d'identifier la présence de fonctionnalités particulières sans avoir à consulter le contenu détaillé.

4 - Zone d'édition

La zone centrale où s'effectue la gestion des contenus a été réorganisée pour mieux délimiter les éléments. Les blocs de contenu sont présentés sous forme de cartes distinctes sur un fond gris, ce qui améliore la distinction entre les différents paragraphes ou images. Les boutons d'ajout de contenu ont été agrandis. Au lieu du petit bouton + Contenu, vous disposez à présent d'un large bouton intitulé Créer un nouveau contenu situé entre chaque bloc, facilitant l'insertion de nouveaux éléments.

TYPO3 v13 propose désormais un thème sombre pour l'interface d'administration. Par défaut, l'affichage s'adapte automatiquement aux préférences de votre système d'exploitation, mais vous pouvez forcer le mode de votre choix manuellement. Pour ce faire, cliquez sur votre profil utilisateur (votre nom et avatar) situé dans la barre d'outils en haut à droite :

Un menu déroulant apparaît contenant vos paramètres. Une option dédiée vous permet de basculer l'affichage. Cliquez sur le sélecteur indiquant Mode clair ou Mode sombre pour alterner entre les deux apparences.

Une fois le mode sombre activé, l'ensemble de l'interface (menus, arborescence et zones d'édition) bascule vers des teintes foncées, offrant un meilleur confort visuel dans les environnements peu éclairés :

aperçu du mode sombre : 

La fonction de recherche a été centralisée et modernisée pour faciliter la navigation rapide dans le site. Elle est accessible via l'icône Loupe située dans la barre d'outils supérieure ou via le raccourci clavier Ctrl + K (ou Cmd + K).

L'interface de recherche s'ouvre désormais dans une fenêtre dédiée au centre de l'écran, superposée à votre travail en cours :

Contrairement aux versions précédentes, cette recherche interroge l'ensemble du site : elle permet de retrouver non seulement des titres de pages, mais aussi des éléments de contenu spécifiques (textes, titres) ou des fichiers. Les résultats sont affichés dynamiquement et classés par type. Un clic sur un résultat vous redirige directement vers l'élément concerné pour son édition.

1 - Arborescence des dossiers

La colonne de gauche présente la structure des répertoires du serveur. Un champ de filtrage intitulé Entrez le terme à rechercher est disponible au sommet de l'arborescence. Cette fonctionnalité permet de filtrer la liste des dossiers en temps réel pour accéder rapidement à un répertoire spécifique, sans avoir à parcourir manuellement toute la hiérarchie.

2 - Affichage et actions

La zone centrale affiche le contenu du répertoire sélectionné. L'interface met en avant un affichage sous forme de Tuiles (vignettes), permettant une identification visuelle rapide des dossiers et fichiers. Une barre de recherche contextuelle permet de filtrer les éléments visibles dans le dossier actuel. Les actions principales telles que Envoyer des fichiers ou créer un Nouveau dossier sont désormais accessibles directement via les boutons situés dans la barre d'outils supérieure.

Pour déplacer un bloc :

1. Cliquez sur la barre supérieure de l'élément de contenu (l'entête du bloc) et maintenez le bouton de la souris enfoncé.

2. Glissez l'élément vers la colonne de gauche (Arborescence) jusqu'à atteindre la page de destination souhaitée.

3. Relâchez le bouton de la souris lorsque la page cible est en surbrillance.

Une fenêtre de confirmation apparaîtra pour valider le déplacement. Le contenu sera alors retiré de la page d'origine et placé sur la nouvelle page.

Barre d'outils simplifiée

La barre d'outils a été réorganisée pour offrir une meilleure lisibilité. Les icônes de mise en forme (Gras, Italique, Listes, Liens) sont regroupées sur une ligne unique en haut de la zone de saisie. Le bouton Source, situé à l'extrême gauche, permet toujours de basculer vers la vue HTML pour les corrections techniques.

Copier-coller depuis Word

L'importation de texte depuis des logiciels externes comme Microsoft Word ou Google Docs a été grandement améliorée. Vous pouvez désormais coller votre texte directement dans l'éditeur sans passer par des boutons de "nettoyage" spécifiques. Le système détecte automatiquement la source et conserve la structure (titres, paragraphes, gras) tout en supprimant le code parasite inutile qui pourrait déformer l'affichage de votre site.

Modification des liens et tableaux

Le comportement lors de l'édition d'éléments a changé. Le clic-droit n'ouvre plus systématiquement le menu de l'éditeur (il ouvre souvent le menu du navigateur). Désormais, pour modifier un lien existant ou les propriétés d'un tableau, effectuez un simple clic gauche sur l'élément. Une petite barre d'outils contextuelle (bulle d'outils) apparaîtra immédiatement à côté de l'élément sélectionné pour vous proposer les options de modification.

La méthode pour insérer des éléments complexes, tels que des actualités ou des événements, a été simplifiée dans l'assistant de création de contenu.

Fonctionnement précédent (v11)

Auparavant, l'ajout d'un plugin se faisait en deux étapes. Il fallait d'abord sélectionner le module générique Gestion des actualités dans l'onglet "Modules". Ce n'est qu'une fois l'élément ajouté dans la page qu'il fallait définir son type d'affichage (Vue Liste, Vue Détail, Menu de dates, etc.) via une liste déroulante dans les propriétés du plugin.

Fonctionnement actuelle (v13)

L'assistant de création de contenu expose désormais directement toutes les combinaisons d'affichage disponibles. Il n'est plus nécessaire de passer par un module générique. Vous pouvez sélectionner immédiatement le type de rendu souhaité, par exemple Liste des articles d'actualités, Vue détail de l'article ou Menu des catégories directement depuis la liste de choix. L'élément est ainsi créé directement avec la bonne configuration, supprimant une étape de paramétrage.

Pour plus d'informations sur les actualités

L'en-tête du module Page a été réorganisé pour séparer la gestion de l'affichage de celle des langues.

• Menu "Mise en page" : Ce bouton permet de définir le mode de visualisation de la page (généralement la vue Colonnes pour l'édition standard). Il remplace l'ancien menu "Fonctions".

• Menu "Langue" : Situé à droite du sélecteur de vue, ce nouveau menu dédié permet de basculer entre les langues disponibles ou d'activer le mode comparatif (affichage côte à côte) sans quitter votre environnement de travail.