[CSS PERSONALIZADO] Deixar itens transparentes:

selector {opacity: 0.3}

(trocar o 0.3 pelo valor de opacidade que quiser colocar)
___

[CSS PERSONALIZADO] Corrigir borda branca (scroll horizontal) nos cantos da página:

html,
body{
width:100%;
overflow-x:hidden;
}
 
___

[CSS PERSONALIZADO] Cor de destaque em textos:

.destaque {
    color: #ffffff;
    background-color: #000000;
    padding: 2px 0px 2px 0px;
    border-radius: 2px
}

(Trocar os valores como quiser. No campo de texto html, colocar <span class="destaque">Texto aqui</span>)
___

[CSS PERSONALIZADO] Efeito de vidro embaçado:

selector {
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
}

(Personalizar os valores/cores como desejar) 
___

[CSS PERSONALIZADO] Checkbox de Formulário (LGPD) abaixo do botão:

.elementor-field-type-acceptance {
    order: 1;
}
___

[CSS PERSONALIZADO] Colocar efeito neon somente no botão em formulários:

selector .elementor-button[type="submit"] {
box-shadow: 0 0 20px 1px #01FBFD;
}

(Personalizar os valores/cores como desejar)
___

[CSS PERSONALIZADO] Efeito de carrossel contínuo:

selector .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

(Deixar os valores conforme imagem abaixo. Personalize o Animation Speed como desejar)
Imagem
___

[CSS PERSONALIZADO] Aumentar ícones em botões:

selector .elementor-button-icon i:before {
    font-size: 30px;
    vertical-align:middle;
    }

.elementor-button-content-wrapper {
    align-items: center
}

(Alterar o tamanho como desejar). 
___

[HTML] Acordeão fechado ao abrir a página:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>

(Colocar em um widget HTML) 
___

[HTML] Redirecionar páginas após x segundos:

<meta http-equiv="refresh" content="5 url=https://dominioaqui.com/" >

(trocar o 5 pela quantidade de segundos e a url pela página de destino)
___

[HTML] Bloquear clique em vídeos (embedar com o widget HMTL):

<div class="elementor-element elementor-element-50400e2 elementor-widget elementor-widget-html" data-id="50400e2" data-element_type="widget" data-widget_type="html.default">
<div class="elementor-widget-container">
<div style="position: relative; height: 0; padding-bottom: 56.2%; padding-top: 0;">
<iframe style="position: absolute !important; width: 100% !important; height: 100% !important; z-index: 100" src="https://www.youtube.com/embed/ID-DO-VIDEO?enablejsapi=0&amp;autoplay=0&amp;modestbranding=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;hd=1&amp;wmode=transparent&amp;enablejsapi=0" frameborder="0" allowfullscreen=""></iframe>
<div style="position: absolute;top: 0;width: 100%;height: 70px;background-color: transparent;z-index: 101;left: 0;"></div>
<div style="position: absolute;bottom: 0;width: 100%;height: 50px;background-color: transparent;z-index: 101;left: 0;"></div>


(Alterar ID do vídeo no código, onde está escrito ID-DO-VIDEO. Na url do seu vídeo, o ID fica após o watch?v=. Exemplo: https://www.youtube.com/watch?v=O-ID-FICA-AQUI)
___

[HTML] Cor de destaque em textos: 

<span style="background: #000000; color: #ffffff;"> Texto aqui </span>

(Personalizar o texto e as cores como desejar)
___

[HTML] Link em campos HTML:

<a href="https://www.instagram.com/ciparoni/" target="_blank" style="color:#FFFFFF;"> @ciparoni </a>

(Personalizar a url, texto e as cores como desejar)
Othon Ciparoni — 22/10/2021
[HTML] Incorporar chat ao vivo do Youtube:

<iframe width=500 height=500 src="https://www.youtube.com/live_chat?v=IDDOVÍDEOAQUI&embed_domain=seudominio.com" ></iframe>

Mude as configurações de largura (width) e altura (height) como desejar, substitua o ID do vídeo pelo ID da transmissão ao vivo (é o código que fica depois da barra quando você coloca para compartilhar a transmissão ao vivo. Ex: youtu.be/B0wq1MDIM57) e, por último, coloque o domínio do site em que o vídeo será embedado onde está escrito "seudominio.com". 
Luana Bonin — 22/10/2021
[CSS PERSONALIZADO] Remover transparência do texto no input do formulário:

.elementor-field-group .elementor-field-textual::placeholder {
    opacity: 1;
}
 
-----------

[CSS PERSONALIZADO] Adicionar espaço entre ícones de redes sociais (corrige bug do WP Rocket ao minificar CSS):

.elementor-social-icon:last-child {
    margin: 5px;
}
 
Starten agencia — 04/11/2021
[CSS PERSONALIZADO] [BOTÃO] [EFEITO DE PULSAR] 

#bt_pulsar {-webkit-animation: pulse 1.0s infinite;}

#bt_pulsar:hover {-webkit-animation: none;}
Othon Ciparoni — 04/11/2021
[WIDGET HTML] Transferir UTMs para o link de checkout da Hotmart (sem formulário, somente com botão)

<script>
(function() {
const utmParamQueryString = new URLSearchParams(window.location.search);
if (utmParamQueryString.toString()) {
var navLinks = document.querySelectorAll('a');
navLinks.forEach(function(item) {
if (item.href.indexOf('pay.hotmart.com') !== -1) {
if (item.href.indexOf('?') === -1) {
item.href += '?' + utmParamQueryString.toString();
} else {
item.href += '&' + utmParamQueryString.toString();
}
}
});
}
})();
</script>

Checar se o link do checkout está igual ao do código (pay.hotmart.com, e não payment.hotmart.com). Se não estiver, adaptar a url no código.
Fagner — 09/11/2021
[CSS PERSONALIZADO] Deixar o menu com efeito de vidro

selector{
    position: fixed;
    width: 100%;
    background: rgba( 255, 255, 255, 0.10 );
backdrop-filter: blur( 2.5px );
-webkit-backdrop-filter: blur( 2.5px );
}
Othon Ciparoni — 14/11/2021
[WIDGET HTML] Seções com Delay de tempo:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>
</head>

<script>
$('.delay').hide();
setTimeout(function() {
$('.delay').show();
}, 10000);
</script>

Alterar o 10000 (milissegundos, equivalente a 10 segundos) para o tempo desejado e colocar a palavra delay  no campo de Classe CSS  das seções que deseja esconder.

IMPORTANTE: adicione o widget html com esse código no rodapé da página, como último elemento. 
Leandro Silva — 17/11/2021
[CSS PERSONALIZADO] Fazer qualquer animação de entrada repetir em loop infinitamente.

selector {
  animation-iteration-count: infinite;
}
Othon Ciparoni — 19/11/2021
[CSS PERSONALIZADO] Alterar as cores da barra de rolagem do navegador:

body::-webkit-scrollbar {
width: 12px;
}

body::-webkit-scrollbar-track {
background: #202020;
}

body::-webkit-scrollbar-thumb {
background-color: #EA3232;

border-radius: 10px;

border: 2px solid #202020;

}

(Personalizar os valores/cores como desejar)
Luã Pascoal Ramos — 24/11/2021
[CSS PERSONALIZADO] Pulsing Button

https://codepen.io/seansean11/pen/dhwzj

selector .elementor-button {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);
  -webkit-animation: test 1.5s infinite;
}

@-webkit-keyframes test {
  0% {
    transform: scale(.9);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);
  }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
} 
CodePen
Sean Michael
Pulsing Button
Pulsing button using css3 keyframe animation....
Pulsing Button
Luã Pascoal Ramos — 25/11/2021
[CSS PERSONALIZADO] Botões animados

https://freefrontend.com/css-border-animations/
https://dev.to/webdeasy/top-20-css-buttons-animations-f41
Luana Bonin — 29/11/2021
[CSS PERSONALIZADO] Imagem com movimento circular em loop

.effectSwing {
  animation: swing 1s infinite;
  -webkit-animation: swing 1s infinite;
}

.img-rounder {
  -webkit-animation: myOrbit 4s linear infinite;
  -moz-animation: myOrbit 4s linear infinite;
  -o-animation: myOrbit 4s linear infinite;
  animation: myOrbit 4s linear infinite;
}

