Voltar para o suporte Design do site Editor de sites Personalizar o cabeçalho usando o editor de sites

Personalizar o cabeçalho usando o editor de sites

Normalmente, o cabeçalho de um site tem um logotipo, o título do site, um menu de navegação e alguns outros elementos. O layout desses elementos é controlado pelo tema que você escolheu. Mas e se você quiser personalizar a disposição deles?

Este guia mostra como fazer isso usando o editor de sites. Para reorganizar os elementos do cabeçalho usando o método descrito neste guia, é necessário que o tema do seu site seja compatível com o editor de sites.

Editar o modelo de cabeçalho

Para personalizar o cabeçalho, você precisa editar o modelo dele. Basta fazer isso uma vez para que as alterações funcionem em todas as páginas do seu site. Siga as etapas abaixo para acessar o modelo de cabeçalho:

  1. No painel do site, acesse AparênciaEditor.
  2. Clique no modelo atual na parte superior central da tela (indicado aqui como “Índice”).
  3. Clique em Procurar todos os modelos.
  4. Na tela seguinte, clique em Partes do modelo.
  5. Depois, selecione Cabeçalho.
Imagem com o modelo na parte superior central da tela, a área geral e a opção Procurar todos os modelos.

Em seguida:

Selecionar modelo – como organizar os elementos do cabeçalho com a ESC – WordPress.com

Dependendo do tema, você verá vários elementos no cabeçalho predefinido. Neste documento, vamos mostrar como adicionar e personalizar todos eles.

Adicionar vários elementos ao cabeçalho

É possível adicionar diversos elementos ao cabeçalho. Neste documento, vamos falar sobre os mais usuais: logotipo, menu, barra de pesquisa e menu de redes sociais.

Elemento 1: logotipo

Para adicionar um logotipo ao cabeçalho:

  1. Clique no botão de inserção de blocos (+).
  2. Pesquise o bloco de logotipo do site.
  3. Clique no bloco para inseri-lo.
  4. Use o bloco para fazer upload da imagem do seu logotipo.

Depois de adicionar, você pode usar as setas de navegação para a esquerda ou direita para alterar a posição em relação aos demais elementos do menu.

Por fim, arraste os pontos de seleção para reduzir ou aumentar o tamanho de acordo com sua preferência.

Após concluir os ajustes, clique em Salvar. Em seguida, verifique se a caixa de seleção da parte de modelo Cabeçalho está selecionada e clique em Salvar novamente.

Screencast que mostra como adicionar e mover um logotipo usando as setas na barra de ferramentas.

Leia mais sobre como usar o bloco de logotipo do site. Você vai aprender como mudar a posição e o alinhamento, recortar a imagem, adicionar um filtro, substituir a imagem, aplicar vários estilos e muito mais.

Elemento 2: menu

Para adicionar um menu ao cabeçalho:

  1. Clique no botão de inserção de blocos (+).
  2. Pesquise o bloco de navegação.
  3. Clique no bloco para inseri-lo.

Depois de adicionar o bloco de navegação ao cabeçalho, você terá duas opções:

Quando o menu estiver pronto, você poderá mudar a posição usando as setas para a esquerda ou direita.

Após concluir os ajustes, clique em Salvar. Em seguida, verifique se a caixa de seleção da parte de modelo Cabeçalho está selecionada e clique em Salvar novamente.

Leia mais sobre como usar o bloco de navegação. Você vai aprender a inserir um bloco de navegação, adicionar links e modificar as configurações deles, criar submenus e muito mais.

Elemento 3: barra de pesquisa

Para adicionar uma barra de pesquisa ao cabeçalho:

  1. Clique no botão de inserção de blocos (+).
  2. Pesquise o bloco Pesquisar.
  3. Clique no bloco para inseri-lo.

Depois de adicionar, você pode usar as setas de navegação para a esquerda ou direita para alterar a posição em relação aos demais elementos do menu.

Por fim, arraste os pontos de seleção para reduzir ou aumentar o tamanho de acordo com sua preferência.

Após concluir os ajustes, clique em Salvar. Em seguida, verifique se a caixa de seleção da parte de modelo Cabeçalho está selecionada e clique em Salvar novamente.

Screencast que mostra como adicionar um rótulo acima da caixa de pesquisa, adicionar o bloco Pesquisar e mover a posição dos blocos usando as setas na barra de ferramentas.

Leia mais sobre como usar o bloco Pesquisar. Você vai aprender a adicionar o bloco, alterar o botão de texto, mudar a fonte e as cores usadas no botão, ajustar a largura do bloco, alternar o rótulo, mudar a posição ou o alinhamento do bloco e muito mais.

Elemento 4: ícones sociais

Para adicionar ícones sociais ao cabeçalho:

  1. Clique no botão de inserção de blocos (+).
  2. Pesquise o bloco de ícones sociais.
  3. Clique no bloco para inseri-lo.

Depois de inserir o bloco, você pode adicionar perfis de redes sociais. Para fazer isso:

  1. Clique no botão de inserção (+) e digite o nome da plataforma social que você quer adicionar. Clique no item para adicioná-lo aos ícones sociais.
  2. Clique no ícone novamente para adicionar o link do seu perfil. Cole a URL do seu perfil da rede social e clique na seta para confirmar.
  3. Se o próximo botão + não aparecer imediatamente e você quiser adicionar um novo ícone, clique em Visualização em lista. Em seguida, clique em Ícones sociais, à esquerda, para revelar o botão + e continuar adicionando ícones.
  4. Repita as etapas 2 e 3 quantas vezes forem necessárias para adicionar todos os seus perfis de redes sociais.

Depois de adicionar todos os ícones, clique em Ícones sociais na Visualização em lista para selecionar o bloco. Em seguida, use as setas de navegação para a esquerda ou direita para mudar a posição do bloco em relação aos demais elementos do menu.

Após concluir os ajustes, clique em Salvar. Em seguida, verifique se a caixa de seleção da parte de modelo Cabeçalho está selecionada e clique em Salvar novamente.

Como adicionar ícones sociais ao cabeçalho com a ESC – WordPress.com

Leia mais sobre como usar o bloco de ícones sociais. Você vai aprender a inserir os ícones, adicionar seus perfis de redes sociais, alterar o tipo ou estilo dos ícones, remover os ícones e muito mais.

Copied to clipboard!