---
title: "Come personalizzare il design delle categorie di una sezione | Tutorial - GoodBarber"
description: "Le categorieSe una sezione ha delle categorie, i tuoi lettori passano dall'una all'altra in cima all'elenco. Scegli tu il loro aspetto e cosa mostra l'header.In «My App», apri Structure… e clicca sul…"
canonical_url: "https://it.goodbarber.com/tutorials/design/come-personalizzare-il-design-delle-categorie-di-una-sezione/"
lang: it
---

# Come personalizzare il design delle categorie di una sezione | Tutorial - GoodBarber

[Indietro](https://it.goodbarber.com/tutorials/)

# Come personalizzare il design delle categorie di una sezione

## Le categorie

Se una sezione ha delle categorie, i tuoi lettori passano dall'una all'altra in cima all'elenco. Scegli tu il loro aspetto e cosa mostra l'header.

In «My App», apri Structure… e clicca sulla sezione, qui Sports.

Le categorie si creano dall'ingranaggio, nelle impostazioni della sezione. Il loro design invece è qui: clicca su Categories.

## Template

Ci sono quattro template. Tags è quello in uso e mostra ogni categoria in una cella arrotondata.

Scegli Labels… e le categorie diventano semplici titoli, sottolineati se selezionati.

Scegli Filters… e la barra elenca solo le categorie. L'elenco mostra gli articoli di All per impostazione predefinita, come indica il pannello.

Scegli Dropdown… e le categorie si spostano in un menu, con una freccia per lato.

## Titolo dell'header

Con Dropdown, scegli anche il titolo dell'header: «Section & category title», «Section title only» o «Categories only».

Scegli «Categories only»… e l'header mostra la categoria, All, invece di Sports.

## Colori e font

Torniamo a Tags. Ogni template ha impostazioni proprie.

I colori si impostano per due stati: «Not selected» e Selected. Qui un nuovo colore per la cella selezionata… e la categoria attuale risalta in nero.

Accanto a ogni font, questa icona regola la dimensione per ogni tipo di schermo: smartphone, tablet e computer.

Una dimensione maggiore su smartphone… e le categorie si leggono meglio.

## Pubblicazione

Perché i tuoi utenti vedano le modifiche, pubblica l'aggiornamento della tua app dal menu Publish.

## Video simili

[DesignCome impostare il tuo header](/tutorials/design/come-impostare-il-tuo-header/)

![Come impostare il tuo header](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignCome impostare lo stile della tua app](/tutorials/design/come-impostare-lo-stile-globale-della-tua-app/)

![Come impostare lo stile della tua app](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignCome personalizzare la schermata di avvio della tua app](/tutorials/design/come-personalizzare-lo-splashscreen-della-tua-app/)

![Come personalizzare la schermata di avvio della tua app](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignCome impostare il menu di navigazione della tua app](/tutorials/design/come-impostare-la-modalita-di-navigazione-della-tua-app/)

![Come impostare il menu di navigazione della tua app](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignCome personalizzare le icone del tuo menu](/tutorials/design/come-personalizzare-le-icone-del-tuo-menu/)

![Come personalizzare le icone del tuo menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignCome impostare il design delle tue sezioni](/tutorials/design/come-impostare-il-design-delle-tue-sezioni/)

![Come impostare il design delle tue sezioni](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignCome copiare il design di una sezione](/tutorials/design/come-copiare-il-design-di-una-sezione/)

![Come copiare il design di una sezione](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignCome impostare la tua home page](/tutorials/design/come-impostare-la-tua-home-page/)

![Come impostare la tua home page](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignCome scegliere l'altezza del tuo header](/tutorials/design/come-scegliere-le-dimensioni-del-tuo-header/)

![Come scegliere l'altezza del tuo header](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)