---
title: "Como personalizar o design das categorias de uma seção | Tutoriais - GoodBarber"
description: "CategoriasQuando uma seção tem categorias, seus leitores alternam entre elas no topo da lista. Você escolhe o visual delas e o que aparece no cabeçalho.No menu"
canonical_url: "https://pt.goodbarber.com/tutorials/design/como-personalizar-o-design-das-categorias-de-uma-secao/"
lang: pt
---

# Como personalizar o design das categorias de uma seção | Tutoriais - GoodBarber

[Voltar](https://pt.goodbarber.com/tutorials/)

# Como personalizar o design das categorias de uma seção

## Categorias

Quando uma seção tem categorias, seus leitores alternam entre elas no topo da lista. Você escolhe o visual delas e o que aparece no cabeçalho.

No menu "My App", abra Structure… e clique na seção, aqui Sports.

Você cria as categorias nas configurações da seção, na engrenagem. O design delas fica aqui: clique em Categories.

## Modelos

Há quatro modelos. Tags, o atual, mostra cada categoria em uma célula arredondada.

Escolha Labels… e as categorias viram títulos simples, sublinhados quando selecionados.

Escolha Filters… e a barra exibe só as categorias. O painel indica que a lista mostra os artigos de All por padrão.

Escolha Dropdown… e as categorias passam para um menu, com uma seta de cada lado.

## Título do cabeçalho

Com Dropdown, você também escolhe o título do cabeçalho: "Section & category title", "Section title only" ou "Categories only".

Escolha "Categories only"… e no cabeçalho aparece a categoria, All, em vez de Sports.

## Cores e fontes

Volte para Tags. Cada modelo tem configurações próprias.

As cores têm dois estados, "Not selected" e Selected. Aqui, uma nova cor para a célula selecionada… e a categoria atual se destaca em preto.

Ao lado de cada fonte, este ícone define o tamanho por tela: celular, tablet e computador.

Um tamanho maior no celular… e as categorias ficam mais fáceis de ler.

## Publicar

Para que seus usuários vejam as mudanças, publique a atualização do seu app pelo menu Publish.

## Vídeos semelhantes

[DesignComo configurar seu cabeçalho](/tutorials/design/como-configurar-seu-cabecalho/)

![Como configurar seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignComo configurar o estilo do seu aplicativo](/tutorials/design/como-configurar-o-estilo-global-do-seu-aplicativo/)

![Como configurar o estilo do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignComo personalizar a tela de lançamento do seu aplicativo](/tutorials/design/como-personalizar-a-tela-de-lancamento-do-seu-aplicativo/)

![Como personalizar a tela de lançamento do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignComo configurar o menu de navegação do seu aplicativo](/tutorials/design/como-configurar-o-modo-de-navegacao-do-seu-aplicativo/)

![Como configurar o menu de navegação do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignComo personalizar os ícones do seu menu](/tutorials/design/como-personalizar-os-icones-do-seu-menu/)

![Como personalizar os ícones do seu menu](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignComo criar o design das suas seções](/tutorials/design/como-criar-o-design-das-suas-secoes/)

![Como criar o design das suas seções](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignComo copiar o design de uma seção](/tutorials/design/como-copiar-o-design-de-uma-secao/)

![Como copiar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignComo configurar sua página inicial (home) do seu aplicativo movel](/tutorials/design/como-configurar-sua-pagina-inicial/)

![Como configurar sua página inicial (home) do seu aplicativo movel](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignComo escolher o tamanho do seu cabeçalho ?](/tutorials/design/como-escolher-o-tamanho-do-seu-cabecalho/)

![Como escolher o tamanho do seu cabeçalho ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)