Códigos CSS para Elementor

CÓDIGOS CSS PARA ELEMENTOR PRO

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 VIDRO DESFOCADO

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);
}

BORDA BOX DEGRADÊ

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.

WebSites Pro

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;
}

AJUSTAR TAMANHO DO ÍCONE DO BOTÃO

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
}

WEBSITESPRO