No vídeo eu mostro como criar um cabeçalho transparente e fixo para o seu sitem WordPress usando o Elementor.
O cabeçalho transparente traz um tom mais bonito e moderno pra sua página, além disso, deixar o cabeçalho fixo ao rolar a página pra baixo traz uma melhora navegabilidade para a sua página, tornando fácil o acesso a links de chamadas pra ação.
Esse tutorial é para criar cabeçalhos com Elementor, mas pode ser usado pra você criar qualquer seção que você queria deixar fixa na sua página.
Pra criar esse cabeçalho você vai precisar do Elementor PRO, se você não tem ainda uma licença do Elementor PRO, acesse o link aqui embaixo.
Na primeira parte do tutorial a gente vai sar só os recursos do Elementor, mas também vamos precisar de um código CSS personalizado. Eu explico tudo direitinho, passo a passo, pra você fazer sem erro.
Seguindo o passo a passo do tutorial do Youtube, esses são os códigos CSS a serem adicionados.
Assista o vídeo para entender em que momento deve inserir o código e quais as configurações necessárias para fazer ele funcionar.
Em caso de dúvidas, comentem embaixo do post.
Insira esse pedaço na seção principal:
selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.5)!important
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}
Insira essa parte na imagem da sua logo:
.logo-site img {
max-width: 140px;
height: auto;
transition: all 0.5s ease;
}
.elementor-sticky--effects .logo-site img {
max-width: 120px;
height: auto;
}
