--- title: "Personnaliser le design des sections individuelles" description: "Par défaut, votre application dispose d'un Style global pour toutes les sections de votre app. Vous pouvez toutefois personnaliser chaque élément de" canonical_url: "https://fr.goodbarber.com/help/personnaliser-le-design-des-sections-de-l-app-r89/personnaliser-le-design-des-sections-individuelles-a106/" lang: fr --- # Personnaliser le design des sections individuelles Source: https://fr.goodbarber.com/help/personnaliser-le-design-des-sections-de-l-app-r89/personnaliser-le-design-des-sections-individuelles-a106/ Par défaut, votre application dispose d'un**[Style global](https://fr.goodbarber.com/help/definir-l-identite-visuelle-de-l-app-r87/style-de-l-app-parametres-de-design-essentiels-a317/)**pour toutes les sections de votre app. Vous pouvez toutefois personnaliser chaque élément de votre application en changeant les couleurs, les polices et les arrière-plan. Pour éditer le style de design d'une seule section : 1 - Allez dans**Mon app > Structure**. La liste de toutes vos sections sera affichée dans la colonne de droite. 2. Dans cette colonne, cliquez sur la section que vous souhaitez éditer. Voir l'exemple ci-dessous si vous souhaitez modifier la conception de la section « Article CMS » ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879969.jpg?v=1782377642.159213) ## 1. Design de la page de contenu **Attention : les paramètres de conception disponibles varient selon le type de section que vous modifiez.** Ce guide utilise une section Article d'un CMS comme exemple. Vous pouvez personnaliser séparément la conception des deux principaux éléments de cette section : - La **liste des articles**, qui affiche tous les éléments de la section ; - La **page Article**, qui présente la vue détaillée d'un élément. ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879970.jpg?v=1782377642.1712132) 1. Cliquez sur le lien « **Modifier le design** » pour la partie de la section que vous souhaitez personnaliser, qu'il s'agisse de la « Liste des articles » ou de la page « Article ». 2 - Configurez les différentes options disponibles détaillées ci-dessous : **TEMPLATE** - Votre Template est clairement identifié par une icône verte - Parcourez les différents templates en utilisant les flèches pour en sélectionner un nouveau. ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879971.jpg?v=1782377642.1752133) **CONTENU** - Paramétrer la couleur de fond de la page, couleurs de police et de texte, alignement de contenu, etc. de votre section. - Modifier par exemple le texte et les **[tokens](https://fr.goodbarber.com/help/personnaliser-votre-app-avec-les-outils-developpeur-r14/modifier-la-structure-html-des-pages-de-detail-article-et-video-utilisateurs-avances-a137/)** à afficher dans les infos sur la liste de la page. - Afficher l'auteur, le résumé quand l'option est disponible. ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879972.jpg?v=1782377642.1832132) **TOOLBAR** - Sélectionnez les actions à afficher dans la barre d'outils de votre page d'article détaillée, les couleurs des icônes, etc. **NAVIGATION** - Éditer le design du pager* **VIGNETTE** - Ajouter une vignette par défaut à afficher sur votre page de liste lorsqu'il n'y a pas d'image dans votre article. **option non disponible pour tous les templates.* ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879973.jpg?v=1782377642.1872134) **CODE HTML** -Éditer [les tokens](https://fr.goodbarber.com/help/personnaliser-votre-app-avec-les-outils-developpeur-r14/modifier-la-structure-html-des-pages-de-detail-article-et-video-utilisateurs-avances-a137/) et le texte. Vous pouvez, par exemple, supprimer les informations telles que que la date ou le nom de l'auteur. Pour ce faire, vous pouvez simplement supprimer le peu de code correspondant à cette information. *Remarque : Non disponible avec le template 4 de la page de détail.* ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879974.jpg?v=1782377642.1952133) ## 2. Design de la section Menu Si vous utilisez un système de navigation multi-niveaux dans votre application, pour configurer le design de votre section Menu : 1. Accédez au menu **Mon app > Structure** 2. Cliquez sur la section Menu à modifier. 3. Cliquez sur «**Modifier le design** ». ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879975.jpg?v=1782377642.2032135) 4 - Sélectionnez le template de menu que vous souhaitez. 5 - Utilisez les paramètres disponibles pour configurer le design (arrière plan, effets, police, couleurs, etc) ## 3. Header distinctif Vous avez également la possibilité de modifier le design du header d'une section* en particulier. 1- Allez dans le menu **Mon app > Structure** 2 - Cliquez sur la section que vous souhaitez éditer 3 - Cliquez sur **"Header"** 4 - Cliquez sur**"Modifier le header de cette section"** **La configuration des paramètres fonctionne de la même façon que pour le [header général](https://fr.goodbarber.com/help/personnaliser-la-navigation-la-home-et-le-header-r88/configurer-et-personnaliser-le-header-de-l-app-a378/) .* ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-27879978.jpg?v=1782377642.2112134) Pour revenir au design du header général de votre app: 1 - Allez dans **Mon app > Structure** 2 - Cliquez sur la section que vous souhaitez éditer 3 - Cliquez sur "**Header**". 4 - Cliquez sur la roue crantée dans la configuration de ce header. 5 - Cliquez sur "**Revenir au header global**". ![](https://cmsphoto.ww-cdn.com/superstatic/1682490/art/default/27997986-28325431.jpg?v=1782377642.2152135) ## 4. Tutoriel vidéo **Note** : *Les menus ont changé dans le back-office, mais le comportement expliqué dans la vidéo est toujours exact.* [Video](https://www.youtube.com/watch?v=qVSe6BzjgSw)