Como fazer um header transparente no Elementor

Um post rápido mostrando como fazer um header transparente no Elementor.
Como fazer um header transparente no Elementor - Hourglass

Um post rápido só pra colocar este vídeo do canal oficial no Youtube do Elementor.

Este é o código citado no vídeo:

selector.elementor-sticky--effects{
   background-color: rgba(133,130,255,0.5)!important
}

selector{
   transition: background-color 4s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
   min-height: 80px;
}

selector > .elementor-container{
   transition: min-height 1s ease !important;
}

Dica

E aqui vai uma dica para complementar esse tutorial do vídeo.

Somente seguindo o tutorial do vídeo o seu header vai ficar transparente e fixo no topo da página, mas não vai ficar por cima do conteúdo.

Para fazer o header ficar por cima do conteúdo como na imagem desse post você vai precisar colocar uma margem negativa na seção do header.

Primeiramente adicione uma altura mínima para o seu header. Neste caso eu usei 90px.

Agora vá em “Avançado” e defina uma margem negativa do mesmo tamanho do seu header, nesse caso -90px.

Conclusão

Dessa maneira você consegue dar uma estética mais moderna ao seu site sem ter que usar plugins além do Elementor e o Elementor Pro.

Facilitando a vida

Vou colocar aqui um template prontinho do Elementor + Elementor Pro com tudo isso já configurado, só preencher o form e baixar 🙂

Tags

Controle sua Privacidade

Nosso site usa cookies para melhorar a navegação. Política de privacidade – Termos de Uso