Como adicionar efeitos de filtro de pano de fundo CSS a um cabeçalho fixo no Divi

Publicados: 2021-07-21

Adicionar efeitos de filtro de pano de fundo CSS é uma maneira divertida e única de impulsionar o design de um menu de cabeçalho fixo. O que torna a propriedade CSS do filtro de fundo tão única é que ela permite que você aplique efeitos de filtro à área atrás de um elemento. Esta é uma opção perfeita para cabeçalhos fixos porque o design da sua página pode ser alterado magicamente atrás do cabeçalho enquanto a página é rolada para baixo. Você pode ter visto esse efeito usado em sites populares como apple.com.

Neste tutorial, vamos mostrar como adicionar efeitos de filtro de pano de fundo CSS a um cabeçalho fixo no Divi. Primeiro, vamos explicar o processo simples de adicionar efeitos de filtro de fundo a um cabeçalho existente que envolve 3 etapas fáceis. Depois disso, veremos como construir todo o cabeçalho do zero.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Observe os efeitos de desfoque e filtro de saturação aplicados aos elementos atrás do cabeçalho conforme você rola.

Para uma demonstração ao vivo simples desse efeito de filtro de fundo adicionado a um cabeçalho, verifique este código.

Baixe o modelo de cabeçalho global GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Como fazer o upload do modelo

Vá para Divi Theme Builder

Para fazer o upload do modelo, navegue até o Divi Theme Builder no backend do seu site WordPress.

modelo de cabeçalho e rodapé para o Divi's Bushcraft Layout Pack

Carregar modelo de site padrão global

Então, no canto superior direito, você verá um ícone com duas setas. Clique no ícone.

template de cabeçalho e rodapé para Divi's Bushcraft Layout Pack

Navegue até a aba de importação, carregue o arquivo JSON que você conseguiu baixar neste post e clique em 'Importar Divi Theme Builder Templates'.

template de cabeçalho e rodapé para Divi's Bushcraft Layout Pack

Salvar alterações do Divi Theme Builder

Depois de fazer upload do arquivo, você notará um novo cabeçalho e rodapé global no modelo de site padrão. Salve as alterações do Divi Theme Builder assim que quiser que o modelo seja ativado.

template de cabeçalho e rodapé para Divi's Bushcraft Layout Pack

Vamos para o tutorial, vamos?

Adicionando efeitos de filtro de pano de fundo CSS a um cabeçalho existente

A maneira mais simples de demonstrar o processo é adicionar efeitos de filtro de pano de fundo CSS a um cabeçalho existente no Divi. Na verdade, tudo se resume a estas três etapas fáceis:

  1. Adicione uma cor de fundo semitransparente à seção do cabeçalho
  2. Adicione o CSS personalizado do filtro de fundo à seção do cabeçalho
  3. Adicionar uma posição fixa à seção do cabeçalho

Veja como fazer isso no Divi.

Editar cabeçalho no Theme Builder

Navegue até o Theme Builder e clique para editar o modelo de cabeçalho existente.

Adicionar cor de fundo semitransparente à seção

Abra as configurações da seção que contém os elementos do menu do cabeçalho. Em seguida, adicione uma cor de fundo semitransparente à seção. Neste exemplo, damos à seção a seguinte cor de fundo:

  • Cor de fundo: rgba (0,0,0,0.8)

Adicionar filtro de pano de fundo CSS personalizado

Em seguida, podemos adicionar os efeitos do filtro de fundo (usando a propriedade CSS do filtro de fundo) com um trecho de CSS personalizado no elemento principal da seção. Na guia avançada, cole o seguinte CSS no elemento principal: 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Esses efeitos de filtro são semelhantes aos efeitos de filtro embutidos em todos os elementos Divi. A principal diferença é que o filtro de fundo adiciona o efeito ao (s) elemento (s) atrás dele, enquanto os efeitos de filtro embutidos do Divi adicionam o efeito ao próprio elemento.

Aqui, estamos usando 2 efeitos de filtro (saturar e desfocar) que aplicarão o efeito de filtro a quaisquer elementos de design atrás da seção.

Sinta-se à vontade para explorar a adição de outros valores de função de filtro (ou uma combinação deles) para criar seu próprio design exclusivo. Os mais úteis deles incluem:

  • borrão()
  • brilho()
  • contraste()
  • escala de cinza ()
  • hue-rotate ()
  • invertido()
  • sépia()
  • saturar()

Adicionar posição pegajosa ao cabeçalho

Finalmente, certifique-se de dar à seção de cabeçalho uma posição fixa.

Resultado final

Aqui está uma olhada no resultado final em uma página ao vivo. Observe os efeitos de desfoque e filtro de saturação aplicados aos elementos atrás do cabeçalho conforme você rola.

Construindo um cabeçalho com efeitos de filtro de pano de fundo CSS a partir do zero

