Neste artigo abordaremos a quinta etapa do procedimento de criação de um curso na plataforma edunext, a criação do MODAL BUILDER.
O que é um Modal Builder?
O modal builder da edunext é um assistente para criação do modal de matrícula.
Ao acessar a etapa de criação do modal builder você terá a visualização da tela a seguir.
As configurações estão divididas em momentos que são visualizadas na lateral esquerda de visualização da tela.:
- Identidade Visual,
- Sobre o Curso,
- Termos de Pré-Matrícula,
- Páginas de Agradecimento,
- Tags de Rastreamento e
- Informações Extras e contatos.
Vamos conhecer cada uma das etapas de preenchimento.
Identidade Visual
No preenchimento da Identidade visual você irá definir itens importantes que irão compor o design do modal de matrícula, são eles:
- Cores
- Logo e Imagem do Curso
Cores
Neste item você poderá definir as cores que serão utilizadas no itens que irão compor o modal. As configurações estão divididas entre cor primária, secundária e auxiliar.
Cores Primárias
A definição de uma cor primária irá afetar elementos como subtítulos, campo ativo dos passos de inscrição e títulos dos meios de pagamento.
A cor primária afetará cores de fundo em itens como: títulos das colunas, rodapé e botão de seleção de forma de pagamento (opção selecionada).
Cores Secundárias
A definição de uma cor secundária irá afetar todos os checkboxes (caixas de seleção), título do curso no resumo da compra, valor do método de pagamento selecionado e cores das imagens dos métodos de pagamento (opção selecionada).
A cor secundária afetará cores de fundo em itens como: banner superior, botões de seguir para o próximo passo no modal, botão de seleção da opção de pagamento, botão de seleção de forma de pagamento (opção não selecionada) e botão de ajuda no rodapé.
Cor Auxiliar
A definição de uma cor auxiliar irá afetar texto de aviso de preenchimento obrigatório, texto do botão de voltar para o passo anterior, ícone e texto do passo concluído e texto de conclusão de matrícula.
Veja o exemplo abaixo.
A cor primária é VERDE
A cor secundária é AZUL
A cor auxiliar é VERMELHO
Logos e Imagens do Curso
Neste item você poderá definir os logos que serão visualizados na página do modal de matrícula e uma imagem para o curso.
Em relação a logo você poderá inserir uma imagem de logo para tema claro e para tema escuro.
Para realizar a inserção, basta clicar no ícone de lápis no item que deseja inserir e localizar a imagem em seu computador.
As dimensões de imagem são:
- Tema Claro: Altura 200px e Largura 400px
- Tema Escuro: Altura 200px e Largura 400px
- Imagem do Curso: Altura 200px e Largura 400px
Sobre o Curso
Neste item você poderá inserir o texto que ficará disponível na página de checkout. Utilize o editor de texto disponível para a publicação do texto.
Você poderá utilizar o botão Visualizar Texto para checar como está sendo estruturado o texto que está inserindo.
Termo de Pré-matrícula
Neste item você poderá criar um termo de pré-matrícula que será exibido ao usuário quando estiver realizando a compra através da página de checkout.
A criação deste termo é feita utilizando o editor de texto disponível para a publicação do texto.
O editor permite que, através da utilização de tokens, seja possível pegar as informações na base de dados sobre o usuário para compor a mensagem.
Utilize os botões indicados a seguir para utilizar no termo informações de usuário ou curso.
Você poderá utilizar o botão Visualizar Texto para checar como está sendo estruturado o texto que está inserindo.
Páginas de Agradecimento
Neste item você poderá inserir uma página de agradecimento personalizada para cada método de pagamento disponível.
São quatro campos disponíveis:
- Página para Boleto: Informar a página que o usuário será direcionado ao finalizar a compra, caso tenha sido feita via boleto bancário.
- Página para cartão de Crédito: Informar a página que o usuário será direcionado ao finalizar a compra, caso tenha sido feita com cartão de crédito.
- Página para múltiplos Cartões de Crédito: Informar a página que o usuário será direcionado ao finalizar a compra, caso tenha sido feita via pagamento com mais de um cartão de crédito.
- Página para PIX: Informar a página que o usuário será direcionado ao finalizar a compra, caso tenha sido feita utilizando PIX.
É possível utilizar a mesma página para mais de uma das opções.
Tags de Rastreamento
Uma tag de rastreamento é um script adicionado ao código do site, visando realizar o acompanhamento das atividades realizadas por um visitante no site.
Para utilizar o seu rastreamento através do Google Tag Manager basta inserir o ID de rastreamento gerado pelo google no campo disponível .
Informações Extras de Contato
A etapa final do Modal Builder permite que você adicione informações extras a sua página de checkout.
As possibilidades de inserção são:
- Telefone
- Link de Ajuda
- Link de Política de Privacidade
