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 🙂
