--- title: "Configurar e personalizar o cabeçalho do App" description: "O cabeçalho (logo e título) é a parte superior do aplicativo que está sempre visível e acessível em todas as seções. O cabeçalho tem 4 finalidades: \tPara exib" canonical_url: "https://pt.goodbarber.com/help/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-cabecalho-do-app-a378/" lang: pt --- # Configurar e personalizar o cabeçalho do App Source: https://pt.goodbarber.com/help/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-cabecalho-do-app-a378/ O cabeçalho (logo e título) é a parte superior do aplicativo que está sempre visível e acessível em todas as seções. O cabeçalho tem 4 finalidades: - Para exibir a identidade do seu aplicativo - Para dar um título à seção - Para exibir atalhos - Para navegar no aplicativo Para configurar seu **Cabeçalho**: 1. Vá para o menu **Meu app > Estrutura** 2. Clique em "**Cabeçalho** " no painel direito Para acessar as configurações avançadas descritas a seguir, clique no botão **Avançado** no canto superior direito do painel. *Observação: Esta ajuda online cobre o gerenciamento das configurações padrão do cabeçalho, também conhecido como cabeçalho geral. Para personalizar o design do cabeçalho de uma seção específica, siga as instruções desta [ajuda online](https://pt.goodbarber.com/help/personalizar-o-design-das-secoes-do-app-r89/personalizar-secoes-individuais-a106/) .* ## 1. Altura do cabeçalho **Configurações gerais do seu cabeçalho** Selecione a altura do cabeçalho entre 3 modelos: **- Pequeno***: Exibe o título ou a imagem do logotipo **- Médio**: Exibe o título ou a imagem do logotipo (disponível apenas para seções na **navegação principal**do painel direito de seu back office) **- Grande**: Exibe o título ou a imagem do logotipo + a breve descrição (disponível apenas para seções na **navegação principal** do painel direito do seu back office) ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/55547180-41563228.jpg?v=1781794921.2276797) * **Outras seções**do painel direito de seu back office + as seções listadas abaixo **sempre** usarão um **modelo de** **cabeçalho pequeno**: **Observação**: as seções listadas abaixo **sempre** usarão um **modelo de cabeçalho Pequeno :** - Histórico de cupons - Cupons salvos - Lista de comentários - Postar comentário - Página não encontrada - Caixa de login - Outros na TabBar - Perfil privado + Edição do Perfil + Configurações do Perfil - Busca de Usuários + Visualização Filtrada - Visualização de postagens da seção Envio - Seção de pesquisa - Qualquer template Minimal - Seção Mapa (Todas as visualizações) (O efeito de ocultação não pode ser aplicado nesta seção) - Seção Chat (Todas as visualizações) (O efeito de ocultação não pode ser aplicado nesta seção) - Seção Personalizada (O efeito de ocultação não pode ser aplicado nesta seção) - Seção Plugin (O efeito de ocultação não pode ser aplicado nesta seção) - Templates Scratch e Slideshow da seção Node (O efeito de ocultação não pode ser aplicado nesta seção) - Seção QR Code - Seção Configurações - Live (Todas as seções Live) - Todas as visualizações do Cartão Fidelidade As seções de Código Personalizado **sempre** usam um **modelo de cabeçalho pequeno**. **Atenção**: **Não** há nenhum cabeçalho exibido nas visualizações de mapa das seções Eventos e Lista de usuários. ## 2. Logo 1. A parte central do cabeçalho permite que você dê um título ao seu aplicativo ou a uma seção. Este título pode ser exibido na forma de **texto** ou um **logotipo** (imagem). **- Texto**: Clique no texto para editá-lo. **- Logo**: Clique no botão "Logotipo" para adicionar uma imagem* no lugar do texto. **Respeite os requisitos de tamanho mínimo de 800 x 200 px.* 2. Selecione a cor e a fonte do seu título. 3. **Alinhamento**: posicione seu logotipo ou título à esquerda ou no centro do cabeçalho. *Nota: nos detalhes do Chat e Nova mensagem, lista de comentários e comentário de postagem, scanner de código QR, detalhes da foto,​ Editar Perfil e configurações de perfil, lista push no perfil e configurações, resultado da pesquisa de usuário e páginas de pesquisa avançada do usuário, o logotipo/título estará sempre centralizado.* ## 3. Configurações avançadas - Breve descrição No menu Logo, se você selecionou um *template Grande*, você tem a possibilidade de definir uma breve descrição que é mostrada em seu cabeçalho acima do logotipo de seu aplicativo. Preencha a breve descrição do seu cabeçalho geral e defina a fonte e a cor do texto. ## 4. Configurações avançadas - Opções para o título No menu Logo, você pode definir as opções de exibição do título. Esta opção define a estratégia de exibição do cabeçalho. 1. Selecione "**Somente logotipo**" para sempre exibir o logotipo definido no cabeçalho geral de todas as páginas do seu aplicativo. *ou* 2. Selecione "**Título & descrição da seção**" (template grande) ou "**Título da seção**" (template pequeno e médio): Atualize o título do seu cabeçalho dependendo da página do seu aplicativo que é exibida, para usar automaticamente o título da seção envolvida. *Para definir a descrição de uma seção se você estiver usando um template Grande:* *- Vá para o menu* *M* *eu app > Estrutura* *- Abra as configurações da seção envolvida* **Nota:** *Na*navegação principal *de seu aplicativo, a primeira seção de sua lista sempre usará o título/descrição do cabeçalho geral.* ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/55547180-41563242.jpg?v=1781794921.2356799) ## 5. Configurações avançadas - Ícones de Menu & Voltar A parte esquerda do cabeçalho é usada para exibir as ações de navegação. Defina o design do **botão "Menu"** (ícone + cor). Os menus de navegação Swipe, Little Swipe, Grid, Slate fornecem um botão de menu exibido no cabeçalho e permite acessar o conteúdo. No menu de navegação TabBar este botão não aparecerá. Defina o design do **botão "Voltar"** (ícone + cor) Este botão é usado para voltar às seções anteriores dentro do seu aplicativo. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/55547180-41563244.jpg?v=1781794921.2436798) ## 6. Configurações avançadas - Fundo do cabeçalho Selecione as cores do fundo do seu cabeçalho. Defina uma imagem de plano de fundo (1242 x 192 px) para o plano de fundo do cabeçalho (disponível *apenas para o template pequeno*). ## 7. Configurações avançadas - Efeito de rolagem Ao rolar para baixo as páginas do aplicativo, você pode definir efeitos diferentes para o cabeçalho. **Sem efeito**: Disponível para os templates Pequeno, Médio e Grande. **Esconder**: Disponível para os templates Pequeno, Médio e Grande; o cabeçalho fica oculto quando você rola a página para baixo. **Redimensionar**: Disponível para os templates Médio e Grande; o cabeçalho fica menor quando você rola a página para baixo. ## 8. Configurações avançadas - Ações no cabeçalho Para adicionar atalhos no lado direito do cabeçalho. 1. Clique no ícone verde + para adicionar uma ação. 2. Selecione no menu suspenso do link para qual página seus usuários serão redirecionados quando clicarem nesta ação. 3. Edite sua cor e ícone. 4. Você pode exibir um título para o atalho do iPad e da área de trabalho e exibir o atalho na forma de um botão apenas para a área de trabalho. ![](https://cmsphoto.ww-cdn.com/superstatic/1138983/art/default/55547180-41563256.jpg?v=1781794921.2556798) *Nota: Apenas 2 atalhos são exibidos no cabeçalho, se você adicionar atalhos extras, eles estarão acessíveis a partir do segundo atalho (menu adicional) para seus usuários.* ## 9. Tutorial em vídeo: Como configurar seu cabeçalho ***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=KOpDip7U53U) ## 10. Tutorial em vídeo: Como escolher o tamanho do seu cabeçalho ***Nota:** Os menus foram alterados no painel administrativo, mas o comportamento explicado no vídeo ainda é válido.* [Video](https://www.youtube.com/watch?v=DJQLW3UNpjo)