Um cabeçalho é geralmente a primeira coisa que uma pessoa vê ao visitar seu site e serve como base para a forma como ela o explora.
Quer você tenha um site de comércio eletrônico, um site pessoal, um site para educação, um fórum da comunidade ou um site para a mídia, o cabeçalho é o que o torna simples de navegar e agradável de usar.
Cabeçalhos fixos estão se tornando cada vez mais populares entre os web designers para organizar e estruturar um site para melhorar a navegação do usuário.
Mostraremos como fazer seu cabeçalho fixo usando Elementor neste tutorial.
Os cabeçalhos fixos permitem que os usuários vejam o cabeçalho da página e a seção do menu, independentemente de quanto rolam para baixo.
Para adicionar um cabeçalho fixo ao seu site, vá para wp-admin > Aparência > Menus e crie um Menu Principal. No cabeçalho, digite a seção que deseja exibir.
Vá para Elementor Templates > Theme Builder quando terminar de construir o menu principal. Selecione a área do cabeçalho na página do construtor de temas e clique em “ Adicionar novo cabeçalho ”.
Dê um nome ao modelo de cabeçalho e clique em “ Criar modelo ” na tela pop-up.
Você será levado para a página de edição do Elementor depois disso. Você pode usar um dos modelos de cabeçalho predefinidos ou criar o seu próprio do zero.
Estaremos começando do zero com nosso cabeçalho sticky Elementor neste tutorial.
Você pode ver vários widgets de cabeçalho no editor Elementor antes de começarmos a projetar um modelo. Podemos criar um cabeçalho de forma rápida e fácil usando essas seções.
Crie um layout de duas colunas. Certifique-se de que a largura do conteúdo da seção esteja definida como " Em caixa ".
Nas configurações de largura do conteúdo na seção de edição do Elementor, defina a largura da primeira coluna para 20% na coluna “ Editar ”.
Coloque o logotipo do site do seu site na primeira coluna e alinhe-o à esquerda.
Adicione um Menu de navegação na segunda coluna e selecione o menu principal que você construiu na etapa 1. Alinhe o menu de navegação à direita.
Vamos manter o cabeçalho simples para este tutorial. Você pode tornar seu cabeçalho mais detalhado adicionando uma cor de fundo, efeitos de animação flutuante, botões e outros elementos.
Agora que criamos nosso cabeçalho Elementor básico, é hora de transformá-lo em um cabeçalho Fixo.
Para fazer isso, vá para a seção Editar (seção de cabeçalho inteiro). Selecione Avançado > Efeitos de movimento no menu suspenso.
Selecione “ sticky to the top ” em efeitos de movimento e, em seguida, “ devices ” onde você deseja que o cabeçalho adesivo apareça.
Um cabeçalho fixo é quase sempre indesejável em dispositivos do tamanho de um tablet e quase sempre indesejável em telas de dispositivos móveis. Como resultado, clique no “x” ao lado de ambas as opções em Sticky On, deixando apenas “Desktop” selecionado.
Quando estiver satisfeito com seu trabalho, clique em “ Publicar ”; isso ativará o cabeçalho fixo, mas não substituirá o cabeçalho do tema atual neste momento.
Elementor solicita que você adicione uma condição para o seu cabeçalho depois de publicá-lo. Você pode mostrar o cabeçalho onde quiser no site, adicionando condições.
Queríamos que esse cabeçalho aparecesse em todo o site, omitindo a página 404. Como resultado, incluímos todo o site na escolha, mas omitimos a página 404.
Como você pode ver, usar o Elementor para criar seu cabeçalho Sticky personalizado é simples e indolor!
Faça seu cabeçalho Elementor ficar muito melhor Usando o Custom CSS Elementor permite que você personalize um cabeçalho fixo adicionando uma classe CSS para torná-lo mais elegante.
Você pode personalizar a altura do cabeçalho aderente, a cor de fundo, a transição e os efeitos aderentes aqui.
Retorne à área de edição para tornar seu cabeçalho fixo mais elegante (seção de cabeçalho inteiro). Selecione Avançado > Efeitos de movimento no menu suspenso.
Defina o “ Effects Offset ” para 100 neste caso. Quando um visitante usa seu site, essa é a distância de rolagem onde o efeito de rolagem acontece.
Defina o deslocamento de movimento para 100.
Lembre-se de que as opções de efeitos de deslocamento só funcionarão se o CSS personalizado for usado. Conseqüentemente, se você não estiver adicionando nenhum CSS personalizado, poderá pular a última opção.
Antes de publicar o cabeçalho fixo final, você pode, opcionalmente, adicionar condições ao último cabeçalho fixo. Um exemplo de uma condição de cabeçalho fixo é onde você deseja que o cabeçalho adesivo seja mostrado amp Como exemplo amp pode escolher o critério “ site inteiro ”.
Agora você vai querer incluir algum CSS personalizado em seu site. CSS customizado é bastante flexível e você pode incluir o que quiser se estiver familiarizado com seu funcionamento.
Concluímos a limpeza; agora passamos para os meandros do site, incluindo a adição do código CSS personalizado. Demonstraremos os fundamentos e as técnicas avançadas para obter efeitos de cabeçalho aderentes gratuitos para o Elementor. Se você estiver usando o Elementor 2.9 ou superior, você pode usar as Regras de estilo global para incorporar este CSS em seu site.
Siga os procedimentos descritos abaixo para incluir o CSS personalizado:
Depois disso, cole o código CSS abaixo.
header.sticky-header {--header-height: 90px; --opacidade: 0,90; --shrink-me: 0,80; - sticky-background-color: # 0e41e5; --transição: .3s facilitação de entrada; transição: var de cor de fundo (- transição), var de imagem de fundo (- transição), var de filtro de fundo (- transição), var de opacidade (- transição); } header.sticky-header.elementor-sticky - efeitos {background-color: var (- sticky-background-color); imagem de fundo: nenhuma; opacidade: var (- opacidade); -webkit-backdrop-filter: blur (10px); filtro de fundo: desfoque (10px); } header.sticky-header> .elementor-container {transição: min-height var (- transição); } header.sticky-header.elementor-sticky - effects> .elementor-container {min-height: calc (var (- header-height) * var (- shrink-me)); altura: calc (var (- header-height) * var (- shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {transição: padding var (- transição); } header.sticky-header.elementor-sticky - effects .elementor-nav-menu .elementor-item {padding-bottom: 10px; padding-top: 10px; } header.sticky-header> .elementor-container .logo img {transição: largura máxima var (- transição); } header.sticky-header.elementor-sticky - efeitos. logo img {max-width: calc (100% * var (- shrink-me)); }
As instruções listadas acima irão guiá-lo através do processo de criação de um cabeçalho aderente decrescente no Elementor. Se você quiser saber mais detalhes sobre como personalizar ainda mais o cabeçalho, consulte o código CSS fornecido abaixo, o que permitirá que você seja mais criativo com o design do cabeçalho. Dependendo de suas necessidades, você pode personalizar o cabeçalho sticky Elementor alterando várias configurações e tornando-o mais ou menos sticky. Recomendamos que você use um editor de código para incorporar essa alteração CSS diretamente no Elementor. Você pode utilizar o Visual Studio Code ou Atom, que o ajudará a montar o código rapidamente e colher os benefícios. Esses editores são de uso gratuito e podem ser acessados de vários sistemas, incluindo Windows, Mac OS X e Linux.
Esta seção demonstrará como você pode ajustar os efeitos do cabeçalho de redução do Elementor usando a folha de estilo CSS. Se você fizer apenas uma alteração na propriedade personalizada, ela será alterada imediatamente para corresponder ao restante do código CSS.
As opções de personalização para o cabeçalho decrescente estão disponíveis em um total de cinco maneiras diferentes. Nem todas as variáveis devem ser personalizadas, mas você tem a opção de fazer isso se quiser. Assim que você decidir quais variáveis gostaria de modificar, você só pode modificar essas variáveis e deixar o resto dos parâmetros inalterados.
Aqui estão as cinco variáveis CSS, com os valores padrão para cada variável mostrados em vermelho.
A cor de fundo aderente é # 0e41e5 e a altura do cabeçalho é 90px. Outras opções de estilo incluem: opacidade de 0,90, encolhimento de 0,80, opacidade de 0,90 e transição de fácil entrada / saída de 300 ms.
As propriedades personalizadas são os elementos que aparecem após o duplo traço “-” em nossa ex amp código le, e você pode encontrá-los listados no topo do nosso s amp le código. Tudo o que é necessário é ajustar o valor que aparece após os dois pontos e antes do ponto e vírgula na frase.
Para ex amp le, se você quiser aumentar a altura do cabeçalho para 100px, aqui está como ficaria antes e depois de mudar a altura:
Antes, a altura do cabeçalho era de 90 pixels; depois, a altura do cabeçalho era de 100 pixels.
Usando o Elementor, você pode criar um menu de cabeçalho fixo de várias maneiras diferentes. Você não só pode construir um cabeçalho sticky gratuito do Elementor, mas também pode personalizar o cabeçalho adicionando CSS personalizado a ele. É possível obter instruções detalhadas sobre como construir um cabeçalho Elementor decrescente aderente usando Elementor e ajustar seu CSS com este guia passo a passo.
Elementor inclui uma variedade de modelos de cabeçalho; cada um é distinto e elegante e ajuda seus visualizadores a navegar em seu site.
Com o Elementor, você tem controle total sobre o estilo dos cabeçalhos de seu site. Para ex amp le, você pode colocar o logotipo do site no centro da página e no menu principal abaixo dela. Você pode adicionar um cabeçalho acima do cabeçalho principal para exibir o número de telefone, links de mídia social e outras informações.
Aqui estão apenas alguns amp das inúmeras opções de design de cabeçalhos disponíveis para usuários do Elementor.
Incluir um cabeçalho fixo em seu site pode tornar mais fácil para os visitantes acessarem seu site e aumentar os cliques em todas as áreas do site.
O Elementor elimina a necessidade de gerar manualmente cabeçalhos fixos com Javascript e CSS, o que era necessário anteriormente. Criar um cabeçalho aderente para o seu site nunca foi tão simples como agora, graças aos cabeçalhos aderentes do Elementor.
Os cabeçalhos e rodapés de um site são elementos essenciais. Na maioria dos casos, o cabeçalho fornece navegação ...
Dois dos temas WordPress mais populares no mercado são Astra e OceanWP. Profissional…
Criar um excelente site de notícias não exige que você se torne um web designer. Nós…
O tema do jornal é um dos temas mais importantes do WordPress projetados por tagDiv, um…
Quando se trata de configurar uma loja online, WooCommerce é o plugin - plugin . Isto…
Nosso próprio construtor de páginas, o Avada Builder, agora está disponível em duas interfaces: Avada…
Ver comentários
Artigo muito bom! Você pode, por favor, me ajudar com meu problema de menu fixo em uma página do site? O menu fixo cobre minha seção, que defini como link de âncora no menu.
Oi,
Você precisa adicionar um preenchimento superior em sua primeira seção, pois o menu alterou o posicionamento para ser aderente.
Senhor! Existe alguma maneira de adicionar um mega menu no cabeçalho pegajoso?
Claro, por que não? você está enfrentando um problema?
Fiz um cabeçalho usando o css, mas agora desisti dele, e não consigo acessar no elementor para desfazer, nem pelo elementor hearer.
Olá, acho que você pode usar o botão direito do mouse ou o explorador de seção