Como desbloquear conteúdo com base no progresso
Desbloqueando conteúdo com base no progresso no Elementor
Com o plugin JetEngine , você pode criar um site de membros do WordPress . A partir deste tutorial você saberá como desbloquear os posts com as lições para os usuários de acordo com seu progresso. Você aprenderá como anexar Visibilidade Dinâmica ao formulário para que os usuários possam abrir a próxima lição de acordo com as respostas no formulário JetEngine ou JetFormBuilder .
Por exemplo, criamos uma página que mostra todas as aulas do nosso site. A cada imagem com cadeado fechado, anexamos um pop-up com formulário e visibilidade dinâmica conectada às opções do formulário.
Quando os usuários selecionam a opção “Sim” no formulário, eles desbloqueiam a próxima lição. Com o campo Visibilidade condicional para o formulário, os usuários não poderão ver a pergunta a seguir, a menos que não respondam corretamente à pergunta anterior.
Crie postagens ou um novo CPT e postagens
Primeiro, você precisa criar postagens com o conteúdo de estudo ou o Custom Post Type (CPT) dedicado para as postagens das aulas.
Crie um metacampo na metacaixa
Para que o formulário e a Visibilidade Dinâmica funcionem juntos, você precisa criar um metacampo.
Como queremos exibir o formulário na página, somos obrigados a criar a meta box para as páginas .
Vá para JetEngine> Meta Boxes e pressione o botão “Adicionar novo” .
Insira o título e selecione a opção “Post” no campo Meta Box for .
Na guia Condições de visibilidade , escolha o tipo de postagem “Páginas” no campo Habilitar para tipos de postagem .
Marque o botão “Novo metacampo” na parte inferior da página. Como queremos anexar a condição de Visibilidade Dinâmica à escolha do usuário “Sim” ou “Não” no formulário, criaremos um metacampo Rádio com tais opções. Fique à vontade para criar o mesmo campo ou outros de acordo com sua necessidade.
Você pode criar as opções de rádio manualmente clicando no botão “Nova opção de campo” ou preenchê-lo com o recurso Glossário ativando a alternância Obter opções no glossário .
Após terminar, pressione o botão “Atualizar Meta Box” .
Como criar um formulário JetEngine
Vá para JetEngine> Formulários no painel do WordPress e clique no botão “Adicionar novo” . Dê um título ao novo formulário.
Deixe as configurações do campo Oculto como estão por padrão, clique no botão “Adicionar campo” e coloque o novo campo entre o campo Oculto e o botão Enviar .
Na nova janela Configurações de campo , selecionamos o mesmo tipo do metacampo recém-criado – “Rádio”, inserimos o nome e o rótulo do campo . O Nome será usado nas configurações do formulário. O Label será mostrado aos usuários no formulário no front end para que você possa inserir a pergunta aqui.
No campo Preencher opções de , escolha a opção “Entrada manual” e adicione as mesmas opções do seu metacampo (“Sim” e “Não” no nosso caso). Se você usou o glossário para o metacampo, poderá usá-lo novamente aqui selecionando a opção “Glossário” no campo Preencher opções de .
” alt=”campo de rádio no formato” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/radio-field-in-the-form-1-729×1024-1.png” />
Em seguida, pressione o botão “Aplicar alterações” .
Marque a caixa de seleção “Valores predefinidos dos campos do formulário”. Escolha a opção “Postagem” como fonte e a opção “Postagem atual” no campo Obter ID da postagem de .
No Mapa de Campos , selecione a opção “Post ID” próxima ao nome do campo Oculto ( post_id no nosso caso). Próximo ao Rádio ou outro campo de Visibilidade Dinâmica, escolha a opção “Post Meta” e, no campo próximo, insira o nome do metacampo criado recentemente.
” alt=”valores de campo de formulário predefinidos” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/pre-set-form-field-values-2.png” />
Vá para a guia Ações/Configurações de notificações pós-envio e clique no ícone em forma de lápis para editar a ação.
Escolha o tipo “Inserir/Atualizar postagem” , selecione o tipo de postagem necessário (“Páginas” em nosso caso) e escolha o status da postagem “Publicada” .
No Mapa de Campos , selecione a opção “Post ID (irá atualizar a postagem)” perto do nome do campo Oculto ( post_id no nosso caso). Perto do Rádio ou outro campo para Visibilidade Dinâmica, escolha a opção “Post Meta” novamente e, no campo próximo, insira o nome do metacampo criado recentemente.
” alt=”inserir atualização pós ação pós-envio” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/insert-update-post-post-submit-action-2.png” />
Após terminar, pressione o botão “Aplicar alterações” .
Você também pode adicionar vários campos com as perguntas ao formulário para verificar o conhecimento dos alunos e aplicar regras condicionais a eles.
” alt=”campo de rádio com a pergunta” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/radio-field-with-the-question-2.png” />
Criamos três campos de perguntas de rádio para o formulário (incluindo o campo com as opções “Sim” e “Não”) e aplicamos as Regras Condicionais aos dois últimos.
Clique no botão “Configurar regras condicionais” e a seguir pressione o botão “+ Nova regra” .
Na janela Editar lógica condicional para , selecione o tipo “Mostrar este campo se…” , escolha o nome do campo anterior com a pergunta, escolha o operador “Igual” e insira o valor da opção certa no valor para comparar campo.
Por exemplo, nosso campo anterior contém o Label com a pergunta “Qual plugin é necessário para a criação do CPT?” e possui duas opções inseridas manualmente com os valores “jetengine” e “jetelements” . A resposta correta é “JetEngine”, então inserimos o “jetengine” no campo Valor para comparar . Assim, o usuário só verá a próxima pergunta se escolher a resposta correta.
Pressione o botão “Aplicar alterações” e defina a lógica condicional para outros campos, se necessário.
Não queremos salvar os resultados das respostas do campo Rádio recém-criado, por isso deixamos as opções do Mapa de Campos nas Ações Pré-definida e Pós-envio inalteradas.
Quando terminar de trabalhar com o formulário, clique no botão “Publicar” ou “Atualizar” .
Como criar um formulário JetFormBuilder
Se você preferir criar o formulário com o plugin JetFormBuilder , veja como fazer isso.
Navegue até JetFormBuilder > Adicionar novo no painel do WordPress. Dê um título ao novo formulário.
Deixe as configurações do campo oculto como estão por padrão e exclua o campo de texto se não precisar dele.
Clique no botão Alternar inserção de bloco e coloque o campo de rádio entre o campo oculto e o botão de ação .
Na guia Configurações gerais do bloco do campo de rádio, insira o rótulo do campo e o nome do campo do formulário . O rótulo do campo será mostrado aos usuários no formulário no front end para que você possa inserir a pergunta aqui, e o nome do campo do formulário será usado nas configurações do formulário.
” alt=”campo de rádio jetformbuilder” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/jetformbuilder-radio-field-2.png” />
Escolha a opção “Entrada manual” no campo Preencher opções de e clique no botão “Gerenciar itens” .
Na nova janela exibida, adicione as mesmas opções do seu metacampo (“Sim” e “Não” no nosso caso). Se você usou o glossário para o metacampo, poderá usá-lo novamente aqui selecionando a opção “Glossário” no campo Preencher opções de .
Em seguida, pressione o botão “Atualizar” .
” alt=”editar opções manuais” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/edit-manual-options-window-2.png” />
Vá para a guia de configurações do JetForm e vá para a seção Configurações predefinidas . Ative a alternância, selecione “Postagem” como fonte e escolha a opção “Postagem atual” no campo Obter ID da postagem de .
Escolha a opção “Post ID” perto do nome do campo oculto ( post_id no nosso caso). Perto do Rádio ou outro campo de Visibilidade Dinâmica, escolha a opção “Post Meta” e, no campo próximo, insira o nome do metacampo criado recentemente.
” alt=”configurações predefinidas no formulário jetformbuilder” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/preset-settings-in-the-jetformbuilder-form-2.png” />
Vá para a guia Ações de envio de postagem , selecione o tipo “Inserir/Atualizar postagem” e clique no ícone em forma de lápis para editar a ação.
” alt=”postar ação de envio no formulário jetformbuilder” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/post-submit-action-in-the-jetformbuilder-form-1.png” />
Na janela exibida, selecione o tipo de postagem necessário (“Páginas” no nosso caso) e escolha o status da postagem “Publicada” .
No Mapa de Campos , selecione a opção “Post ID (irá atualizar a postagem)” perto do nome do campo Oculto ( post_id no nosso caso). Perto do Rádio ou outro campo para Visibilidade Dinâmica, escolha a opção “Post Meta” novamente e insira o nome do metacampo recentemente criado no campo abaixo.
” alt=”editar ação do jetformbuilder” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/edit-jetformbuilder-action-2.png” />
Após terminar, pressione o botão “Atualizar” .
Você também pode adicionar vários campos com perguntas ao formulário para verificar o conhecimento dos alunos e aplicar regras condicionais a eles.
” alt=”campo de rádio com a pergunta em formato jetformbuilder” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/radio-field-with-the-question-jetformbuilder-2.png” />
Criamos três campos Radio de perguntas para o formulário (incluindo o campo com as opções “Sim” e “Não”) e transformamos os dois últimos campos em Blocos Condicionais .
Clique no bloco de campo e seu ícone no painel exibido. Selecione o Bloco Condicional na lista de transformação.
Para abrir a janela de configurações do Bloco Condicional , pressione o botão com o ícone de setas cruzadas localizado no painel de ferramentas superior à esquerda do botão “Opções” .
Na janela Lógica Condicional , selecione o tipo “Mostrar este campo se…” , escolha o nome do Campo anterior com a pergunta, escolha o Operador “Igual” e no campo Valor a comparar insira o Valor da opção correta.
Por exemplo, nosso campo anterior contém o Label com a pergunta “Qual plugin é necessário para a criação do CPT?” e possui duas opções inseridas manualmente com os valores “jetengine” e “jetelements” . A resposta correta é “JetEngine”, então inserimos “jetengine” no campo Valor para comparar . Assim, o usuário só verá a próxima pergunta se escolher a resposta correta.
Pressione o botão “Atualizar” na janela e defina a Lógica Condicional para outros campos se precisar.
Não queremos salvar os resultados das respostas do campo Rádio recém-criado, por isso deixamos inalteradas as configurações da Ação pré-definida e pós-envio .
Quando terminar de trabalhar com o formulário, clique no botão “Publicar” ou “Atualizar” .
Crie um pop-up
Para criar um pop-up, você precisa do plugin JetPopup instalado . Se não quiser configurar o pop-up, você também pode colocar o formulário na página em vez de colocá-lo no pop-up, então simplesmente pule esta etapa.
Navegue até JetPopup > Criar novo pop-up no painel do WordPress. Você também pode prosseguir para a biblioteca JetPopup Presets e instalar qualquer modelo pop-up de lá e redesenhá-lo, mas criaremos um pop-up do zero.
” alt=”janela de criação pop-up” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/popup-creating-2.png” />
Dê um título ao pop-up e clique nos botões “Publicar” e depois “Editar com Elementor” .
Arraste e solte o widget Form (para formulários JetEngine e JetFormBuilder ) ou o widget JetForm (para formulários JetFormBuilder) no pop-up.
Nas configurações de conteúdo do widget Formulário , escolha o plugin do provedor que você usou para criar um formulário e selecione o nome do formulário .
” alt=”formulário no pop-up” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/form-in-the-popup-2.png” />
Após terminar, clique no botão “Atualizar” .
Crie uma página com conteúdo
Vá para Páginas> Adicionar novo no painel do WordPress. Dê um título à página e pressione o botão “Editar com Elementor” .
Como são necessários formulários e condições de visibilidade diferentes aplicados a cada postagem, não é possível utilizar a Grade de Listagem na página.
Inicialmente, colocamos os widgets Título e Vídeo manualmente na página sem aplicar visibilidade dinâmica a eles para fornecer os primeiros materiais de aula a qualquer aluno.
” alt=”a primeira lição da página” data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/first-lesson-on-the-page-2.png” />
Para cada próxima lição, adicionamos os widgets Title , Image with the closed lock, Video e Button .
Clique para editar o widget Imagem com o cadeado fechado e prossiga para a seção Avançado .
Abra a guia JetPopup , selecione o pop-up necessário no campo Attached Popup e deixe o tipo de gatilho “Clique no widget” .
Abra a guia Visibilidade dinâmica e ative a alternância.
O bloqueio deve desaparecer quando o usuário seleciona a resposta “Sim” para a pergunta “Gostaria de passar para a Lição 2?” na forma. Portanto, escolha o tipo de condição de visibilidade “Ocultar elemento se a condição for atendida” e a condição “Igual” .
Clique no botão “Tag Dinâmica” próximo ao Campo e selecione a opção “Campo Personalizado” na lista.
Nas configurações da tag dinâmica , escolha o campo que você criou na Meta Box para as páginas.
No campo Valor , insira o valor “sim” da opção “Sim” do metacampo Rádio.
Clique para editar o widget que aparecerá quando o usuário escolher a opção “Sim” no formulário. Pode ser a imagem em destaque da postagem, uma imagem de cadeado aberto ou um vídeo (como no nosso caso).
As configurações são semelhantes, mas você precisa selecionar o tipo de condição de visibilidade “Mostrar elemento se a condição for atendida” .
Você também pode anexar o mesmo pop-up a este widget, para que os usuários possam alterar suas respostas e desbloquear a lição selecionando a opção “Não” no formulário, mas isso é opcional.
Definir redirecionamento na postagem
Se precisar que os usuários mudem para a postagem com a lição depois de abrirem o vídeo ou imagem, você pode configurá-lo das seguintes maneiras.
- Use o widget Botão .
Você pode arrastar e soltar o widget JetElements Button na página.
Se você não tiver JetElements, o widget de botão padrão do WordPress servirá.
No campo Link do botão ou Link , insira o link da postagem da aula para que os usuários possam clicar no botão e prosseguir para a aula.
- Use a ação pós-envio Redirecionar para página no formulário.
Se quiser que os usuários acessem a postagem com a lição imediatamente após enviar o formulário, você pode adicionar a ação dedicada.
Prossiga para o último formulário criado para a visibilidade dinâmica, clique para editá-lo e clique no botão “Adicionar Notificação” no bloco Ações Pós-envio / Configurações de Notificação .
Selecione o tipo “Redirecionar para página” , “URL personalizado” no campo Redirecionar para e insira o link no campo URL de redirecionamento .
Após terminar, pressione os botões “Aplicar alterações” e “Atualizar” .
Se você criar o formulário JetFormBuilder , clique no botão “+ Nova ação” , selecione o tipo “Redirecionar para página” e clique no ícone em forma de lápis para editar a ação.
Selecione “URL personalizado” no campo Redirecionar para e insira o link no campo URL de redirecionamento .
Quando terminar, pressione “ Atualizar” para atualizar a ação pós-envio e atualizar o formulário.
Desbloqueando conteúdo com base no progresso em Gutenberg
O plugin JetEngine foi atualizado e agora permite aplicar Visibilidade Dinâmica aos blocos do editor padrão do WordPress.
Antes de definir as condições de visibilidade dinâmica em Gutenberg, certifique-se de seguir as primeiras etapas na criação de um CPT, postagens e metacampo na metacaixa deste tutorial.
Prossiga para a página criada no editor padrão do WordPress.
Haverá um pequeno formulário ao lado do vídeo construído com o plugin JetFormBuilder , conforme descrito anteriormente no passo 3. O conteúdo necessário será desbloqueado após clicar no botão “ Continuar ”.
Decida que tipo de conteúdo será desbloqueado e adicione o bloco necessário. Pode ser um texto, um vídeo ou uma seção inteira.
Neste caso, será um botão com o link para o próximo vídeo tutorial. Selecione o bloco e clique no ícone em forma de olho na barra de ferramentas na parte superior do bloco.
Depois de clicar nele, você verá uma janela pop-up com o botão Ativar .
Ative-o, mas primeiro certifique-se de que o tipo de condição de visibilidade esteja definido como “Mostrar elemento se a condição for atendida”.
Em seguida, clique no botão “ Adicionar novo item ” e escolha “Igual” na lista suspensa Condição .
Vá para o Campo e clique no botão Tags Dinâmicas . Escolha “Dados personalizados” como fonte .
No menu suspenso Selecionar dados para mostrar , escolha a opção “Meta-campo JetEngine” e, abaixo, no Campo , selecione o meta-campo da meta-caixa que você criou antes.
Certifique-se de definir a opção “Valor do campo” em Return . Não se esqueça de aplicar as configurações.
Vá para o campo Valor e digite “ sim ”.
No bloco Botão , insira o link da postagem da aula para que os usuários possam clicar no botão e prosseguir para a aula.
Além disso, você pode adicionar mais elementos, aplicar as mesmas condições dinâmicas ou definir diferentes dependendo das suas necessidades.
No nosso caso, também adicionamos uma imagem com a miniatura da próxima lição com um cadeado. Ele também aparecerá junto com o botão.
Quando terminar, atualize a página e prossiga para o front end. A imagem e o segundo botão estão ocultos.
Assim que o usuário selecionar a opção “Sim” e clicar no botão “ Continuar ”, os elementos ocultos ficarão visíveis.
Estas são as etapas para as configurações de acesso à segunda lição. Para acessar as lições a seguir, você precisa repetir as etapas de cada uma delas. Por exemplo, para definir a disponibilidade para a terceira lição, você precisa criar um novo metacampo na metacaixa das páginas, formulário com mais perguntas, pop-up e anexar visibilidade dinâmica à próxima imagem ou vídeo e às opções do formulário na página.
De acordo com essas etapas, você pode garantir visibilidade dinâmica para cada lição na página.