Como construir um pop-up dinâmico para listagens JetEngine

Crie um pop-up

Vá para o painel WordPress> JetPopup> bloco Todos os pop-ups . Pressione o botão “ Criar novo pop-up ” para criar um novo pop-up.

diretório jetpopup

Escolha a opção Tipo de conteúdo e preencha o campo Nome , se desejar. Se este campo for deixado em branco, o nome será gerado automaticamente.

Selecione a predefinição de layout e clique no botão “ Criar ”.

crie uma janela pop-up

Agora, exclua os campos padrão se eles não forem necessários.

Na barra de pesquisa, encontre widgets dinâmicos e coloque os desejados na página. Por exemplo, pode ser Imagem Dinâmica para exibir uma miniatura da postagem personalizada, Campo Dinâmico para mostrar o título da postagem e alguns metadados, Termos Dinâmicos para mostrar categorias anexadas, etc.

widgets dinâmicos
Coisas para saber

Os widgets dinâmicos ainda estão vazios nesta etapa, mas o conteúdo aparecerá mais tarde.

configurações de campo dinâmico

Agora clique no ícone de engrenagem no canto inferior esquerdo do painel Elementor e as configurações do JetPopup serão exibidas. 

Abra o bloco de acordeão Configurações e ative a opção Carregando conteúdo com Ajax para que o conteúdo do pop-up seja carregado usando o método AJAX.

Além disso, habilite a opção Forçar carregamento para que o conteúdo do pop-up seja carregado sempre que for aberto.

Em seguida, clique no botão “ Editar ” próximo a Condições de exibição para definir as condições de exibição do pop-up.

configurações de pop-up

Feito isso, a nova aba será aberta. Aqui, imediatamente, você verá as condições aparecerem.

Defina as condições de acordo com suas necessidades e pressione o botão “ Salvar Condições ”.

pop-up de edição de condições

Assim que tudo estiver feito corretamente, retorne ao editor de pop-up e salve este pop-up clicando no botão “ Publicar ”.

Anexe o pop-up

Antes de começarmos a próxima etapa, certifique-se de ter criado uma listagem com o plugin JetEngine . 

Abra o editor de listagem para anexar o pop-up a ele. Uma das maneiras de fazer isso é clicar no ícone de engrenagem no canto inferior esquerdo da tela, abrir a guia Configurações da listagem e ativar o recurso Tornar item da listagem clicável .

Selecione a opção “Open JetPopup” como fonte do link e escolha a opção JetPopup necessária abaixo.

Agora, o pop-up será aberto assim que os usuários clicarem na Listagem .

tornar o recurso clicável do item da listagem

Outra forma de abrir o pop-up é adicionar o widget de botão padrão com o rótulo desejado à listagem, permitindo que seus clientes abram o pop-up ao clicar.

widget de botão no elementor

Abra as configurações do botão e vá para a guia Avançado . Aqui você pode encontrar o bloco sanfonado JetPopup , onde pode especificar o pop-up anexado e ativar a opção pop-up JetEngine Listing . Habilite-o para anexar o pop-up à Grade de listagem .

Em seguida, defina o tipo de gatilho como “Click On Widget” e seu pop-up será aberto assim que o botão for clicado.

Clique no botão “ Publicar ” para salvar as configurações.

configurações do botão jetpopup no elementor

Se você ainda não colocou a Grade de Listagem na página necessária, você pode fazê-lo agora. Em seguida, salve a página.

listagem de grade no elementor

É hora de dar uma olhada no que acabamos de fazer. Abra a página e clique no botão para ver o pop-up aparecer.

listagem no front-end

Agora, o pop-up é exibido junto com os widgets dinâmicos adicionados ao pop-up anteriormente.

pop-up acionado

Por fim, agora você sabe como anexar pop-ups às listagens do JetEngine usando a funcionalidade JetPopup em seu site WordPress.

Índice