CSS e JS personalizado

Quando as opções de Estilo de um widget não bastam, o Converto permite acrescentar CSS e JavaScript em qualquer elemento do editor e também na página inteira.

Onde ficam os campos

• Em um elemento (widget, container…): aba Avançado, seções CSS e JS.
• Na página: Configurações da página, campo de CSS personalizado da página (e os códigos de topo, conteúdo e rodapé para outros tipos de código; veja Configurações da página).

O CSS do Kit (Configurações do site → CSS personalizado) não passa por este recurso: ele continua sendo tratado pelo Elementor.

Na página, os campos ficam em Configurações da página: o CSS (com a explicação da palavra selector e das media queries em linha) e o JS (que lembra que o código precisa ser jQuery).

A palavra selector

Use selector para se referir ao próprio elemento (ou ao wrapper da página). Para estilizar elementos internos, escreva o seletor logo depois:

selector { background: #f6f8fc; }
selector a { color: #2156F0; }
selector .btn:hover { opacity: .9; }

Media queries com sintaxe curta (breakpoints)

Em vez de escrever @media, escreva a condição entre parênteses seguida do bloco entre chaves:

A unidade é opcional (padrão px); se você escrever em, rem ou %, ela é respeitada. Dentro do bloco não é necessário escrever selector:

(<=768){
  font-size: 14px;
  a { color: red; }
  .btn { display: none; }
}

Resultado equivalente:

@media only screen and (max-width:768px){
  selector{ font-size: 14px; }
  selector a{ color: red; }
  selector .btn{ display: none; }
}

Propriedades soltas viram regras do próprio selector; regras aninhadas recebem selector na frente automaticamente. Se você já escrever selector na regra, ele não é duplicado.

Misturando com CSS normal

Blocos de media query e CSS comum podem conviver no mesmo campo, em qualquer ordem:

selector { padding: 40px 0; }
(<=768){ padding: 20px 0; }
selector .titulo { letter-spacing: -.01em; }

Quando o bloco não é convertido

O cabeçalho ( … ) só é tratado como media query quando vem no início do campo ou logo depois de um } ou ;. Assim, CSS normal como :nth-child(2n-1) não é confundido. Um bloco malformado (chave sem fechar ou condição que não segue os quatro formatos) passa sem conversão: só aquele trecho vira CSS inválido, o restante do campo continua funcionando.

JavaScript personalizado

O campo JS aceita código jQuery. selector vira o objeto jQuery do elemento:

selector.css('background', 'red');
selector.find('.btn').on('click', function () {
  console.log('clicou');
});

• No elemento, selector equivale a jQuery('.elementor-element.elementor-element-ID').
• Na página, equivale ao wrapper do documento.
• Cada trecho roda dentro de try/catch; erros aparecem no console do navegador como Custom JS Error.

Boas práticas

• Prefira as opções nativas de Estilo e use CSS apenas para ajustes finos.
• Use (<=768){} para ajustes de celular em vez de duplicar widgets.
• Teste o JS no preview e em aba anônima; não dependa de variáveis globais do tema.