[Titulo] Degrade Vertical
[Titulo] Degrade Vertical Adicione um Widget de Título no Elementor Não precisa definir classe Aplique esse código CSS dentro do Widget Código CSS Copiar Código selector:before{ content: “”; background: linear-gradient(to top, #090909 20%, transparent); /*mude a cor do gradient aqui*/ width: 100%; height: 50%; bottom: 0; top: inherit; left: 0; position: absolute; pointer-events: none; }
[Titulo] Girando em Partes
[Titulo] Girando em Partes Adicione um Widget de Título no Elementor No Widget de Titulo coloque o Seguinte Código (em Texto mesmo) <span>?</span> Produto Surpresa<span>?</span> Depois dentro desse mesmo Widget em avançado coloque esse código CSS. Código CSS Copiar Código selector .elementor-heading-title{ display: flex; gap: 5px; /* Espaçamento entre itens */ } .giro{ animation: giro 1s linear infinite; /* Tempo da animação alterado para 1s */ transform-origin: center !important; /* Ponto de rotação central */ color: #5DFAA4; /* Cor para destaque visual (verde claro) */ } @keyframes giro{ 0%{ transform: rotate(0deg); /* Início da rotação */ } 100%{ transform: rotate(360deg); /* Fim da rotação */ } }
[Titulo] Texto preço uma linha
[Titulo] Texto preço uma linha Adicione um Widget de Título no Elementor No Widget de Titulo coloque o Seguinte Código (em Texto mesmo) <span>12x de</span> R$97,99 Depois dentro desse mesmo Widget em avançado coloque esse código CSS. Código CSS Copiar Código .destaque-pequeno{ font-size: 30px; /* Tamanho da fonte desejado */ font-weight: 400; /* Peso normal */ }
[Titulo] Texto preço duas linha
[Titulo] Texto preço duas linha Adicione um Widget de Título no Elementor No Widget de Titulo coloque o Seguinte Código (em Texto mesmo) <span>5x<br><span style=”font-weight:400″> de</span></span> R$20,50 Depois dentro desse mesmo Widget em avançado coloque esse código CSS. Código CSS Copiar Código .menor{ font-size: 1.5rem !important; display: flex; flex-direction: column; align-items: center; line-height: 1em; } selector .elementor-heading-title{ display: flex; align-content: center; align-items: center; gap: 0.5rem }
[Titulo] Texto Preenchendo
[Titulo] Texto Preenchendo Adicione um Widget de Título no Elementor Não precisa definir Classe CSS Tire a cor do Título (Deixe transparente) Dentro do Widget de Titulo coloque o seguinte CSS / Avançado Custom CSS Código CSS Copiar Código selector{ -webkit-text-stroke-width: 0.3px; /* Espessura do contorno de texto */ -webkit-text-stroke-color: #FFFFFF; /* Cor do contorno (branco) */ display: table; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; text-align: center; margin: 0 auto; /* Centraliza o elemento */ } selector .elementor-heading-title::before{ content: “Texto sendo preenchido”; /* Nova frase de preenchimento */ color: #FFFFFF; /* Cor do texto animado (branco) */ position: absolute; top: 0; width: 0%; height: 100%; text-align: left; overflow: hidden; white-space: nowrap; border-image: linear-gradient(0deg,#7B24F8,#A35DFF)1 !important; /* Cor da barra animada (roxo) */ -webkit-animation:animateX 6s linear infinite; animation:animateX 6s linear infinite; /* Aplica a animação */ } @-webkit-keyframes animateX{ 0%,10%,100%{ width:0%; } 70%, 90%{ width: 100%; } } @keyframes animateX{ 0%,10%,100%{ width:0%; } 70%, 90%{ width: 100%; } } selector { backdrop-filter: blur(20px); /* Filtro de desfoque */ -webkit-backdrop-filter: blur(20px); /* Filtro WebKit */ }
[Titulo] Alterando peso + Cor
[Titulo] Alterando peso + Cor Adicione um Widget de Título (pode ser de editor de texto também, mas dai cole o código dentro da edição de código) no Elementor Dentro do Widget de Texto/Titulo coloque o seguinte CSS Código CSS Copiar Código .destaque { font-weight: 900; /* Peso de fonte extra-negrito */ color: #00FF73; /* Cor verde vibrante */ } Para aplicar este estilo, use a tag <span> com o novo nome da classe, Exemplo: O produto <span>FRASE DESTACADA AQUI</span> está em promoção esta semana.
[Titulo] Alterando peso de fonte
[Titulo] Alterando peso de fonte Adicione um Widget de Título (pode ser de editor de texto também, mas dai cole o código dentro da edição de código) no Elementor Não precisa definir classe CSS Coloque o código <span> com o estilo de peso de fonte (font-weight) no trecho que você quer destacar: Nesse exemplo usei: Destaque <span style=”font-weight: 600;”>essa parte</span> do texto Código Copiar Código Aprenda a como destacar partes do seu texto de forma separada, com pesos diferentes.
[Bordas] Animada loop
[Bordas] Animada loop Você vai criar a seguinte estrutura, uma sessão para os cards (nessa sessão defina a Classe CSS: card) e dentro dela crie o seu Card com a Classe CSS: media-object) Configure o Container Card com uma altura Mínima (Exemplo usei 350px) Aplique o Código CSS no Container do Card Código CSS Copiar Código .card { isolation: isolate; } .media-object { –border-width: 2px; /* Variável para largura da borda */ –radius: 24px; /* Variável para raio da borda */ position: relative; border-radius: var(–radius); border: var(–border-width) solid transparent; width: 500px; /* Largura do objeto */ height: 200px; /* Altura do objeto */ } .media-object::before { content: ” “; position: absolute; inset: calc(var(–border-width) * -1); border: inherit; border-radius: inherit; background-image: conic-gradient(from var(–angle), #696969 80%, #45FF67 88%, #45FF67 92%, #696969 100%); /* Gradiente cônico */ background-origin: border-box; -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black); mask: linear-gradient(black, black), linear-gradient(black, black); -webkit-mask-clip: content-box, border-box; mask-clip: content-box, border-box; -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 3s linear infinite; /* Animação giratória */ } .media-object:hover::before { animation-play-state: paused; /* Pausa a animação ao passar o mouse */ } @property –angle { syntax: ““; inherits: true; initial-value: 0turn; } @keyframes spin { to { –angle: 1turn; /* Animação para girar o gradiente */ } }
[Bordas] Cima Descendo
[Bordas] Cima Descendo Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { z-index: 1; /* Nível base */ } selector:before { content: “”; position: absolute; z-index: 10; /* Acima do conteúdo */ border-radius: 20px; /* Cantos arredondados */ margin: 0px; margin-top: 0px; pointer-events: none; /* Não interage */ top: 0; left: 0; right: 0; bottom: 0; padding: 4px; /* Espaçamento da borda */ background: linear-gradient(to bottom, #00FF73, transparent); /* Gradiente verde vibrante */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara WebKit */ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara padrão */ -webkit-mask-composite: xor; /* Recorte WebKit */ mask-composite: exclude; /* Recorte padrão */ }
[Bordas] Cantos + Arredondamento
[Bordas] Cantos + Arredondamento Você vai aplicar o código CSS dentro do Container Principal que está criando o seu Card (Simples, não precisa definir Classe CSS) Código CSS Copiar Código selector { z-index: 1; /* Nível do seletor */ } selector:before { content: “”; position: absolute; z-index: 10; /* Z-index acima */ border-radius: 20px; /* Cantos arredondados */ margin: 0px; margin-top: 0px; pointer-events: none; /* Ignorar cliques */ top: 0; left: 0; right: 0; bottom: 0; padding: 4px; /* Largura da borda */ background: linear-gradient(-35deg, #00FF73, transparent, transparent, #5DFAA4); /* Gradiente de luz verde */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara WebKit */ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Máscara padrão */ -webkit-mask-composite: xor; /* Efeito de recorte */ mask-composite: exclude; /* Efeito de recorte */ }