[Soluções] Correção espaçamento Widget Texto
[Soluções] Correção espaçamento Widget Texto Esse código é para solucionar aquele espaçamento Chato que o Elementor gera nos Widget de Editor de Texto Basta colocar esse código no CSS em um único widget ou da página (não precisa estar em todos) Código CSS Copiar Código p:last-child{ margin-bottom:0px; } .elementor-widget-text-editor p:last-child{ margin-bottom:0px; margin-top:0px; }
[Titulo] Degrade Animado
[Titulo] Degrade Animado Adicione um Widget de Título no Elementor Não precisa definir classe CSS Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .elementor-heading-title { /* transições suaves */ transition: all 1s; /* deixa o texto transparente para mostrar o gradiente */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* animação do movimento do gradiente */ animation: move 3s ease 1s infinite alternate; /* gradiente animado entre branco e verde */ background-image: linear-gradient(45deg, #FAFAFA, #00FF73, #FAFAFA, #00FF73); background-size: 500% 200%; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }
[Titulo] Degrade Solido Fundo
[Titulo] Degrade Solido Fundo Adicione um Widget de Título no Elementor Defina a classe CSS no titulo: destaque Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .destaque { /* fundo do destaque */ background: linear-gradient(to right, #7300B5 70%, transparent); padding: 10px 20px; width: fit-content; margin-top: 20px; margin-bottom: 20px; position: relative; /* faixa lateral */ border-left: 5px solid #E95BFF; } /* seta removida completamente */ .destaque::after { content: none !important; }
[Titulo] Degrade separado
[Titulo] Degrade separado Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .degrade { /* degradê aplicado no texto — ajuste aqui se quiser outra variação */ background-image: linear-gradient(to left, #00FF73 0%, #00CC5E 100%); background-clip: text; -webkit-background-clip: text; /* deixa o texto transparente para revelar o degradê */ text-fill-color: transparent; -webkit-text-fill-color: transparent; } Coloque palavra que deseja o degrade entre as tags como no exemplo:
[Titulo] Degrade Total
[Titulo] Degrade Total Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector { /* degradê aplicado diretamente no texto */ background-image: linear-gradient(to left, #00FF73 0%, #09A654 100%); /* ajuste as cores aqui */ background-clip: text; -webkit-background-clip: text; /* deixa o texto transparente para revelar o degradê */ text-fill-color: transparent; -webkit-text-fill-color: transparent; }
[Titulo] Risco/Corte no Texto
[Titulo] Risco/Corte no Texto Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .risco { text-decoration-line: line-through; -webkit-text-decoration-line: line-through; /* cor do risco — ajuste aqui se quiser outra tonalidade */ text-decoration-color: #FF3B3B; -webkit-text-decoration-color: #FF3B3B; } Coloque palavra que deseja riscar entre as tags como no exemplo:
[Titulo] Blur centro a fora
[Titulo] Blur centro a fora Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector { /* tempo e curva da animação do texto */ -webkit-animation: texto 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: texto 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes texto { 0% { /* espaçamento reduzido para iniciar comprimido */ letter-spacing: -0.5em; /* intensidade do desfoque inicial */ -webkit-filter: blur(12px); filter: blur(12px); opacity: 0; } 100% { /* texto nítido no final */ -webkit-filter: blur(0); filter: blur(0); opacity: 1; } }
[Titulo] Texto Destacado
[Titulo] Texto Destacado Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .elementor-heading-title::before { content: “”; /* cor da faixa de destaque */ background: #FF4347; position: absolute; /* largura da linha */ width: 38%; /* altura da linha */ height: 10px; bottom: -1%; right: -1%; z-index: 0; } .destaque { /* mantém o texto acima da faixa */ z-index: 2 !important; position: relative; }
[Titulo] Entrada Fade-in
[Titulo] Entrada Fade-in Adicione um Widget de Título no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector{ -webkit-animation: efeito 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: efeito 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; } @-webkit-keyframes efeito { 0% { letter-spacing: 1em; opacity: 0; } 40% { opacity: 0.6; } 100% { letter-spacing: normal; opacity: 1; } }