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.

fixe e torne um cabeçalho transparente com Elementor

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
fixe e torne um cabeçalho transparente com Elementor
  • 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
crie um cabeçalho flutuante e transparente com Elementor

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
crie um cabeçalho flutuante e transparente com Elementor
  • Você verá um pop-up modal
  • selecionar cabeçalho
  • Finalmente clique em Crie um modelo
crie um cabeçalho flutuante e transparente com Elementor

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.

crie um cabeçalho flutuante e transparente com Elementor
crie um cabeçalho flutuante e transparente com Elementor

O modelo de cabeçalho será aberto na tela do Elementor.

crie um cabeçalho flutuante e transparente com 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
crie um cabeçalho flutuante e transparente com Elementor
  • 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
crie um cabeçalho flutuante e transparente com Elementor

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
crie um cabeçalho flutuante e transparente com Elementor
  • Em seguida, altere a opacidade do plano de fundo
crie um cabeçalho flutuante e transparente com Elementor

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).

crie um cabeçalho flutuante e transparente com Elementor

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).
crie um cabeçalho flutuante e transparente com Elementor

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
crie um cabeçalho flutuante e transparente com Elementor

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.