Tirar dúvidas pelo WhatsApp!

Textos

Riscar palavra e mudar a cor 01

CSS – Riscar palavras e mudar a cor dos riscos no Elementor

No conteúdo HTML do widget de texto, envolva as palavras a serem riscadas com <riscar>palavra aqui</riscar>. Salve e atualize a página para aplicar as alterações.
				
					selector riscar{

text-decoration-line: line-through;

-webkit-text-decoration-line: line-through;

text-decoration-color: #E90404;

-webkit-text-decoration-color: #E90404;

}

Título Degradê

CSS – Título em Degradê de maneira diferente

Para aplicar um gradiente a um título no Elementor, adicione a classe degrade ao título na aba Avançado.
				
					degrade {

background-image: linear-gradient(90deg, rgba(39,193,97,1) 0%, rgba(5,255,0,1) 100%);

background-clip: text;

font-weight: bolder;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

box-decoration-break: clone;

-webkit-box-decoration-break: clone;

}

Título com Degradê

CSS – Título em Degradê

				
					selector {
background: linear-gradient(to right, #caf123 0%, #73f1d1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Riscar palavra e mudar a cor 02

CSS – Riscar palavras e mudar a cor dos riscos no Elementor

No conteúdo HTML do widget de texto, envolva as palavras a serem riscadas com <riscar>palavra aqui</riscar>. Salve e atualize a página para aplicar as alterações.
				
					selector riscar { text-decoration-line: line-through; -webkit-text-decoration-line: line-through; text-decoration-color: #E6E6E6; -webkit-text-decoration-color: #E90404; text-decoration-thickness: 2px; /* Ajuste a espessura conforme necessário / -webkit-text-decoration-thickness: 1px; / Para navegadores baseados em WebKit */ }

Riscar palavra e mudar a cor 02

CSS – Riscar palavras e mudar a cor dos riscos no Elementor

No conteúdo HTML do widget de texto, envolva as palavras a serem riscadas com <riscar>palavra aqui</riscar>. Salve e atualize a página para aplicar as alterações.
				
					selector riscar { text-decoration-line: line-through; -webkit-text-decoration-line: line-through; text-decoration-color: #E6E6E6; -webkit-text-decoration-color: #E90404; text-decoration-thickness: 2px; /* Ajuste a espessura conforme necessário / -webkit-text-decoration-thickness: 1px; / Para navegadores baseados em WebKit */ }

Metade do fundo com cor

CSS – Aplique uma cor de fundo em metade do texto no Elementor

Insira o código CSS fornecido em “Custom CSS”. Salve e atualize a página para ver as alterações.
				
					selector bg-texto {
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15%, rgba(255,198,16,1) 15%, rgba(255,198,16,1) 40%, rgba(255,255,255,0) 40%);
}

Mudar altura da quebra de linha

CSS – Para controlar a altura da quebra de linha usando a tag <br> no Elementor

				
					selector br {
  display: block;
  content: "";
  margin-top: 0.5em;
}

Alterar o tamanho da palavra

CSS – Para alterar o tamanho de palavras específicas em um título no Elementor, edite a página com o Elementor e selecione o widget de título.

				
					<span style="font-size: 24px;"> palavra aqui</span>

Alterar o tamanho da palavra

CSS – Para alterar o tamanho de palavras específicas em um título no Elementor, edite a página com o Elementor e selecione o widget de título.

				
					<span style="font-size: 24px;"> palavra aqui</span>

Mudar a cor de algumas palavras

CSS – Mudar a cor dos título em somente algumas palavras

Salve e atualize a página para ver as alterações.
				
					<span style="color:#0D4191">TEXTO</span>

Efeito hover de texto

CSS – Adicione um efeito de hover ao texto no Elemento

				
					selector {
    opacity: 0;
    transition: 0.5s ease-in-out;
}

selector:hover {
    opacity: 1;
}

Balancear texto

CSS – Tenta distribuir melhor o texto entre as linhas para evitar palavras viuvas.

Cole em Custom CSS no widget que você quer balancear o texto

				
					selector{
	text-wrap: balance;;
}

Mudar cor de texto em negrito

CSS – Altera a cor da tag <b> em negrito

Coloque o texto dentro de <b>TEXTO EM NEGRITO</b> e cole o CSS Geral da página
				
					b{
color: #BFFF2A !important;
}

Negrito com degradê

CSS – Degrade em negrito na tag <b>

Coloque o texto dentro de <b>TEXTO EM NEGRITO</b> e cole o CSS Geral da página
				
					b {
  background: linear-gradient(90deg, #BFFF2A, #D6FF75);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Remover linha inferior do link

CSS – Este código remove o sublinhado padrão dos links.

Cole o código no CSS Geral da página.
				
					a{
text-decoration: none !important;
}

Degradê animado

CSS – Texto com degradê animado

Cole no Custom CSS do seu widget de título.
				
					selector  {
  transition: all 1s ease;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textoDegrade 3s ease-in-out infinite alternate;
  background-image: linear-gradient(45deg, #73A400, #F0FFCD);
  background-size: 300% 200%;
}

@keyframes textoDegrade {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

Corrigir espaçamento do texto

CSS – Corrigir espaçamento inferior do widget “Editor de texto”

Cole no Custom CSS do widget.
				
					p:last-child{
    margin-bottom:0px;
}

.elementor-widget-text-editor p:last-child{
    margin-bottom:0px;
    margin-top:0px;
}

Scroll na descrição do image box

CSS – Adiciona rolagem personalizada na descrição do widget Image Box.

Cole esse código no Custom CSS do widget “Image Box”
				
					selector .elementor-image-box-title {
  padding-top: 40px;
}

selector .elementor-image-box-description {
  height: 200px;
  padding: 0 20px;
  margin-bottom: 30px;
  overflow-y: scroll;
}

selector .elementor-image-box-content::before {
  content: " ";
  background: linear-gradient(to bottom, transparent, black);
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 20%;
  bottom: 0;
  z-index: 2;
  left: 0;
}

selector .elementor-image-box-description::-webkit-scrollbar-thumb {
  background-color: #BFFF2A !important;
  border-radius: 10px;
}

selector .elementor-image-box-description::-webkit-scrollbar {
  width: 5px !important;
}

selector .elementor-image-box-description::-webkit-scrollbar-track {
  background: linear-gradient(to top, transparent, #131313, transparent) !important;
}

Alterar cor de seleção

CSS – Altera a cor de fundo da seleção e do texto.

				
					*::selection{
	background: #BFFF2A; /*cor da seleção */
    color: #ffffff; /*cor do texto */

}