Como criar cabeçalhos e rodapés no WordPress

Nenhum design de site está completo sem um cabeçalho e um rodapé. Não é exagero dizer que eles desempenham um papel importante no fornecimento de uma ótima experiência do usuário, permitindo uma melhor navegação em todo o site. Além disso, são ferramentas essenciais para divulgar a marca do site e são ótimas para colocar CTAs.

No passado, tarefas como remover o espaço entre o cabeçalho e o corpo no WordPress exigiam entrar nos arquivos PHP do tema. Agora, essa tarefa se tornou muito mais simples com o Theme Builder do Elementor.

Vamos dar uma olhada mais profunda em como o Elementor Theme Builder oferece uma maneira poderosa de editar o cabeçalho e o rodapé do seu site, projetando-o visualmente como você quiser.

O cabeçalho de um site é a área superior de sua página da web. Normalmente, o cabeçalho é consistente em todo o site. No entanto, também existem sites que possuem cabeçalhos diferentes para diferentes seções do site.

A primeira impressão que os usuários terão do seu site - quer tenham acessado a sua página inicial, a página sobre ou qualquer outra postagem individual - é por meio do design do cabeçalho. E, se bem projetado, chamará a atenção do usuário e servirá como um gancho para que ele continue a rolar e ler.

O cabeçalho também pode desempenhar um papel importante na promoção da identidade da marca de sua empresa

incorporando elementos como o logotipo da empresa, tipografia, cores e a linguagem geral da marca.

Os cabeçalhos também contêm opções funcionais como navegação no site, pesquisa no site, um carrinho de compras (para sites de vendas), botões de call to action (CTA) e outras funções que aprimoram a experiência do usuário e aumentam as taxas de conversão.

Um rodapé é uma área localizada na parte inferior de uma página da web. Como cabeçalhos, eles normalmente aparecem de forma consistente em todo o site, em todas as páginas e postagens.

Os rodapés geralmente recebem atenção marginal, o que é realmente um potencial desperdiçado, pois o rodapé se repete em todas as páginas do site. Eles são tão importantes quanto os cabeçalhos.

O design de seu rodapé, dependendo das configurações que você escolher, pode exibir informações úteis e importantes, como registro de boletim informativo, informações de direitos autorais, termos de uso e privacidade, um mapa do site, informações de contato, mapas, navegação no site e muito mais.

Edite seu cabeçalho e rodapé facilmente seguindo estas etapas:

• Vá para WordPress Dashboard > Templates > Theme Builder
• Clique em Adicionar novo modelo e escolha Cabeçalho (ou rodapé)
• Nomeie seu modelo de cabeçalho e clique em Criar cabeçalho (ou rodapé)
• Agora você poderá escolher um modelo de cabeçalho (ou rodapé) predefinido ou criar um do zero.
• Depois de fazer as alterações necessárias no design do cabeçalho (ou rodapé), clique em publicar e escolha onde publicar o cabeçalho (ou rodapé). O padrão é o site inteiro .
• É isso! Agora você pode ver seu cabeçalho (ou rodapé) feito à mão ao vivo em seu site.

Você também pode verificar estes guias de vídeo para saber como criar um cabeçalho e rodapé.

Agora, vamos dar uma olhada em alguns belos exemplos de cabeçalhos e rodapés.

Certifique-se de verificar nossos outros tutoriais do WordPress para ver o que você pode realizar usando o Elementor:

Este cabeçalho de página é adequado para sites com navegação mais complexa. Possui uma barra superior e outro menu de navegação central. Também inclui uma função de pesquisa, para uma navegação mais direta. Como bônus, você pode ver o logotipo da empresa à esquerda, junto com as cores da empresa. Este cabeçalho clássico e comercial dá a impressão de profissionalismo.

A seção do cabeçalho tem uma navegação 'oculta' no Hamburger e, do outro lado, os detalhes do contato e a localização são destacados com ícones grandes. Também possui uma barra superior com botões de redes sociais. Observe como o cabeçalho é fino e minimalista, permitindo que certas informações se destaquem. Além disso, esse minimalismo desempenha um papel importante quando se trata de navegação móvel, uma vez que, com apenas alguns ajustes, você pode fazer esse cabeçalho parecer incrível na tela do celular.

Neste design, você pode ver um exemplo de caso de uso não convencional - navegação não por meio do menu tradicional, mas usando um ícone com um link. Isso pode ser usado em sites com um pequeno número de páginas ou aqueles que têm navegação interna em páginas de destino longas. Há também o uso de um navio no cabeçalho, que se parece com ondas, e o tamanho geral do cabeçalho é maior, para se destacar mais.

