Como usar o Elementor para criar um cabeçalho transparente?

Cabeçalhos transparentes podem ser uma ótima maneira de melhorar a aparência do seu site. Isso faz com que o design do seu site se destaque e pareça mais interativo para os visitantes do seu site.

Mas você pode usar o Elementor para criar um cabeçalho transparente no WordPress sem conhecer nenhuma linguagem de programação? A resposta é sim! Você definitivamente pode. Este artigo mostrará as instruções para criar facilmente um cabeçalho transparente Elementor.

As vantagens de usar cabeçalhos transparentes

Você pode criar facilmente cabeçalhos transparentes Elementor envolventes. Mas se você quiser, pode dar um passo adiante e corrigi-lo à medida que os visitantes percorrem o conteúdo da página. Abaixo estão as vantagens:

Excelente para páginas da Web longas

Usar um cabeçalho adesivo transparente é uma maneira elegante e rápida de garantir que seus visitantes tenham uma experiência agradável.

Eles podem ajudar seu site a ter um sistema de navegação mais amigável. Se o conteúdo do seu site for muito longo, esse benefício será muito benéfico.

Melhor para sites acionáveis

Cabeçalhos fixos transparentes funcionam melhor em sites acionáveis, como sites de varejo ou comércio eletrônico. É porque você deseja que os visitantes realizem uma ação específica enquanto ainda estão no conteúdo da página.

Quando o cabeçalho é mostrado lindamente enquanto navega pelo seu site, os visitantes acharão mais conveniente explorar.

Além disso, como o cabeçalho é transparente, não reduz a legibilidade do conteúdo. Portanto, adicionar um cabeçalho transparente pode reduzir a taxa de rejeição do seu site e ajudar a orientar seus visitantes com eficiência.

Melhore a capacidade de navegação do seu site

Usar um cabeçalho adesivo transparente em seu site incentiva seus visitantes a agir imediatamente. Isso economiza tempo ao procurar uma opção específica.

E, em vez de colocar o logotipo da sua marca em todos os lugares da página inicial, você pode exibi-lo com elegância em um cabeçalho transparente.

Como usar o Elementor Pro para criar um cabeçalho transparente?

Agora, vamos aprender como criar e personalizar um cabeçalho transparente usando o Elementor Pro.

Instale e ative o plug-in Elementor Pro

Se o seu site ainda não possui o Elementor Pro, você precisa instalá-lo e ativá-lo.

1. No painel do WordPress, vá para Plugins > Adicionar novo .

2. Encontre o plugin digitando 'Elementor'. Você verá o Elementor Website Builder listado como uma opção.
3. Clique no botão Instalar agora e no botão Ativar , respectivamente.
4. Depois de comprar o Elementor Pro com sucesso, acesse my.elementor.com.
5. Faça o login com as informações que você recebeu no e-mail após a compra.
6. Em seguida, você será levado para a página Perfil . Clique no botão Download Plugin no canto superior direito para baixar o arquivo .zip para o seu computador.

7. No painel do WordPress do seu site, clique em Plugins > Adicionar novo . Em seguida, clique no botão Upload Plugin no canto superior esquerdo.
8. Clique no botão Escolher arquivo . Selecione o arquivo .zip que você acabou de baixar. Em seguida, clique em Ativar .
9. No topo do painel do site, você receberá uma notificação solicitando que ative sua chave de licença.

Crie um menu para o seu site

Em seguida, você deve criar um menu de cabeçalho usando o painel do WordPress, se ainda não o fez. Abaixo está um guia introdutório.

1. No painel do WordPress, navegue até Aparência > Menus .

2. Insira o nome do menu na caixa de texto Nome do menu. Em seguida, clique no botão Criar Menu .
3. Concentre-se no painel esquerdo. Aqui, você pode adicionar as páginas, postagens, categorias e links personalizados do site ao menu.

4. Você pode arrastar e soltar itens de menu para reorganizá-los ou criar submenus no painel direito.

5. Quando estiver satisfeito, lembre-se de clicar no botão Salvar Menu .

Use o Elementor Pro para criar um cabeçalho normal

1. Vá para Modelos > Adicionar novo no painel do WordPress.

2. Uma janela pop-up aparecerá. Selecione o modelo de cabeçalho Elementor no menu suspenso e insira seu nome na caixa de texto Nomeie seu modelo . Em seguida, clique no botão CRIAR MODELO .

3. A Galeria de modelos do Elementor aparecerá em um pop-up. Você pode navegar por todos os estilos de cabeçalho do Elementor. Depois de escolher um favorito, mova o cursor para ele e clique no botão Inserir . Você também pode visualizar todos eles.

Crie um cabeçalho adesivo transparente usando o Elementor Pro

1. Agora, você precisa tornar o cabeçalho transparente usando o Elementor Pro. Para fazer isso, clique no botão de seis pontos acima do cabeçalho.

2. Na seção 'Layout', escolha o menu desejado no menu suspenso Menu.

