--- title: "Personalizar seções individuais" description: "Embora um estilo padrão seja aplicado globalmente no seu app, você pode personalizar o design de seções individuais para modificar elementos específicos, como c" canonical_url: "https://pt.goodbarber.com/help/personalizar-o-design-das-secoes-do-app-r89/personalizar-secoes-individuais-a106/" lang: pt --- # Personalizar seções individuais Source: https://pt.goodbarber.com/help/personalizar-o-design-das-secoes-do-app-r89/personalizar-secoes-individuais-a106/ Embora um [estilo padrão](https://pt.goodbarber.com/help/definir-a-identidade-visual-do-app-r87/estilo-do-app-configuracoes-de-design-essenciais-a317/) seja aplicado globalmente no seu app, você pode personalizar o design de seções individuais para modificar elementos específicos, como cores, fontes e planos de fundo. **Para editar o estilo de uma única seção:** 1. Acesse o menu **Meu App > Estrutura** . A lista de todas as suas seções será exibida na coluna da direita. 2. Nessa coluna, clique na seção que deseja editar. Veja o exemplo abaixo se desejar editar o design da seção "CMS Article". ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897752.jpg?v=1781859834.0510652) ## 1. Design das seções de conteúdo **Aviso: as configurações de design disponíveis variam dependendo do tipo de seção que você está editando.** Este guia usa uma seção de Artigo do CMS como exemplo. Você pode personalizar separadamente o design dos dois componentes principais desta seção: - A **Lista de Artigos**, que exibe todos os itens da seção. - A **página de Artigos**, que é a visualização detalhada de um único item. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897753.jpg?v=1781859834.0630653) 1. Clique no link "**Editar o design**" para a parte da seção que deseja personalizar, seja a "Lista de artigos" ou a página "Artigo". 2. Configure as diferentes opções disponíveis, detalhadas abaixo: **MODELO** - Seu modelo é claramente identificado por um ícone verde - Navegue pelos diferentes modelos usando as setas para selecionar um novo ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897754.jpg?v=1781859834.0750654) **CONTEÚDO** - Defina a cor de fundo, as cores de fonte e texto, o alinhamento do conteúdo, etc. da sua seção - Edite o texto e os [tokens](https://pt.goodbarber.com/help/personalizar-seu-app-com-as-ferramentas-de-desenvolvedor-r14/modificar-a-estrutura-html-das-paginas-de-detalhes-de-artigo-e-video-usuarios-avancados-a137/) que serão exibidos nas configurações de Informação na página da lista, por exemplo - Exibir o Autor, resumo quando a opção estiver disponível ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897755.jpg?v=1781859834.0790653) **BARRA DE FERRAMENTAS** - Você poderá escolher aqui as ações que pretende mostrar na barra de ferramentas do seu artigo, as cores dos ícones, etc. **NAVEGAÇÃO** - Edite as configurações de design do Pager* **MINIATURA** - Adicione uma miniatura padrão para exibir na sua página de lista quando não houver uma no seu artigo **opção não disponível em todos os modelos* ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897756.jpg?v=1781859834.0870655) **CÓDIGO HTML*** - Edite os [tokens](https://pt.goodbarber.com/help/personalizar-seu-app-com-as-ferramentas-de-desenvolvedor-r14/modificar-a-estrutura-html-das-paginas-de-detalhes-de-artigo-e-video-usuarios-avancados-a137/) e o texto: apague, por exemplo, a data e a informação do autor: Exclua a pequena parte do código correspondente a essa informação. **Não disponível ao usar o modelo 4 para a sua página detalhada.* ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897757.jpg?v=1781859834.0950656) ## 2. Design da seção menu Se você usa um sistema de navegação multinível no seu app, para configurar o design da seção Menu: 1. Acesse o menu **Meu App > Estrutura** 2. Clique na seção Menu que deseja editar. 3. Clique em "**Editar o Design**" ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897758.jpg?v=1781859834.1070654) 4. Selecione o template da seção menu 5. Use as configurações disponíveis para configurar o design (imagens de fundo, efeito, fontes, cores, ícones etc.) ## 3. Cabeçalho Específico Edite o design do cabeçalho de uma seção específica*. 1. Acesse o menu **Meu App > Estrutura** 2. Clique na seção que deseja editar. 3. Clique em "**Cabeçalho**" 4. Clique em "**Modificar o cabeçalho desta seção**" **A definição das configurações funciona da mesma forma que para o [cabeçalho geral](https://pt.goodbarber.com/help/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-cabecalho-do-app-a378/) .* ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-27897761.jpg?v=1781859834.1110656) Para retornar às configurações padrão e aplicar o design do cabeçalho geral: 1. Acesse o menu **Meu App > Estrutura** 2. Clique na seção que deseja editar. 3. Clique em "**Cabeçalho**" 4. Clique no ícone de engrenagem nas configurações deste cabeçalho específico 5. Clique em "**Voltar ao cabeçalho padrão**" ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/28038004-28336989.jpg?v=1781859834.1190655) ## 4. Vídeo tutorial ***Nota:** Os menus foram alterados no back office, mas o comportamento explicado no vídeo ainda é válido.* [Video](https://www.youtube.com/watch?v=qVSe6BzjgSw)