[Titulo] Fundo solido cor – Area
[Titulo] Fundo solido cor – Area Adicione um Widget de Título no Elementor No Widget de Titulo coloque o Seguinte Código (em Texto mesmo) <span> Seu </span> texto aqui Depois dentro desse mesmo Widget em avançado coloque esse código CSS. Código CSS Copiar Código selector span.destaquebg { background:#F30000; color:#fff; /* se quiser contraste */ padding:4px 8px; border-radius:4px; }
[Titulo] Fundo solido – Cor
[Titulo] Fundo cor Adicione um Widget de Título no Elementor Não precisa definir Classe CSS Aplique esse código CSS dentro do Widget Código CSS Copiar Código selector{ background: #F30000; }
[Titulo] Brilho Hover
[Titulo] Brilho Hover Adicione um Widget de Título no Elementor Defina a Classe CSS no Widget: brilho-hover Aplique esse código CSS dentro do Widget Código CSS Copiar Código .brilho-hover{ transition: 0.5s all; /* Transição suave */ } .brilho-hover:hover{ text-shadow: 0 0 5px #00FF73, /* Verde vibrante (mais escuro) – Brilho interno */ 0 0 20px #00FF73, 0 0 50px #5DFAA4, /* Verde claro – Brilho intermediário */ 0 0 100px #5DFAA4 !important; /* Verde claro suave – Brilho externo (para fora) */ }
[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.