Modal Builder: Identidade visual
🎨 Modal Builder: Identidade Visual
Introdução
O Modal Builder da edunext disponibiliza ferramentas completas de personalização visual para que o modal de matrícula reflita com precisão o branding da sua instituição. Ajustar cores, logomarcas e imagens específicas de cada curso reforça a credibilidade da sua marca no momento da compra e proporciona uma navegação fluida, confiável e profissional para o aluno.
⚙️ Passo a Passo para Configurar a Identidade Visual
- No menu de navegação lateral da edunext, acesse a ferramenta Cursos.
- Localize e abra o curso que deseja personalizar.
- Avance até a etapa Modal Builder (Etapa 6 do cadastro do curso).
- No menu interno do construtor, clique na aba Identidade Visual.
- Configure a paleta de cores (Primária, Secundária e Auxiliar) e insira as imagens institucionais.
- Clique no botão Salvar na barra superior do curso para aplicar as definições.
💡 Padrão Global: Se você deseja que todos os novos cursos já utilizem a identidade visual da sua instituição por padrão, realize essa configuração previamente em Configurações gerais > Personalização. Assim, os novos cursos herdarão o design global automaticamente, dispensando ajustes manuais repetitivos.
🖌️ Mapeamento das Cores no Modal de Matrícula
O sistema divide a estilização visual em três funções cromáticas distintas:
| Categoria | Onde a Cor é Aplicada no Checkout | Aplicação na Tela de Confirmação |
|---|---|---|
| Cor Primária |
• Subtítulos e títulos dos métodos de pagamento. • Campos ativos durante o preenchimento dos passos. • Fundo dos títulos das colunas e rodapé. • Fundo do botão do método de pagamento ativo. |
• Texto do método de pagamento selecionado. • Texto auxiliar explicativo abaixo do código de barras ou QR Code. |
| Cor Secundária |
• Checkboxes (caixas de seleção) ativas. • Título do curso no resumo do pedido e valores selecionados. • Fundo do banner superior e botões de avançar ("Próximo Passo"). • Botão de ajuda e botões de opções de pagamento. |
• Fundo do título de sucesso da matrícula. • Texto do total da compra. • Botão de "Copiar Linha Digitável". • Número do código de barras. |
| Cor Auxiliar |
• Avisos e alertas de preenchimento obrigatório. • Texto do botão de retorno ("Voltar"). • Ícone e indicador de passos já concluídos pelo usuário. |
• Mensagens textuais complementares de conclusão da matrícula. |
🖼️ Especificações de Logos e Imagens do Curso
Para assegurar carregamento otimizado e visualização nítida sem distorções no checkout, siga os padrões recomendados:
| Elemento | Dimensões Recomendadas | Formato Indicado | Particularidades Operacionais |
|---|---|---|---|
| Logo do Cabeçalho | 400 × 200 px | .PNG com fundo transparente |
Exibida no topo superior do modal de matrícula. |
| Logo do Rodapé | 400 × 200 px | .PNG com fundo transparente |
Exibida no rodapé junto aos links de suporte e contatos. |
| Imagem do Curso | 400 × 200 px | .PNG ou .JPG |
Exibida exclusivamente na versão desktop do checkout. |
Para enviar os arquivos, clique no ícone de lápis ao lado do respectivo item, selecione o arquivo em seu dispositivo e conclua o envio.
⚠️ Atenção: Por questões de responsividade, fluidez e aproveitamento de espaço em telas verticais, a Imagem do Curso não é exibida em dispositivos móveis (smartphones), sendo apresentada unicamente em telas de desktop.
✅ Conclusão
A personalização assertiva do Modal Builder entrega uma experiência alinhada ao manual de marca da sua instituição, reduzindo atritos visuais e transmitindo total segurança para o aluno finalizar a sua matrícula.
💡 Dica de Especialista: Atenção ao contraste visual! Como a Cor Secundária é utilizada como fundo do botão principal de avançar e a Cor Primária estiliza os campos ativos, evite cores excessivamente claras (como amarelo ou cinza-claro) sem contraste com o texto branco. Se a sua marca possuir apenas uma cor principal de destaque, utilize o mesmo tom na Primária e na Secundária, reservando a Cor Auxiliar para uma cor chamativa de aviso (como vermelho ou laranja) para sinalizar campos obrigatórios pendentes de preenchimento.
📞 Ainda com Dúvidas?
Se você seguiu todos os passos e ainda precisa de ajuda, nossa equipe de suporte está pronta para te atender:
- E-mail: suporte@edunext.com.br
- Abertura de Ticket: Clique aqui
- WhatsApp: (48) 9105-5630