3. Vá para a guia Estilo para alterar a cor de fundo do cabeçalho e o valor transparente. Na seção 'Plano de fundo', escolha o tipo de plano de fundo Clássico (indicado por um pincel).

4. Clique no botão Seletor de cores . Em seguida, escolha uma cor e um valor transparente que você deseja.
5. Você pode alterar ainda mais a aparência geral do cabeçalho, incluindo tipografia, sobreposição de plano de fundo, borda e divisor. Sinta-se à vontade para experimentar.
6. Em seguida, vá para a guia Avançado . Em seguida, role até a seção Efeitos de movimento . Ative a opção Efeitos de rolagem .

7. Escolha a opção Página inteira no menu suspenso Efeitos relativos a .
8. Por fim, escolha a opção Superior no menu suspenso Fixo .
9. Quando estiver satisfeito, clique no botão Publicar para aplicar as alterações.

O resultado será semelhante ao abaixo:

Como usar o Elementor para criar um cabeçalho transparente gratuitamente ?

Se você está com pouco orçamento e não quer gastar dinheiro no Elementor Pro, você precisa de outro plugin para criar cabeçalhos transparentes.

Neste artigo, usaremos o plug-in Essential Addons for Elementor. Esta é a biblioteca de widgets mais popular com mais de um milhão de usuários ativos.

Você receberá muitos widgets gratuitamente para fazer um site se destacar e ser o mais envolvente possível. Observe que você não precisa da versão premium para criar cabeçalhos transparentes.

Instale e ative o Elementor e os complementos essenciais para o plug-in Elementor

1. No painel do WordPress, vá para Plugins > Adicionar novo .

2. Encontre o plugin digitando ' Elementor '. Você verá o plug-in Elementor listado como uma opção.
3. Clique no botão 'Instalar agora' e no botão 'Ativar', respectivamente.
4. Repita o processo acima com o plugin Essential Addons for Elementor.

Crie um menu para o seu site

Já cobrimos isso acima. Por favor, role para cima para saber como.

Use complementos essenciais para Elementor para criar um cabeçalho transparente transparente

1. Navegue até Complementos essenciais > Elementos . Aqui, ative o widget Menu Simples . Lembre-se de clicar no botão SALVAR CONFIGURAÇÕES .

2. Crie uma nova página/post ou abra uma existente com o Elementor.
3. Clique no botão Configurações (indicado por uma engrenagem) no canto inferior esquerdo. Selecione o 'Elementor Canvas' no menu suspenso Layout da página . Dessa forma, você pode se livrar do cabeçalho que vem com o tema.

4. Volte ao menu do widget clicando no ícone de nove quadrados. Procure o widget Menu Simples . Arraste e solte-o no local desejado.

5. Na seção Geral , escolha o menu desejado no menu suspenso Selecionar menu.

6. Vá para a guia Estilo para alterar a cor de fundo do cabeçalho e o valor transparente.

7. Na seção Plano de fundo , escolha o tipo de plano de fundo Clássico (indicado por um pincel).
8. Clique no botão Seletor de cores . Em seguida, escolha uma cor e um valor transparente que você deseja.
9. Você pode alterar ainda mais a aparência geral do cabeçalho, incluindo tipografia, sobreposição de plano de fundo, borda e divisor. Sinta-se à vontade para experimentar.
10. Em seguida, vá para a guia Avançado . Em seguida, role até a seção Posicionamento . Escolha a opção Fixo no menu suspenso Posição .

11. Volte ao menu do widget clicando no ícone de nove quadrados. Procure o widget Espaçador . Arraste e solte-o logo abaixo do widget Menu Simples .

12. Na seção Espaçador , ajuste o valor do Espaço para corresponder à altura do cabeçalho.

13. Quando estiver satisfeito, clique no botão Publicar para aplicar as alterações.

Como criar um cabeçalho transparente para usuários Woostify?

Se você estiver usando o tema Woositfy, mesmo a versão gratuita, poderá aplicar rapidamente um belo cabeçalho transparente para todo o seu site em poucos minutos. Siga as instruções abaixo para saber como:

1. Navegue até Aparência > Personalizar no painel do WordPress.

2. Em seguida, vá para Layout > Cabeçalho Transparente .

3. Ative a alternância Ativar cabeçalho transparente .

4. Na nova guia Geral e Design , você pode personalizar o novo cabeçalho transparente de acordo com suas necessidades. Por exemplo, você pode habilitar/desabilitar em páginas específicas, como 404, posts, etc.,

5. Não se esqueça de clicar no botão Publicar quando estiver satisfeito com o resultado.

Palavras finais

Criar um cabeçalho transparente Elementor é uma abordagem elegante para ajudar os usuários a navegar em seu site.

O cabeçalho que criamos é totalmente responsivo. Portanto, você não precisa se preocupar muito com esse problema. Para aqueles que estão usando Woostify, você deve optar pela terceira via. É também a maneira mais simples e rápida quando você deseja criar um belo cabeçalho transparente.