O cabeçalho é a primeira seção de um site que os visitantes veem. Personalizar o texto na tag de cabeçalho é muito importante para os desenvolvedores WordPress que desejam designs criativos e exclusivos. No entanto, editar e personalizar cabeçalhos no WordPress pode ser um desafio. Requer conhecimento sobre como usar corretamente o personalizador de temas do WordPress, editores de código e outras ferramentas.
Um cabeçalho personalizado ajuda a fortalecer sua marca, melhora a navegação do site com menus e atrai mais visitantes com elementos visuais como logotipos. Desde a criação de de logotipo personalizados até a programação de menus suspensos avançados, dominar a personalização do cabeçalho do WordPress permite o controle total sobre a aparência e o funcionamento da página inicial do seu site, de acordo com suas necessidades específicas. Descobriremos mais sobre isso neste artigo.
Uma breve visão geral do cabeçalho do WordPress
O cabeçalho do WordPress aparece no topo e é o primeiro componente do site que chama a atenção dos visitantes. É importante dar atenção especial aos cabeçalhos durante a manutenção do WordPress, pois eles contêm elementos-chave como:
- Menu de navegação – Permite que os visitantes acessem facilmente diferentes páginas do seu site com um clique.
- Logotipo – O logotipo da sua empresa que ajuda as pessoas a reconhecerem a sua marca.
- Outros itens úteis – coisas como ícones de redes sociais, botões para realizar uma ação (como “Comprar agora”), barras de pesquisa, informações de contato, etc.
O cabeçalho precisa causar uma boa primeira impressão e fornecer tudo o que um visitante possa precisar acessar imediatamente.
Felizmente, com o novo recurso de Edição Completa do Site do WordPress, agora você pode criar e personalizar seu cabeçalho como quiser. Existem muitos tipos diferentes de cabeçalhos do WordPress:
- Cabeçalho Global – Um cabeçalho consistente exibido em todas as páginas.
- Cabeçalho fixo – O cabeçalho permanece visível no topo ao rolar a página para baixo.
- Cabeçalho em tela cheia – Ocupa a tela inteira com imagens/vídeos grandes.
- Menu deslizante – Em dispositivos móveis, o menu desliza da lateral para a tela.
- Cabeçalho deslizante – Desliza para baixo conforme você rola a página para mostrar mais opções.
- Menu vertical – O menu é exibido na vertical, na lateral, em vez de na horizontal.
- Cabeçalho transparente – Cabeçalho que permite ver o conteúdo da página por baixo.
- Cabeçalho Rotacionado – O cabeçalho é girado 90 graus para um visual único.
- Mega Menu – Categorias expansíveis, ideais para de comércio eletrônico. sites
O tipo de cabeçalho que você escolher dependerá do design, do conteúdo e da experiência ideal do usuário do seu site. Alguns são mais adequados para portfólios criativos, outros para sites de conteúdo, lojas online, etc. O cabeçalho certo pode aprimorar a experiência do visitante.
Como editar a aparência do cabeçalho
Quer transformar o visual do seu cabeçalho sem esforço, ajustando o estilo, o tamanho e a cor da fonte para combinar com a estética do seu site? Mostraremos três métodos para fazer isso da maneira correta
Método 1: Utilizando o Personalizador de Temas
O personalizador de temas é uma ferramenta integrada ao WordPress que permite aos usuários modificar diversos aspectos do tema de seus sites em tempo real. Ele oferece uma interface amigável onde é possível alterar elementos como cores, fontes, layouts, widgetse muito mais, sem precisar saber nada de código. Esse recurso intuitivo permite que os proprietários de sites personalizem a aparência de seus sites e vejam as alterações instantaneamente antes de aplicá-las ao site.
Siga os passos abaixo para refinar o apelo visual do seu site WordPress usando o personalizador de temas e ajustando a aparência do seu cabeçalho à perfeição.
Passo 1: Acesse o site do WordPress
Para começar, faça login no painel do WordPress usando suas credenciais de administrador. Você também pode acessar a página de login adicionando wp-admin ao final do endereço do seu site. Se a página de login for diferente, existem várias maneiras de encontrar o URL de login do WordPress.
Passo 2: Acesse o Personalizador de Temas
Para alterar a aparência do seu site, acesse o lado esquerdo do painel de administração do WordPress e clique em Aparência. Em seguida, escolha Personalizar nas opções que aparecerem. Isso abrirá o Personalizador de Temas, onde você poderá fazer diversos ajustes de design.
Saiba mais: Alterações no WordPress não estão aparecendo? Resolva facilmente!
Passo 3: Localize a configuração do cabeçalho
A localização das opções para editar o cabeçalho pode variar dependendo do tema. Normalmente, você encontrará as opções de cabeçalho em seções com os nomes Cabeçalho, Cabeçalho e Navegaçãoou Opções do Cabeçalho. Clique na seção que menciona o cabeçalho para abri-la e ver as configurações que podem ser alteradas.
Etapa 4: Personalizar os elementos do cabeçalho
Dependendo do tema escolhido e das opções de personalização disponíveis, geralmente é possível alterar estas partes do cabeçalho:
- Título/Logotipo do site: Você pode ajustar o título do seu site ou inserir um logotipo personalizado.
- Slogan do site: Altere ou oculte o slogan do seu site.
- Imagem/Gradiente do cabeçalho: Alguns temas permitem adicionar uma imagem ou uma cor gradiente ao fundo do cabeçalho.
- Menu de navegação: você pode escolher qual menu será exibido na parte superior do site, onde ele aparecerá e qual será sua aparência.
- Layout do cabeçalho: Altere a largura, a altura e a posição do cabeçalho.
- Texto e cores do cabeçalho: ajuste a cor do texto, dos links e de outros elementos de estilo no cabeçalho.
Passo 5: Visualize suas alterações
Ao personalizar o WordPress, você verá uma pré-visualização ao vivo de como o cabeçalho ficará. Reserve um tempo para verificar se gosta das alterações antes de publicá-las. Dessa forma, você garante que tudo esteja correto antes de entrar no ar em seu site.
Passo 6: Salve suas alterações
Depois de ajustar o cabeçalho de acordo com sua preferência, clique no Publicar ou Salvar e Publicar . Isso salvará suas alterações e as exibirá imediatamente em seu site.
Saiba mais: Como corrigir o problema "Falha na publicação do WordPress. A resposta não é um JSON válido."
Passo 7: Verifique no site
Para ver como o cabeçalho ficará com as alterações, abra o URL em uma nova aba do navegador. Lembre-se de que talvez seja necessário fazer alguns ajustes para que tudo fique perfeito. Enquanto estiver trabalhando nisso, é uma boa ideia limpar o cache do seu site WordPress. Isso ajuda a garantir que você esteja vendo as atualizações mais recentes corretamente.
Dica profissional: Temas diferentes oferecem maneiras diferentes de personalizar o cabeçalho. Se o seu tema atual não oferece opções suficientes para o cabeçalho, considere mudar para um tema novo.
Alternativamente, você pode entrar em contato com nossos serviços de design personalizado para obter ajuda adicional na personalização do cabeçalho ao seu gosto.
Interessado em personalizar os cabeçalhos do WordPress?
Adote serviços de web design personalizados a partir de um preço surpreendentemente baixo de US$ 999, pago em parcela única!
Método 2: Editar o cabeçalho usando o editor completo do site
Se você deseja maneiras mais avançadas e flexíveis de personalizar o cabeçalho do seu site no WordPress, experimente usar um editor de site completo em vez do personalizador padrão. Você pode acessar o Editor de Site Completo por meio dos novos recursos do WordPress ou dentro do editor de blocos moderno do WordPress, o Gutenberg.
Veja como editar o cabeçalho usando o Editor de Site Completo:
Passo 1: Acesse o site WordPress
Acesse o painel de administração do WordPress fazendo login.
Passo 2: Navegue até o Editor Completo do Site
Acesse Aparência no menu do painel do WordPress. Em seguida, selecione Editor do Site no menu suspenso. Essa ação abrirá a interface completa do Editor do Site.
Passo 3: Selecione o bloco de cabeçalho
A pré-visualização do site está sendo exibida e você encontrará todas as opções de edição listadas no lado esquerdo. Procure pela seção de cabeçalho, geralmente localizada na parte superior do site. Ela provavelmente estará identificada como " Cabeçalho" ou "Cabeçalho do Site". Prossiga clicando na seção de cabeçalho.
Passo 4: Editar o cabeçalho
Depois de selecionar a seção do cabeçalho, você verá várias opções de edição na barra lateral. Dependendo do tema e dos recursos do editor de blocos, você pode personalizar o cabeçalho das seguintes maneiras:
- Alterar logotipo: carregue um logotipo personalizado ou substitua o atual.
- Adicionar blocos: Utilize esta ferramenta avançada para incorporar e organizar texto, imagens, botões ou outros conteúdos no cabeçalho.
- Ajustar a altura do cabeçalho: Controle a proeminência do site na página, aumentando ou diminuindo a altura do cabeçalho para atender às suas necessidades de design web.
- Blocos de cabeçalho: Utilize blocos para integrar diferentes elementos de conteúdo no cabeçalho. Blocos de texto, blocos de imagem, botões, ícones de redes sociais e barras de pesquisa são comumente usados.
- Alinhamento dos elementos do cabeçalho: Alinhe cada bloco à esquerda, ao centro ou à direita. Você também pode gerenciar o alinhamento e o posicionamento de elementos do cabeçalho, como o logotipo, o título do site e o menu de navegação.
- Cabeçalho fixo: Ative ou desative o recurso de cabeçalho fixo, que mantém o cabeçalho visível na parte superior da página enquanto os usuários rolam a página para baixo.
Obtenha dicas de design: A importância do espaçamento entre letras no design web
Etapa 5: Visualize e publique suas alterações
O Editor Completo do WordPress permite que você visualize uma prévia ao vivo do cabeçalho do seu site. Revise as alterações para garantir que estejam de acordo com suas preferências de design e atendam às suas necessidades.
Etapa 6: Verifique seu site
Acesse seu site e explore o cabeçalho recém-atualizado.
De modo geral, o Editor de Site Completo do WordPress oferece uma abordagem mais visual e adaptável para personalizar seu cabeçalho em comparação com o Personalizador de Temas. No entanto, os recursos disponíveis e as opções de personalização podem variar de acordo com o tema e os plugins instalados.
Método 3: Editar o cabeçalho usando o plugin de cabeçalho
Para aprimorar o cabeçalho do seu site WordPress da maneira mais eficaz, considere usar um plugin. Os plugins oferecem diversas possibilidades de personalização, permitindo que você adapte o cabeçalho à perfeição.
Além disso, elas costumam receber atualizações regulares, garantindo compatibilidade com as versões mais recentes do WordPress e oferecendo novos recursos para você explorar. Então, por que não aproveitar essas ferramentas dinâmicas para criar um cabeçalho que realmente se destaque e evolua com as necessidades do seu site?
Continue lendo: Os melhores criadores de sites WordPress de uma página para empresas
Siga estes passos:
Passo 1: Instale o Elementor Header and Footer Builder
Para começar a aprimorar seu site WordPress, acesse o painel de administração do WordPress. Lá, vá para a seção Plugins. Em seguida, clique em Adicionar novo e procure pelo plugin Elementor Header & Footer Builder.
Após encontrá-lo, clique no Instalar . Depois da instalação, clique em Ativar para ativar o plugin. Seguindo esses passos, você garantirá que o Elementor Header & Footer Builder esteja ativo e pronto para uso.
Etapa 2: Criar um modelo de cabeçalho
Após acessar o painel do WordPress, vá até a Modelos . Lá, selecione a Construtor de Temas . Para criar um novo modelo de cabeçalho, basta clicar no Adicionar Novo . Em seguida, selecione o Cabeçalho para começar.
Etapa 3: Escolha uma estrutura de cabeçalho
O Elementor oferece modelos de cabeçalho prontos. No entanto, se preferir, você também pode criar um cabeçalho totalmente personalizado do zero. Após selecionar o modelo desejado, o editor do Elementor será aberto, permitindo que você comece a refinar o design escolhido.
Passo 4: Crie o design do seu cabeçalho
Utilize o editor Elementor para criar o design perfeito para o seu cabeçalho. Com sua interface intuitiva, você pode facilmente incorporar e personalizar elementos como logotipos, menus de navegação, texto, botões, imagens e até mesmo códigos curtos, arrastando e soltando-os da seleção no painel lateral esquerdo.
Além disso, o Elementor oferece amplas opções de personalização para estilo, cores, tipografia e espaçamento, permitindo que você ajuste cada elemento para que esteja alinhado à sua visão de design. Não hesite em explorar os widgets e recursos do Elementor para infundir dinamismo e interatividade ao seu cabeçalho, fazendo com que ele realmente se destaque.
Continue lendo: Como editar o rodapé do WordPress em 5 métodos simples (Guia passo a passo)
Passo 5: Visualize seu cabeçalho
Com o Elementor, você pode visualizar uma prévia do cabeçalho que criou clicando no ícone de olho ao lado do Publicar . Isso permite que você revise seu design e faça os ajustes necessários sem afetar suas páginas da web publicadas.
Etapa 6: Salvar modelo de cabeçalho
Ao clicar no botão Publicar, uma caixa de diálogo será exibida, solicitando que você escolha onde exibir o cabeçalho que criou. Caso não selecione uma opção nessa janela pop-up, simplesmente prossiga para a próxima etapa.
Etapa 7: Atribua o cabeçalho ao seu site
Para exibir seu cabeçalho personalizado em seu site, você precisa atribuí-lo a páginas ou condições específicas. Comece acessando o painel de administração do WordPress e navegue até "Modelos". Você encontrará várias opções sob o nome que você atribuiu à seção "Cabeçalho". Clique em "Editar" nesse painel. Role para baixo e selecione "Condições de Exibição", onde você poderá configurar as regras de exibição para inserir o cabeçalho.
Leitura complementar: Guia de acessibilidade do WordPress: Conformidade com os padrões WCAG
Etapa 8: Publique seu modelo de cabeçalho
Após configurar as condições de exibição, ative o cabeçalho personalizado em seu site clicando no Publicar botão
Seu novo cabeçalho já está online! O plugin Header Footer do Elementor é versátil e visualmente atraente para design e personalização de cabeçalhos. Com ele, você pode criar cabeçalhos estáticos, fixos ou até mesmo transparentes.
Personalizando o cabeçalho do WordPress usando a edição completa do site
A edição completa do site no WordPress oferece uma nova abordagem para personalização, superando as limitações do antigo Personalizador de Temas. Embora você ainda possa usar o Personalizador, o Editor de Sites é a nova fronteira – uma tela para a liberdade criativa (embora ainda em versão beta). Por exemplo, ao trabalhar com o tema Twenty Twenty-Three, o Editor de Sites se mostra indispensável para personalizar as fontes, cores, estilos de botões e muito mais do seu cabeçalho.
Confira: 25 dos melhores temas Elementor SaaS para WordPress
Acessando o cabeçalho do WordPress no editor de sites
- Acesse Aparência > Editor do Site no painel de administração do WordPress.
- Ao carregar o editor, você será direcionado para as configurações iniciais
- Para acessar as configurações do cabeçalho, clique no logotipo do WordPress (canto superior esquerdo) ou na seta suspensa e selecione " Procurar todos os modelos".
- Em seguida, selecione " Partes do modelo" no menu do WordPress.
- Por fim, clique em Cabeçalho para editar o cabeçalho do seu site.
Estilizando o cabeçalho
O tema Twenty Twenty-Three vem com uma estrutura de cabeçalho básica. No entanto, você pode adicionar ou remover blocos do WordPress conforme desejar. Vamos ver como editar essa do modelo para criar um cabeçalho simples e personalizado:
- Clique no de visualização em lista para ver a estrutura do cabeçalho.
- Você encontrará um bloco de Grupo contendo uma Linha com dois blocos filhos: Título da Página e Navegação.
- A linha já está centralizada verticalmente e configurada para ocupar toda a largura
Personalizando o cabeçalho
- Exclua o Título do Site expandindo o menu de reticências e selecionando Remover Título do Site.
- Adicione o bloco Ícones Sociais clicando no ícone de mais (+) ao lado de Navegação e pesquisando por ícones sociais.
- Adicione os ícones das plataformas de redes sociais desejadas (Facebook, Instagram, etc.) através da caixa modal
- Personalize o bloco de ícones de redes sociais ajustando o layout, o alinhamento, a orientação, o comportamento dos links, as cores e o espaçamento
- Adicione uma cor de fundo ao bloco Linha através de Configurações adicionais > Fundo
- Insira um novo bloco de linha para elementos de cabeçalho adicionais
- Mova o bloco de navegação para a nova linha arrastando-o
- Adicione um bloco de botão à primeira linha e estilize-o (texto, cor, raio da borda)
- Adicione o bloco do logotipo do site à segunda linha, carregue seu logotipo e configure as definições
- Certifique-se de que a segunda linha esteja configurada para largura total e o alinhamento esteja definido como "espaço entre os itens"
- Defina o alinhamento da linha para centralizar.
Ao organizar os blocos cuidadosamente e ajustar seus estilos, você pode ter controle preciso sobre todos os aspectos do cabeçalho do WordPress e criar um cabeçalho personalizado que se alinhe perfeitamente à sua marca , proporcionando uma experiência de usuário ideal.
Precisa personalizar o cabeçalho do seu WordPress?
Criamos sites completos em WordPress com estilo impecável e a preços revolucionariamente baixos! Aproveite esta oferta por apenas US$ 999 em pagamento único.
Conclusão
Lembre-se: personalizar os cabeçalhos do WordPress permite causar uma impressão duradoura nos visitantes, refletindo a identidade única da sua marca. Seja utilizando o Personalizador de Temas, o Editor Completo do Site ou plugins especializados, aproveite as poderosas ferramentas à sua disposição. Experimente diferentes layouts, cores e elementos para criar um cabeçalho visualmente cativante e fácil de usar, que impulsione o engajamento e as conversões. Abrace a criatividade, priorize a funcionalidade e refine continuamente seu cabeçalho para se manter à frente da concorrência.
