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

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

Seja 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 o uso agradável.

Os cabeçalhos fixos estão se tornando cada vez mais populares entre os web designers para organizar e estruturar um site, melhorando a navegação do usuário.

Neste tutorial, mostraremos como criar um cabeçalho fixo usando o Elementor.

Os cabeçalhos fixos permitem que os usuários visualizem o cabeçalho e a seção de menu da página, independentemente de quão longe rolem a página para baixo.

• Passo 1: Criar um cardápio
• Passo 2: Criando seu cabeçalho no Elementor
• Etapa 3: Usando o Elementor para criar um modelo de cabeçalho
• PASSO 4: Como tornar o cabeçalho do seu Elementor fixo
• Etapa 5: personalize nosso CSS
• Conclusão

Passo 1: Criar um cardápio

Para adicionar um cabeçalho fixo ao seu site, acesse wp-admin > Aparência > Menus e crie um Menu Principal. No cabeçalho, digite a seção que deseja exibir.

Passo 2: Criando seu cabeçalho no Elementor

Após concluir a criação do menu principal, acesse Elementor Templates > Theme Builder Adicionar novo cabeçalho ”.

Dê um nome ao modelo de cabeçalho e clique em “ Criar modelo ” na janela pop-up.

Em seguida, você será redirecionado para a página de edição do Elementor. Você pode usar um dos modelos de cabeçalho predefinidos ou criar o seu próprio do zero.

Neste tutorial, vamos começar do zero com o cabeçalho fixo do Elementor.

Você pode visualizar vários widgets de cabeçalho no editor Elementor antes de começarmos a criar um modelo. Podemos criar um cabeçalho de forma rápida e fácil usando essas seções.

Etapa 3: Usando o 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 " Em caixa ".

Nas configurações de largura do conteúdo na seção Editar do Elementor, defina a largura da primeira coluna para 20% na coluna Editar

Coloque o logotipo 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ê criou na etapa 1. Alinhe o menu de navegação à direita.

Para este tutorial, vamos manter o cabeçalho simples. Você pode torná-lo mais detalhado adicionando uma cor de fundo, efeitos de animação ao passar o mouse, botões e outros elementos.

PASSO 4: Como tornar o cabeçalho do seu Elementor fixo

Agora que criamos nosso cabeçalho básico no Elementor, é hora de transformá-lo em um cabeçalho fixo (sticky header).

Para isso, acesse a seção Editar (Cabeçalho completo). 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 um tablet, e também quase sempre em telas de celulares. Portanto, clique no "x" ao lado de ambas as opções em "Ativar cabeçalho fixo", deixando apenas "Desktop" selecionado.

Quando estiver satisfeito com o seu trabalho, clique em " Publicar "; isso ativará o cabeçalho fixo, mas ele não substituirá o cabeçalho do seu tema atual neste momento.

O Elementor solicita que você adicione uma condição ao seu cabeçalho após a publicação. Você pode exibir o cabeçalho em qualquer lugar do site adicionando condições.

Queríamos que este cabeçalho aparecesse em todo o site, omitindo a página 404. Consequentemente, incluímos o site inteiro na seleção, deixando a página 404 de fora.

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

Deixe o cabeçalho fixo do seu Elementor muito mais bonito usando CSS personalizado. O Elementor permite personalizar um cabeçalho fixo adicionando uma classe CSS para deixá-lo mais estiloso.

Você pode personalizar aqui a altura, a cor de fundo, a transição e os efeitos de fixação do cabeçalho fixo.

Volte à área de edição para deixar seu cabeçalho fixo mais estiloso (Seção de cabeçalho completa). Selecione Avançado > Efeitos de movimento no menu suspenso.

Neste caso, defina o " Deslocamento de Efeitos

Defina o deslocamento de movimento para 100.

Lembre-se de que as opções de efeitos de deslocamento só funcionarão se for utilizado CSS personalizado. Portanto, se você não estiver adicionando nenhum CSS personalizado, pode ignorar a última opção.

