Todos os códigos CSS devem ser inseridos no campo CSS Personalizado dentro da aba Avançado.
É necessário o uso do Elementor Pro, a versão Free não tem habilitado o campo de CSS Personalizado.
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.
Sites institucionais e landing pages
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
selector .elementor-button-icon i:before{
font-size: 30px;
}
.elementor-button-content-wrapper{
align-items: center
}
A WebsitesPro é uma agência de criação de sites e landing pages profissionais. Nós pensamos, projetamos, desenvolvemos e gerenciamos sites para clientes que querem gerar alto impacto, gerar novos leads e vender seus produtos e serviços de forma online.