O cabeçalho de um site é a primeira informação percebida pelo visitantes do seu site. Permite destacar o logotipo da sua marca, organizar as páginas do seu site, além de fornecer outras funcionalidades importantes (pesquisa, conexão, etc.). Além disso, é necessário ter um cabeçalho flutuante e transparente, pois melhora a experiência do usuário.
Neste artigo, mostraremos como criar um cabeçalho e torná-lo transparente com Elementor. Mas antes, veremos o que é um cabeçalho flutuante e transparente.
O que é um cabeçalho flutuante e transparente?
Um cabeçalho flutuante é uma barra de navegação que sempre permanece fixa, mesmo quando o visitante rola a página da web. É muito adequado para sites que possuem páginas com artigos longos, resenhas e sites de uma página. E seu aspecto transparente permite ver a cor de fundo da página, bem como seu conteúdo.
Por que usar cabeçalhos flutuantes e transparentes
Os sites modernos usam cada vez mais cabeçalhos flutuantes e transparentes porque têm um impacto visual no visitantes do local. As razões para adotá-los visam:
- Aumente o reconhecimento da sua marca,
- Aumente a experiência do usuário,
- Melhore a navegação
Descubra também Como criar um título de duas cores no Elementor
Fixe e torne um cabeçalho transparente com o Elementor
Para criar um cabeçalho transparente e flutuante, você deve ter as duas versões doElementor (Pro e Lite). Caso contrário, baixe o (Elementor, Elementor Pro) Antes de começar.
Uma vez instalado, siga os próximos passos.
passo 1: crie um menu com Elementor
Para criar um menu, siga estas etapas:
- selecione sucessivamente Aparência >> Menus
- Dê um nome ao cardápio
- Indique a localização do menu
- Valide clicando no botão salvar menu
- Verifique as páginas, artigos ou postagens no grupo Adicionar itens ao menu
- Clique Adicionar ao Menu para adicionar os itens marcados ao menu
- Finalmente clique em Salvar menu
Lire aussi Elementor: como exibir texto acima de uma imagem
Etapa 2: selecione o modelo de cabeçalho da biblioteca de modelos do Elementor
Usuários deElementor Pro tem acesso a uma biblioteca de modelos prontos para uso que são úteis para projetar diferentes seções de um site da Web. Você também encontrará uma variedade de modelos de cabeçalho aqui. Para fazer isso,
- Vá sucessivamente para Modelos >> Adicionar
- Você verá um pop-up modal
- selecionar cabeçalho
- Finalmente clique em Crie um modelo
A partir daí, a biblioteca é exibida. Por padrão, ele exibe blocos de cabeçalho. Navegue pelos modelos oferecidos e insira o modelo que lhe interessa.
O modelo de cabeçalho será aberto na tela do Elementor.
Etapa 3: Cabeçalho de pino com Elementor
Para fixar o cabeçalho, siga estas etapas:
- Clique no botão Editar seção de cabeçalho
- Em seguida, selecione a guia avançado
- Depois Efeito de movimento
- Puxe o menu para baixo Alfinete e selecione o valor No topo, isso congelará o cabeçalho do seu site à medida que o visitante rolar as páginas para baixo.
- Por padrão, o cabeçalho será fixado automaticamente em mídias como desktop, tablet e celular
Navegue também Elementor: Como exportar e importar modelos
Etapa 4: Torne o cabeçalho transparente com o Elementor
Para conseguir isso, repita o método abaixo:
- ir a estilo >> plano de fundo >> seletor de cores
- Em seguida, altere a opacidade do plano de fundo
Se você deseja tornar o cabeçalho completamente transparente, altere o tipo de plano de fundo selecionando o tipo clássico. Portanto, os menus de navegação ficarão invisíveis devido ao contraste da cor do texto (branco).
Para remediar esta situação, faça o seguinte:
- Clique sucessivamente no menu Modificar de navegue >> estilos
- Então no selecionador de cores
- Escolha a cor desejada (no nosso caso, não houve necessidade de alterá-la).
Uma vez feito, você pode publicar sua página da web. Mas antes disso, vamos ver como substituir os menus de navegação em nosso template pelos que criamos. Lembre-se que o nome atribuído ao nosso é menu de cabeçalho (veja o passo 1):
- Selecione a guia conteúdo
- Em seguida, modifique o cardápio selecionando o nome do seu cabeçalho
E pronto :).
Conclusão
Cabeçalhos transparentes e flutuantes podem ser úteis para você em vários casos. Esperamos que este artigo tenha atendido às suas necessidades sobre como criar cabeçalhos transparentes e flutuantes com o Elementor. Se você tiver outras dúvidas sobre este tópico, deixe-nos saber nos comentários.
Olá,
Obrigado por seu artigo.
Na verdade, criei um cabeçalho transparente para que a foto de fundo permaneça visível.
Porém esta foto está apenas na página inicial.
Gostaria de especificar que este cabeçalho é transparente apenas na página inicial, caso contrário, em meus artigos, não o vejo mais!
Estou procurando desesperadamente uma solução... sem sucesso!
obrigado pela ajuda