@-webkit-keyframes myOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg) translateX(15px) rotate(360deg);
  }
}

@-moz-keyframes myOrbit {
  from {
    -moz-transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    -moz-transform: rotate(-360deg) translateX(15px) rotate(360deg);
  }
}

@-o-keyframes myOrbit {
  from {
    -o-transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    -o-transform: rotate(-360deg) translateX(15px) rotate(360deg);
  }
}

@keyframes myOrbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(-360deg) translateX(15px) rotate(360deg);
  }
}
 
Eduardo Ozoterio — 13/12/2021
[UPDATE] [CSS PERSONALIZADO] Alinhar ícones de lista no topo:

selector.elementor-widget .elementor-icon-list-item, .elementor-widget .elementor-icon-list-item a {
    align-items: flex-start;
}

selector.elementor-widget .elementor-icon-list-text {
    position:relative;
    top:-4px; /adapte esse valor/
}

Obs.: A segunda parte do código serve para alinhar o ícone com a primeira linha da lista 
Eduardo Ozoterio — 13/12/2021
[CSS PERSONALIZADO] Remover espaço/margin no final do widget de texto (na página toda):

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

Obs.: Cole na aba avançado das configurações de página (engrenagem no canto inferior esquerdo)
Eduardo Ozoterio — 14/12/2021
[CSS PERSONALIZADO] Alinhar zoom da imagem da galeria ao topo (útil para portfólio de landing pages):

selector .elementor-gallery-item__image.e-gallery-image {
    background-position: top center;
}
 
Matheus Valencio — 14/12/2021
[CSS PERSONALIZADO]

 .small {
  font-size: small;
}

Se alguém tiver problema em colocar a caixa de aceitação no formulário não muda a fonte e fica gigante. 
Luana Bonin — 14/12/2021
[CSS PERSONALIZADO] Texto Outline (deixar o texto transparente e alterar a cor e espessura da linha):

seletor{
    color: #fff0;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
}

PS.: Não é todo tipo de fonte que fica bom, algumas são mal construídas.

Atualizando: Elementor 3.5.2 já tem essa função ^^ 
Luana Bonin — 16/12/2021
[CSS PERSONALIZADO] Sombra Curvada (funciona na coluna)

:root {
  --width: 50%;
  --height: 60%;
  --bottom: 30px;
  --origin: 6%;
  --opacity: 0.5;
}
selector{
    position: relative;
    z-index: 9;
}
selector::before{
    content: '';
    height: var(--height);
    position: absolute !important;
    bottom: var(--bottom);
    right: var(--origin);
    width: var(--width);
    background: #000;
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: skewY(7.5deg);
            transform: skewY(7.5deg);
    -webkit-filter: blur(15px);
            filter: blur(15px);
    opacity: var(--opacity);
    z-index: -9 !important;
}
selector::after{
    content: '';
    height: var(--height);
    position: absolute !important;
    bottom: var(--bottom);
    left: var(--origin);
    width: var(--width);
    background: #000;
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: skewY(-7.5deg);
            transform: skewY(-7.5deg);
    -webkit-filter: blur(15px);
            filter: blur(15px);
    opacity: var(--opacity);
    z-index: -9 !important;
}

Créditos: https://youtu.be/FRBmPxzyWmE 
YouTube
Jim Fahad Digital
Elementor Curved Box Shadow Effect | WordPress Elementor Pro Tutori...
Imagem
Eduardo Ozoterio — 18/12/2021
[CSS PERSONALIZADO] Efeito vidro embaçado no contador

selector .elementor-countdown-item {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur( 10px);
}

