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 a navegação para diferentes partes de um site. Por outro lado, o rodapé contém informações vitais que os visitantes do site podem solicitar, como endereço comercial ou informações de contato, para citar alguns amp .
Cabeçalhos e rodapés são fornecidos pelo tema atual do usuário no WordPress. Geralmente são bem projetados e adequados para a maioria de seus usos. Porém, se quiser personalizar seus temas, você terá que alterar o código; É aí que plugin do Page Builder são úteis. Você pode usá-los para criar e alterar componentes de páginas da web sem conhecer nenhum código.
Este tutorial nos ensinará como fazer um cabeçalho e rodapé de site. Será utilizado 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 esteja ligado.
- Por que você deve escolher Elementor como seu construtor de páginas?
- Elementor permite que você escolha o layout principal do seu cabeçalho e rodapé personalizados.
- O que é um cabeçalho e o que ele faz?
- O que é um rodapé, exatamente?
- Como fazer um cabeçalho
- Desenvolvendo um modelo de cabeçalho
- Fazendo alterações no menu do cabeçalho
- Publicação de cabeçalho
- Como fazer um rodapé
- Desenvolvendo um modelo de rodapé
- Modificações de rodapé
- Produto final
- Examine as seções de cabeçalho e rodapé para verificar a capacidade de resposta.
- Encerrando as coisas
Por que você deve escolher Elementor como seu construtor de páginas?
Elementor é o construtor de páginas mais avançado, permitindo aos usuários empregar elementos premium para criar designs e layouts lindos. É muito benéfico para iniciantes que não têm conhecimento prévio de codificação. O editor arrastar e soltar no Elementor permite aos usuários mover widgets e itens.
Elementor é um construtor visual de páginas que permite aos usuários ver como suas páginas aparecem sem mudar de modo.
Outro argumento convincente para usar o Elementor é que a maior parte do trabalho pode ser concluída sem custo. Sua edição gratuita é mais do que capaz de fornecer recursos adequados de edição de sites. No entanto, examinaremos as versões gratuita e paga para que você possa escolher a que melhor se adapta às suas necessidades.
A seguir estão alguns dos aspectos importantes do Elementor que fazem valer a pena:
- A funcionalidade de arrastar e soltar é suportada.
- Possui um grande número de modelos.
- Existem mais de 90 widgets ao todo.
- Nenhuma codificação é necessária para suporte responsivo.
- Opções de refazer e desfazer estão disponíveis.
- O salvamento automático está disponível.
Elementor permite que você escolha o layout principal do seu cabeçalho e rodapé personalizados.
Ajudaria se você decidisse a disposição geral das seções de cabeçalho e rodapé desejadas antes de desenvolver um cabeçalho exclusivo. Observar o layout da seção de cabeçalho predefinido pode fornecer muitas opções.
Você pode escolher entre várias seções de cabeçalho; o cabeçalho mais comum e de aparência moderna apresenta o logotipo do site no canto esquerdo, uma barra de navegação no meio e uma seção da barra de pesquisa à direita.
As possibilidades são infinitas e você pode construir qualquer layout que desejar.
Eu escolhi o Não. 7 modelos de cabeçalho pré-fabricados; 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 > modelo de pesquisa > cole o nome do cabeçalho copiado .
Quando encontrar o modelo de cabeçalho desejado, selecione “Editar com Elementor” e você será levado para a seção do construtor de cabeçalho Elementor Pro.
Vamos começar esta festa.
O que é um cabeçalho e o que ele faz?
A parte superior da sua página da 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 partes diferentes do site.
O design do cabeçalho dará aos usuários a primeira impressão do seu site, independentemente de terem chegado à sua página inicial, à página Sobre ou a outro conteúdo individual. E, se for bem projetado, chamará a atenção do usuário e o motivará a continuar navegando e lendo.
O Header também pode auxiliar na promoção da identidade da marca da sua empresa.
Estou usando recursos como logotipo da empresa, fonte, cores e linguagem geral da marca.
A navegação no site, a pesquisa no site, o carrinho de compras (para sites de vendas), botões de call to action (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 é um rodapé, exatamente?
Um rodapé é uma seção de uma página da web que aparece na parte inferior da página. Geralmente são exibidos constantemente em todo o site, em todas as páginas e postagens, semelhantes aos cabeçalhos.
Os rodapés são frequentemente esquecidos, o que é um desperdício de potencial, visto que aparecem em todas as páginas do site. Eles são igualmente cruciais para os cabeçalhos.
O design do rodapé pode exibir informações úteis e vitais, como registro em boletim informativo, informações de direitos autorais, termos de uso e privacidade, mapa do site, informações de contato, mapas, navegação no site e muito mais, dependendo das configurações escolhidas.
Como fazer um cabeçalho
Criaremos um cabeçalho personalizado nesta seção. Não se preocupe se isso parecer intimidante; não vamos começar do zero. Em vez disso, usaremos os modelos do Elementór Pro, desenvolvidos pela equipe de design da Elementor.
Desenvolvendo um modelo de cabeçalho
No painel de administração do WordPress, passe o mouse sobre Modelos e clique em Adicionar novo para construir nosso cabeçalho.
Uma janela modal aparecerá assim que você for roteado. Selecione Cabeçalho no menu suspenso, nomeie o Cabeçalho e clique em “ Criar modelo “:
Isso iniciará o editor Elementor. Depois disso, você verá uma lista de modelos para escolher. Então escolha um que agrada a você:
Ele deve aparecer no topo da seção de edição do Elementor assim que você escolher um modelo:
Criando um logotipo: O primeiro passo é criar um logotipo. Defina o logotipo no Live Editor do site para colocá-lo no Header. Escolha um logotipo clicando em Identidade do Site.
Depois de decidir sobre um 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 desejar.
Fazendo alterações no menu do cabeçalho
A próxima coisa que devemos fazer é mudar o menu. Se você gerou um menu, o modelo irá incorporá-lo automaticamente:
Aqui está nossa estrutura de menu, que você pode ver refletida no modelo de cabeçalho:
Se você tiver mais de um menu, poderá atualizar o conteúdo, se necessário.
Você pode editar suas propriedades como 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 mídia social:
Depois disso, você pode fazer as alterações que desejar. Veja como ficou nossa edição:
Publicação de cabeçalho
Agora você pode publicar o cabeçalho assim que terminar de alterá-lo. Usaremos o cabeçalho em todo o site no exemplo amp , portanto selecionaremos essa opção após selecionar Adicionar condição:
E aqui está um amp de página do nosso site ativo:
Como fazer um rodapé
Desenvolvendo um modelo de rodapé
O processo de criação de um rodapé é bastante semelhante ao de construção de um cabeçalho. Para fazer um, crie um novo modelo de rodapé como este:
Em seguida, decida um modelo. Os rodapés vêm em uma variedade de formas e tamanhos. Alguns incluem informações da empresa, enquanto outros possuem formulários de contato. Selecione um modelo apropriado às suas necessidades.
O modelo que escolhemos para o nosso site é o seguinte:
Modificações de rodapé
Você verá o cabeçalho assim que começar a editar (se definir a condição para que ele apareça em todas as páginas).
Altere o rodapé conforme necessário; Esta é a aparência da nossa revisão:
Publique o rodapé depois de concluído:
Produto final
Veja como fica o resultado final. Tanto o cabeçalho quanto o rodapé agora são usados em nosso site:
Examine as seções de cabeçalho e rodapé para verificar a capacidade de resposta.
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 é adequado para visualização móvel, você deve saber como seu design aparecerá na tela do celular. Os interruptores responsivos na parte inferior da seção da barra lateral do Elementor podem alterar as versões mobile e de guias.
Você pode testar a capacidade de resposta do seu cabeçalho e rodapé de várias maneiras. Por amp , 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 diferentes dispositivos.
Encerrando as coisas
Espero que este guia tenha ajudado você a desenvolver rapidamente suas seções exclusivas de cabeçalho e rodapé usando Elementor Pro. O WordPress possui muitos recursos, mas permite apenas algumas modificações nas seções de cabeçalho e rodapé, finalmente corrigidas com o construtor de páginas Elementor Pro. Com um controle muito melhor sobre os elementos do seu site, agora você 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 aos usuários personalizar seus sites com recursos mais avançados.
