Os cabeçalhos e rodapés de um site são elementos essenciais. Na maioria dos casos, o cabeçalho fornece links de navegação que simplificam o acesso a diferentes seções do site. Já o rodapé contém informações vitais que os visitantes podem precisar, como endereço comercial ou informações de contato, para citar algunsamp.
Os cabeçalhos e rodapés são fornecidos pelo tema atual do usuário no WordPress. Geralmente, eles são bem projetados e adequados para a maioria dos usos. No entanto, se você quiser personalizar seus temas, precisará alterar o código; é aí que pluginde construtor de páginas se tornam úteis. Você pode usá-los para criar e modificar componentes da página sem precisar saber nada de código.
Este tutorial ensinará como criar um cabeçalho e rodapé para um site. Usaremos o Elementor Pro (já que a versão básica do Elementor não inclui os recursos mais importantes para a criação desses componentes). Portanto, baixe o Elementor Pro e certifique-se de que ele esteja ativado.
- Por que você deveria escolher o Elementor como seu construtor de páginas?
- O Elementor permite que você escolha o layout principal do seu cabeçalho e rodapé personalizados.
- O que é um cabeçalho e qual a sua função?
- O que é exatamente um rodapé?
- Como criar um cabeçalho
- Desenvolvendo um modelo de cabeçalho
- Fazendo alterações no menu do cabeçalho
- Publicação do cabeçalho
- Como criar um rodapé
- Desenvolvendo um modelo de rodapé
- Modificações no rodapé
- Produto final
- Analise as seções de cabeçalho e rodapé para verificar se são responsivas.
- Concluindo
Por que você deveria escolher o Elementor como seu construtor de páginas?
O Elementor é o construtor de páginas mais avançado, permitindo que os usuários utilizem elementos premium para criar designs e layouts incríveis. É muito útil para iniciantes que não possuem conhecimento prévio de programação. O editor de arrastar e soltar do Elementor permite que os usuários movam widgets e itens com facilidade.
O Elementor é um construtor de páginas visual que permite aos usuários ver como suas páginas ficarão sem precisar alternar entre modos.
Outro argumento convincente para usar o Elementor é que a maior parte do trabalho pode ser feita sem custo. A versão gratuita é mais do que suficiente para fornecer recursos adequados de edição de sites. No entanto, vamos analisar as versões gratuita e paga para que você possa escolher a que melhor se adapta às suas necessidades.
A seguir, apresentamos alguns dos aspectos importantes do Elementor que o tornam uma opção valiosa:
- A funcionalidade de arrastar e soltar é suportada.
- Possui um grande número de modelos.
- Existem mais de 90 widgets no total.
- Não é necessário conhecimento de programação para obter suporte ágil.
- Estão disponíveis as opções de refazer e desfazer.
- O salvamento automático está disponível.
O Elementor permite que você escolha o layout principal do seu cabeçalho e rodapé personalizados.
Seria útil definir o layout geral das seções de cabeçalho e rodapé desejadas antes de desenvolver um cabeçalho personalizado. Analisar modelos de cabeçalho predefinidos pode lhe oferecer diversas opções.
Você pode escolher entre várias seções de cabeçalho; o cabeçalho mais comum e com aparência moderna apresenta o logotipo do site no canto superior esquerdo, uma barra de navegação no meio e uma barra de pesquisa à direita.
As possibilidades são infinitas e você pode construir qualquer layout que desejar.
Escolhi o modelo de cabeçalho predefinido nº 7; esta é a abordagem mais comum e simples para usar um cabeçalho em um site WordPress. Copie e cole o nome do modelo de cabeçalho em Modelos > Cabeçalho > pesquisar modelo > cole o nome do cabeçalho copiado .
Quando encontrar o modelo de cabeçalho desejado, selecione "Editar com Elementor" e você será direcionado para a seção do construtor de cabeçalhos do Elementor Pro.
Que comece a festa!.
O que é um cabeçalho e qual a sua função?
A parte superior da sua página web é chamada de "cabeçalho do site". O cabeçalho geralmente é o mesmo em todo o site. No entanto, alguns sites usam cabeçalhos diferentes para diferentes seções do site.
O design do cabeçalho dará aos seus usuários a primeira impressão do seu site, seja na página inicial, na página "Sobre nós" ou em outro conteúdo específico. E, se for bem projetado, chamará a atenção do usuário e o incentivará a continuar navegando e lendo.
O cabeçalho também pode auxiliar na promoção da identidade da marca da sua empresa.
Estou utilizando elementos como o logotipo da empresa, a fonte, as cores e a linguagem geral da marca.
A navegação do site, a busca no site, o carrinho de compras (para sites de vendas), os botões de chamada para ação (CTA) e outros recursos que melhoram a experiência do usuário e aumentam as taxas de conversão são todos encontrados nos cabeçalhos.
O que é exatamente um rodapé?
Um rodapé é uma seção de uma página da web que aparece na parte inferior da página. Geralmente, ele é exibido de forma constante em todo o site, em todas as páginas e postagens, semelhante aos cabeçalhos.
Os rodapés são frequentemente negligenciados, o que representa um desperdício de potencial, visto que aparecem em todas as páginas do site. Eles são tão cruciais quanto os cabeçalhos.
O design do rodapé pode exibir informações úteis e importantes, como inscrição na newsletter, informações sobre direitos autorais, termos de uso e privacidade, um mapa do site, informações de contato, mapas, navegação do site e muito mais, dependendo das configurações escolhidas.
Como criar um cabeçalho
Nesta seção, vamos criar um cabeçalho personalizado. Não se preocupe se isso parecer intimidante; não vamos começar do zero. Em vez disso, usaremos os modelos do Elementor Pro, criados pela equipe de design do Elementor.
Desenvolvendo um modelo de cabeçalho
No painel de administração do WordPress, passe o cursor sobre "Modelos" e clique em "Adicionar novo" para criar o cabeçalho.
Uma janela modal será exibida assim que você for redirecionado. Selecione "Cabeçalho" no menu suspenso, dê um nome ao cabeçalho e clique em " Criar modelo ".
Isso abrirá o editor Elementor. Em seguida, você verá uma lista de modelos para escolher. Selecione um que lhe agrade:
Ele deverá aparecer na parte superior da seção de edição do Elementor assim que você selecionar um modelo:
Criando um logotipo: O primeiro passo é criar um logotipo. Defina o logotipo no Editor ao Vivo do site para colocá-lo no cabeçalho. Escolha um logotipo clicando em Identidade do Site.
Depois de escolher o logotipo, clique em Publicar .
O logotipo do seu site agora deve estar no cabeçalho se você atualizar a interface do Elementor:
Depois disso, você pode fazer as alterações que quiser.
Fazendo alterações no menu do cabeçalho
O próximo passo é alterar o menu. Se você já gerou um menu, o modelo o incorporará automaticamente:
Aqui está a estrutura do nosso menu, que você pode ver refletida no modelo do cabeçalho:
Se você tiver mais de um menu, poderá atualizar o conteúdo, se necessário.
Você pode editar suas propriedades da mesma forma que qualquer outro widget.
Se precisarmos adicionar mais itens, podemos adicionar mais seções ao nosso cabeçalho:
Vamos começar adicionando um cabeçalho e alguns ícones de redes sociais:
Depois disso, você pode fazer as alterações que quiser. Veja como ficou nossa edição:
Publicação do cabeçalho
amp usaremos o cabeçalho em todo o site; portanto, selecionaremos essa opção após clicar em "Adicionar condição".
E aqui está umampde uma página do nosso site em funcionamento:
Como criar um rodapé
Desenvolvendo um modelo de rodapé
O processo de criação de um rodapé é bastante semelhante ao de criação de um cabeçalho. Para criar um, crie um novo modelo de rodapé como este:
Em seguida, escolha um modelo. Os rodapés vêm em diversos formatos e tamanhos. Alguns incluem informações da empresa, enquanto outros contêm formulários de contato. Selecione um modelo adequado às suas necessidades.
O modelo que escolhemos para o nosso site é o seguinte:
Modificações no rodapé
Você verá o cabeçalho assim que começar a editar (se tiver definido a condição para que ele apareça em todas as páginas).
Altere o rodapé conforme necessário; veja como ficou nossa revisão:
Publique o rodapé depois de finalizado:
Produto final
Eis o resultado final. Tanto o cabeçalho quanto o rodapé agora são usados em nosso site:
Analise as seções de cabeçalho e rodapé para verificar se são responsivas.
Esta é a fase mais importante, e você deve garantir que as seções de cabeçalho e rodapé sejam responsivas. Como um menu de largura total geralmente não se adapta à visualização em dispositivos móveis, você precisa saber como seu design será exibido na tela do celular. Os botões de resposta na parte inferior da barra lateral do Elementor permitem alternar entre as versões para dispositivos móveis e para abas.
Você pode testar a responsividade do seu cabeçalho e rodapé de várias maneiras. Poramp, você pode usar ferramentas como Browserstack, CrossBrowser Testing e Google Resizer para garantir que suas páginas da web sejam o mais responsivas possível. Você também pode fazer isso manualmente, experimentando com diferentes dispositivos.
Concluindo
Espero que este guia tenha ajudado você a desenvolver rapidamente seções de cabeçalho e rodapé exclusivas usando o Elementor Pro. O WordPress possui muitos recursos, mas permite apenas algumas modificações nas seções de cabeçalho e rodapé, algo que finalmente foi resolvido com o construtor de páginas Elementor Pro. Com um controle muito maior sobre os elementos do seu site, você agora pode demonstrar melhor a visão do seu site. Além disso, a funcionalidade do Elementor foi aprimorada com o uso de complementos gratuitos, permitindo que os usuários personalizem seus sites com recursos mais avançados.