Obs.: Edite a cor, borda e outras coisas na aba estilo normalmente. 
Eduardo Ozoterio — 18/12/2021
[CSS PERSONALIZADO] Adicionar CSS em apenas um breakpoint (ou diferentes CSS`s para cada breakpoint)

Tablet e mobile:
@media only screen and (max-width: 1024px) {
    SEUS-ESTILOS-AQUI
}

Só no mobile:
@media only screen and (max-width: 767px) {
    SEUS-ESTILOS-AQUI
}

Só no tablet:
@media only screen and (min-width: 768px) and (max-width: 1024px) { 
    SEUS-ESTILOS-AQUI
}

Só no desktop:
@media only screen and (min-width: 1025px) { 
     SEUS-ESTILOS-AQUI
}


EXEMPLO- Eu quero que um background seja vermelho🔴 no desktop, azul🔵 no tablet e verde🟢 no mobile, o código ficaria assim:

selector {background-color: red;}

@media only screen and (max-width: 1024px) {
     selector {background-color: blue;}
}

@media only screen and (max-width: 767px) {
     selector {background-color: green;}
}
Guilherme Speranzini — 21/12/2021
Botão com gradiente animado

Dentro do widget de botão, cole no CSS customizado:

.elementor-button {    background: linear-gradient(131deg, #962f3b, #dbb48f);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Ou monte o seu gradiente customizado aqui https://www.gradient-animator.com/

Não esqueça de adicionar o seletor ".elementor-button" no lugar do ".css-selector" que o site irá gerar.

Crédito: https://www.youtube.com/watch?v=p3WEcwVG-W4 
Othon Ciparoni — 29/12/2021
[WIDGET HTML] Resetar a contagem regressiva após o cronômetro zerar, quando o usuário retornar (ou atualizar) à página 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script>
jQuery( document ).ready( function ( $ ) {
    $(document).on( 'countdown_expire', function() {

          Object.keys(localStorage)
        .filter(key => key.endsWith('evergreen_interval'))
        .forEach(key => localStorage
        .removeItem((key)))

          Object.keys(localStorage)
        .filter(key => key.endsWith('evergreen_due_date'))
        .forEach(key => localStorage
        .removeItem((key)))

    } );
} );
</script>

Inserir como último elemento, no rodapé da página. 
Othon Ciparoni — 02/01/2022
[WIDGET HTML] Embedar arquivos PDF

Suba o PDF no Wordpress pela Biblioteca de Mídia, copie a url do arquivo e substitua a url de exemplo no código de iframe abaixo (sem www e sem https, somente a partir do domínio):

<iframe src="https://docs.google.com/viewer?url=exemplo.com/arquivo.pdf&embedded=true" style="width:600px; height:600px; frameborder="1"></iframe>

Altere a altura (height) e largura (widht) como desejar.
João Pelissari — 07/01/2022
[CSS PERSONALIZADO] Alinhar Checkbox com a Label

input[type="checkbox"], label {
    float: left;
    line-height: 1.6em;
    height: 1.6em;
    margin: 0px 2px;
    padding: 0px;
    font-size: inherit;
}

input[type="checkbox"] {
    clear: left;
}
Leo Vargas — 11/01/2022
[ WIDGET HTML ] Script para substituir favicon em uma página específica
<script>
    $('head').append('<link rel="icon" href="https://seudominio.com.br/caminho-da-imagem-do-favicon.png" sizes="32x32" />');
</script>
Anthony Martins Vicente — 12/01/2022
[CUSTOM CSS]  Código para fazer borda com gradiente 

selector  {
    border: 1px solid;
    border-image: linear-gradient(90deg,rgba(60,74,83,0),#98144B,rgba(60,74,83,0)) 1;
    border-left: none;
    border-bottom: none;
    border-right: none;
}

RGBA = Fundo do background
Othon Ciparoni — 13/01/2022
Sobre o código acima: troquem o "none" por 0px. Não estava funcionando no mobile (pelo menos na minha página).
Eduardo Ozoterio — 14/01/2022
[CSS PERSONALIZADO] Mudar cor de fundo de uma palavra com padding

selector bg-texto {
    font-weight: 700;
    background:#ff0000;
    padding: 0px 10px 0px 10px;
}

Cole esse código no Custom CSS e coloque o texto entre as tags <bg-texto> e </bg-texto>.
Exemplo: Esse é um exemplo de <bg-texto>TEXTO DESTACADO</bg-texto>

Altere os valores para alcançar o resultado que desejam.

Créditos: Código compartilhado pelo @Cassio Bona Junior, só coloquei aqui para facilitar.
Othon Ciparoni — 15/01/2022
[CSS Personalizado] Degradê em botão de formulário

selector .elementor-button[type="submit"] {
background-image: linear-gradient(45deg, #314755 0%, #26a0da  100%)}
}

Altere o ângulo (deg), o código da cor (#) e a localização da cor (%) como preferir. Se quiser adicionar mais cores, basta adicionar outra cor seguindo o mesmo padrão:  ,(código da cor) (% da localização). 

Exemplo: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%)}
Cassio Bona Junior — 16/01/2022
[CSS Personalizado] Colocar "meio fundo" atrás do texto

selector linha {
    box-shadow: inset 0 -18px 0 #FFC610;
}

Insira esse código no Custom CSS e coloque o texto entre as tags <linha></linha>
Exemplo: <linha>Seu texto aqui</linha>
 
Imagem
Othon Ciparoni — 17/01/2022
[CSS Personalizado] Efeito hover com bordas animadas

selector:before {
border-bottom: 1px solid #2afea6;
border-top: 1px solid #2afea6;
content: "";
height: 100%;
left: 50%;
position: absolute;
top: 0;
transition: all 500ms;
width: 0;
}

selector:after {
border-left: 1px solid #2afea6;
border-right: 1px solid #2afea6;
content: "";
height: 0;
left: 0;
position: absolute;
top: 50%;
transition: all 500ms;
width: 100%;
}

selector:hover:before {
left: 0;
width: 100%;
}

selector:hover:after {
height: 100%;
top: 0;
}

Personalizar as cores da borda como desejar.
Kawan Poiati — 19/01/2022
[CSS PERSONALIZADO] Efeito neon em divisória

selector .elementor-divider-separator {
box-shadow: 0 0 20px 1px #EC1818DB;
}
Luana Bonin — 21/01/2022
Outra versão desse mesmo efeito que é possível ajustar a altura da linha:

selector linha {
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%);
}

Pra gerar esse código: https://cssgradient.io/
Assim:
Imagem
Imagem
Leo Vargas — 23/01/2022
[ CARROSSEL BOLADÃO ]
Insira este código no custom CSS do widget de carrossel:

selector::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:500;
    background-color:orange;
    background: rgb(0,0,0);
background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,1) 100%);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

selector .elementor-swiper-button-prev, selector .elementor-swiper-button-next{
    z-index: 9999;

}
Imagem
Patrick Pereira — 24/01/2022
[ CÓDIGO PARA DEIXAR O ÍCONE DE CORRETO EM UMA LISTA DE ÍCONES SEMPRE NO TOPO]

selector .elementor-icon-list-item {
   align-items: baseline;
}
selector .elementor-icon-list-item i {
    padding-top:5px;
}
Imagem
Othon Ciparoni — 25/01/2022
[CSS PERSONALIZADO] Botão da minha página de links

selector {
    backdrop-filter: blur( 20px );
    -webkit-backdrop-filter: blur( 20px );
    border-radius: 5px;
    border: 1px solid;
 border-image: linear-gradient(90deg,#F2298200, #F22982, #F2298200) 1;
 border-left:0px;
 border-bottom:0px;
 border-right:0px;
}

selector .elementor-button-icon i:before {
    font-size: 25px;
    vertical-align:middle;
    }

selector .elementor-button-text {
    padding-right: 20px;
    }

.elementor-button-content-wrapper {
     align-items: center
}

Altere as cores da borda (ali em border-image) como desejar.

Se não quiser inserir ícones, coloque somente o código do primeiro selector e desconsidere os demais. 
Imagem
Leo Vargas — 01/02/2022
[CARROSSEL ALINHAMENTO LATERAL ] - Deixei o JSON do modelo pra subir no Elementor.

Inserir esse código em Custom CSS:

selector .elementor-image-carousel-wrapper{ overflow:visible;}


selector .elementor-swiper-button.elementor-swiper-button-next
{
    top: -35px;
    right: 0px;
    position: absolute;
    z-index: 9999;
}

selector .elementor-swiper-button.elementor-swiper-button-prev
{
        top: -35px;
    right: 60px;
    left:inherit;
    position: absolute;
    z-index: 9999;
}
Imagem
{"content":[{"id":"341bbfe","settings":{"padding":{"unit":"px","top":"48","right":"350","bottom":"48","left":"350","isLinked":false},"layout":"full_width","margin_laptop":{"unit":"px","top":"48","right":0,"bottom":"64","left":0,"isLinked":false},"padding_laptop":{"unit":"%","top":"0","right":"10","bottom":"0","left":"10","isLinked":false}},"elements":[{"id":"783a3779","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"63a3978c","settings":{"title":"Carrossel Navega\u00e7\u00e3o Personalizada:","header_size":"h1","align":"left","title_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Sora","typography_font_size":{"unit":"px","size":35,"sizes":[]},"typography_font_weight":"700"},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"},{"id":"216e1735","settings":{"layout":"full_width","overflow":"hidden","margin":{"unit":"px","top":"0","right":0,"bottom":"0","left":0,"isLinked":true},"padding":{"unit":"px","top":"45","right":"350","bottom":"0","left":"350","isLinked":false},"padding_laptop":{"unit":"%","top":"0","right":"10","bottom":"0","left":"10","isLinked":false},"padding_mobile":{"unit":"px","top":"64","right":"24","bottom":"64","left":"24","isLinked":false},"custom_css":" "},"elements":[{"id":"30408dd4","settings":{"_column_size":100,"_inline_size":null,"space_between_widgets":0,"margin":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true},"padding":{"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":true}},"elements":[{"id":"2f259d7a","settings":{"carousel":[{"id":1739,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depoimento.png"},{"id":1740,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depoimento2.png"},{"id":1741,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depoimento3.png"},{"id":1745,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depo04.png"},{"id":1746,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depo03.png"},{"id":1747,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depo02.png"},{"id":1787,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depo5.png"},{"id":1788,"url":"https:\/\/leovargas.com.br\/wp-content\/uploads\/2022\/01\/depo6.png"}],"thumbnail_size":"full","slides_to_show":"5","slides_to_show_laptop":"4","image_stretch":"yes","navigation":"arrows","infinite":"no","arrows_size":{"unit":"px","size":31,"sizes":[]},"image_spacing":"custom","image_spacing_custom":{"unit":"px","size":63,"sizes":[]},"_padding_mobile":{"unit":"px","top":"0","right":"0","bottom":"0","left":"12","isLinked":false},"_mask_shape":"flower","custom_css":"selector .elementor-image-carousel-wrapper{ overflow:visible;}\n\n\nselector .elementor-swiper-button.elementor-swiper-button-next\n{\n    top: -35px;\n    right: 0px;\n    position: absolute;\n    z-index: 9999;\n}\n\nselector .elementor-swiper-button.elementor-swiper-button-prev\n{\n        top: -35px;\n    right: 60px;\n    left:inherit;\n    position: absolute;\n    z-index: 9999;\n}"},"elements":[],"isInner":false,"widgetType":"image-carousel","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"},{"id":"173fa797","settings":{"background_background":"classic","background_color":"#3A3A3A","margin":{"unit":"px","top":"64","right":0,"bottom":"0","left":0,"isLinked":false},"padding":{"unit":"px","top":"64","right":"0","bottom":"64","left":"0","isLinked":false}},"elements":[{"id":"6b426457","settings":{"_column_size":100,"_inline_size":null},"elements":[{"id":"2d121f37","settings":{"title":"C\u00f3digo a ser inserido em Custom CSS na aba Avan\u00e7ado do widget.","header_size":"h1","align":"center","title_color":"#FFFFFF","typography_typography":"custom","typography_font_family":"Sora","typography_font_size":{"unit":"px","size":18,"sizes":[]},"typography_font_weight":"400"},"elements":[],"isInner":false,"widgetType":"heading","elType":"widget"},{"id":"7df639d1","settings":{"language":"css","code":"selector .elementor-image-carousel-wrapper{ overflow:visible;}\n\n\nselector .elementor-swiper-button.elementor-swiper-button-next\n{\n    top: -35px;\n    right: 0px;\n    position: absolute;\n    z-index: 9999;\n}\n\nselector .elementor-swiper-button.elementor-swiper-button-prev\n{\n        top: -35px;\n    right: 60px;\n    left:inherit;\n    position: absolute;\n    z-index: 9999;\n}","theme":"twilight"},"elements":[],"isInner":false,"widgetType":"code-highlight","elType":"widget"}],"isInner":false,"elType":"column"}],"isInner":false,"elType":"section"}],"page_settings":[],"version":"0.4","title":"CARROSSEL BOLADAO 2","type":"page"}
elementor-1839-2022-02-01.json
5 KB
Guilherme Speranzini — 03/02/2022
Adicionar sombra (drop-shadow) a imagens PNG, SVGs e outros.

Selecione a imagem e adicione ao CSS personalizado:

selector {
        filter: drop-shadow(10px 10px 10px #00000087);
      } 
Imagem
Othon Ciparoni — 06/02/2022
[CSS PERSONALIZADO] Título em degradê

selector .elementor-heading-title{
background: linear-gradient(to right, #F22982 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Altere a direção (to right, to left, to top, top bottom ou então use ângulos, como 90deg), o código da cor (#) e a localização da cor (%) como preferir. 

Se quiser aplicar no widget de texto normal, ao invés do widget de título, mude o início do código para selector p{.
Othon Ciparoni — 10/02/2022
[WIDGET HTML] Todas as abas do acordeão abertas por padrão:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 
<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
 $('.elementor-tab-content').css('display', 'block'); }, delay); 
}); 
</script>
 
Luana Bonin — 10/02/2022
[CSS PERSONALIZADO] Evitar espaço em branco em ícone SVG customizado.

.elementor-icon i, .elementor-icon svg {
height: unset;
}
 
Heitor Vinícius — 18/02/2022
Cipa, dá para aplicar isso com um ícone?
Heitor Vinícius — 18/02/2022
Agora, foi. Deu certo aqui.

Usei esse código:

.elementor-icon i:before, .elementor-icon svg:before {

background: -webkit-gradient(linear, left top, left bottom, from(#F16800), to(#351700));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}
Imagem
Anthony Martins Vicente — 19/02/2022
[CUSTOM CSS]

/Hover de zoom com desfoque/
selector{
    --zoom-in: 1.1;
    --zoom-out: 0.9;

}
selector{
    transition: all .5;
}
selector:hover .card-box{
    filter: blur(5px);
    transform: scale(var(--zoom-out));
}
.card-box{
    transform: scale(1);
    transition: all .5s;
}
.card-box:hover{
    transform: scale(var(--zoom-in)) !important;
    z-index: 2;
    filter: blur(0px) !important;
}
selector .elementor-widget-wrap{
    transition: all .5s;
}
selector .card-box:hover .elementor-widget-wrap{
    background: var(--hover-background) !important;
}

Notas: Adicione "card-box" em cada coluna que deseja fazer o processo de zoom, após isso cole o codigo no custom css da sessão, seja ela interna ou normal. 

Tutorial e créditos caso tenham dúvidas ->https://www.youtube.com/watch?v=XMH8x9WTR1o 
YouTube
Jim Fahad Digital
Elementor BLUR ZOOM Hover Effect | WordPress Elementor Pro Tutorial...
Imagem
Imagem
Anthony Martins Vicente — 22/02/2022
[CSS PERSONALIZADO] Efeito neon em icones

selector {
  filter: drop-shadow(0px 0px 5px rgba(1, 158, 75, 0.48));
 
}

OBS: rgba para ficar com a cor opaca 
Imagem
Othon Ciparoni — 26/02/2022
[CSS PERSONALIZADO] Juntar ícone ao texto em botão justificado

selector .elementor-button-text{
    flex-grow:0;
}
 
Leo Vargas — 26/02/2022
[ INSERIR LINKS EM ÍTENS DO CARROSSEL ELEMENTOR ]

Quando inserido com o widget de código, esse script insere link nos ítens:

<style>.swiper-slide-image{cursor: pointer;} </style>

<script>
document.addEventListener('DOMContentLoaded', function () {

/* Edit the links HERE */
let links = [
'https://linkum.com.br/',
'https://linkdois.com.br/',
'https://linktres.com.br/',
'https://linkquatro.com.br/',
];

document.body.addEventListener('click', function (e) {
if (e.target.closest('.swiper-slide')){
let i = e.target.closest('.swiper-slide').getAttribute("data-swiper-slide-index");
location = links[i];
}
});
});
</script>
Luana Bonin — 26/02/2022
[CSS PERSONALIZADO] Borda com gradiente e cantos arredondados

selector {
  z-index:0;
}

selector:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding: 2px; /*espessura da borda*/
  border-radius: 15px;
  background: linear-gradient(to top, #ED0F69, #ED0F6900);
  -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;
}
 
Imagem
Othon Ciparoni — 03/03/2022
<HTML> Botões com duas linhas e tamanhos diferentes

TEXTO GRANDE AQUI<br><span style="font-size: .8em;">TEXTO MENOR AQUI</span>

Ajustar o tamanho (.8em) como desejar e alterar a altura da linha, na aba Estilo, para ajustar o espaçamento das frases (costumo usar 1.3em).
Imagem
Othon Ciparoni — 03/03/2022
<WIDGET HTML> Máscara para deixar o campo de telefone do formulário no formato (99) 99999-9999

<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
v_obj=o
v_fun=f
setTimeout("execmascara()",1)
}
function execmascara(){
v_obj.value=v_fun(v_obj.value)
}
function mtel(v){

v=v.replace(/\D/g,""); //Remove tudo o que não é dígito
v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos
v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos
return v;
}
function id( el ){
return document.getElementById( el );
}
window.onload = function(){
id('form-field-telefone').setAttribute('maxlength',15);
id('form-field-telefone').onkeypress =
function(){
mascara( this, mtel );
}
}
</script>

Inserir com widget de HTML no rodapé da página. Alterar o ID do campo, na aba avançado, para telefone (se não mudar o ID, não funcionará).
Imagem
Othon Ciparoni — 04/03/2022
[CSS PERSONALIZADO] Riscar palavra e mudar a cor do risco

selector riscar{
  text-decoration-line: line-through;
  -webkit-text-decoration-line: line-through;
  text-decoration-color: #03E3FD;
  -webkit-text-decoration-color: #03E3FD;
}

Mude o código da cor para a que preferir. Depois, coloque palavra que deseja riscar entre as tags <riscar> palavra aqui </riscar>. 
Othon Ciparoni — 04/03/2022
___

[CSS PERSONALIZADO] Alinhar o ícone do widget "Caixa de Ícones" à esquerda no mobile

selector .elementor-icon-box-wrapper {
display: flex;
}

@media (max-width: 767px) {
selector .elementor-icon-box-content {
    padding-left: 15px;
}

Ajuste a distância do ícone para o texto, alterando o valor do padding-left, como preferir. 
Imagem
___

[CSS PERSONALIZADO] Centralizar os textos dos campos do formulário

selector .elementor-field-textual {
    text-align: center;
}
 
Imagem
Othon Ciparoni — 05/03/2022
[CSS PERSONALIZADO] Animação para girar um elemento em looping

.girar{
    -webkit-animation: girar 10s linear infinite;
}

@-webkit-keyframes girar {
    from{
    -webkit-transform:rotate(Odeg);
    }
    to {
    -webkit-transform:rotate(360deg);
}
}

Adicione a palavra girar no campo de Classe CSS, na aba Avançado, do elemento que quer deixar girando. Altere a velocidade da rotação mudando os segundos, na segunda linha do código (10s), como desejar.
Guilherme Speranzini — 08/03/2022
Só um adendo. Tentei fazer isso mas quebrou o meu layout pq alterou todos os títulos da página, incluindo pop ups.

Então fiz que nem a linha (mais acima) e deixei assim:

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

Daí no título é só colocar <texto-degrade>Título</texto-degrade> 
Luã Pascoal Ramos — 10/03/2022
[CSS PERSONALIZADO] Animação de item flutuando

selector {  
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }   
}
 
Guilherme Speranzini — 11/03/2022
CSS para evitar scroll horizontal (quando vc deixa algum elemento maior do que a largura da tela).

Só ir nas configurações da página e colar:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Crédito: https://www.youtube.com/watch?v=Gc_nAiElaPk
YouTube
Jacob Vinjegaard
Fixing Unwanted Horizontal Page Scroll In Elementor With CSS
Imagem
Jones Santos — 24/03/2022
[CSS] Remover barra de scroll duplicada

body{
    width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
}
Othon Ciparoni — 29/03/2022
[CSS PERSONALIZADO] Deixar o acordeão na mesma largura que a imagem para descrições de módulos

selector .elementor-toggle-item{
    max-width: 235px;
    margin: 0 auto;
}

Alterar o valor do max-width para a mesma largura da imagem utilizada.
Imagem
Luã Pascoal Ramos — 02/04/2022
[SCRIPT PERSONALIZADO] Faça uma transição de cor INSANA nas suas páginas! 

Passo 1: Você precisará colocar um Widget HTML em qualquer parte da página e inserir esse script:

<script>
jQuery(function($){
    $(window).scroll(function() {

  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');

  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);

  $panel.each(function () {
    var $this = $(this);

    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });

      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });

}).scroll();
});
</script>


Passo 2: Vá nas configurações da página, na aba de Custom CSS, adicione as cores que quer usar no efeito e um efeito de transição igual está abaixo:

Use sempre color-<nome> igual está abaixo!
O valor 0.5s abaixo é o tempo de transição da cor, você pode alterar se quiser
body {
  transition: background-color 0.5s ease;
}
.color-default {
  background-color: #f6f6f6;
}
.color-black {
  background-color: #0b0b0b;
}


😍 O seu efeito já está configurado na sua página! Agora, para fazer funcionar, você deve:

Passo 3: Colocar a seção que quer o efeito com Altura: Ajustar à tela, Classe CSS: panel & Attributes: data-color|<nome> (igual o do color-<nome> configurado)

Sempre coloque na seção de cima e de baixo as mesmas coisas, mas no atributo mude a cor para a default da página.

Por fim: Clique em atualizar a página e veja o efeito! 
Imagem
Imagem
Imagem
Imagem
Imagem
Guilherme Speranzini — 02/04/2022
[SEÇÃO QUE MUDA COM HOVER] Fiz essa seção usando um tutorial do Jim Fahad. É bem fácil mas é bom seguir o vídeo porque são várias etapas.

https://www.youtube.com/watch?v=Ja8HuMZ0vR4

No mobile escondi a coluna e coloquei duas imagens. 
YouTube
Jim Fahad Digital
Hover Text to Change Image using Elementor | WordPress Elementor Pr...
Imagem
Adriano Costa — 06/04/2022
[TABS] Sendo que um dos desafio recentes da Copa do Cipa foi a página do Finch, separei o componente de tabs que usei aqui nessa página pra consulta própria mesmo, pretendo ir alimentando ela, facilita no copy/paste. Deixo aqui pra vocês também, pode ser que ajude alguém:
https://adrianocosta.com/componentes/

Tem o arquivo .json para baixar lá 
Web Designer para Infoprodutores | Adriano Costa
Componentes - Web Designer para Infoprodutores | Adriano Costa
Tabs com “caixas da imagem” Título maneiro Essa é a tab 01 Título maneiro Essa é a tab 02 Título maneiro Essa é a tab 03 Título maneiro Essa é a tab 04 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum sed augue porttitor dignissim. Maecenas quam arcu, vulputate quis orci quis, volutpat […]
Luã Pascoal Ramos — 06/04/2022
[CSS PERSONALIZADO] Adicionar ícones no formulário:

/*placeholder spacing*/
selector form.elementor-form .elementor-field-group-email input, .elementor-field-group-name input, .elementor-field-group-phone input, .elementor-field-group-message textarea{
    padding-left: 65px;
    padding-top: 13px;
    padding-bottom: 13px;
}

/*Icon size & position settings*/
selector form.elementor-form .elementor-field-group-email::before, .elementor-field-group-name::before, .elementor-field-group-phone::before, .elementor-field-group-message::before  {
    position: absolute;
    left: 25px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "";
    color: #C9667B;
    z-index: 999;
    font-size: 17px;
}

/*Name field*/
selector .elementor-field-group-name::before{
    content: "\f007"
}

/*Email field*/
selector form.elementor-form .elementor-field-group-email::before{
   content: "\f0e0";
}


/*Phone field*/
selector .elementor-field-group-phone::before{
    content: "\f095"
}


É necessário pegar o unicode do ícone na internet.
Raphael Mendonça — 08/04/2022
[CSS PERSONALIZADO][BOTÃO COM ANIMAÇÃO] Orion pulsando do botão e parando com hover 
selector {


  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;

  }

selector::before {

  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;

}

selector:hover, selector:focus {
  color: #01E800;
  transform: translateY(-6px);

}

selector:hover::before, button:focus::before {
  opacity: 1;
}

selector::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #01E800;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

selector:hover::after, button:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
Imagem
Matheus Lucas de Souza — 10/04/2022
[FAZER QUALQUER COISA VIRAR CARROSSEL NO ELEMENTOR]
https://www.youtube.com/watch?v=DP3Y0pUy4xg

Um trick mais que necessário para termos mais liberdade de criar carrosséis otimizados. 
YouTube
Jim Fahad Digital
Turn anything into a SLIDER in Elementor (No Plugin)
Imagem
Adriano Costa — 11/04/2022
[DESABILITAR CARREGAMENTO DE GOOGLE FONTS E ÍCONES]
Aí pessoal, normalmente utilizo esses códigos quando não quero carregar ícones do Elementor (eicons)/FontAwesome (fa) e Google fonts. Acho que rola fazer via opções do painel do Elementor, mesmo assim os utilizo...

Aparência > Editor de arquivos de tema > functions.php

// Disable Google fonts
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

// Disable FontAwesome (fa)
add_action('elementor/frontend/after_register_styles',function() {
    foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
        wp_deregister_style( 'elementor-icons-fa-' . $style );
    }
}, 20 );

// Disable Elementor icons (eicons)
add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 ); 
function remove_default_stylesheet() { 
    wp_deregister_style( 'elementor-icons' ); 
}
Leo Vargas — 13/04/2022
[BULLET POINTS INTERLIGADOS USANDO CSS]

Utilizado principalmente para apresentar informações que precisam transmitir a ideia de ligação, etapas ou continuidade.

Existem outras formas de fazer, mas eu gosto de fazer pelo CSS pela liberdade que temos.

As linhas e bullets são gerados a partir do código CSS aplicado no elemento. (Vou deixar o link pra download no final)

O elemento com classe ".point-list" irá receber um elemento de linha à sua esquerda, e também um elemento de círculo no canto superior esquerdo. O último com classe "point-list end-point-list" recebe apenas o círculo (que pode ser um ícone também).

.point-list::before{
    position: absolute;
    display: block;
    content: '';
    width: 4px;
    height: 100%;
    background-color:#CE0F26;
    left:15px;
}

.point-list::after{
    position: absolute;
    display: block;
    content: '';
    width: 32px;
    height: 32px;
    background-color:#CE0F26;
    border-radius:100%;
    left:0px;
    top:0px;
    background-size:60px;
    background-repeat: no-repeat;
}

.point-list.end-point-list::before{
    display: none;
}

Para exemplo e download do modelo pronto: https://leovargas.com.br/point-list-com-css/
Imagem
Leo Vargas
leovargas.com.br
Point List com CSS | Download
Georgia Caroline — 13/04/2022
[BOTÕES]
Site que tem todo o tipo de botão personalizado com código HTML/CSS:
https://uiverse.io/
Universe of UI elements made with HTML & CSS
Universe of UI elements made with CSS & HTML, ready to be used in your project. All code is open-source and free for personal or commercial use.
Universe of UI elements made with HTML & CSS
Heitor Vinícius — 14/04/2022
[CSS PERSONALIZADO] Borda arredondada com degradê:

selector {
  z-index:0;
      backdrop-filter: blur( 8px );
    -webkit-backdrop-filter: blur( 8px );
    border-radius:15px;
    margin:5px;
}

selector:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding: 2px;
  border-radius: 15px;
  background: linear-gradient(to top, #ED0F69, #ED0F6900);
  -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;
}
Imagem
Felipe Alcantara — 15/04/2022
[CSS PERSONALIZADO] Deixar o background animado:

selector {
    background: linear-gradient(16deg, #f200ff, #00c5ff, #ffffff);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
}
@keyframes AnimationName {
    0%{background-position:54% 0%}
    50%{background-position:47% 100%}
    100%{background-position:54% 0%}
} 
Felipe Alcantara — 15/04/2022
[CSS PERSONALIZADO] Animar a borda quando passa o mouse:

selector{
    --first-color: #5ddcff; 
    --second-color: #3c67e3;
    --third-color: #4e00c2;
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}
selector::before, selector::after{
    opacity: 0;
    content: "";
    transition: all 0.5s ease-in-out;
}
selector:hover::before, selector:hover::after{
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(
    var(--rotate)
    , var(--first-color), var(--second-color) 43%, var(--third-color));
    animation: spin 2.5s linear infinite;
    opacity: 1;
}
selector:hover::before {
  width: 104%;
  height: 104%;
  border-radius: 8px;
  top: -2%;
  left: -2%;
}
selector:hover::after {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scale(0.9);
  filter: blur(70px);
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
} 
Imagem
Felipe Alcantara — 15/04/2022
[CSS PERSONALIZADO] Animar a background do botão com efeito blur quando passa o mouse:

*Primeiro coloque um ID do botão em conteúdo. Coloquei ( ID01 )

#ID01{
 text-decoration: none;
 position: absolute;
 border: none;
 font-size: 14px;
 font-family: sora;
 color: #FFF;
 width:none;
 height: 3em;
 line-height: 0px;
 text-align: center;
 background: linear-gradient(90deg,#FFEAF5,#EB007A,#FFEAF5);
 background-size: 400%;
 border-radius: 5px;
 z-index: 1;
}

#ID01:hover {
 animation: ani 10s linear infinite;
 border: none;
}

@keyframes ani {
 0% {
  background-position: 0%;
 }

 100% {
  background-position: 400%;
 }
}

#ID01:before {
 content: '';
 position: absolute;
 top: -5px;
 left: -5px;
 right: -5px;
 bottom: -5px;
 z-index: -1;
 background: linear-gradient(90deg,#FFEAF5,#EB007A,#FFEAF5);
 background-size: 400%;
 border-radius: 5px;
 transition: 3s;
}

#ID01:hover:before {
 filter: blur(20px);
}

#ID01:active {
 background: linear-gradient(90deg,#FFEAF5,#EB007A,#FFEAF5);
} 
Imagem
Brunno Martins — 18/04/2022
Personalizar os pontos/dots do carrossel:
- Contribuição: @Othon Ciparoni 

selector .swiper-pagination-bullet{
    height: 2px;
    width: 50px;
}

Na aba estilo, deixe essa opção de tamanho sem nada, senão irá sobrescrever o código CSS.
Imagem
Imagem
Willian Dutras — 18/04/2022
[EFEITO DE RÚIDO ANIMADO]
Crie um widget de código HTML em qualquer lugar da página:
<div class="noise"></div>

adicione o código css nessa class "noise":
.noise {
    display: block;
    width: 100vw;
    height: 100vh;
    opacity: .17;
    background-image: url('URL_DA_IMAGEM_GIF.gif');
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: plus-lighter; //opcional
} 
Imagem
quem quiser ver o efeito na prática, eu subi nessa LP aqui:
https://segredosdoaltovalor.com.br/ 
Israel Oliveira — 19/04/2022
Código CSS para animar ícone Arrow (ficar pulsando)

.animation_arrow{
    animation-iteration-count: infinite!important;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

--------------------------

Em Classe CSS colocar animation_arrow
Em motion effects, colocar a opção FLASH
Israel Oliveira — 19/04/2022
Demonstração
Antonio Felipe — 20/04/2022
{CSS PERSONALIZADO] [BOTÃO COM ANIMAÇÃO EM DEGRADÊ] Para quem quiser deixar o botão da página com uma animação íncrivel.

Obs: Utilizar o widget de botão do Elementor

:root{
    --grad1: #03a9f4;
    --grad2: #f441a5;
    --grad3: #ffeb3b;
    --grad4: #03a9f4;
}

selector a{
    background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4));
    background-size: 400%;
    z-index: 1;
    position: relative;
}
selector a:hover{
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}

Créditos: https://www.youtube.com/watch?v=bIm06CMJaOA&ab_channel=FarjanaRashid
YouTube
Farjana Rashid
How to create glowing effect on button hover | Elementor tutorial |...
Imagem
Everson Henrique — 21/04/2022
site que mostra como criar formas em CSS
https://css-tricks.com/the-shapes-of-css/
CSS-Tricks
Chris Coyier
The Shapes of CSS | CSS-Tricks
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have
The Shapes of CSS | CSS-Tricks
[CSS PERSONALIZADO]

Site com icones personalizados em CSS
https://cssicon.space/#/
[CSS PERSONALIZADO]

Site com almanaque de todos os comandos em CSS e com descrição de cada um, com exemplos

https://css-tricks.com/almanac/properties/
CSS-Tricks
Chris Coyier
Properties | CSS-Tricks
Properties | CSS-Tricks
Othon Ciparoni — 22/04/2022
[CSS PERSONALIZADO] Alterar tamanho do texto do campo de aceitação do formulário

.elementor-field-option{
    font-size: 12px;
    display: flex;
    align-items: center;
}

.elementor-field-option label{
    padding-left: 5px;
}
Imagem
[CSS PERSONALIZADO] Personalizar a cor do checkbox em formulários

input[type="checkbox"]{
        accent-color: #fff000;
}

Altere o código da cor para o que preferir.
Imagem
Othon Ciparoni — 27/04/2022
[CSS PERSONALIZADO] Acordeão com borda em degrade (fade)

selector .elementor-tab-title{
    border: 1px solid;
    border-image: linear-gradient(to right ,#F22982, transparent) 1;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

Altere a direção (to right, to left, to top e to bottom) e o código da cor (#) como preferir.
Imagem
Willian Dutras — 27/04/2022
[EFEITO DE BOTÃO PISCANDO]
selector a{
    animation: pisca 1.5s infinite;
    box-shadow: 0px 0px 21px -6px #ffff; //mudar a cor aqui
}

@keyframes pisca {
  70% {
    box-shadow: 0 0 0 25px rgb(0,0,0,0);
    
  }
    100% {
    box-shadow: 0 0 0 0 rgb(0,0,0,0);
  }
} 
Imagem
Ericson Silva — 30/04/2022
[CSS + JAVASCRIPT] Efeito para imagem mudar com o texto:


-------- CODIGO MAIS CSS ----------

<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-mostrar]').hover( function(){
        event.preventDefault();
        var mostrar = $(this).attr('data-mostrar')

        $('.all-section').hide()
        $('.' + mostrar).show()

    })
})
</script>

<style>
.all-section {
    display: none;
}
.section-1{
    display: block;
}
</style>

---------- ATRIBUTOS ----------

data-mostrar|section-1
data-mostrar|section-2
data-mostrar|section-3


---------- CSS ----------

all-section section-1
all-section section-2
all-section section-2



Vídeo explicativo: https://www.youtube.com/watch?v=t6w5VDrv_fA
YouTube
Fred Bueno
🔥Criando Efeito MOUSE HOVER no Texto para Mudar Imagens no Elemento...
Imagem
Bruno Souza — 06/05/2022
Fica mais simplificado se colocar somente o border-top, daí não precisa ocultar as outras, por exemplo:

selector  {
    BORDER-TOP: 1px solid;
    border-image: linear-gradient(90deg,rgba(60,74,83,0),#98144B,rgba(60,74,83,0)) 1;
Lucas Linhares — 07/05/2022
como eu adiciono uma borda arredondada nesse vídeo?
Luana Bonin — 08/05/2022
.video {
   border-radius: 50%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow: hidden;
}
Willian Dutras — 17/05/2022
[EFEITO DE ROTAÇÃO 360 INFINITA]
@keyframes rotating{
  from{
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg)
  }
  to{
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}
selector{
  -webkit-animation:rotating 25s linear infinite;
  -moz-animation:rotating 25s linear infinite;
  -ms-animation:rotating 25s linear infinite;
  -o-animation:rotating 25s linear infinite;
  animation:rotating 25s linear infinite;
}
Imagem
Matheus Lucas de Souza — 19/05/2022
[BOTÃO COM DEGRADÊ SLIM ANIMADO]

:root{
 --glow-color: rgb(39, 82, 243);
 --glow-spread-color: rgba(15, 199, 84, 0.781);
}
#premium a{
 background: linear-gradient(-45deg, #5f0aa0, #fa0cfa, #27c8b7, #3f00b5);
 background-size: 800% 400%;
 transition: all .5s;
 animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
 0% {
  background-position: 0% 50%;
 }

 50% {
  background-position: 100% 50%;
 }

 100% {
  background-position: 0% 50%;
 }
}

#premium a:hover {
background-image: linear-gradient(to right, #2752f3 0%, #0052fa 100%);
 transition: .5s ease;
 box-shadow: 0 0 5em 0.0001em var(--glow-color),
        0 0 2em 0.2em var(--glow-spread-color),
        inset 0 0 .5em .5em var(--glow-color);
 
}
Alany Siqueira — 19/05/2022
tentei usar não funcionou
Davi Cavalcante — 19/05/2022
[CSS PERSONALIZADO] Degradê esmaecido no Divisor:

selector .elementor-divider-separator {
    border-width: 4px 0px 0px 0px;
    border-style: solid;
    border-image: linear-gradient(to left, #f22982,#f2298200) 1;
} 
Imagem
vai no estilo e coloca opacidade em 0
Imagem
Bruno Souza — 19/05/2022
[CSS PERSONALIZADO] Alterar cor de fundo do PLAY do Widget de Vídeo:

.eicon-play {
    background: #EF4562;
    border-radius: 100px;
    line-height: 0.9;
    opacity: 1!important;
}
.eicon-play:before
{
    margin: -4px
}
Imagem
Guilherme Speranzini — 19/05/2022
Só para compartilhar um truque bobo mas que acabei de aprender.

Se você incluir esse código no <head> do Custom Code do site, todos os acordeões do site ficam fechados por padrão 😍
Othon Ciparoni — 19/05/2022
[LIVE 34] SubidoFlix

Códigos utilizados na live: https://ciparoni.com/codigos-subidoflix/
Imagem
Othon Ciparoni
Códigos SubidoFlix - Othon Ciparoni
Códigos Live #34 – SubidoFlix Para entender como utilizar os códigos, quais configurações fazer e quais classes e IDs utilizar, assista à live abaixo: https://www.youtube.com/watch?v=D6n3ZtoOz90 ALTERAR COR DA BARRA DE ROLAGEM CSS body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: #202020; } body::-webkit-scroll...
Bruno Souza — 21/05/2022
Caso haja link na Lista de Ícones, adicionar a tag "a" no final da primeira classe do código, como no exemplo abaixo: 

selector .elementor-icon-list-item a {
align-items: baseline;
}
selector .elementor-icon-list-item i {
padding-top:5px;
}
 
Matheus Lucas de Souza — 23/05/2022
https://www.youtube.com/watch?v=owJgKj5ohKs&t=1s

Como fazer Parallax boladão com imagens
YouTube
Elementor
How to Add a Parallax Effect to Your Hero Section in Elementor
Imagem
Othon Ciparoni — 23/05/2022
[CSS PERSONALIZADO] Botão com animação de reflexo - Formação em Social Media, do ONM

selector .elementor-button{
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running textura;
    background-image: linear-gradient(45deg, rgb(32, 91, 234), rgb(253, 1, 243), rgb(32, 91, 234), rgb(253, 1, 243));
    background-size: 400% 200%;
    transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s;
}

@keyframes textura{
    0% {
    background-position: 0 0;
}

100% {
    background-position: 100% 0;
}
}
Imagem
Othon Ciparoni — 25/05/2022
[WIDGET HTML] Seções com Delay de tempo:

<style type="text/css">
body:has(.elementor-editor-active) .delay {
display: inherit;
}
body:not(.elementor-editor-active) .delay {
display: none;
}
</style>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const sectionsHided = document.querySelectorAll('.delay');
setTimeout(function(){
sectionsHided.forEach(function(section) {
section.style.display = "inherit"; // Troque o inherit por 'block', 'inline-block', caso o nao funcione.
});
}, 5 * 1000) // Troque o 5 pela quantidade de segundos que desejar.
});
</script>

Alterar o 5 (segundos) para o tempo desejado e colocar a palavra delay no campo de Classe CSS das seções que deseja esconder.

IMPORTANTE: adicione o widget html com esse código no rodapé da página, como último elemento.
Eduardo Ozoterio — 25/05/2022
[WIDGET HTML] Seções com Delay de tempo:

<style>
    .delay{
        display: none;
    }
</style><script>
setTimeout(function(){
  secao1=document.querySelector(".delay");
if(null != secao1){secao1.style.display="block";}
},"690000"); // Troque pela quantidade de milisegundos que desejar
</script>

Coloque a palavra delay no campo de Classe CSS das seções que deseja esconder.
__

[CSS PERSONALIZADO] Alterar espaçamento entre parágrafos de um widget de texto

selector p:not(:last-child){
    margin-bottom:36px;
}
__

[CSS PERSONALIZADO] Centralizar textos do formulário

selector .elementor-field-textual {
    text-align: center;
}
Bruno Souza — 26/05/2022
<WIDGET HTML ou Código Personalizado> Máscaras para Formulário do Elementor

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function( $ ) {

$("#form-field-tel").mask("(00) 0 0000-0000");
$("#form-field-data").mask("00/00/0000");
$("#form-field-cpf").mask("000.000.000-00");

});
</script>

(Trocar o ID do campo desejado. Ex.: se a máscara for para telefone ("#form-field-tel").mask("(00) 0 0000-0000"); colocar o ID do campo como "tel" -  Utilizar o campo do tipo Texto - Só funciona na página renderizada) 
Guilherme Speranzini — 29/05/2022
Faixa (ribbon) customizável com HTML e CSS. Dá para aplicar em qualquer container. Responsiva.

Usando widget HTML:

`<style>
/* create the ribbon box /
.ar-ribbon-left-box {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 150px;  / it needs to create the square box /
    height: 150px;  / it needs to create the square box /
    overflow: hidden; / it will hide the element when it is overflow /
}

/ rotate the ribbon /
.ar-ribbon-left-box .ar-elementor-ribbon-rotate {
    / rotate ribbon at top left of column /
    / you may change the value of both translateX() to meet your need /
    -webkit-transform: translateY(-50%) translateX(-50%) translateX(45px) rotate(-45deg);
    -ms-transform: translateY(-50%) translateX(-50%) translateX(45px) rotate(-45deg);
    transform: translateY(-50%) translateX(-50%) translateX(45px) rotate(-45deg);
    / add margin-top for the ribbon. it pushes the ribbon from the left corner /
    margin-top: 45px;
    / set text line-height /
    line-height: 2;
    / set center aligment /
    text-align: center;
    / set font and color */
    color: #191919;
    font-size: 11px;
    font-weight: 600;
    background-color: #FECA11;
}
</style>