Este é outro exemplo do uso criativo do cabeçalho. Aqui, você pode ver uma grande área de imagem de fundo usada para estender a largura da tela inteira, fazendo com que pareça uma imagem contínua, sem quebrar a atmosfera da página.

O design mostra o uso de cores laranja brilhantes sobre um fundo cinza escuro. Dá a impressão de limpeza e ordem. Se você quiser alternar as cores ou usar gradientes, levará apenas alguns segundos para obter o resultado desejado.

Além do cabeçalho normal que desaparece quando você rola para baixo, você pode criar um cabeçalho fixo que permanece durante toda a visita do usuário ao seu site.

Cabeçalhos fixos são ótimos para dar mais foco aos links de navegação em menus e ajudar os visitantes a navegar mais facilmente pelas páginas principais do seu site WordPress - seja a página inicial, arquivo ou postagens únicas e independentemente de quão longe eles rolaram pela página.

No entanto, não é apenas para fins de navegação - eles também podem melhorar consideravelmente o SEO e aumentar as taxas de conversão, simplesmente adicionando a frase de chamariz certa ao topo fixo da página.

Quer designar diferentes cabeçalhos e rodapés para diferentes páginas do seu site WordPress?

Você pode atingir esse objetivo em nenhum momento. Basta criar diferentes modelos de cabeçalho e rodapé e atribuir as condições adequadas a cada modelo, atribuindo os cabeçalhos e rodapés às páginas relevantes do seu site - como a página inicial, por exemplo. Confira este guia em vídeo para saber mais.

Este design de rodapé dá ênfase ao design com navegação complexa. À esquerda, possui uma coluna com logo e detalhes e, à direita, botões de navegador, contato, newsletter e social.

O que é importante enfatizar aqui é que mesmo quando o rodapé contém vários recursos, ele não parece sobrecarregado, porque há uma divisão clara do design nas regiões.

Assista ao vídeo tutorial.

O tamanho substancial do rodapé chama a atenção, sua grande área é preenchida com um formulário de fundo de formulário de vídeo e com um formulário de contato. Novamente, as informações de contato e localização são posicionadas em um lugar que realmente se destaca.

Ao projetar um cabeçalho ou rodapé, não se esqueça de levar os dispositivos móveis em consideração e entender como o design deles pode ser diferente.

Assista ao vídeo tutorial.

O rodapé possui uma grande área com fundo de vídeo e navegação complexa. Uma imagem também foi adicionada em uma área separada e anexada ao centro para obter um efeito de design adequado.

Assista ao vídeo tutorial.

O rodapé possui uma imagem grande acima da área de navegação, com a área inferior sendo a cor de fundo da imagem, contendo a navegação básica em várias colunas, um formulário de contato e muito mais.

Assista ao vídeo tutorial.

O rodapé simples oferece pouco em termos de informação, no entanto, ocupa um grande espaço e implementa formas geométricas desiguais para reforçar a sensação de liberdade artística e uma conexão com a arte abstrata.

Assista ao vídeo tutorial.

Projete um cabeçalho e rodapé responsivos para WordPress, visualizando-os na visualização móvel do Elementor. Você pode diferenciar entre diferentes estruturas de coluna e larguras para diferentes dispositivos e criar cabeçalhos e rodapés que parecem perfeitos em cada dispositivo.

Os controles de cabeçalho e rodapé tornam o construtor de menu móvel do Elementor mais relevante do que nunca. O menu se transforma automaticamente em um menu de hambúrguer móvel, então você não precisa fazer nenhuma personalização por conta própria.

Embora você possa personalizar qualquer cabeçalho e rodapé para dispositivos móveis, às vezes os designers preferem projetar duas seções separadas, mostrando uma em desktops e a outra em dispositivos móveis. Isso pode ser feito facilmente com um simples clique ocultar / mostrar, disponível na guia avançada da seção.

Com o Elementor Theme Builder, resolvemos um grande problema conhecido por todos os usuários do WordPress.

Nunca mais você terá que esperar que o desenvolvedor altere seu arquivo header.php, mude para outro tema apenas para mover um logotipo de cabeçalho ou trabalhe duro para personalizar o cabeçalho CSS e os elementos de rodapé do seu site. O Elementor Pro torna o design do cabeçalho e rodapé rápido e super simples.

Finalmente, a visão do seu site pode realmente ganhar vida. Junte-se ao Pro hoje mesmo e obtenha controle total sobre o design de todo o seu site.