Criação de Menus e Cabeçalhos no WordPress (Tema Impreza)

Criação de Menus e Cabeçalhos no WordPress (Tema Impreza)


1. Criar o Menu

  1. Acesse o painel do WordPress.

  2. Vá até Aparência > Menus.

  3. Clique em Criar novo menu.

image-20250912-181650.png
  1. Dê um nome ao menu (ex: Menu Padrão).

  2. Adicione as páginas desejadas: Home, Sobre, Serviços, Contato etc.

image-20250912-182227.png
  1. Organize a ordem dos itens arrastando e soltando.

  2. Caso queria adicionar um botão estilizado, você deve editar.

image-20250912-182628.png
Existem varias formar de edição a que normalmente usamos é a opção “mostra como um botão” que usamos puxamos do nosso Plugin Impreza para transformar o texto em um botão, você pode editar a ordem no menu, abrir o link em uma nova pagina, se ele será o Menu ascendente de outra pagina, sempre procure se basear no layout aprovado pelo cliente
  1. Clique em Salvar Menu.

 


2. Criar o Cabeçalho

  1. No painel lateral, vá em Impreza > Modelos > Cabeçalhos.

  2. Clique em Adicionar Novo.

  3. Escolha o tipo de modelo Cabeçalho e dê um nome (ex: Cabeçalho Padrão).

  4. Abra o editor do cabeçalho.

image-20250912-183323.png

 

Estrutura de um Cabeçalho no Impreza

A tela de edição de cabeçalho no tema Impreza é dividida em áreas e configurações gerais.
Cada parte controla como o cabeçalho vai aparecer no site.


Áreas do Cabeçalho

Na parte central da tela, vemos os blocos que formam o cabeçalho.
Eles estão organizados em três áreas principais:

  • Área Superior → normalmente usada para informações extras (telefone, links rápidos, redes sociais).

  • Área Principal → espaço mais importante, onde ficam o logo e o menu de navegação.

  • Área Inferior → pode ser usada para elementos adicionais, como botões ou banners (raramente usada).

Cada área é dividida em colunas, onde você pode adicionar elementos arrastando e soltando elementos, os mais usando são:

  • Logo (imagem)

  • Menu

  • Ícones de redes sociais

  • Botões personalizados

  • Campo de busca

    image-20250912-183813.png
    há diversas opções para se colocar no cabeçalhos

Na imagem, por exemplo:

  • À esquerda temos o logo da empresa.

  • À direita, o telefone e o menu padrão.


Configurações Gerais do Cabeçalho

Na lateral direita, temos as opções que controlam o comportamento do cabeçalho:

  • Orientação: Horizontal ou vertical.

  • Cabeçalho fixo: Quando ativado, o cabeçalho “gruda” no topo da tela mesmo ao rolar a página.

  • Auto-ocultar ao rolar: O cabeçalho desaparece ao descer e reaparece quando o usuário sobe a página.

  • Ponto de quebra da rolagem: Define em quantos pixels de rolagem o cabeçalho troca de estado (ex: encolher ou mudar cor).

  • Cabeçalho transparente: Faz o fundo do cabeçalho ficar invisível, ideal para páginas com banners grandes.

  • Sombra do cabeçalho: Adiciona destaque ao cabeçalho (nenhuma, fina ou larga).

 


Configurações das Áreas do Cabeçalho

Dentro do editor do Impreza, cada área (superior, principal e inferior) tem configurações próprias.
Na Área Principal, é possível ajustar:

  • Altura da área → define a altura total do cabeçalho (ex: 125px).

  • Altura da área fixa → controla o tamanho do cabeçalho quando ele fica “grudado” no topo ao rolar a página.

  • Conteúdo na largura total → expande o cabeçalho para ocupar toda a largura da tela.

  • Centralizar a célula do meio → útil para deixar o menu ou logo exatamente no centro.

  • Imagem de fundo → adiciona uma imagem como fundo do cabeçalho.

  • Background (cor de fundo) → cor padrão atrás do cabeçalho.

  • Texto / Link → cor do texto e dos links no cabeçalho.

  • Link ao posicionar o mouse (hover) → cor que o link assume quando o usuário passa o mouse.

  • Cabeçalho transparente → opções de cores para quando o cabeçalho for usado em modo transparente.

image-20250912-184244.png

👉 Resumindo: essa parte é o “pincel e a régua” do cabeçalho — controla tamanho, cores e comportamento visual.
É legal explicar, porque dá autonomia ao usuário para personalizar sem depender de CSS.


4. Visualização por Dispositivo

Na parte superior, você pode alternar entre Desktop, Laptops, Tablets e Celulares.
Isso permite ajustar o cabeçalho para cada tipo de tela, garantindo que fique responsivo.


Definir Condições de Exibição

  1. No Impreza em Opções do tema, selecione o Layout de páginas.

  2. Escolha onde aplicar:

    • Sempre colocamos ele em Páginas” na opção “Cabeçalho” (cabeçalho global).

      eb0276e2-1a9f-45b6-8c86-d34e3831feaf.png
  3. Clique em Salvar alterações.

Caso queira, você pode colocar apenas em uma pagina especifica (as vezes o cliente gosta que tenha cabeçalhos diferentes para planos empresarias, é raro mais acontece)

Nesse caso você aplica direto na pagina no Wordpress, procure na coluna no canto direito por

Layout de página em Cabeçalho selecione seu cabeçalho e atualize a pagina em Atualizar

image-20250912-191441.png

5. Testar

  • Acesse o site em modo anônimo.

  • Verifique a navegação no desktop e mobile.

  • Se algo não estiver correto, volte ao editor e ajuste.