Conteúdo do Tutorial

1. Identidade Visual da Plataforma
2. Premissas
3. Grupo de Acesso
4. Personalização Login
5. Personalização
6. Empresa
7. Configuração de E-mail
8. Resultado da Identidade Visual da Plataforma
9. Considerações Finais

Identidade Visual da Plataforma

Em busca de proporcionar uma experiência mais personalizada e alinhada à identidade visual de cada empresa, os administradores poderão personalizar a aparência da plataforma de acordo com suas necessidades, fortalecendo a identidade visual de sua empresa.

O administrador poderá definir e alterar o layout da página de acesso na plataforma por meio da funcionalidade Personalização Login, possibilitando a modificação de imagens e logos, garantindo que a primeira impressão dos usuários ao acessar a plataforma esteja totalmente alinhada com a identidade visual da empresa.

Através da funcionalidade Personalização, os administradores poderão cadastrar diferentes Temas, os quais serão utilizados conforme as necessidades da empresa. Além disso, poderão realizar alterações nas Cores exibidas na plataforma, assim como efetuar a Definição de Imagens e Logos. Configurações que poderão ser aplicadas por empresa, proporcionando maior flexibilidade ao administrador.

Com o objetivo de proporcionar uma comunicação com os usuários da plataforma mais visual, os Administradores poderão personalizar templates de e-mails através da funcionalidade Configuração de E-mail. Essa ferramenta possibilita a personalização total dos e-mails ou a vinculação a um tema previamente cadastrado, permitindo também o gerenciamento do status de envio de cada mensagem.

Neste tutorial, iremos orientá-lo passo a passo sobre como realizar as configurações necessárias para a utilização das funcionalidades e suas personalizações.

Premissas:

• Grupo de Acesso
• Personalização Login
• Personalização
• Empresa
• Configuração de E-mail

Grupo de Acesso

Antes de iniciarmos as personalizações das funcionalidades, é necessário que todas as funcionalidades que utilizaremos neste tutorial para alterar a identidade visual da plataforma, e que são necessárias para as parametrizações, sejam devidamente habilitadas no Grupo de Acesso.

Ao acessar a página da Gestão do Grupo de Acesso, clique no botão , localizado no grupo de acesso cadastrado, e em seguida, clique em Editar.

Na tela Cadastrar Grupo de Usuários, acesse a seção Menu da Plataforma e habilite as funcionalidades Configurações de E-mail, Personalização e Personalização Login.

Clique em para gravar as modificações. Se desejar cancelar a operação, clique em .

Personalização Login

Para iniciarmos as parametrizações da identidade visual da plataforma, iremos começar pela personalização do layout da página de acesso através da funcionalidade Personalização Login.

Clique no menu Plataforma e, em seguida, na coluna Página Inicial, selecione Personalização de Login, dentro de Admin.

Na seção Personalização de Login, defina a Cor Principal que será utilizada e vinculada à página de acesso. 

Clique no campo Cor Principal, e um box com a seleção de cores será apresentado. Para definir a cor desejada, clique sobre a cor escolhida. Neste momento, será gerado automaticamente um código hexadecimal correspondente à cor. No campo que contém esse número, é possível inserir manualmente essa numeração hexadecimal, caso seja necessário.

Atenção

Dica: É possível utilizar ferramentas específicas para identificar o código hexadecimal das cores em páginas da web, como a extensão gratuita ColorZilla. Esta extensão é amplamente empregada em navegadores populares, tais como Google Chrome e Mozilla Firefox, facilitando o processo de seleção e compreensão das cores utilizadas em um site.

Dentro da mesma seção, são apresentadas cinco opções de disposição de painéis que serão utilizadas na tela principal da página de acesso à plataforma.

Selecione entre as opções apresentadas clicando sobre a miniatura da disposição que servirá como exemplo para escolha.

Na seção Definição das Imagens, deverão ser inseridas as imagens que serão utilizadas no box de login de acesso. 

Através do botão , insira a imagem do logo da empresa em questão no campo Logo Login. Caso queira realizar o download da imagem inserida, clique no botão . 

Repita a operação no campo Banner Login.

Perceba que ao lado dos botões apresentados em ambos os campos, haverá o ícone . Ao passar o mouse sobre ele, será informada a resolução das imagens que deverão ser inseridas neste campo para não haver erro ao inseri-las.

Ao final da etapa, clique em para gravar as modificações. 

