Glassmorphism é o visual de vidro fosco: um cartão semitransparente que desfoca tudo o que está por trás dele, o estilo em que a Apple e o Windows se inclinaram em suas interfaces Construí-lo à mão no Elementor significa CSS personalizado com filtro de fundo e algumas peculiaridades do navegador gratuito Extensão Glassmorphism em Complementos Mestres para Elementor transforma-o em uma alternância na guia Avançado de qualquer elemento.
Você liga, define um valor de desfoque e uma cor de fundo semitransparente, contorna os cantos, e o elemento se torna um cartão de vidro Aqui está toda a configuração.
O que a extensão Glassmorphism faz #
A extensão adiciona a Glassmorphismo seção para o Avançado guia de cada elemento Elementor, desde seções completas até widgets únicos. Habilite-o e o elemento terá um borrão de fundo, de modo que a imagem de fundo ou o conteúdo por trás dele se espalhe em vidro fosco enquanto o texto do próprio elemento permanece nítido.
O visual funciona melhor quando o elemento fica em cima de algo visualmente ocupado, como um fundo de foto ou um gradiente Sobre uma seção branca simples não há nada para desfocar, então o efeito não tem nada para mostrar.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Glassmorphism é uma extensão gratuita, portanto nenhuma licença Pro é necessária.
- Um elemento colocado sobre uma imagem ou fundo colorido, para que o desfoque tenha algo com que trabalhar.
Como habilitar a extensão Glassmorphism #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. Glassmorphism fica no Exibir widgets grupo com crachá Popular, ao lado de Padrões e Linha Grade. Clique em sua alternância para que fique roxo e depois bata Salvar alterações no topo da página e aguarde o aviso de” verde “Settings salvo com sucesso.
Onde encontrá-lo no editor Elementor #
Abra sua página com o Elementor e selecione o elemento que deseja transformar em vidro No exemplo de vídeo é um widget Cabeçalho Duplo sentado em um fundo de foto Vá para o Avançado tab, e você encontrará o Glassmorphismo seção com o emblema MA roxo, ao lado de outras extensões Master Addons, como Display Conditions e Floating Effects.
Configurações de Glassmorphism explicadas #
Virar Habilitar Glassmorphism para Sim e os controles aparecem.
- Valor de desfoque: quão fortemente o fundo por trás do elemento mancha, de 0 a 100 px (20 px por padrão).O borrão se aplica a todo o recipiente, e até mesmo um pequeno valor como 2 lê claramente sobre uma foto.
- Cor de fundo: a tonalidade do vidro A ponta do painel diz isso claramente: use cores RGBA para melhor controle Uma cor HEX simples é convertida em RGBA com 30% de opacidade automaticamente, para que o vidro nunca fique sólido.
- Raio Fronteiriço: arredonda os cantos do cartão de vidro, por lado ou ligado.
- Largura da borda: adiciona um contorno branco semitransparente de 0 a 10 px, que parece a borda de um painel de vidro A cor da borda não é ajustável aqui.
- Corrigir estouro (se o desfoque não funcionar): um interruptor de resgate Alguns layouts carregam overflow: oculto, que bloqueia o filtro de fundo que alimenta o desfoque Ligue isso se você ativou tudo e ainda não vê nenhum efeito.
Escolha a tonalidade de vidro com uma cor RGBA #
Clique na amostra personalizada ao lado Cor de fundo e escolha uma cor, então puxe o controle deslizante alfa para baixo Na demonstração o valor é um vermelho semitransparente (#DC4C4C8C), que tinge o cartão enquanto os assentos na foto atrás dele ficam visíveis através do desfoque.
Redonde os cantos e resgata um borrão desaparecido #
Definir um Raio Fronteira para suavizar o cartão Alguns pixels são suficientes para o visual de vidro E se o borrão se recusar a mostrar, vire Corrigir estouro para Sim: remove a regra overflow:hidden que bloqueia o filtro de fundo em alguns contêineres.
O efeito acabado #
Aqui está o resultado na extremidade frontal: um cartão de vidro arredondado com uma tonalidade vermelha, a foto borrada atrás dele e o título e o texto nítidos na parte superior.
Onde o glassmorfismo funciona bem #
- Sobreposições herói. Um painel de vidro para o título e CTA em cima de uma foto de largura total.
- Preços e cartões de recurso. Cartões de vidro sobre fundo de seção gradiente.
- Blocos testemunhal. Citações que flutuam sobre imagens sem escondê-las.
- Cabeçalhos pegajosos. Um borrão sutil mantém o menu legível à medida que o conteúdo rola abaixo dele.
- Caixas de login ou inscrição. O painel fosco clássico sobre uma imagem de marca.
Perguntas frequentes #
O que é a extensão Glassmorphism em Master Addons?
É uma extensão livre que adiciona um efeito de vidro fosco a qualquer elemento Elementor da guia Avançado Você obtém controles para a força do desfoque, uma cor de fundo semitransparente, raio da borda e largura da borda, e você nunca precisa escrever o CSS sozinho.
Por que o borrão do glassmorphism não está aparecendo?
Normalmente um recipiente pai carrega overflow: oculto, que bloqueia o pano de fundo-filtro por trás do efeito, Ligue o botão Fix Overflow na parte inferior da seção Glassmorphism Verifique também se o elemento fica sobre uma imagem ou fundo colorido, uma vez que o desfoque sobre o branco liso é invisível.
Quais elementos podem usar o efeito glassmorphism?
Qualquer elemento Elementor com uma guia Avançado: seções, colunas, contêineres e widgets individuais Ative a extensão uma vez no painel de complementos mestre, e a seção Glassmorphism aparece na guia Avançado de cada elemento no editor.
Que cor de fundo devo usar para o glassmorphism?
Uma cor RGBA semitransparente Escolha qualquer matiz e abaixe o canal alfa para que o fundo permaneça visível através da tonalidade Se você inserir uma cor HEX sólida, a extensão a converte em RGBA com 30% de opacidade para que o efeito de vidro ainda funcione.
A extensão Glassmorphism é gratuita?
Sim. Ele vem com a versão gratuita de Master Addons para Elementor, no grupo Display Widgets da guia Extensões. O página preços lista o que os planos Pro adicionam além dos recursos gratuitos.
Embrulhando #
A extensão Glassmorphism transforma um truque CSS mexido em alguns controles na guia Avançado: habilitar, desfocar, matiz, raio e borda Coloque um widget sobre uma foto, mantenha a cor de fundo semitransparente e procure Fix Overflow se o desfoque nunca se esconder Página de extensão do Glassmorphism compara-o com a escrita do CSS você mesmo Para mais atualizações do editor como esta, navegue pelo Widgets e extensões Master Addons, ou pegue um design pronto do kits modelo e adicione o copo por cima.