<!-- the ribbon structure -->
<div class="ar-ribbon-left-box">
    <div class="ar-elementor-ribbon-rotate">Integral</div>
</div>

Crédito e outras opções: https://applerinquest.com/how-to-add-ribbon-in-elementor/ 
Imagem
Apple Rinquest | WordPress & PHP Developer
How to add ribbon in Elementor | Apple Rinquest | WordPress & PHP D...
Elementor is the most popular page builder for WordPress. If you are a web designer or web developer like me, you will hear and see tons of articles and
How to add ribbon in Elementor | Apple Rinquest | WordPress & PHP D...
Marcos Tulio — 01/06/2022
https://www.youtube.com/watch?v=ejGdsW-rbUY
YouTube
Happy Addons
How to Modify and Design Website’s Icon using Lordicon Widget of Ha...
Imagem
Happy Addons com ícones animados 🤩
Othon Ciparoni — 07/06/2022
[CSS PERSONALIZADO] Aumentar ícone em acordeão e/ou sanfona

Para acordeão:

selector .elementor-toggle-icon{
    font-size: 30px;
}

Para sanfona:

selector .elementor-accordion-icon{
    font-size: 30px;
}

Adicionar também esse código (no acordeão ou na sanfona) para centralizar o ícone com o texto:

selector .elementor-tab-title{
    display: flex;
    align-items: center 
}

