Arquivos Formulário - EduardoVillão

Manipule Eventos de Popups do Elementor Sem jQuery

Eduardo Villão — Mon, 20 Jan 2025 20:08:04 +0000

Se você já trabalhou com o Elementor e tentou manipular seus popups programaticamente, provavelmente percebeu que a documentação oficial oferece exemplos de manipulação de eventos apenas com jQuery. Porém, se você prefere uma solução moderna e leve utilizando Vanilla JavaScript, este guia é para você.

Com a API MutationObserver, você pode monitorar alterações no DOM e detectar quando um modal de popup do Elementor é injetado no . Isso permite que você execute ações personalizadas sem depender de bibliotecas adicionais.

Por que Usar o MutationObserver

A API MutationObserver é um recurso nativo do JavaScript que permite observar mudanças no DOM, como:

Adição ou remoção de elementos.
Modificações nos atributos de elementos existentes.

No caso dos popups do Elementor, essa API é perfeita para detectar quando o modal é dinamicamente adicionado ao DOM.

Código para Detectar Popups do Elementor

Aqui está um snippet completo que você pode usar no seu projeto:

// Seleciona o elemento 
const body = document.body;

// Cria um MutationObserver
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        // Verifica se novos nós foram adicionados
        if (mutation.type === "childList") {
            mutation.addedNodes.forEach((node) => {
                // Verifica se o nó adicionado é um modal de popup do Elementor
                if (node.classList && node.classList.contains("elementor-popup-modal")) {
                    console.log("Popup do Elementor detectado:", node);
                    // Adicione sua lógica personalizada aqui
                }
            });
        }
    });
});

// Configura o observer para monitorar o 
observer.observe(body, { childList: true });

// Interrompe a observação quando não for mais necessária (opcional)
// observer.disconnect();

Como Funciona

1. Monitorando o :

O elemento é observado porque o Elementor injeta seus popups como nós filhos do .

2. MutationObserver:

Usamos o MutationObserver para monitorar mudanças nos nós filhos do configurando { childList: true }.

3. Filtrando Nós Adicionados:

Para cada nó adicionado, verificamos se ele possui a classe elementor-popup-modal, que identifica os popups do Elementor.

4. Ações Personalizadas:

Quando o modal é detectado, você pode executar qualquer lógica personalizada no bloco onde o console.log está localizado.

Caso de Uso Prático

Suponha que você queira aplicar uma animação personalizada quando um popup do Elementor aparecer. Você pode modificar o código assim:

if (node.classList && node.classList.contains("elementor-popup-modal")) {
    console.log("Popup do Elementor detectado:", node);
    node.style.opacity = 0; // Começa invisível
    setTimeout(() => {
        node.style.transition = "opacity 0.5s";
        node.style.opacity = 1; // Efeito de fade-in
    }, 0);
}

Por que Escolher Vanilla JS?

1. Sem Dependências:

Reduz o tamanho total do projeto eliminando bibliotecas como jQuery.

2. Melhor Performance:

Vanilla JavaScript geralmente é mais rápido, pois não possui o overhead de lidar com seletores e eventos adicionais.

3. Compatibilidade Moderna:

A API MutationObserver é suportada em todos os navegadores modernos, incluindo Edge e Safari.

É Isso!

Usar o MutationObserver para detectar popups do Elementor é uma solução elegante e eficiente, especialmente para desenvolvedores que preferem não depender do jQuery. Com este código, você pode personalizar totalmente como interage com os popups do Elementor, seja adicionando animações, rastreando eventos ou implementando outra lógica personalizada.

Se achou essa dica útil, compartilhe com outros desenvolvedores e deixe suas ideias de personalização de popups nos comentários!

O post Manipule Eventos de Popups do Elementor Sem jQuery apareceu primeiro em EduardoVillão.

Como adicionar máscara nos campos do formulário do Elementor – plugin gratuito

Eduardo Villão — Wed, 21 Feb 2024 02:29:36 +0000

Sim, eu tenho certeza que você já ter se perguntado: por que o formulário do Elementor não tem máscaras para os campos? Comigo não foi diferente, então pra ajudar desenvolvi um plugin gratuito para te ajudar a resolver esse problema de uma vez por todas!

Adicionando as máscaras ao formulário

Primeiro, você precisa baixar o plugin do diretório oficial do WordPress e instalar/ativar no seu site: https://wordpress.org/plugins/form-masks-for-elementor/

Agora é bem simples, abra o Editor do Elementor e adicione o seu widget de formulário. Em campo campo, na aba “avançado” você verá um novo select para você selecionar a máscara que deseja usar.

Importante: por enquanto, as máscaras funcionam apenas nos campo do tipo “text”.

Ficou com dúvida? Veja mais detalhes no vídeo

Fácil né?! Conta ai nos comentários o que achou!

O post Como adicionar máscara nos campos do formulário do Elementor – plugin gratuito apareceu primeiro em EduardoVillão.

Como centralizar o botão enviar do Contact Form 7

Eduardo Villão — Tue, 21 Feb 2023 02:33:26 +0000

O contact form 7 é um dos plugins mais utilizados para formulário no WordPress. Ele tem um visual simples, mas tem milhares de possibilidades de customização.

Alguns temas, plugins e até page builders trazem algumas opções de customização de estilo mais avançada para seus formulários. Mas, nem sempre você encontra exatamente o que gostaria. E isso não significa que você não irá conseguir o resultado que deseja. Pois, embora simples, o contact form 7 é um plugin muito completo. Mas vamos ao que interessa.

Centralizar o botão de enviar do Contact Form 7

Para fazer isso é muito simples. Você precisará apenas criar o seu formulário de contato da forma que desejas, e acrescentar o seguinte código no seu editor de CSS ou no editor do tema:

input.wpcf7-form-control.wpcf7-submit {
    display: block;
    margin: 0 auto;
}

Espero que tenha gostado.

Até a próxima.

O post Como centralizar o botão enviar do Contact Form 7 apareceu primeiro em EduardoVillão.