--- 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: Exibir a" canonical_url: "https://pt.goodbarber.com/help/shop/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-cabecalho-do-app-a481/" lang: pt --- # Configurar e personalizar o cabeçalho do App Source: https://pt.goodbarber.com/help/shop/personalizar-a-navegacao-a-home-e-o-header-r88/configurar-e-personalizar-o-cabecalho-do-app-a481/ 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: - Exibir a identidade do seu aplicativo - Dar um título à seção - Exibir atalhos - 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. ## 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/1878443/art/default/55464648-41559617.jpg?v=1782380946.2087038) * **Outras seções** do painel direito de seu back office + as seções listadas abaixo **sempre** usarão um modelo de **cabeçalho pequeno**: - Visualizações do Carrinho (Carrinho + Checkout + Página de Confirmação) - Perfil + todos os detalhes - Todos os detalhes do conteúdo - Página não encontrada - Caixa de login - Outros na TabBar - Lista de comentários (Blog) - Postar comentário (Blog) - Seção de pesquisa - Qualquer template Minimal - Configurações - Seção de Termos de Serviço As seções de Código Personalizado **sempre** usam um **modelo de cabeçalho pequeno**. ## 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: nas páginas de Checkout, Carrinho, Adicionar endereço, Adicionar cartão e alterar a senha, 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 Meu 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/1878443/art/default/55464648-41559639.jpg?v=1782380946.216704) ## 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/1878443/art/default/55464648-41559642.jpg?v=1782380946.2287037) ## 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. **Ocultar**: 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 Um atalho para o carrinho é adicionado automaticamente no lado direito do cabeçalho. 1. Clique para editar sua cor e ícone. 2. Você pode exibir um título para o atalho do iPad e desktop e exibir o atalho na forma de um botão apenas para o desktop. 3. Defina o design do marcador que será exibido após os produtos serem adicionados ao carrinho (cor do número e do marcador de fundo). Para adicionar uma nova ação, clique no ícone verde + e selecione no menu suspenso do link para qual página seus usuários serão redirecionados quando clicarem nesta ação. ![](https://cmsphoto.ww-cdn.com/superstatic/1878443/art/default/55464648-41559652.jpg?v=1782380946.2367039) *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.*