Se você deseja construir o cabeçalho inteiro com efeitos de filtro de pano de fundo CSS desde o início, veja como fazer isso.

Construir Cabeçalho Global no Construtor de Tema

Navegue até o Theme Builder e clique para Build a new Global Header.

Criando uma seção fixa com efeitos de filtro de fundo CSS

Vamos começar criando uma seção fixa com os efeitos de filtro de fundo CSS, como fizemos na primeira parte deste tutorial.

No Editor de Layout de Cabeçalho Global, adicione uma linha de uma coluna à seção.

Abra as configurações da seção. Em seguida, adicione a seguinte cor de fundo semitransparente à seção:

  • Cor de fundo: rgba (0,0,0,0.8)

Atualize o preenchimento da seguinte maneira:

  • Preenchimento: 0 px superior, 0 px inferior

Em seguida, podemos adicionar os efeitos do filtro de fundo (usando a propriedade CSS do filtro de fundo) com um trecho de CSS personalizado no elemento principal da seção. Na guia avançada, cole o seguinte CSS no elemento principal: 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Finalmente, certifique-se de dar à seção de cabeçalho uma posição fixa.

  • Posição pegajosa: grudar no topo

Editar configurações de linha

Agora que a seção foi concluída, abra as configurações de linha e atualize o seguinte:

  • Largura da calha: 1
  • Largura: 95%
  • Preenchimento: 20px superior, 20px inferior

Adicionar imagem do logotipo

Depois que as configurações de linha forem atualizadas, adicione um módulo de imagem à linha / coluna para criar o logotipo.

Faça upload da imagem do logotipo para o módulo de imagem.

A atualização das configurações de design de imagem da seguinte maneira:

  • Largura: 50px
  • Margem: 0px certo

Criar Menu

Em seguida, adicione um módulo de menu sob o módulo de imagem.

Na guia de conteúdo, selecione um menu e dê a ele uma cor de fundo transparente.

  • Cor de fundo: rgba (0,0,0,0)

Na guia de design, atualize as configurações de design do menu da seguinte maneira:

  • Estilo: alinhado à esquerda
  • Cor do link ativo: #fff
  • Fonte do menu: Montserrat
  • Peso da fonte do menu: Semi negrito
  • Cor do texto do menu: #fff
  • Alinhamento de Texto: Centro
  • Cor de fundo do menu suspenso: # 333
  • Cor da linha do menu suspenso: #fff
  • Cor do texto do menu suspenso: #fff
  • Link ativo do menu suspenso: #fff
  • Plano de fundo do menu móvel: # 333
  • Cor do texto do menu móvel: #fff
  • Cor do ícone do carrinho de compras: #fff
  • Cor do ícone de pesquisa: #fff
  • Cor do ícone do menu de hambúrguer: #fff
  • Largura: 80% (desktop e tablet)

Botão Criar com Módulo de Texto

Para criar o pequeno botão para o cabeçalho, vamos usar um módulo de texto. Adicione um módulo de texto no menu.

Atualize o conteúdo do corpo com a obra “Loja”. Em seguida, dê ao módulo de texto uma cor de fundo branca.

  • Texto do corpo: “Loja”
  • Cor de fundo: #fff

Na guia de design, atualize o seguinte:

  • Fonte do texto: Montserrat
  • Peso da Fonte do Texto: Semi Negrito
  • Cor do texto do texto: # 333
  • Altura da linha de texto: 2em
  • Alinhamento de Texto: Centro
  • Largura: 50px
  • Cantos arredondados: 5px

Aqui, o módulo de texto tem a mesma largura da imagem do logotipo. Isso ajudará a alinhar os itens perfeitamente quando usarmos a propriedade flex na coluna com CSS personalizado.

Alinhar Módulos na Coluna com a Propriedade CSS Flex

Depois que o logotipo, o menu e o módulo de texto forem adicionados à coluna, abra as configurações da coluna e cole o seguinte CSS personalizado no elemento principal: 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Salvar layout e modelo do cabeçalho

Uma vez feito isso, certifique-se de salvar o layout e o modelo.

Resultado final

Aqui está outra olhada no design final. Observe os efeitos de desfoque e filtro de saturação aplicados aos elementos atrás do cabeçalho conforme você rola.

Suporte para navegador

Infelizmente, a propriedade CSS do filtro de fundo atualmente não funciona bem no IE e no Firefox. No entanto, o substituto será a cor de fundo semitransparente dada à seção, que ainda funciona e tem uma ótima aparência.

Pensamentos finais

Esperançosamente, seu próximo projeto se beneficiará de um cabeçalho com um bom efeito de filtro de fundo. É realmente fácil adicionar a qualquer cabeçalho no Divi e divertido explorar todos os diferentes valores de função de filtro disponíveis.

Estou ansioso para ouvir de você nos comentários.

Saúde!