Personalização

A funcionalidade de Personalização oferece a flexibilidade de criar diversos temas para ajustar a plataforma de acordo com as necessidades específicas.

Para acessar a funcionalidade, clique no menu Plataforma e, em seguida, na coluna Página Inicial, selecione Personalização.

Neste recurso, é possível personalizar definições de cores, como Cor Principal, Cor de Destaque e Cor de Contraste. Além disso, permite a inserção de imagens para elementos como Logo, Banner Quiz, Banner Novidades, Banner Curso e Banner Tags, os quais serão exibidos de maneira personalizada na plataforma.

Na tela inicial, serão exibidos todos os registros de personalizações e suas respectivas datas de criação, destacados nas colunas Temas e Data de Cadastro. Além disso, para os cadastros já realizados, é possível efetuar alterações clicando no botão , permitindo a edição ou exclusão dos temas.

Para criar um novo tema, clique no botão .

Ao criar uma nova personalização, é necessário configurar o primeiro tema cadastrado como o Tema Padrão da plataforma. Essa opção permite que empresas sem um tema específico cadastrado possam utilizar o tema designado como padrão.

Para definir um tema cadastrado como tema padrão, na seção Geral, marque a opção Tema Padrão? e no campo Título do Tema, escolha um nome a ser atribuído ao tema definido como padrão.

Na seção Definição de Cores, selecione no campo Portal/Admin as cores que serão aplicadas na plataforma, como a Cor Principal, Cor Destaque e a Cor Contraste, esta que ficará visível ao passar o mouse sobre as opções no menu principal.

No campo Nuvem de Tags, selecione as cores que serão exibidas nas Tags apresentadas na página inicial da plataforma ou em Assuntos, podendo ser escolhido até cinco cores.

Na seção Definição de Imagens, insira as imagens que serão utilizadas como: Logo, Banner Quiz, Banner Novidades, Banner Curso e Banner Tags.

Para adicionar uma imagem, clique no botão ; caso queira realizar o download da imagem inserida, clique no botão . Ao lado dos botões em cada campo de imagem a ser inserido, haverá o ícone . Ao passar o mouse sobre ele, será informada a resolução das imagens que deverão ser inseridas nesse campo para evitar erros.

Atenção

Esta seção poderá ser utilizada apenas quando todos os campos disponíveis para a inserção de imagens estiverem preenchidos.

Clique em para gravar as modificações. Se desejar cancelar a operação, clique em .

Empresa

Após a finalização da criação de um Tema em Personalização, como vimos anteriormente, é necessário que esse Tema seja vinculado à empresa desejada.

Para realizar esse procedimento, acesse a guia Plataforma no menu e, em seguida, clique em Empresa, localizado na coluna Cadastros.

Ao acessar a página da Gestão de Empresas, clique no botão (ações), localizado ao lado da(s) empresa(s) cadastrada(s) e, em seguida, selecione a opção Editar.

Na tela de Edição da empresa selecionada, vincule o Tema anteriormente cadastrado utilizando o campo Tema, localizado na seção Dados Gerais da funcionalidade.

Neste campo serão exibidos a listagem de temas cadastrados na funcionalidade Personalização.

Sempre que for necessário realizar a troca do tema da empresa, o procedimento deverá ser realizado por meio dessa funcionalidade.

Após escolher o tema desejado, clique em para gravar as modificações. Se desejar cancelar a operação, clique em .

Atenção

Ao salvar a escolha do tema, é necessário realizar o logoff da plataforma e, em seguida, efetuar um novo login para que a troca seja concluída.

Configuração de E-mail

Após concluir a personalização da página de acesso e dos temas a serem utilizados na plataforma, agora é possível personalizar os e-mails que serão enviados dentro do sistema.

Nesta funcionalidade, iremos realizar a personalização dos templates dos e-mails utilizados para comunicação com os usuários, como: Imagem de Cabeçalho, Imagem do Rodapé, Fonte do Título dos E-mails, Cor da Fonte e Fale Conosco.

Para acessar a funcionalidade, acesse a guia Plataforma no menu e, em seguida, clique em Configuração de E-mail, localizado na coluna Configurações.

Na tela principal, é exibida a listagem dos e-mails já cadastrados para envio na plataforma, sendo possível realizar Edições dos atributos de e-mail.

