---
title: "Comment personnaliser le design des catégories d'une section ? | Tutoriels - GoodBarber"
description: "Les catégoriesSi une section a des catégories, vos lecteurs naviguent entre elles en haut de la liste. Vous choisissez leur apparence et ce qu'affiche le header.Dans « My App », ouvrez Structure… et …"
canonical_url: "https://fr.goodbarber.com/tutorials/design/comment-personnaliser-le-design-des-categories-dune-section/"
lang: fr
---

# Comment personnaliser le design des catégories d'une section ? | Tutoriels - GoodBarber

[Retour](https://fr.goodbarber.com/tutorials/)

# Comment personnaliser le design des catégories d'une section ?

## Les catégories

Si une section a des catégories, vos lecteurs naviguent entre elles en haut de la liste. Vous choisissez leur apparence et ce qu'affiche le header.

Dans « My App », ouvrez Structure… et cliquez sur la section, ici Sports.

Ses catégories se créent dans les réglages de la section, via la roue dentée. Leur design se règle ici : cliquez sur Categories.

## Templates

Il y a quatre templates. Tags, celui en cours, affiche chaque catégorie dans une cellule arrondie.

Choisissez Labels… et les catégories deviennent de simples titres, soulignés une fois sélectionnés.

Choisissez Filters… et la barre ne liste que les catégories. Comme l'indique le panneau, la liste affiche par défaut les articles de All.

Choisissez Dropdown… et les catégories passent dans un menu, avec une flèche de chaque côté.

## Titre du header

Avec Dropdown, vous choisissez aussi le titre du header : « Section & category title », « Section title only » ou « Categories only ».

Choisissez « Categories only »… et le header affiche la catégorie, All, au lieu de Sports.

## Couleurs et polices

Retour à Tags. Chaque template a ses propres réglages.

Chaque couleur a deux états : « Not selected » et Selected. Voici une nouvelle couleur pour la cellule sélectionnée… et la catégorie en cours ressort en noir.

À côté de chaque police, cette icône règle la taille pour chaque écran : mobile, tablette et ordinateur.

Une taille plus grande sur mobile… et les catégories sont plus lisibles.

## Publier

Pour que vos utilisateurs voient ces changements, publiez la mise à jour de votre app depuis le menu Publish.

## Vidéos similaires

[DesignComment configurer votre header ?](/tutorials/design/comment-configurer-votre-banniere-de-titre/)

![Comment configurer votre header ?](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignComment configurer le style de votre app ?](/tutorials/design/comment-configurer-le-style-global-de-votre-app/)

![Comment configurer le style de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignComment personnaliser l'écran de lancement de votre app ?](/tutorials/design/comment-personnaliser-lecran-de-lancement-de-votre-app/)

![Comment personnaliser l'écran de lancement de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignComment configurer le menu de navigation de votre app ?](/tutorials/design/comment-choisir-le-mode-de-navigation-de-votre-app/)

![Comment configurer le menu de navigation de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignComment personnaliser les icônes du menu de votre app ?](/tutorials/design/comment-personnaliser-les-icones-du-menu-de-votre-app/)

![Comment personnaliser les icônes du menu de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignComment réaliser le design de vos sections ?](/tutorials/design/comment-realiser-le-design-de-vos-sections/)

![Comment réaliser le design de vos sections ?](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignComment copier le design d'une section ?](/tutorials/design/comment-copier-le-design-dune-section/)

![Comment copier le design d'une section ?](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignComment créer l'écran d'accueil de votre app ?](/tutorials/design/comment-creer-votre-page-daccueil/)

![Comment créer l'écran d'accueil de votre app ?](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignComment choisir la taille de son header ?](/tutorials/design/comment-choisir-la-taille-de-son-header/)

![Comment choisir la taille de son header ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)