Adicionar JavaScript personalizado no Elementor: Página e Elemento Nível JS

A extensão Custom JS, parte do Master Addons Pro, oferece um campo JavaScript dentro do Elementor. Adicione código a uma página inteira a partir de Configurações de página ou anexe-o a um único widget, seção ou contêiner a partir de sua guia Avançado. Use-o para pequenas interações, ajustes de formulário ou rastreamento de eventos sem editar arquivos de tema ou preencher scripts em um widget HTML.

Um espaço de código dedicado para cada página

Um espaço de código dedicado para cada página

Pare de preencher scripts em widgets HTML ou espalhá-los em arquivos globais Esta extensão adiciona um campo dedicado Custom JS no Page Settings > Advanced tab. Qualquer código que você escrever aqui é executado apenas nesta página ou postagem específica É a maneira organizada de lidar com scripts pontuais, rastreamento de teste A/B ou elementos interativos exclusivos.

  • Separação limpa: mantenha os scripts específicos da página isolados do código de todo o site Sem risco de quebrar outras páginas.
  • Fácil acesso: Encontre seu código instantaneamente na página sem pesquisar no Painel Widgets.
  • Melhores práticas integradas: o campo lida automaticamente $(document).ready() para você, assim você pode escrever sua lógica do núcleo diretamente.

JavaScript em nível de página e elemento

O código no nível da página vive em Configurações de página, JS avançado, personalizado e é executado apenas nessa página O código no nível do elemento vive na guia Avançado de qualquer widget, coluna, seção ou contêiner No código no nível do elemento, a palavra selector é trocado pela classe CSS desse elemento, portanto o script toca apenas nesse elemento.

  • Não <script> tags e nenhum wrapper pronto para documentos: o código está embrulhado jQuery(document).ready para você, e $ obras.
  • Os scripts são impressos no rodapé da página, após o carregamento do conteúdo.
  • O código é executado na página ao vivo, não dentro da visualização do editor do Elementor, portanto, verifique a página publicada após salvar.
  • Cada instância do seletor de palavras é substituída no código de nível de elemento Usar $('selector') em vez de document.querySelector ali.

Como adicionar JavaScript personalizado no Elementor

Essas etapas assumem que o Master Addons Pro está ativo e sua função WordPress pode publicar HTML não filtrado, que os administradores podem por padrão.

  1. No seu painel, vá para Complementos Mestres, abra a guia Extensões, ligue o Custom JS e salve.
  2. Edite a página com Elementor.
  3. Para toda a página, abra Configurações de página, depois Avançado e depois Personalizado JS. Para um elemento, selecione-o e abra sua guia Avançado.
  4. Cole seu código sem tags <script>.
  5. Atualize a página e teste-a no URL ao vivo.

Três exemplos JS personalizados Elementor

Cole qualquer um deles em um campo JS personalizado e altere os nomes das classes para corresponder à sua página.

1. adicione uma classe ao cabeçalho após a rolagem (nível da página)

$(window).on('scroll', function () {
  $('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});

2. alternar uma classe quando um elemento é clicado (nível do elemento)

$('selector').on('click', function () {
  $(this).toggleClass('is-open');
});

3. Envie um evento do Google Analytics quando um botão for clicado (nível da página)

$('.cta-button a').on('click', function () {
  if (typeof gtag === 'function') {
    gtag('event', 'cta_click', { location: 'pricing' });
  }
});

Formas de adicionar JavaScript no Elementor comparadas

Existem três rotas comuns A direita depende de onde o script precisa ser executado Se você também precisa de estilos com escopo para um elemento, o gratuito Extensão CSS personalizada funciona da mesma maneira.

Widget HTMLCódigo personalizado Elementor ProAdições Mestres Personalizadas JS
PlanoElementor LivreElementor ProComplementos mestres Pro
EscopoA página em que o widget se sentaEm todo o local, com condições de exibiçãoUma página ou um elemento
Onde você escreveDentro de um widget na telaUma tela de código personalizado no painelConfigurações de página ou guia Avançado do elemento
Tags de scriptNecessárioNecessárioNão necessário
Alvo um elementoEscreva você mesmo o seletorEscreva você mesmo o seletorUsar a palavra - chave do selector

Perguntas frequentes para JS personalizado

Saiba as dúvidas mais solicitadas que os usuários têm sobre o Custom JS e encontre respostas em um só lugar.
Quando devo usar isso em vez de um widget HTML ou as funções do meu tema.php?

Use-o para scripts que pertencem a uma página ou um elemento, como uma calculadora, um efeito de rolagem ou um evento de clique Para o código que cada página precisa, uma opção em todo o site, como seu tema ou um plugin de trechos de código, é uma casa melhor. O widget HTML também funciona, mas os scripts acabam espalhados pela tela e são fáceis de perder mais tarde.

Não. O código é adicionado à medida que você o escreve, portanto, mantenha-o curto e arrumado A única alteração que o Master Addons faz é trocar a palavra-chave do seletor no código de nível de elemento pela classe CSS desse elemento.

O que acontece se EU escrever JavaScript quebrado? vai quebrar toda a minha página?

Pode. um erro de sintaxe pode impedir a execução de outros scripts nessa página Teste o código no console do navegador primeiro e tente em um site de preparação se a página for importante.

Diretamente, não dentro do campo JS em si No entanto, você pode escrever JavaScript que interage com elementos na página que são preenchidos por dados dinâmicos Por exemplo, você poderia escrever um script que lê texto de um cabeçalho preenchido dinamicamente Você usaria seletores JavaScript normais para direcionar esses elementos.

Visualizador de modelos
Facebook
Twitter
whatsa
Copiar link
Compre Agora
Alerta simples JS personalizado
Alerta simples JS personalizado

Widgets e extensões de elementos de tendência

Construa sites sofisticados em menos tempo.

Extensão Master Addons Glassmorphism para Elementor: cartões de vidro fosco com o controle Blur Value definido como 20 px

Glassmorphismo

Extensão de Glassmorphism de Elementor Livre em Casa: Efeito de vidro fosco em uma alternância O Glassmorphism é o fosco...
Ver detalhes
Extensão Master Addons Container Extras para Elementor: contêiner tampado em uma largura máxima de 1400 px, com controles de largura máxima, altura máxima, largura mínima e altura mínima

Contêiner Extras

Home Elementor Container Max Width e Max Height Controls Container Extras é um Master gratuito...
Ver detalhes
Extensão Master Addons Patterns para Elementor: herói com o estilo Purple Gradient Grid Left, mais três estilos de padrões e o painel Habilitar Padrão

Padrões

Início 70+ Padrões de fundo de elementor gratuitos é uma extensão gratuita de complementos mestres que adiciona...
Ver detalhes
Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]

Duplicador de postagem/página

Home Páginas e postagens de elementos duplicados em um clique Post/Page Duplicator é um Master gratuito...
Ver detalhes
Extensão da barra de progresso de leitura de complementos mestres para Elementor: barra azul 42% preenchida na parte superior de uma página de política de privacidade, com configurações de habilitação, posição, altura e preenchimento de cores

Barra de progresso de leitura

Início Adicionar uma barra de progresso de leitura no WordPress (Elementor) A barra de progresso de leitura é gratuita...
Ver detalhes