Antes de publicar o cabeçalho fixo final, você pode adicionar condições opcionais a ele. Um exemplo amp condição para cabeçalho fixo é o local onde você deseja que ele seja exibido. Por exemplo amp você pode escolher o critério " site inteiro ".

Agora você vai querer incluir algum CSS personalizado no seu site. O CSS personalizado é bastante flexível e você pode incluir o que quiser, desde que esteja familiarizado com seu funcionamento.

Concluímos a limpeza; agora vamos aos detalhes do site, incluindo a adição do código CSS personalizado. Demonstraremos tanto os fundamentos quanto as técnicas avançadas para obter efeitos de cabeçalho fixo gratuitos para o Elementor. Se você estiver usando o Elementor 2.9 ou superior, poderá usar as Regras de Estilo Globais para incorporar esse CSS ao 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 do 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á de vermelho para azul).

Em seguida, cole o código CSS abaixo.

header.sticky-header { --header-height: 90px; --opacity: 0.90; --shrink-me: 0.80; --sticky-background-color: #0e41e5; --transition: .3s ease-in-out; transition: background-color var(--transition), background-image var(--transition), backdrop-filter var(--transition), opacity var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; background-image: none !important; opacity: var(--opacity) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; height: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!important; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); }

Etapa 5: personalize nosso CSS

As instruções acima irão guiá-lo pelo processo de criação de um cabeçalho fixo decrescente no Elementor. Se desejar saber mais detalhes sobre como personalizar ainda mais o cabeçalho, você pode consultar o código CSS fornecido abaixo, que lhe permitirá ser mais criativo com o design do cabeçalho. Dependendo das suas necessidades, você pode personalizar o cabeçalho fixo do Elementor alterando diversas configurações e tornando-o mais ou menos fixo. Recomendamos que você use um editor de código para incorporar essa alteração de CSS diretamente no Elementor. Você pode utilizar o Visual Studio Code ou o Atom, que o ajudarão a criar o código rapidamente e a aproveitar os benefícios. Esses editores são gratuitos e podem ser acessados ​​em diversos sistemas, incluindo Windows, macOS e Linux.

Esta seção demonstrará como você pode ajustar os efeitos do cabeçalho recolhível 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 cinco formatos diferentes. Nem todas as variáveis ​​precisam ser personalizadas, mas você tem a opção de fazê-lo, se desejar. Assim que decidir quais variáveis ​​deseja modificar, você poderá alterar apenas essas variáveis, deixando os demais 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 é de 90px. Outras opções de estilo incluem: opacidade de 0,90, redução de tamanho de 0,80, opacidade de 0,90 e transição de entrada/saída suave de 300ms.

As propriedades personalizadas são os elementos que aparecem após os dois traços “–” em nosso código deamp, e você pode encontrá-las listadas no início do código deamp. Tudo o que é necessário é ajustar o valor que aparece após os dois pontos e antes do ponto e vírgula na frase.

Poramp, se você quiser aumentar a altura do cabeçalho para 100px, veja como ele ficaria antes e depois da alteração:

Antes, a altura do cabeçalho era de 90 pixels; depois, a altura do cabeçalho passou a ser de 100 pixels.

Usando o Elementor, você pode criar um menu de cabeçalho fixo de diversas maneiras. Além de criar um cabeçalho fixo gratuito no Elementor, você também pode personalizá-lo adicionando CSS personalizado. Este guia passo a passo ensina como criar um cabeçalho fixo com efeito decrescente no Elementor e ajustar o CSS.

O Elementor inclui uma variedade de modelos de cabeçalho; cada um é distinto e elegante, auxiliando os visitantes na navegação pelo seu site.

Com o Elementor, você tem controle total sobre o estilo dos cabeçalhos do seu site. Poramp, 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 para redes sociais e outras informações.

Aqui estão apenas algunsampdas inúmeras opções de design de cabeçalho disponíveis para os usuários do Elementor.

Conclusão

Incluir um cabeçalho fixo em seu site pode facilitar a navegação dos visitantes 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 fixo para o seu site nunca foi tão fácil, graças aos cabeçalhos fixos do Elementor.