Índice
Um modelo de cabeçalho Elementor é a barra superior de um site salvo como um design pronto: o logotipo, o menu, um botão e muitas vezes uma barra de contato acima deles Você adiciona uma vez com um construtor de temas e ele mostra em cada página.
Este post recolhe os 43 modelos de cabeçalho Elementor na biblioteca Master Addons, agrupados pelo tipo de site que eles se adequam Cada um tem uma captura de tela e uma demonstração ao vivo que abre em uma nova guia Eles instalam a partir da guia Cabeçalhos do Biblioteca de modelos Master Addons e percorra todo o site através do Construtor de temas Master Addons, então você não precisa do Elementor Pro para usá-los.
Salte para o que você veio buscar:
- Como adicionar um modelo de cabeçalho Elementor: cinco etapas com o Construtor de Temas
- 43 modelos de cabeçalho por tipo de site: SaaS, negócios locais, loja, multi-linha e mínimo
- Qual layout de cabeçalho se encaixa no seu site: uma mesa rápida para reduzi-lo
- Perguntas frequentes
Como adicionar um modelo de cabeçalho Elementor ao seu site
Um cabeçalho é um modelo do Construtor de Tema: ele aparece em todas as páginas, e você o edita em um só lugar A construção de cabeçalhos no Construtor de Tema Master Addons é gratuita, e as etapas abaixo funcionam com o plugin gratuito e o Elementor principal.
No vídeo abaixo, um desses cabeçalhos vai direto para um modelo do Construtor de Tema e depois ao vivo em todo o site Se você preferir ler, as mesmas etapas são escritas abaixo dele.
- No seu painel, vá para Complementos Mestres → Construtor de Tema, clique Adicionar Novo Modelo, defina o tipo como Cabeçalho e clique Editar com o Elementor.
- No editor, clique no Modelos de complementos mestres botão, abra o Cabeçalhos aba, escolha um design e clique Inserir.
- Substitua o logotipo, aponte o Widget do menu Nav no seu próprio menu WordPress e altere o texto do botão e o link.
- Abrir o Condições guia, conjunto Incluir → Site Inteiro e salvar.
- Se o seu tema ainda imprimir seu próprio cabeçalho acima do novo, desligue o cabeçalho do tema em suas configurações.
O guia do construtor de temas de cabeçalho abrange as mesmas etapas com uma captura de tela para cada uma, incluindo como excluir uma página ou dar a uma página de destino seu próprio cabeçalho O mesmo Construtor de Tema lida com a parte inferior da página também, como mostrado em nosso guia para editando o rodapé no WordPress com Elementor. Se você também precisa de um rodapé, nosso Modelos de rodapé do elementor post tem 34 designs, cada um com uma demonstração ao vivo.
43 Modelos de cabeçalho de elementor por tipo de site
Os 43 designs se dividem em cinco grupos. Ir para o mais próximo do seu site e abrir duas ou três demos lado a lado antes de escolher.
| Tipo de cabeçalho | Desenhos | O que eles compartilham | Onde |
|---|---|---|---|
| SaaS e tecnologia | 14 | Menu curto e um botão de teste ou demonstração | Saltar |
| Serviço empresarial e local | 7 | Número de telefone e botão de reserva | Saltar |
| Comércio eletrônico e loja | 6 | Pesquise, carrinho e ícones de conta | Saltar |
| Barra superior e multi-linha | 9 | Barra de contato acima do logotipo e menu | Saltar |
| Mínimo e centrado | 7 | Uma linha, poucos links, logotipo centralizado ou dividido | Saltar |
Modelos de cabeçalho SaaS e tech Elementor
A maioria deles vem dos kits SaaS e tech e compartilha um padrão: logotipo à esquerda, quatro ou cinco links e um botão de teste ou demonstração à direita. Finix, Clowdify e Techbyte usam barras escuras e Lead Lift fica em uma creme.
Shiftflow 1.: modelo de cabeçalho da placa de trabalho do elementor
Construído para um quadro de empregos: Casa, Empregos e Post A Job ficam à direita de uma barra branca, seguida por um botão Post a Job for Free.
2. Techbyte: Elementor modelo de cabeçalho de tecnologia escura
Dark navy, com o nome da marca à esquerda e três links à direita Não há botão, por isso se adapta melhor a um portfólio ou site de projeto do que a uma página de vendas.
3. tecpart: modelo de cabeçalho da empresa Elementor IT
Um cabeçalho de serviços de TI cujo dropdown de Todas as Páginas contém nove páginas internas, portanto, o nível superior precisa apenas de mais três links A captura de tela mostra o dropdown aberto.
Clowdify 4.: Elementor SaaS modelo de cabeçalho de pílula
Todo o cabeçalho é uma pílula preta arredondada com espaço ao redor Recursos, Preços, Integração e Login do Cliente ficam ao lado de um botão Começar agora.
5. Craftova: modelo de cabeçalho Elementor SaaS
Seis links, Estudo de caso entre eles, e um botão de Iniciar Avaliação Gratuita delineado Ele se encaixa em um produto com mais páginas do que o menu SaaS usual de três links.
6. finix: modelo de cabeçalho SaaS escuro Elementor
Preto com uma marca de logotipo verde, três links no meio e um botão de teste gratuito Iniciar delineado Com apenas três links, o olho vai direto para o julgamento.
7. Grip: Modelo de cabeçalho de agência do elementor
Um cabeçalho de agência com uma grande marca nominativa, Sobre, Estudos de Caso e Contato, e um botão Trabalhe conosco onde um site SaaS faria seu teste.
8. Klyro: modelo de cabeçalho de demonstração do software Elementor
Cinco links em uma barra cinza claro e um botão Solicitar Demonstração Gratuita, para software vendido por meio de uma chamada demo.
Levantamento de leads 9.: modelo de cabeçalho de inicialização do elementor
Uma barra de creme com texto de link em negrito e uma pílula preta que diz Iniciar teste gratuito É o mais quente dos cabeçalhos SaaS aqui.
10. Nexis: modelo de cabeçalho Elementor SaaS
Cinco links espaçados no meio, um logotipo verde profundo e um botão Começar agora com uma borda clara.
11. Optivue: modelo de cabeçalho Elementor SaaS
Três links centrados em uma barra branca e um botão de teste gratuito Iniciar arredondado à direita Há muito pouco para ler, então o botão faz o trabalho.
12. Sabrion: modelo de cabeçalho de login do Elementor SaaS
Preços, Sobre e Contato ao lado do logotipo, em seguida, um link Login e um botão Iniciar 14 Dias de Avaliação Gratuita O login permanece texto simples para que ele não concorra com o teste.
13. Sempla: modelo de cabeçalho Elementor SaaS
Recursos, Sobre nós, Preços e Depoimentos ao lado do logotipo, com Login e Comece Agora agrupados à direita.
14. zaplyte: modelo de cabeçalho do aplicativo Elementor
Os links ficam logo após o logotipo, em vez de no meio, o que deixa espaço aberto antes do botão Começar agora.
Modelos de cabeçalho de serviço local e empresarial
Cabeçalhos para empresas de limpeza, dentistas, encanadores, uma clínica de terapia, um restaurante e uma agência imobiliária A maioria adiciona um bar superior com um número de telefone ou links sociais, e o botão principal reserva uma consulta, uma chamada ou uma mesa.
15. HomeAxis: Modelo de cabeçalho imobiliário do elementor
Ícones sociais, um endereço de e-mail e um número de telefone andam em uma barra superior de limão A linha principal tem seis links e um botão Obter uma cotação correspondente com uma seta.
16. Balanciq: Modelo de cabeçalho da clínica de terapia com elementor
Home, Sobre, Serviço, Terapeutas e Contato com um botão arredondado Iniciar Sua Jornada Cores suaves e muito espaço, que se adapta a uma clínica.
17. limpador: modelo de cabeçalho do serviço de limpeza do elementor
Ícones sociais, um endereço e um número de telefone compartilham uma barra superior fina A linha principal tem cinco links e um botão verde Book An Appointment.
18. Cleanery: Elementor limpeza empresa modelo de cabeçalho
Uma barra superior azul pergunta “Precisa de ajuda de limpeza rápida?” ao lado de um número de chamada Abaixo dele estão cinco links e um botão Marcar um compromisso no mesmo azul.
19. Culinária: modelo de cabeçalho do restaurante Elementor
Uma barra superior verde-oliva com telefone, e-mail e ícones sociais acima de uma linha principal creme Livro A Tabela é a única ação que ele pede.
20. odontológico: modelo de cabeçalho da clínica odontológica do elementor
O número de telefone fica ao lado do botão Reserve uma consulta, para que o paciente possa ligar ou reservar do mesmo local.
21. Plumbiq: Modelo de cabeçalho de serviço de encanamento de elementor
Ligue-nos e os ícones sociais preenchem a barra superior, com cinco links abaixo e um botão azul Solicitar uma chamada gratuita.
Modelos de cabeçalho de comércio eletrônico e loja
Armazene cabeçalhos com ícones de pesquisa, carrinho e conta O Sartivo abre um dropdown de categoria, e dois dos layouts colocam uma oferta de venda ou link promocional dentro do próprio cabeçalho.
22. cabeçalho de loja azul com pesquisa: modelo de cabeçalho de loja Elementor
Uma linha superior azul com ícones sociais, um logotipo centrado, uma caixa de pesquisa e um carrinho A linha de menu abaixo termina em um hambúrguer para links extras.
Loja de logotipos centralizada 23.: modelo de cabeçalho de loja de elementor
Sob um endereço azul e uma barra de telefone, o menu fica à esquerda, o logotipo no meio e a pesquisa e o carrinho à direita.
24. bar superior escuro Loja: modelo de cabeçalho da loja do elementor
Sua barra superior escura oferece uma consulta gratuita e um número de telefone Abaixo estão o logotipo, seis links e um botão de pesquisa.
25. loja de banner promocional: modelo de cabeçalho promocional da loja Elementor
Três linhas: uma linha de mensagens com ícones sociais e de conta, o logotipo ao lado de um amplo banner de oferta e uma barra de menu azul com pesquisa, carrinho e lista de desejos.
26. Search Bar Store: modelo de cabeçalho de pesquisa de comércio eletrônico Elementor
A pesquisa fica no meio da linha do logotipo, com lista de desejos e carrinho à direita e um link de 70% de desconto em eletrônicos na barra de menu.
27. Sartivo: modelo de cabeçalho da loja de moda Elementor
Um cabeçalho de loja de moda com um link Shop by Category, um dropdown All Pages, um logotipo centrado e ícones de conta e pesquisa A captura de tela mostra o dropdown aberto.
Barra superior e modelos de cabeçalho de várias linhas
Cabeçalhos construídos a partir de duas ou três linhas: uma barra de contato com telefone, e-mail ou horário de funcionamento, uma linha de logotipo e uma barra de menu. Eles atendem agências, clínicas e empresas de serviços que desejam detalhes de contato em todas as páginas.
Barra de endereço 28.: Modelo de cabeçalho da barra superior do elementor
Barra superior cinza com endereço e ícones sociais, depois logotipo, seis links e botão azul Junte-se agora.
29. menu angular: modelo de cabeçalho de nomeação do elementador
O horário de funcionamento e três pequenos links de utilitários ficam acima de uma barra de menu azul angular que termina em um botão branco Marcar um compromisso.
Cabeçalho de informações de contato 30. com pesquisa: modelo de cabeçalho de informações de contato do elementor
Uma barra azul com endereço, login e ícones sociais, uma linha de logotipo com Call Us e horário de funcionamento e uma barra de menu azul em caixa com uma caixa de pesquisa.
31. agência criativa: modelo de cabeçalho de agência criativa do elementor
O logotipo recebe seu próprio grande bloco azul à esquerda Um número de telefone e ícones sociais correm pela parte superior, com o menu embaixo.
Menu flutuante 32.: modelo de cabeçalho de menu flutuante do elementor
Uma barra azul contém telefone, e-mail e horário de funcionamento A caixa de menu branca abaixo se sobrepõe ao topo da página, que funciona bem sobre uma imagem de herói.
33. iniciar barra de contato: modelo de cabeçalho da barra de contato do elementor
Telefone e e-mail em uma barra superior leve com um bloco sólido de primeiros passos à direita, depois o logotipo, o menu e um ícone de carrinho.
34. Medical Clinic: modelo de cabeçalho da clínica médica do elementor
O logotipo fica em um painel azul diagonal Telefone e e-mail vão na barra superior, e os ícones de pesquisa e carrinho terminam o menu.
35. três linhas centralizadas: modelo de cabeçalho de três linhas do elementor
E-mail, telefone e login na barra superior, um logotipo centralizado com carrinho e ícones sociais em ambos os lados e uma barra de menu azul de largura total na parte inferior.
36. Visita, Chamada e Correio: Elementor detalhes de contato modelo de cabeçalho
Os blocos Visite-nos, Ligue-nos e Envie-nos um e-mail se alinham ao lado do logotipo, com uma barra de menu azul abaixo que contém Login e Cadastre-se.
Modelos de cabeçalho mínimos e centrados
Layouts de linha única e incomuns: um menu dividido em torno de um logotipo centralizado, uma barra com um único botão de menu, um logotipo centralizado empilhado e algumas barras simples de logotipo e links.
Logotipo centrado 37. empilhado: modelo de cabeçalho de logotipo centrado no elementor
O logotipo fica no topo com o menu centrado abaixo dele, um layout adequado para blogs e sites de portfólio.
38. Fire Away Split: modelo de cabeçalho de menu dividido por elementor
O menu é dividido em dois, com três links de cada lado de um logotipo centralizado.
39. botão do menu: modelo de cabeçalho do botão do menu do elementor
Logotipo à esquerda, ícones sociais no meio e um botão Menu azul à direita Funciona para sites com apenas um punhado de páginas.
Cabeçalho Mínimo 40. com Ícones Sociais: Elementor modelo de cabeçalho mínimo
Uma barra branca com o logotipo, seis links, um botão de pesquisa e três ícones sociais.
41. ângulo roxo CTA: Elementor chamada para modelo de cabeçalho de ação
Logotipo e menu em branco, terminando em um painel roxo angular que contém um botão Download.
42. login: Elementor modelo de cabeçalho simples
Logotipo, seis links e um link de login com um ícone. Com tão pouco nele, ele cai em quase qualquer site.
43. simples Dropdown: Elementor menu suspenso modelo de cabeçalho
Apenas o logotipo, um menu com setas suspensas e um ícone próximo à direita, em uma barra branca lisa.
Qual layout de cabeçalho se encaixa no seu site?
| Seu site | Cabeçalho que geralmente funciona | Começar com |
|---|---|---|
| SaaS ou aplicativo | Menu curto com preços e recursos, link de login e um botão de teste | Sempla, Sabrion, Nexis |
| Negócio de serviços locais | Número de telefone visível, botão de reserva à direita | Odontológico, Plumbiq, Limpador |
| Restaurante | Barra superior de contato e um botão Reserve uma mesa | Culinária |
| Loja online | Pesquise, carrinho e ícones de conta, categoria dropdown | Sartivo, Procurar Loja de Bar |
| Agência ou clínica com muitas páginas | Duas ou três linhas com detalhes de contato e uma barra de menu completa | Clínica Médica Centrada em Três Rotas |
| Site de portfólio ou marca | Logotipo centralizado ou botão Menu que mantém a barra limpa | Logotipo centralizado empilhado, botão de menu |
Exemplos de cabeçalho de site: o que os bons compartilham
- Eles dão ao visitante um botão principal Nexis, Finix e Optivue cada um tem uma única chamada à ação, e Sempla estiliza sua segunda ação, Login, como um link simples para que os dois não concorram.
- Eles mantêm o menu curto A maioria dos cabeçalhos aqui mostra de três a seis links, e o Tecpart coloca o resto de suas páginas em um dropdown de Todas as Páginas.
- As empresas locais mostram um número de telefone Dental, Cleanery e Plumbiq colocá-lo no cabeçalho, onde um cliente que prefere ligar pode encontrá-lo sem rolagem.
- As lojas colocam a pesquisa no cabeçalho Todo layout de loja aqui o possui e a maioria adiciona um ícone de carrinho ao lado dele.
- As barras escuras usam texto leve e um botão contornado, como fazem Finix e Clowdify, para que ambos permaneçam legíveis.
Tornar o cabeçalho pegajoso
Um cabeçalho que fica na parte superior enquanto os visitantes rolam mantém o menu e o botão ao alcance em páginas longas Você pode tornar qualquer um desses cabeçalhos pegajoso, e as etapas estão em nosso guia para criando um cabeçalho pegajoso no Elementor. Em a site de uma página, emparelhar o cabeçalho pegajoso com links de menu que saltam para cada seção.
Cabeçalho, seção, página ou kit: qual modelo você precisa?
Um modelo de cabeçalho cobre uma parte do site Se você está construindo o resto também, a mesma biblioteca tem Modelos de seção do elementor para bandas individuais, como preços ou perguntas frequentes, completo Modelos de páginas do elementor para páginas completas, e kits modelo que agrupam um cabeçalho, rodapé e cada página em um estilo correspondente.
Cabeçalhos marcados como Pro na biblioteca precisam de a Licença Master Addons Pro, que também desbloqueia os kits completos de onde vêm muitos desses cabeçalhos.
Perguntas frequentes
O que é um modelo de cabeçalho Elementor?
Uma seção de cabeçalho pronta salva como um modelo Elementor Ele contém o logotipo, menu, botões e muitas vezes uma barra superior, e você insere em um cabeçalho do Theme Builder para que ele seja exibido em todas as páginas.
Como uso um modelo de cabeçalho no Elementor?
Crie um modelo de cabeçalho em Master Addons → Theme Builder, abra-o no Elementor, insira um design na guia Cabeçalhos da biblioteca de modelos Master Addons e defina a condição para Incluir → Site inteiro e salve.
Preciso do Elementor Pro para usar esses modelos de cabeçalho?
Não. O Master Addons Theme Builder coloca o cabeçalho em suas páginas e seu construtor de cabeçalhos é gratuito no plugin Master Addons, portanto o Elementor Pro não é necessário.
O cabeçalho funcionará nos telefones?
Abra a demonstração ao vivo no seu telefone ou restrinja a janela do navegador para ver como o menu se comporta em uma tela pequena antes de escolher uma.
Posso usar um cabeçalho diferente em uma página?
Sim. Construa um segundo modelo de cabeçalho e defina sua condição para Incluir → Singular → Páginas para essa página e, em seguida, exclua a página do seu cabeçalho principal.
Por que vejo dois cabeçalhos após a importação?
Seu tema ainda está imprimindo seu próprio cabeçalho Desligue-o nas configurações de tema ou Customizer, ou use um tema que oculte seu cabeçalho quando um cabeçalho do Construtor de Tema estiver ativo.
Quantos modelos de cabeçalho os Master Addons incluem?
A guia Cabeçalhos da biblioteca de modelos Master Addons possui 43 designs e cada um deles está nesta página.
Escolha um cabeçalho, defina-o uma vez
Comece com o grupo que combina com o seu site e insira o design que se encaixa Se você mudar de ideia mais tarde, abra o mesmo modelo de Construtor de Tema, exclua o design antigo e insira um novo As condições de exibição permanecem como estão.
Leitura relacionada: como importar um modelo Elementor, Modelos de seção do elementor, Modelos de rodapé do elementor e Guia próprio da Elementor para construir um cabeçalho com contêineres.