Cada e-mail terá seus atributos disponíveis para edição, sendo importante observar que nem sempre será possível alterar todo o corpo do e-mail. Além disso, os atributos disponíveis variarão de acordo com o template de e-mail utilizado.

Para realizar edições nos Templates de e-mails cadastrados na plataforma, clique no botão localizado ao lado de cada item listado.

No campo Título, é possivel alterar o nome do e-mail cadastrado em questão.

Caso queira editar a Fonte do Título do E-mail, selecione através das opções de estilos de fontes exibidos, como: Open Sans, Trebuchet, Lucida Sans, Tahoma, Calibri e Arial.

Ao clicar no campo Cor da Fonte, será aberto um box para seleção de cores. Escolha a cor desejada, clicando sobre a cor escolhida. Ao selecionar uma cor, é gerado automaticamente um código hexadecimal correspondente a essa cor. No campo que exibe esse número, é possível inserir manualmente essa numeração hexadecimal, caso seja necessário.

No campo Saudação, é possível padronizar a saudação que será aplicada ao e-mail cadastrado ao ser disparado para comunicação.

Em Cor Saudação, clique sobre sobre o campo, e será aberto um box para seleção de cores. Selecione uma cor desejada, clicando sobre ela ou, preencha manualmente o campo com uma numeração hexadecimal referente à cor escolhida. 

Na seção Opções de Publicação, é possível Ativar, Inativar ou deixar como Rascunho o envio do e-mail aos usuários da plataforma.

Para gravar as alterações, clique em ou, clique em para encerrar.

Na tela de Configurações de E-mail, para iniciar um novo cadastro de template, clique em .

Na tela de Configurações templates de e-mail é possível alterar as configurações dos Templates de todos os e-mails enviados na plataforma, podendo ser alterado o Cabeçalho e Rodapé dos templates cadastrados, e poder vinculá-los ao Tema, anteriormente cadastrado em Personalização.

Aos Templates criados, poderão ser realizadas alterações. Para isso, clique no botão e, será possível Editar ou Excluir cadastros.

Ao clicar em Editar, será apresentada a tela de Configurações Gerais, por onde será possível realizar alterações em: Imagem Cabeçalho, Imagem Rodapé, Fonte do Título, Cor da Fonte e o campo para texto Fale Conosco.

Para gravar as alterações, clique em ou, clique em para encerrar.

De volta a tela de Configurações templates de e-mail, clique em para iniciar um novo cadastro.

Em Cadastro de Configurações de E-mail, será possível vincular os templates de e-mail criados aos Temas personalizados, cadastrados previamente.

Em Configurações Gerais, realizaremos a personalização do template. No campo Título do Tema, selecione a qual Tema cadastrado a configuração do e-mail será vinculada.

Em Imagem do Cabeçalho, insira a imagem que será utilizada no cabeçalho para o template de e-mail cadastrado, através do botão . Se desejar fazer o download da imagem inserida, clique no botão .

Ao lado dos botões em cada campo de imagem a ser inserido, você encontrará o ícone . Ao passar o mouse sobre ele, será informada a resolução das imagens que deverão ser inseridas nesse campo para evitar erros.

Repita o mesmo processo em Imagem do Rodapé.

No campo Fonte do Título, é possível escolher a fonte que será utilizada no título do e-mail. Escolha entre os estilos de fontes apresentados, tais como: Open Sans, Trebuchet, Lucida Sans, Tahoma, Calibri e Arial.

Em Cor da Fonte, ao clicar no campo, será aberto um seletor de cores. Para definir a cor desejada, clique sobre a cor escolhida. Ao selecionar uma cor, será gerado automaticamente um código hexadecimal correspondente à cor. No campo que exibe esse número, é possível inserir manualmente essa numeração hexadecimal, caso seja necessário.

Digite no campo Fale Conosco o texto desejado que será inserido na parte inferior do e-mail.

Para finalizar, clique em para gravar as modificações, ou se desejar cancelar a operação, clique em .

Resultado da Identidade Visual da Plataforma

Personalização Login

Personalização

Configuração de Email

Considerações Gerais

Neste tutorial, abordamos o passo a passo e a ordem necessária para personalizar a identidade visual da plataforma por meio das funcionalidades de Personalização de Login, Personalização e Configurações de E-mail. O principal objetivo deste tutorial é permitir que os administradores da plataforma configurem com sucesso essas funcionalidades, contribuindo assim para uma experiência mais personalizada.