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 exigir, como um endereço comercial ou informações de contato, para mencionar 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. No entanto, se você quiser personalizar seus temas, terá que alterar o código; É aí que o plugin Page Builder se plugin útil. Você pode usá-los para criar e alterar componentes da página da web sem conhecer nenhum código.
Este tutorial nos ensinará como fazer um cabeçalho e um rodapé de site. O Elementor Pro será usado (uma vez 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 verifique se ele está ativado.
- Por que você deve escolher Elementor como seu construtor de páginas?
- O Elementor permite que você escolha o layout principal de 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
- Desenvolvimento de 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 capacidade de resposta.
- Encerrando as coisas
Por que você deve escolher Elementor como seu construtor de páginas?
Elementor é o criador de páginas mais avançado, permitindo aos usuários empregar elementos premium para criar designs e layouts lindos. É muito benéfico para novatos que não têm nenhum conhecimento prévio de codificação. O editor de arrastar e soltar no Elementor permite que os usuários movam widgets e itens.
Elementor é um construtor de página visual que permite aos usuários ver como suas páginas aparecem sem alternar entre os modos.
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 o 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.
- Autosave está disponível.
O Elementor permite que você escolha o layout principal de seu cabeçalho e rodapé personalizados.
Ajudaria se você decidisse sobre a organização geral das seções de cabeçalho e rodapé desejadas antes de desenvolver um cabeçalho exclusivo. Observar o layout da seção do 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 um logotipo do site no canto esquerdo, uma barra de navegação no meio e uma seção da barra de pesquisa à direita.
Existem infinitas possibilidades e você pode construir qualquer layout que desejar.
Eu escolhi o modelo de cabeçalho pré-fabricado 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 > modelo de pesquisa > cole o nome do cabeçalho copiado .
Quando você encontrar o template de cabeçalho que deseja, selecione “Edit with Elementor”, e você será levado para a seção Elementor Pro header builder.
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 diferentes partes do site.
O design do cabeçalho dará a seus usuários a primeira impressão do seu site, se eles acessaram a sua página inicial, sobre a página ou outro conteúdo individual. E, se for bem projetado, vai chamar a atenção do usuário e incentivá-lo a continuar a rolar e ler.
O cabeçalho também pode ajudar na promoção da identidade da marca da sua empresa.
Estou usando recursos como logotipo da empresa, fonte, cores e linguagem geral da marca.
Navegação no site, pesquisa no site, um 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 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. Eles 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 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, dependendo das configurações que você escolher.
Como fazer um cabeçalho
Vamos criar um cabeçalho personalizado nesta seção. Não se preocupe se isso parecer intimidador; não vamos começar do zero. Em vez disso, usaremos os modelos do Elementór Pro, projetados pela equipe de design da Elementor.
Desenvolvimento de 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. Portanto, escolha um que agrade a você:
Ele deve aparecer no topo da seção de edição do Elementor assim que você escolher um modelo:
Criando um Logo: O primeiro passo é criar um logo. 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 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 o incorporará 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 nossa edição acabou:
Publicação de cabeçalho
Agora você pode publicar o cabeçalho assim que terminar de alterá-lo. Usaremos o Header em todo o nosso site no exemplo amp , então selecionaremos essa opção após selecionar Add Condition:
E aqui está um ex amp le de uma página do nosso site ao vivo:
Como fazer um rodapé
Desenvolvendo um modelo de rodapé
O processo de fazer um rodapé é bastante semelhante ao de construir um cabeçalho. Para fazer um, crie um novo modelo de rodapé como este:
Em seguida, escolha um modelo. Os rodapés vêm em uma variedade de formas e tamanhos. Alguns incluem informações firmes, enquanto outros têm formulários de contato. Selecione um modelo apropriado para seus requisitos.
O modelo que escolhemos para nosso site é o seguinte:
Modificações de rodapé
Você verá o cabeçalho assim que começar a editar (se definir a condição de que apareça em todas as páginas).
Altere o rodapé conforme necessário; Esta é a aparência de nossa revisão:
Publique o rodapé depois de concluído:
Produto final
Veja como fica o resultado final. O cabeçalho e o rodapé agora são usados em nosso site:
Examine as seções de cabeçalho e rodapé para 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 se adequa à visualização do celular, 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 tab.
Você pode testar a capacidade de resposta do seu cabeçalho e rodapé de várias maneiras. Para ex amp le, você pode usar ferramentas como Browserstack, crossbrowser Teste e Google Resizer para garantir que suas páginas são tão sensíveis quanto 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 o Elementor Pro. O WordPress tem muitos recursos, mas permite apenas algumas modificações nas seções de cabeçalho e rodapé, finalmente corrigidas com o criador 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.