Alterar o tamanho, ali em font-size, como preferir.
Imagem
Lucas Linhares — 07/06/2022
Sabiam que o elementor tem esse efeito nativamente?
Imagem
Para você fazer, basta selecionar a sessão, ir em HOVER, deixar a borda esquerda mais grossa.
Imagem
Moacir Alves — 07/06/2022
Olá pessoal olha só que CSS incrível eu vi no site da CSS Tricks
https://css-tricks.com/ 
Mais especificamente nestes cards aqui.
Imagina que lindo e funcional ficaria em uma LP?
Alguém conseguiria compilar o código de lá e compartilhar conosco?
Imagem
CSS-Tricks
CSS-Tricks
CSS-Tricks is a website about websites.
CSS-Tricks
Othon Ciparoni — 08/06/2022
[HTML] Alterando o peso de determinada palavra

Adicione essa tag entre a palavra que quiser dar o peso diferente:

<span style="font-weight: 900"> Palavra aqui </span>

Mude o 900 para o peso que quiser. Lembrando:

100 - Thin
200 - Extra Light
300 - Light
400 - Regular
500 - Medium
600 - Semibold
700 - Bold
800 - Extra Bold
900 - Black
Bruno Souza — 08/06/2022
[CSS PERSONALIZADO] Divisor Gradiente na Lista de Ícones

