How to create a Transparent Sticky Header in WordPress with Elementor

Criando um Cabeçalho Transparente e Fixo

Introdução ao Tutorial

• O vídeo apresenta a criação de um cabeçalho transparente que se torna menor ao rolar a página, com uma mudança de fundo visível durante o scroll.

• O cabeçalho também é adaptável para fundos claros, permitindo a transformação do menu em uma versão branca, ideal para logotipos escuros.

Configuração Inicial no Elementor

• O tutorial utiliza uma página de teste sem cabeçalho. É necessário acessar o construtor Elementor para criar um template de cabeçalho.

• Ao adicionar um novo cabeçalho, o usuário deve nomeá-lo (ex: "tutorial") e configurar o menu conforme desejado.

Estrutura do Cabeçalho

• Um cabeçalho simples é criado com duas colunas: logo à esquerda e menu à direita. A configuração inicial inclui um logo branco.

• É importante alinhar verticalmente as colunas e remover o padding interno para garantir que os elementos fiquem bem posicionados.

Tornando o Cabeçalho Transparente

• Após publicar, é necessário tornar o cabeçalho transparente ajustando as margens negativas na seção principal.

• A altura mínima da seção deve ser configurada para 90 pixels, garantindo que o conteúdo abaixo se mova corretamente.

Adicionando Efeitos Sticky

• Para tornar o cabeçalho fixo (sticky), ajuste a configuração de efeitos de movimento na seção principal.

• O índice Z deve ser alterado para garantir que o menu fique sobreposto aos outros elementos da página.

Personalização com CSS

• Um código CSS personalizado é adicionado para aplicar uma cor de fundo RGB ao menu com transição suave.

• Ajustes são feitos no offset dos efeitos de movimento para iniciar a mudança apenas após 100 pixels de rolagem.

Finalizando as Configurações

• Para alterar a opacidade do fundo do menu, basta modificar os valores no CSS. Por exemplo, mudar 0.5 (50% opaco) para 0.7 aumenta a opacidade.

Ajustando o Cabeçalho e Menu em Elementor

Redução da Transparência e Tamanho do Menu

• O cabeçalho foi ajustado para ser menos transparente, melhorando a visibilidade. A redução do tamanho do menu é sugerida para um design mais agradável.

• O código CSS é modificado para alterar a altura do cabeçalho de 100 pixels para 70 pixels ao rolar a página, criando uma animação suave.

Ajustes no Logo

• O logo deve ter uma largura máxima de 140 pixels inicialmente, reduzindo-se para 120 pixels com uma animação de 0.5 segundos ao rolar.

• É necessário associar o ID correto ao logo no Elementor, utilizando a classe CSS "logo" para que o sistema reconheça corretamente a imagem como um logo.

Finalizando as Animações

• Após aplicar as alterações, o cabeçalho começa pequeno e diminui ainda mais ao rolar. A animação pode ser ajustada para durar um segundo.

• Verificações são feitas na versão mobile; ajustes são necessários no menu e ícones, garantindo que tudo esteja alinhado corretamente.

Considerações Finais sobre Design Mobile

• Para dispositivos móveis, recomenda-se ajustar o menu e os ícones com cores apropriadas (ex: fundo transparente e texto branco).

• É importante garantir espaçamento adequado nas seções principais e verificar se as cores estão corretas conforme o design desejado.

Conclusão

• O tutorial conclui com agradecimentos aos espectadores e incentiva comentários sobre dúvidas ou sugestões de novos vídeos.