# Como criar um cabeçalho do WordPress sem plugin URL: https://canvaswp.com/pt-br/guides/build-a-wordpress-header-without-a-plugin/ Updated: 2026-11-03 Guia O cabeçalho é a única parte de um site que todo visitante vê, e é a parte que os temas costumam esconder atrás de uma tela de configurações com nove opções. Na Canvas, o cabeçalho é um registro que você monta com blocos no editor, então este guia é um passo a passo de construção, e não um tour por caixas de seleção. Publicado em 5 de setembro de 2026 Atualizado em 3 de novembro de 2026 Escrito pela equipe Canvas na SemiColonWeb ## Passo 1: O que é um cabeçalho no Canvas Um cabeçalho é um registro, listado no admin do WordPress como uma página e editado no mesmo editor de blocos. Essa decisão única é o que elimina o plugin de cabeçalho do seu site. Outros temas criam o cabeçalho em outro lugar. O Blocksy e o Astra mantêm seus construtores de cabeçalho no Personalizador, um painel de configurações ao lado do site, separado do editor em que você escreve as páginas. [Nossa comparação com o Blocksy](https://canvaswp.com/pt-br/compare/blocksy/) coloca as duas abordagens lado a lado. ### O aninhamento Um registro de cabeçalho contém um **Header Root**. O root contém um **Header Container**, que define se o cabeçalho tem largura limitada, largura total, ou uma largura em um breakpoint e outra no restante. O container contém **Header Zones**, e uma zona é uma célula na linha do cabeçalho. O logo vai em uma, a navegação na seguinte, um ícone de busca e um carrinho na última. Há 22 blocos na família de cabeçalho ao todo, e você vai usar quatro ou cinco deles em um site típico. Todo o resto está ali para o dia em que você precisar de uma busca na loja, um link de idioma ou um bloco com horário de funcionamento no canto. Nada disso é um editor separado. Se você edita páginas no WordPress, pode editar um cabeçalho, e os mesmos recursos de desfazer, configurações de bloco e atalhos de teclado se aplicam. ## Etapa 2: Crie o registro do cabeçalho Abra a lista Headers no menu do Canvas e adicione um novo registro. Você tem dois pontos de partida honestos. ### Comece a partir de um padrão Insira um padrão de cabeçalho e você obtém blocos comuns, já organizados para você, prontos para reorganizar, renomear ou excluir. Os cabeçalhos são a maior categoria de padrões do produto, em um total de 183 padrões, então geralmente há algo próximo da forma que você quer. Este é o caminho mais rápido e o que você deve seguir em uma primeira construção. ### Comece com um demo Se você importou um dos 88 sites de demo, o cabeçalho dele já existe como modelo no seu site. Abra e altere, ou duplique e experimente na cópia. Editar um cabeçalho funcional ensina a estrutura mais rápido do que uma tela vazia. Dê ao registro um nome que indique para que ele serve, como Cabeçalho principal ou Cabeçalho da landing page. Em um mês você terá três deles, e os nomes são tudo o que terá para diferenciá-los. ## Passo 3: Organize as zonas As zonas cuidam do layout, então você quase nunca precisa lidar com classes de alinhamento. - **Leve uma zona até a borda.** Uma zona à esquerda para o logo, uma zona central para o menu e uma zona à direita para as ações é o arranjo em que a maioria dos sites acaba. - **Agrupe o que pertence junto.** Um ícone de busca, um carrinho e um botão na mesma zona continuam formando um conjunto, espaçado como um só grupo. - **Reordene por ponto de quebra.** A zona que fica em terceiro no desktop pode ficar em primeiro no celular, sem um segundo registro de cabeçalho. - **Limite uma zona a um nível de dispositivo.** Instrua uma zona a ignorar os dispositivos que não têm espaço para ela, e nada precisa ser ocultado com CSS depois. - **Adicione suas próprias classes** a uma zona quando quiser acessá-la a partir de uma folha de estilo própria. Monte primeiro o arranjo da versão para desktop e não mexa nele até que as partes estejam prontas. Decisões de layout ficam muito mais fáceis quando o conteúdo real já está na linha. **Um cabeçalho no editor.** As zonas guardam as partes; cada parte é um bloco com seu próprio painel de configurações. ## Passo 4: Adicione as partes Agora preencha as zonas. Cada uma delas é um bloco, e cada bloco tem um painel de configurações com as opções que ele reconhece. - **Logotipo do cabeçalho.** Seu logotipo, com arquivos separados para o estado fixo e o estado escuro, para que um cabeçalho transparente sobre uma foto escura não precise de uma solução alternativa. - **Header Navigation.** O menu principal, com menus suspensos e painéis de mega menu. Ele exibe um menu do WordPress, então o próprio menu continua sendo gerenciado onde você espera. - **Header Search.** Um ícone que abre um campo ou um campo sempre aberto, o que for mais adequado ao design. - **Header Button.** A chamada para ação, com as configurações habituais de tamanho, estilo e link. Um é persuasivo, três são ruído. - **Header Cart.** O carrinho do WooCommerce com a contagem de itens e um resumo suspenso, para lojas. - **Header Icon Link, Header Social e Header Info.** Um número de telefone, uma linha de perfis sociais, um pequeno bloco com dados de contato, um endereço ou horário de funcionamento. ### Mega menus, quando uma lista não basta Um mega menu é um registro próprio, montado com blocos e renderizado pelo bloco Mega menu, então um item de menu abre um painel de largura total com colunas, imagens e botões. O Mega Menu Column mantém o painel em uma grade. Recorra a ele quando uma categoria realmente tiver estrutura, e não para fazer um site pequeno parecer cheio. ## Etapa 5: Fixo, transparente e os predefinições de layout O comportamento vem de predefinições, que são conjuntos de configurações de layout que você aplica com um clique e depois ajusta. Escolha o comportamento desejado e altere o que quiser depois. - **Transparente.** Sem fundo, então o que estiver atrás do cabeçalho aparece. Combine com a variante de logotipo escura ou clara para que o logotipo continue legível. - **Semitransparente.** Um fundo translúcido, que mantém a imagem por trás visível e o texto legível. Geralmente é a escolha mais segura em vez de uma fotografia muito movimentada. - **Flutuante,** e **flutuante semitransparente** ou **flutuante pequeno**, em que o cabeçalho fica dentro da página, com espaço ao redor e longe das bordas da janela. - **Largura total e fixo.** Ocupa toda a largura da tela e permanece fixado conforme a página é rolada. - **Fixo ao rolar para cima.** Sai do topo quando o visitante rola para baixo e volta quando ele rola para cima, o que devolve espaço às páginas longas. ### As configurações globais do site que as sustentam Opções de cabeçalho são a maior seção em Opções do tema, com 94 dos 533 campos, e reúnem o que nenhum registro único deveria controlar: o cabeçalho padrão, o comportamento fixo, a altura, o espaçamento e o ponto de quebra para dispositivos móveis. Uma importação de demo preenche todas elas, e você altera as que importam para você. **Opções do tema, Cabeçalho.** As configurações padrão do site por trás de cada registro de cabeçalho. ## Passo 6: O cabeçalho do celular A maior parte do tráfego chega pelo celular, então verifique isso antes de qualquer outra coisa. A boa notícia é que é o mesmo registro. - **Reordene em vez de refazer.** Mova o logotipo para o centro, coloque o botão de menu à esquerda e um botão para ligar à direita, tudo pela ordenação das zonas. - **Remova o que não couber.** Restrinja os dados de contato ou a linha de redes sociais a telas maiores. Espremê-los em um celular não ajuda ninguém. - **Mantenha os alvos de toque grandes.** Um botão de menu e um ícone de telefone são as duas coisas que as pessoas tentam acertar enquanto caminham. - **Defina o breakpoint com critério.** A largura em que o menu recolhe é uma configuração, então um menu longo pode recolher antes de um curto. - **Considere um painel lateral** para o menu mobile. Um painel lateral é um registro que desliza a partir da borda, com espaço para um menu completo, um campo de busca e um botão. Confira no editor, antes de publicar. O Canvas renderiza o cabeçalho na área de edição com o mesmo código que o exibe para o visitante, então o layout para celular é algo que você vê enquanto constrói. ## Etapa 7: Atribua-o ao site inteiro ou por página Um registro não faz nada até que algo aponte para ele. Há dois níveis, e eles funcionam do mesmo jeito para cada elemento de estrutura do site. ### O padrão de todo o site Defina o cabeçalho padrão em Opções do tema e todas as páginas o usarão. Faça o mesmo para a barra superior, o design do título da página e o rodapé. Esta é a configuração que faz uma nova página ficar certa no momento em que você a publica. ### A substituição por página Qualquer página individual pode substituir qualquer uma dessas configurações pelas suas próprias. Uma landing page de campanha usa um cabeçalho transparente e não exibe barra superior; a página de contato mantém o padrão. Nada é duplicado para isso, e nada precisa ser lembrado depois, porque a substituição fica na página que ela afeta. ### Barras superiores Uma barra superior é um registro próprio, com blocos próprios: um número de telefone, horário de funcionamento, um seletor de idioma e um anúncio. O bloco Header Topbar a posiciona acima da linha do cabeçalho. Como ela é separada, um aviso de feriado muda em todo o site sem precisar abrir o cabeçalho. ## Passo 8: E o rodapé, da mesma forma O rodapé é o mesmo sistema aplicado à outra extremidade da página, então tudo o que foi visto nos últimos sete passos se aplica. ### Dois registros, não um Um registro de rodapé armazena as colunas, e um registro de Copyrights separado guarda a faixa fina logo abaixo. Dessa forma, um aviso legal ou um ano muda em todo o site sem tocar no design acima. ### Os blocos Footer About para o texto sobre a empresa, Footer Contacts para o endereço e o telefone, Footer Instagram para um feed, Footer Widget Area para qualquer coisa que um widget possa fazer, Widget Links para uma coluna organizada de links e Copyrights para a barra inferior. Os padrões de rodapé oferecem um arranjo inicial, e o rodapé tem suas próprias opções para o site inteiro por trás dele. ### O que incluir Os rodapés são onde as pessoas procuram sinais de confiança e o endereço. Dados de contato, horário de funcionamento, as páginas legais, uma linha sobre quem você é e os links que não mereceram lugar no cabeçalho. Atribua o rodapé globalmente, substitua-o nas páginas que precisam de algo mais discreto, e pronto: você já resolveu os elementos fixos do site no projeto. [Cada bloco e opção do construtor](https://canvaswp.com/pt-br/header-builder/) ## Fontes Quando este guia descrever algo fora do próprio Canvas, estas são as páginas oficiais que o documentam. - [Tela Menus de Aparência](https://wordpress.org/documentation/article/appearance-menus-screen/) wordpress.org · Onde os menus do WordPress são criados e atribuídos às localizações de menu que um tema oferece - [Entendendo o Critério de Sucesso 2.5.8: Tamanho do alvo (mínimo)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) w3.org · Por que os alvos de toque precisam de um tamanho mínimo de 24 por 24 pixels CSS Próximos passos ## Próximos passos Dois guias sobre por que o cabeçalho decide a questão mais ampla, e sobre o próprio Construtor de cabeçalho. [Guia **Tema em blocos ou construtor de páginas** Por que o cabeçalho costuma ser o ponto que decide toda a questão.](https://canvaswp.com/pt-br/guides/block-theme-vs-page-builder/) [Guia **Importar um site demo do WordPress** A maneira mais rápida de ver, por dentro, um site finalizado criado com blocos.](https://canvaswp.com/pt-br/guides/import-a-wordpress-demo-website/) [Produto **O construtor de cabeçalho** Zonas, linhas e cabeçalhos por página, com as telas que os mostram.](https://canvaswp.com/pt-br/header-builder/) Perguntas ## Perguntas frequentes A [FAQ completa](https://canvaswp.com/pt-br/faq/) responde ao resto, e a [documentação](https://docs.canvaswp.com/) detalha cada configuração. **Preciso de um segundo cabeçalho para dispositivos móveis?** Geralmente não, porque um único registro de cabeçalho do Canvas se adapta sozinho ao celular. As zonas são reordenadas por ponto de quebra, e cada uma pode ser limitada a uma faixa de dispositivo, então um único registro pode centralizar o logo no celular, remover os dados de contato e mover o menu para trás de um alternador. Crie um segundo registro apenas quando você realmente quiser um design diferente, e não para corrigir um layout. **Uma página pode ter um cabeçalho diferente?** Sim, qualquer página do Canvas pode ter seu próprio cabeçalho. Cabeçalhos, barras superiores, títulos da página e rodapés têm um padrão para todo o site e uma substituição por página, então uma landing page de campanha pode exibir um cabeçalho transparente sobre uma fotografia enquanto todas as outras páginas mantêm o padrão. **Isso é uma área de widgets ou um menu?** Um cabeçalho do Canvas não é nenhuma das duas coisas: é um registro que você edita no editor de blocos, exatamente como uma página, e o logo, a navegação, a busca, o carrinho e os botões dentro dele são blocos com seus próprios painéis de configurações. Seus menus do WordPress continuam sendo menus do WordPress; o bloco Header Navigation exibe um deles. **O que acontece com meu cabeçalho quando minha licença expira?** Seu site continua sendo exibido exatamente como hoje. O que é pausado é o serviço: atualizações, importações de demos, IA e edição de blocos premium ficam suspensos até você renovar, e há um período de carência de 14 dias caso a verificação da licença não consiga acessar nossos servidores.