Como Criar uma carta interativa com o elementorPRO (Parte 01)

Como Criar uma carta interativa com o elementorPRO (Parte 01)

Olá hoje é o dia dos namorados e nada melhor do que compartilhar o tutorial de como eu criei a carta interativa do ElementorBR para este dia.

Se você não me segue no instagram provavelmente não sabe do que estou falando então antes de continuar começa a me seguir e fica por dentro do que acontece no elementorBR.

Para facilitar sua vida Preparei um vídeo. Com o Passo a passo é só da Play e assistir.

O texto abaixo é um complementor ao vídeo. Para você entender melhor cada passo assista ao vídeo antes de ler. Esses são os passos que acompanhou no vídeo + os códigos que você vai precisar. Se tiver alguma não esqueça de colocar nos comentários.

Primeiro Passo

Crie três páginas, a primeira página é a mais importante, a página onde o visitante vai escrever a carta.

Em seguida crie os formulários.

Nomeie cada campo com um id especifico a opção avançado (Em caso de dúvidas volte ao vídeo para encontrar essa opção.)

Segundo Passo

Depois de terminar de criar o formulário você vai criar o espelho, é o preview para o visitante entender o que está acontecendo e descobrir como o destinatário vai receber a carta.

Para isso você vai criar um form para cada campo espalhado.

Depois você vai colocar um bloco HTML e usar o seguinte código para ocultar os botões de enviar.

<script type="text/javascript">setTimeout( function() {
    jQuery( document ).ready( function( $ ) {
    $( '#form-field-nome01' ).keyup( function () {
        $( '#form-field-nome02' ).val( $( this ).val() );
    } );
   
    $( '#form-field-mensagem01' ).keyup( function () {
        $( '#form-field-mensagem02' ).val( $( this ).val() );
    } );
    $( '#form-field-nome03' ).keyup( function () {
        $( '#form-field-nome04' ).val( $( this ).val() );
    } );
    $( '#form-field-email01' ).keyup( function () {
        $( '#form-field-email02' ).val( $( this ).val() );
    } );      
});
}, 2000 );
</script>

Observe no vídeo para fazer as alterações corretas no seu código.

Agora vamos em avançado e use o código css abaixo para centralizar os botões e fazer os ajustes dos textos.

#env1 {
    display: none;
}
selector #form-field-nome02 {
    text-align:center;
}
selector .elementor-field-group .elementor-field-textual:focus {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0) inset;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0);
    outline: 0;
}

Observe no vídeo para fazer as alterações corretas no seu código.

Terceiro Passo

Agora chegou a hora você voltar no formulário principal e editar o email.

Insira a opção de Redirecionar e de email em Ações de envio.

Configure cada parte do formulário com calma.

Abaixo você encontra o modelo do código dinâmico.

<a href="https://elementorbr.com/cartao-dos-namorados/?nome01=[field id="nome01"]&mensagem01=[field id="mensagem01"]&nome03=[field id="nome03"]" target="_blank"> Substituir pelo seu texto </a>

Observe no vídeo para fazer as alterações corretas no seu código.

Finalizando o tutorial

Para finalizar o tutorial você Precisa me ajudar. É bem simples.

  • Se inscreve no canal do YouTube
  • Da um like no vídeo
  • E deixa seu comentário dizendo o que você quer aprender e se quer ver a continuação.

CLIQUE AQUI PARA SE INSCREVER NO CANAL

Agora deixa seu comentário, envia uma mensagem de amor a sua amada e até o próximo post. 😉

CLIQUE AQUI PARA ENVIAR UMA MENSAGEM AO SEU AMOR.

CLIQUE AQUI PARA COMPRAR O ELEMENTORPRO

Fechar Menu