Efeito de vidro que deixa o fundo (background) desfocado.
Insira o código na opção de CSS Personalizado em uma coluna ou bloco, recomendo usar uma cor branco quase transparente para melhorar o efeito.
O efeito fica mais nítido quando o BG é composto por imagens, quando é uma cor sólida o efeito não vai aparecer direito.
Altere os valores de blur para mais ou menos desfoque.
Um exemplo do efeito é a barra de navegação desta página, ao rolar a página para baixo o efeito é aplicado.
selector{
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}Código para criar uma borda em degradê.
Altere os valores de padding para aumentar ou diminuir a espessura da borda.
Em background: linear-gradient, altere os valores #HEX para colocar a cor que quiser na borda.
Vai ser necessário fazer ajustes na aba “Avançado / Layout“.
Segue exemplo de como fica abaixo.
selector {
z-index:0;
}
selector:before {
z-index:0;
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
padding: 3px;
margin: 10px;
border-radius: 25px;
background: linear-gradient(to top, #326189, #32618900);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}Uma funcionalidade que falta no Elementor é alterar o tamanho dos ícones dos botões na aba estilo do widget, porém isso pode ser resolvido via código CSS.
Você consegue aumentar ou diminuir o tamanho do ícone alterando o valor de font-size, deixando visualmente mais bonito
Esse código HTML passa uma leveza a mais ao navegar no seu site, quando o usuário rolar a página ela desce mais suave
<script src=”https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.22/bundled/lenis.min.js”></script>
<script>
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 – Math.pow(2, -10 * t)),
orientation: ‘vertical’,
gestureOrientation: ‘vertical’,
smoothWheel: true,
wheelMultiplier: 1,
smoothTouch: false,
touchMultiplier: 2,
infinite: false,
})
//get scroll value
lenis.on(‘scroll’, (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>