Como usar cabeçalho fixo e efeitos de rolagem com Elementor

Um cabeçalho geralmente é a primeira coisa que uma pessoa vê quando visita 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 educacional, um fórum comunitário ou um site de mídia, o cabeçalho é o que torna a navegação simples e agradável de usar.

Os 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 visualizem o cabeçalho da página e a seção do menu, independentemente de quão longe eles rolam.

• Etapa 1: fazer um menu
• Etapa 2: Criando seu cabeçalho no Elementor
• Etapa 3: usando Elementor para criar um modelo de cabeçalho
• ETAPA 4: Como tornar seu cabeçalho Elementor pegajoso
• Etapa 5: personalize nosso CSS
• Conclusão

Etapa 1: fazer um menu

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.

Etapa 2: Criando seu cabeçalho no Elementor

Vá para Elementor Templates > Theme Builder quando terminar de construir o menu principal. Selecione a área Cabeçalho na página do construtor de tema 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.

Começaremos do zero com nosso cabeçalho fixo 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.

Etapa 3: usando Elementor para criar um modelo de cabeçalho

Crie um layout de duas colunas. Certifique-se de que a largura do conteúdo da seção esteja definida como “ Box ”.

Nas configurações de largura do conteúdo na seção Elementor Edit, 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.

Manteremos 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.

ETAPA 4: Como tornar seu cabeçalho Elementor pegajoso

Agora que criamos nosso cabeçalho Elementor básico, é hora de transformá-lo em um cabeçalho Sticky.

Para fazer isso, vá para a seção Editar (seção do cabeçalho inteiro). Selecione Avançado > Efeitos de movimento no menu suspenso.

Selecione “ fixo no topo ” em efeitos de movimento e, em seguida, “ dispositivos ” onde deseja que o cabeçalho fixo apareça.

Um cabeçalho fixo é quase sempre indesejável em dispositivos do tamanho de tablets e quase sempre também 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 no momento.

Elementor solicita que você adicione uma condição ao 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 o site inteiro na escolha, deixando de fora a página 404.

Como você pode ver, usar Elementor para criar seu cabeçalho Sticky personalizado é simples e fácil!

Faça com que seu cabeçalho fixo do Elementor pareça muito melhor usando CSS personalizado O 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 fixo, a cor de fundo, a transição e os efeitos fixos 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 “ Effects Offset ” para 100 neste caso. Quando um visitante usa seu site, esta é a distância de rolagem onde ocorre o efeito de rolagem.

Defina o deslocamento de movimento para 100.

Tenha em mente que as opções de efeitos de deslocamento só funcionarão se CSS personalizado for usado. Conseqüentemente, se você não estiver adicionando nenhum CSS personalizado de sua preferência, 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 amp condição de cabeçalho fixo é onde você deseja que o cabeçalho fixo seja mostrado. Por exemplo amp você pode escolher o critério “ site inteiro ”.

Agora você deseja incluir algum CSS personalizado em seu site. CSS personalizado é bastante flexível e você pode incluir o que quiser se estiver familiarizado com seu funcionamento.

Concluímos a limpeza; agora passamos para as complexidades 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 fixos gratuitos para Elementor. Se estiver usando 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:

• Para acessar o menu hambúrguer, localize-o no canto superior esquerdo do menu Elementor e selecione-o.
• Selecione Escolher estilos de tema no menu suspenso abaixo da seção Estilo global.
• Selecione CSS personalizado no menu suspenso dessa seção (a cor mudará para azul em relação à cor vermelha genética anterior).

Depois disso, cole o código CSS abaixo.

header.sticky-header { --header-height: 90px; --opacidade: 0,90; --encolher-me: 0,80; --cor de fundo pegajosa: #0e41e5; --transição: 0,3s de facilidade de entrada; transição: var de cor de fundo (--transition), var de imagem de fundo (--transition), var de filtro de pano de fundo (--transition), var de opacidade (--transition); } header.sticky-header.elementor-sticky--effects { cor de fundo: var(--sticky-background-color) !important; imagem de fundo: nenhum! Importante; opacidade: var(--opacidade) !importante; -webkit-backdrop-filtro: desfoque (10px); filtro de fundo: desfoque (10px); } header.sticky-header > .elementor-container {transição: altura mínima var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { altura mínima: calc(var(--header-height) * var(--shrink-me))!important; altura: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {transição: preenchimento var(--transition); } header.sticky-header.elementor-sticky--efeitos .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; preenchimento superior: 10px!importante; } header.sticky-header > .elementor-container .logo img {transição: largura máxima var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { largura máxima: calc(100% * var(--shrink-me)); } 

Etapa 5: personalize nosso CSS

As instruções listadas acima irão guiá-lo através do processo de criação de um cabeçalho fixo decrescente no Elementor. Se quiser saber mais detalhes sobre como personalizar ainda mais o cabeçalho, você pode consultar o código CSS fornecido abaixo, que permitirá que você seja mais criativo com o design do cabeçalho. Dependendo de suas necessidades, você pode personalizar o cabeçalho fixo do Elementor alterando várias configurações e tornando-o mais ou menos fixo. 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 ​​em vários sistemas, incluindo Windows, Mac OS X e Linux.

Esta seção demonstrará como você pode ajustar os efeitos da redução do cabeçalho Elementor usando a folha de estilos CSS. Se você fizer apenas uma alteração na propriedade personalizada, ela será imediatamente alterada para corresponder ao restante do código CSS.

As opções de personalização do 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 desejar. Assim que você decidir quais variáveis ​​deseja modificar, você poderá modificar apenas essas variáveis ​​e deixar o restante dos parâmetros inalterados.

Aqui estão as cinco variáveis ​​CSS, com os valores padrão de cada variável mostrados em vermelho.

A cor de fundo fixa é #0e41e5 e a altura do cabeçalho é 90px. Outras opções de estilo incluem: opacidade de 0,90, redução de 0,80, opacidade de 0,90 e transição de entrada/saída de 300 ms.

As propriedades personalizadas são os elementos que aparecem após o traço duplo “–” em nosso código de amp , e você pode encontrá-los listados na parte superior de nosso código de amp . Basta ajustar o valor que aparece após os dois pontos e antes do ponto e vírgula na frase.

Por amp , se você quiser aumentar a altura do cabeçalho para 100px, veja como ficaria antes e depois de alterar 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 apenas pode construir um cabeçalho fixo Elementor gratuito, 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 fixo decrescente 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 os espectadores a navegar no seu site.

Com Elementor, você tem controle total sobre o estilo dos cabeçalhos do seu site. Por amp , você pode colocar o logotipo do site no centro da página e o menu principal abaixo dele. 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çalho disponíveis para usuários do Elementor.

Conclusão

Incluir um cabeçalho fixo em seu site pode facilitar a navegação dos visitantes pelo site e aumentar os cliques em todas as áreas do site.

Elementor elimina a necessidade de gerar manualmente cabeçalhos fixos com Javascript e CSS, o que era necessário anteriormente. Criar um cabeçalho fixo para o seu site nunca foi tão simples como agora, graças aos cabeçalhos fixos Elementor.