.elementor-icon-list-item:not(:last-child):after {
    border-top: 1px solid;
    border-image: linear-gradient(90deg, #992ECB, #ffffff00) 1;
}

"É necessário habilitar o Divisor no Widget de Lista de Ícones (Ver imagem)"
Imagem
Imagem
Raphael Mendonça — 09/06/2022
[CSS PERSONALIZADO] Card (coluna) com dois traços animados  selector .elementor-widget-wrap  {

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}

selector .elementor-widget-wrap:after {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: #000000;
  border-radius: 16px;
}

selector .elementor-widget-wrap:before {
  content: "";
  position: absolute;
  width: 150px;
  height: 140%;
  background: linear-gradient(#00ccff, #d400d4);
  animation: animate 4s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 Altere as cores como desejar
Imagem
Othon Ciparoni — 10/06/2022
https://www.youtube.com/watch?v=Sm5e8k88eA4
YouTube
Make Dream Website
Elementor Blog Post Card Carousel/Slider Layout Design in WordPress...
Imagem
Othon Ciparoni — 13/06/2022
[CSS PERSONALIZADO] Textura de pontos Hotmart Club

selector:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.2);
    background-image: url(https://app-static-club.hotmart.com/meteor/images/dots.png);
}

Baixe a imagem do pontinho nesse link https://app-static-club.hotmart.com/meteor/images/dots.png, suba no seu Wordpress, e substitua a url acima, do background-image, pela url da sua imagem (você até pode pular esse passo, mas terá uma requisição externa a mais de bobeira).
Imagem
Luana Bonin — 17/06/2022
Chega no mesmo resultado, mas aplicando a imagem do "pontinho" direto na sobreposição da seção 🙂
Imagem
Brunno Martins — 20/06/2022
Colocar uma imagem no botão do formulário

1º passo: No Wordpress, vá em Mídia e faça o upload da imagem. Depois, abra a imagem e copie o endereço dela.

2º passo: Com o formulário aberto no Elementor, vá na aba 'Conteúdo' e clique na opção 'Botão/Button'. 
No campo 'Enviar/Submit', cole o seguinte código: <img src ='LINK DA IMAGEM VAI AQUI. EXEMPLO: https://seusite.com/wp-content/uploads/2022/06/send-2.png'>

Pronto, agora o botão enviar do seu formulário é uma imagem!
Imagem
Imagem
Arthur Ferreira Costa — 23/06/2022
ADICIONAR DELAY / ATRASO PÁGINA VLS

- Adicione um Widget HTML e o seguinte código dentro: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js%22%3E</script>
</head>
<script>
$('.delay').hide();
setTimeout(function() {
$('.delay').show();
}, 1000);
</script>

- Adicione a classe   delay   na section que quiser ocultar
- Altere o tempo no lugar do 1000 (está em ms)
Julio Castro — 24/06/2022
TÍTULO PARA COLOCAR NO TOPO DA PÁGINA COM GEOLOCALIZAÇÃO:

Apenas você e algumas pessoas próximas de <b><span id="address" style="color: #ff0000;"></span></b> foram selecionadas para essa loucura que o <b>Ricardo</b> vai fazer...
<!--INÍCIO DO SCRIPT-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>$.get("https://ipinfo.io/json", function (response) { $("#address").html(response.city);
}, "jsonp");
</script>

<!--FIM DO SCRIPT-->
 
Imagem
Othon Ciparoni — 25/06/2022
[JAVASCRIPT] Redirecionamento aleatório de links

Crie uma página em branco e insira o código abaixo nela (com o widget HTML ou direto no head, na opção Código personalizado, o que achar melhor).

<script>
    var urls = new Array();
        urls[0] = "URL DA PÁGINA 1 AQUI";
        urls[1] = "URL DA PÁGINA 2 AQUI";
    var random = Math.floor(Math.random()*urls.length);
    window.location = urls[random];
</script>

Você pode adicionar quantas URLs quiser, basta alterar o número que representa a url na array. Exemplo:

        urls[0] = "URL DA PÁGINA 1 AQUI";
        urls[1] = "URL DA PÁGINA 2 AQUI";
        urls[2] = "URL DA PÁGINA 3 AQUI";
        urls[3] = "URL DA PÁGINA 4 AQUI";
        urls[4] = "URL DA PÁGINA 5 AQUI";
        urls[5] = "URL DA PÁGINA 6 AQUI";

Essa página em branco que você criou, com o código, será a url que você colocará nos botões para criar esses redirecionamentos. 

É muito útil para utilizar com contatos de suporte (às vezes possuem diversos atendentes com números diferentes) e para encaminhar para grupos de WhatsApp.
Othon Ciparoni — 26/06/2022
[CSS PERSONALIZADO] Alterar a cor do bullet point no widget de texto

::marker{
    color: #00f6e2;
}

Altere o código da cor para a que preferir.
Imagem
Erick Fonseca — 27/06/2022
[CSS PERSONALIZADO] Borda quadrada em Degradê 

Opção 1: 
selector {
    margin-right: 0px;
    margin-bottom: 0px;
    border: 3px solid transparent; /*alterar espessura*/
    border-image-source: linear-gradient(219deg, #fca400 -26.18%, rgba(0, 0, 0, 0) 42.94%, rgba(0, 0, 0, 0) 57.47%, #fca400 113.09%);/*alterar códigos hex*/
    border-image-slice: 1;

}

Opção 2:
selector {
  z-index:0;
}

selector:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    padding: 2px;/*alterar espessura*/
    border-radius: 10px;
    background: linear-gradient(219deg, #fca400 -26.18%, rgba(0, 0, 0, 0) 42.94%, rgba(0, 0, 0, 0) 57.47%, #fca400 113.09%);/*alterar código hex*/
    -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;
}
Imagem
Eduardo Ozoterio — 27/06/2022
[CSS PERSONALIZADO] Barra de progresso com degradê

selector .elementor-progress-bar {
    background-image: linear-gradient(to right, #002256 0%, #F4C761 100%);
}
Othon Ciparoni — 03/07/2022
[CSS PERSONALIZADO] Colocar ícone da lista de ícones do lado direito

.elementor-icon-list-icon{
    order: 1;
    padding-left: 10px;
}

Ajuste o espaçamento entre o ícone e o texto mudando os valores do padding-left, como desejar.
Imagem
Frederico Martins — 03/07/2022
@Othon Ciparoni eu já vi que tinha postado aqui, mas não encontrei. Como fez aquele efeito de granulado em movimento da sua página de captura atual?
Othon Ciparoni — 03/07/2022
Com esse código aqui: https://discord.com/channels/896153409705631764/897931552225370163/965638893552689243
Felipe Alcantara — 04/07/2022
[HTML] Alterando o tamanho de determinada palavra

<font size="6"> palavra aqui</font>

Mude o numero entre "" pro tamanho que desejar.
Imagem
Raphael Mendonça — 04/07/2022
[CSS] Fundo degradê em lista de ícones

selector .elementor-icon-list-item {
    padding: 10px;
   background: linear-gradient(90deg, rgba(31,31,31,1) 0%, rgba(0,0,0,1) 100%);
}

Alterar cores como desejar
Imagem
Davi Cavalcante — 08/07/2022
CSS 
selector .elementor-button{
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite normal none running textura;
    background-image: linear-gradient(45deg, #FF1A9F,#C20063, #FF1A9F, #C20063);
    background-size: 400% 200%;
    transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s;
}

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