Como alterar a cor do cabeçalho fixo na rolagem no Elementor

Cabeçalhos fixos são uma ótima maneira de manter o menu de navegação do seu site sempre visível, garantindo fácil acesso a links e informações importantes. No entanto, um cabeçalho estático pode se tornar monótono com o tempo e você pode querer alterar sua cor na rolagem para criar uma experiência de usuário mais dinâmica e envolvente. Neste guia, mostraremos como alterar a cor de um cabeçalho fixo na rolagem no Elementor , usando etapas simples e fáceis de seguir. Quer você seja um usuário iniciante ou experiente do Elementor, você pode implementar facilmente esse efeito e dar ao seu site uma aparência nova e moderna.

Método de projeto

Se ainda não o fez, você precisará usar o construtor de temas para criar um modelo de cabeçalho personalizado. Comece colocando seu logotipo em um widget de imagem e um widget de navegação em uma seção de cabeçalho de duas colunas.

A guia Avançado

A guia Avançado nos controles da seção será usada nas etapas a seguir.

Configurações de margem

A maneira mais comum de fazer um cabeçalho transparente é dar à seção uma margem negativa igual à sua altura. Desbloqueie os controles de margem na guia Avançado e defina o valor inferior para um valor negativo (exemplo: -125px). Isso moverá a seção abaixo do cabeçalho para o topo da página.

O índice Z

Você também precisará aumentar o índice Z da seção para garantir que ela esteja sempre no topo do conteúdo. Você pode inserir qualquer número maior que o restante do conteúdo do seu site, mas muitos designers usam 1.000.

Configurações fixas

Selecione a opção Sticky no acordeão Motion Effects e defina-a como Top.

Adicionando efeito

Agora que criamos uma seção básica de cabeçalho transparente, adicionaremos o efeito de rolagem.

Guia Estilo

A guia Estilo nos controles de seção será usada nas etapas a seguir.

Cor Final

Defina a cor do fundo ou gradiente final no seletor de cores.

Efeito de rolagem

Alterne o seletor de efeitos de rolagem no painel de controles.

Defina os valores

Agora precisamos ajustar os valores nos controles deslizantes da janela de visualização para obter o efeito desejado. Role até o local da sua página onde deseja a opacidade total e reduza o valor Superior até que seu título fique completamente opaco (exemplo: 25%). Agora você pode aumentar o valor do Bottom. No exemplo anterior, queremos que o efeito aconteça rapidamente, por isso definimos os valores muito próximos (exemplo: 22%). Isso resultará na ocorrência do efeito em uma rolagem de página de 3%.

Empacotando

Concluindo, alterar a cor do cabeçalho fixo na rolagem no Elementor pode melhorar o apelo visual e a experiência do usuário do seu site. É uma maneira simples e eficaz de destacar seu site e criar uma impressão memorável nos visitantes. No entanto, lembre-se de que você precisará ajustar ou fazer concessões para dispositivos móveis e tablets, pois o comportamento do cabeçalho pode variar em diferentes tamanhos de tela. Encontrar esse ponto ideal exigirá alguns testes e ajustes, mas o resultado final valerá o esforço. Então, vá em frente e experimente esta técnica para dar ao seu site uma aparência nova e moderna.