Layout do dashboard
Este guia irá ensiná-lo a configurar a página inicial (o Dashboard) do Escritório Virtual do seu usuário. Você aprenderá a criar, organizar e gerenciar todos os blocos de informação (widgets) que aparecem nesta tela.
O Designer do Escritório Virtual é a ferramenta da Plataforma Eloss responsável por estruturar e personalizar o ambiente principal de navegação do usuário — o seu Escritório Virtual.
Por meio dela, o administrador tem total controle sobre o que será exibido, onde e para quem, tudo isso de forma totalmente No Code, ou seja, sem necessidade de programação.
Cada empresa opera em um contexto e modelo de rede diferentes. Por isso, o Designer foi concebido com base em uma arquitetura modular, permitindo que cada operação construa uma interface única e adaptada às suas regras de negócio.
No painel de administração, o Designer atua como um construtor visual de dashboards, em que o gestor pode:
- Criar e organizar espaços de layout (linhas e colunas);
- Inserir e configurar componentes visuais (banners, indicadores, comunicados, gráficos, etc.);
- Definir regras de exibição condicional com base em qualificações (QVA) e perfis de acesso;
E ajustar a ordem e proporção de cada elemento para uma experiência clara e intuitiva.
💡 Conceito central:
O Designer transforma o Escritório Virtual em um ambiente inteligente, visual e dinâmico, onde cada componente comunica informações específicas da operação (pontos, bônus, metas, comunicações ou indicadores).
O Escritório Virtual é o “coração” da experiência do seu usuário. A forma como você organiza as informações impacta diretamente a navegação, o engajamento e a clareza da sua operação.
Uma das principais características da Plataforma Eloss é a filosofia No Code, que permite a você, administrador, ter controle total sobre o design sem precisar de nenhum código. Este artigo é o primeiro passo para dominar essa ferramenta.
Objetivo: Ao final deste guia, você entenderá como usar o Designer para transformar uma tela em branco no layout completo visto acima, controlando onde cada perfil, banner ou relatório irá aparecer.
1. Acessando o Designer do Dashboard
Para começar esteja na área de escritório da plataforma:
Na barra de menu do módulo, no menu “escritório” selecione a opção “designer”
Seguindo este caminho (Escritório → Escritório → Designer), você chegará à tela principal de configuração.
Ela se chama Escritório – Designer – Layout do Dashboard.
É nesta tela que toda a “mágica” acontece. Por padrão, você já estará na aba correta: Layout do Dashboard (imagem abaixo).
Antes de começarmos a configurar o designer da dashboard do Escritório virtual do usuário, será importante compreendermos um conceito fundamental de customização, o conceito de Bootstrap.
2. Entendendo o Conceito de Layout e o Bootstrap
O Designer do Escritório Virtual utiliza uma estrutura visual baseada em layout responsivo, construída sobre o conceito de grid do Bootstrap — um dos frameworks mais utilizados no desenvolvimento de interfaces modernas.
Essa estrutura é o que garante que a página do Escritório Virtual se mantenha organizada e proporcional em qualquer dispositivo — seja um computador, tablet ou smartphone — sem que o administrador precise escrever uma única linha de código.
a - O que é o Layout no contexto da Eloss
O layout é a estrutura-base da página, composta por blocos horizontais e verticais que definem onde cada informação será exibida.
Dentro do Designer, você cria essa estrutura ao definir linhas e colunas, que servirão como espaços reservados para os componentes visuais (cards, banners, gráficos, indicadores, etc.).
Em outras palavras:
O layout define a arquitetura da página, enquanto os componentes definem o conteúdo que será exibido dentro dela.
Essa separação é o que permite que o painel seja totalmente modular e autogerível, seguindo o princípio No Code — o administrador monta o layout como se fosse um quebra-cabeça, apenas configurando os espaços e escolhendo os componentes que deseja exibir.
b - O Papel do Bootstrap
O Bootstrap é o sistema de grade (grid system) que organiza o espaço da tela em 12 colunas proporcionais.
Essas colunas funcionam como guias invisíveis que ajudam a manter alinhamento, equilíbrio e responsividade no layout.
Cada linha do grid pode conter até 12 unidades de largura — e você pode combinar diferentes tamanhos de coluna dentro de uma mesma linha.
Exemplo:
Distribuição | Interpretação | Soma |
12 | Um único bloco em tela cheia | 12 |
6 + 6 | Dois blocos iguais lado a lado | 12 |
4 + 8 | Um bloco estreito e outro mais largo | 12 |
3 + 3 + 3 + 3 | Quatro blocos iguais | 12 |
💡 Dica:
Sempre que a soma das colunas de uma linha for igual a 12, o conteúdo ocupará 100% da largura da página.
Se a soma for menor que 12, o espaço restante ficará vazio (em branco) à direita.
c - Como ele funciona
A adoção do grid Bootstrap dentro da Eloss garante que o Escritório Virtual seja visualmente coerente e responsivo, independentemente da forma como o administrador monta o layout. Isso significa que:
Cada linha e coluna mantém proporções consistentes em todas as resoluções de tela.
O posicionamento de cada componente (cards, banners, gráficos etc.) se adapta automaticamente.
É possível montar estruturas complexas (como painéis de indicadores e gráficos lado a lado) com total liberdade, sem comprometer a responsividade.
d - Como ele se parece na prática
A imagem representa a estrutura padrão de 12 colunas do Bootstrap, o sistema usado pela Plataforma Eloss.
Na imagem acima, observe como o espaço total da tela é dividido em 12 colunas verticais.
Essas colunas são invisíveis para o usuário final, mas fundamentais para a construção do layout — elas garantem o alinhamento e a proporcionalidade entre os elementos.
💡 Dica: pense nas colunas como trilhos de um trem. Cada componente (banner, card, gráfico, etc.) ocupa uma ou mais dessas faixas.
3. Construção do Layout
a - Adicionar
O primeiro passo para construir sua tela é clicar no botão + Adicionar na seção Layout.
Ao clicar, uma janela pop-up chamada Layout – Novo aparecerá.
b - Definindo um espaço
Vamos começar com um exemplo, mas você não precisa seguir. Ele é apenas ilustrativo para que você entenda os passos que deve tomar. O seu Layout pode ser da forma que encaixar melhor para você.
💡 Dica:
Sempre que a soma das colunas de uma linha for igual a 12, o conteúdo ocupará 100% da largura da página.
Se a soma for menor que 12, o espaço restante ficará vazio (em branco) à direita.
No campo Linha*, digite 1. (Vamos começar na primeira linha).
Explicação da linha:
A linha representa a organização vertical dos espaços a serem utilizados. Ela funciona como uma régua que delimita horizontalmente o uso do espaço. Os elementos se organizam dentro da mesma linha até que seja criada a próxima linha.
No campo Coluna*, selecione 4. (Vamos criar um espaço de 4 unidades)
Explicação da coluna:
A coluna representa a organização horizontal dos espaços dentro de uma linha. Ela funciona como um divisor que define a largura que aquele espaço ocupará, baseado no sistema de 12 unidades.
Clique em Salvar
Agora você tem uma linha de configuração que mostra Linha 1 e Tamanho Coluna:
Com esta configuração realizada, teremos como resultado uma previsão de uso de espaço conforme na imagem abaixo:
Repare que o restante da tela permanece livre, pronto para receber outros elementos.
Isso significa que o componente que for inserido nesse bloco usará 1/3 da largura da tela — ótimo para exibir informações compactas, como um card de perfil, uma prévia de bônus ou um resumo lateral.
c - Configurações complementares
Ainda na criação do layout, você também verá as Opções para gerenciar este espaço:
Ícone de Lápis Azul: Permite Editar a configuração (mudar a linha ou o tamanho da coluna).
Ícone de Lixeira Vermelha: Permite Excluir este “espaço” de layout.
4. Expandindo o Layout
Ao dominar a lógica das linhas e colunas, você passa a ter controle total sobre o visual e a experiência do Escritório Virtual, moldando o ambiente conforme as prioridades da sua operação.
a - Adicionando componentes (O "Conteúdo")
Agora que reservamos o “espaço” (o Layout de 4 unidades), precisamos preenchê-lo com “conteúdo” (os widgets).
Clique na seta amarela na linha de layout que acabamos de criar.
O sistema abrirá uma nova área à direita, chamada Componentes. É aqui que você adicionará os widgets (como Perfil, Banners, etc.) que devem aparecer dentro do seu espaço de 4 unidades.
Para customizar os componentes, vamos agora entender como posicioná-los dentro do layout que criou.
No passo anterior (Construção do Layout), você criou um “espaço” de 4 unidades. Agora, este campo Coluna* (de 1 a 12) se refere a uma nova mini-grade de 12 colunas que existe dentro daquele espaço.
Se você escolher 12: O widget ocupará 100% da largura do seu “espaço” (100% dos 4/4). Este é o uso mais comum para empilhar itens.
Se você escolher 6: O widget ocupará 50% da largura do seu “espaço” (2/4). Isso permite colocar dois componentes de Coluna 6 lado a lado.
Exemplo:
O mesmo conceito de 12 colunas se aplica dentro de qualquer espaço que você criar (seja ele de 4, 8 ou 12 unidades).
Vamos agora portanto, adicionar o primeiro componente:
Para adicionar seu primeiro widget, clique no botão + Adicionar na seção Componentes.
Uma nova janela pop-up, Componente – Novo, aparecerá.
Vamos analisar os campos mais importantes:
Campo: Coluna* (A Grade Aninhada)
Você deve Selecionar quantas colunas do layout que você criou anteriormente esse componente irá ocupar.
Neste caso, queremos que o componente ocupe 100% do Layout que criamos, ou seja, tenha uma ocupação de 12 colunas.
Campo: Descrição*
Digite um nome interno para você identificar este widget. Para o nosso exemplo, usamos: “Card de perfil 1”.
Campo: Componente*
Nesta configuração você seleciona qual será o componente que deverá ser exibido no layout.
Cada componente é uma unidade independente, com propósito específico e parâmetros de configuração próprios, permitindo que o ambiente se adapte ao modelo de negócio de cada empresa sem necessidade de programação.
Esses componentes são a base visual do Escritório Virtual: cada um deles traduz um aspecto da operação — como dados financeiros, desempenho da rede, pontuação, comunicações, cursos, qualificações, bônus e pedidos — em formatos visuais interativos como cards, tabelas, gráficos, indicadores e barras de progresso.
📌 Conceito central:
Cada componente da Eloss foi idealizado para representar uma informação de forma clara, contextual e funcional, conectando-se diretamente aos motores da plataforma (Cadastro, Transações, Compensação e Comunicação).
Assim, o Escritório Virtual deixa de ser apenas uma área informativa e passa a atuar como um painel inteligente de gestão, totalmente configurável pelo administrador através do Designer de Componentes (ou Designer do Dashboard).
Configurações do Componente: (Opcional) Dependendo do Componente que você escolher (como “Banner” ou “Comunicado A”), uma nova seção pode aparecer
Alguns componentes do Escritório Virtual possuem parâmetros adicionais de configuração, que aparecem de forma dinâmica conforme o tipo de componente selecionado.
Essas opções permitem personalizar o comportamento e a aparência do elemento dentro da página.
📌 Importante:
A seção de configurações é opcional — ela só será exibida quando o tipo de componente escolhido oferecer ajustes específicos.
Exemplo:
Ao selecionar o componente “Banner”, surgem campos para definir imagem, link de destino e tempo de exibição.
Ao escolher o “Comunicado A”, podem aparecer opções de título, subtítulo e limite de exibição de mensagens.
Ao escolher o “Comunicado A”, podem aparecer opções de título, subtítulo e limite de exibição de mensagens.
Essas configurações adicionais permitem ajustar cada componente de forma precisa, mantendo a harmonia visual e funcional da interface.
💡 Dica:
Antes de aplicar um componente, visualize quais opções extras ele disponibiliza. Assim, você poderá aproveitar todo o potencial de personalização que o sistema oferece, sem precisar recorrer a código ou customizações externas.
Veja abaixo as opções de componentes disponíveis para aplicação:
Entendendo os Componentes do Escritório Virtual
Cada componente representa um bloco funcional e visual dentro do Escritório Virtual da Plataforma Eloss.
Eles são os elementos que dão forma e significado à página, permitindo exibir informações, indicadores, mensagens e conteúdos de maneira dinâmica e totalmente configurável.
Esses componentes são os “tijolos” do layout — cada um cumpre uma função específica, e juntos formam a experiência completa do usuário final.
Dependendo do tipo de componente selecionado, o administrador poderá personalizar diferentes aspectos, como:
- Cores e estilos visuais (fundo, texto, bordas, ícones);
- Fonte de informações (dados de bonificação, rede, produtos, perfis, regras de negócio etc.);
- Cálculos automáticos baseados nas regras configuradas no módulo de compensação;
- Textos e comunicados para envio de mensagens, campanhas e avisos internos;
- Estrutura e agrupamento de dados, para exibir valores consolidados, comparativos ou hierárquicos.
Cada componente, portanto, tem função e comportamento próprios — alguns são voltados para exibição de dados e resultados, enquanto outros são destinados a comunicação, marketing e conteúdo institucional.
Comportamento Dinâmico
Os componentes são totalmente integrados aos módulos da plataforma, o que significa que as informações exibidas são atualizadas em tempo real, conforme as ações do usuário ou as movimentações de rede.
Aplicação prática:
Para o nosso exemplo, vamos selecionar o componente Perfil
OBS: Observe que ao selecionar o componente irão se abrir campos de configurações e customizações específicas daquele componente.
Aplicando as configurações ao componente:
Compensação* Esta função diz respeito à aplicação ou não de restrições de visualização deste card conforme a regra de negócio.
Visão geral: Significa que seu card ficará disponível para qualquer usuário que tenha cadastro no escritório Virtual.
Compensação: Significa que você irá aplicar alguma restrição de exibição deste card conforme a qualificação do usuário do Escritório virtual.
Campo: Qualificações/Variações*
Este campo permite restringir quem pode ver este widget.
Você pode usar este campo para que um widget (ex: um banner de promoção) apareça apenas para usuários que atingiram uma qualificação específica (ex: “Ouro” ou “Ativo no mês”).
Aplique neste campo o código de ID QVA que diz respeito à qualificação mínima que a pessoa precisa para poder visualizar este card no dashboard. [como consultar o ID QVA]
Customização de cores
Configuração da informação de regra
Clique em salvar
Após concluir a configuração, o componente de perfil já estará aplicado no designer:
Você pode visualizar a aplicação acessando a dashboard do usuário do Escritório Virtual:
5. Adicionar um novo componente
Localize o espaço de layout criado na etapa anterior.
(No nosso exemplo, o bloco de 4 colunas reservado para o “Painel de Perfil”).
Clique na seta amarela
localizada na linha correspondente.
O sistema abrirá uma nova área à direita chamada Componentes.
Clique em + Adicionar para inserir o primeiro componente.
Uma janela pop-up chamada Componente – Novo será exibida.
Campos de Configuração do Componente
A seguir, veremos os principais campos disponíveis para configurar o novo elemento visual:
Campo | Descrição | Exemplo |
Coluna* | Define quantas colunas (de 1 a 12) o componente ocupará dentro do espaço escolhido. | 12 = ocupa 100% do bloco; 6 = metade do bloco (permite colocar dois lado a lado). |
Descrição* | Nome interno para identificação do componente no Designer. | “Card de perfil 1” |
Componente* | Define qual tipo de elemento será exibido no layout. | “Perfil”, “Banner”, “Resumo Total”, etc. |
💡 Dica:
O conceito de 12 colunas se repete dentro de cada espaço criado.
Isso significa que cada bloco (4, 8 ou 12 unidades) possui internamente sua própria mini-grade de 12 colunas.
Conceito Central dos Componentes
Cada componente da Plataforma Eloss foi projetado para representar uma função específica da operação.
Eles se conectam diretamente aos motores centrais do sistema:
Motor de Identidade: dados do usuário e rede;
Motor de Transações: produtos, compras e fluxos comerciais;
Motor de Compensação: regras, pontos e bônus;
- Motor de Comunicação: mensagens e comunicados.
📌 Em resumo: os componentes traduzem informações técnicas em elementos visuais interativos, compondo a interface do Escritório Virtual de forma 100% No Code.
Para ilustrar como você pode empilhar vários widgets no mesmo espaço, nós adicionamos um segundo componente (“Ponto e agrupador” com a descrição “bônus”) nesta mesma coluna de Layout 4.
Veja na imagem abaixo como fica a configuração:
a - Entendo a "Posição" (O Empilhamento)
Quando adicionamos o segundo componente (“bônus”), o sistema automaticamente deu a ele a Posição 2 em diante.
O campo Posição controla a ordem vertical (o empilhamento).
- Posição 1 “Card de perfil”
- Posição 2 “bônus”
- Posição 3 “Card Produto”
Você pode alterar esses números manualmente a qualquer momento para reordenar os widgets.
O resultado visual no Escritório Virtual (visto na imagem abaixo) mostra exatamente isso: o Perfil (Posição 1) está no topo, e o “Seu resultado” (Posição 2) está logo abaixo, ambos preenchendo 100% do layout.
6. Finalizando a primeira linha (4 + 8 = 12)
Na seção Layout, observe que a Linha 1 agora possui duas entradas:
- Um item de Coluna 4, onde já configuramos o Perfil e o Resultado;
- Um novo item de Coluna 8, que vamos preencher agora.
Somando 4 + 8 = 12, você completa a largura total da linha, garantindo que todo o espaço horizontal do dashboard seja aproveitado.
a - Estrutura do Espaço de 8 Colunas
Após criar suas linhas e colunas no Designer do Dashboard, cada item de layout representa uma área do seu grid — por exemplo, a coluna de 4 unidades (com o Perfil) e a coluna de 8 unidades (com o Banner e os Indicadores).
Para adicionar conteúdo (como cards, banners ou indicadores) dentro de uma coluna:
- Localize a linha e a coluna que deseja preencher.
(No exemplo, vamos usar Linha 1 / Coluna 8). - Clique no ícone amarelo de seta ➡️ destacado na imagem.
- O sistema abrirá uma nova seção à direita chamada Componentes.
7. Repetindo o Processo e Finalização
Nesta etapa, não há nenhuma nova configuração.
Você apenas repete o mesmo processo já ensinado anteriormente para adicionar os componentes dentro da coluna.
Basta seguir os mesmos passos:
- Clique em + Adicionar para incluir um novo componente.
- Preencha os campos conforme o modelo anterior:
- Coluna: defina o tamanho que o componente ocupará (1 a 12).
- Descrição: nome interno para identificar o widget.
- Componente: selecione o tipo (ex: Banner, Ponto e Agrupador, etc.).
- Posição: organize a ordem vertical (1, 2, 3…).
- Caso o componente possua Configurações específicas, personalize conforme necessário (como cores, textos, imagens ou regras de exibição).
- Clique em Salvar para aplicar.
Exemplo de aplicação:
Para exemplificar o resultado desta configuração, realizamos a adição de novos componentes ao designer. Veja abaixo o resumo das configurações que foram utilizadas:
Posição | Componente | Descrição | Coluna |
1 | Banner | Elemento visual superior, usado para destaque de campanhas ou informações rápidas. | 12 |
2 | Ponto e Agrupador | Indicador 1 — Exibe o primeiro conjunto de métricas. | 4 |
3 | Ponto e Agrupador | Indicador 2 — Exibe o segundo conjunto de métricas. | 4 |
4 | Ponto e Agrupador | Indicador 3 — Exibe o terceiro conjunto de métricas. | 4 |
Essa configuração mostra como a Posição (ordem) e a Coluna (largura) trabalham juntas dentro do layout.
- Posição 1 – Banner:
O sistema identifica que o componente ocupa Coluna 12, portanto ele é renderizado no topo, usando 100% da largura do bloco de 8 unidades. - Posições 2, 3 e 4 – Ponto e Agrupador:
Cada componente ocupa Coluna 4, então a plataforma os distribui automaticamente lado a lado, formando uma linha interna perfeitamente equilibrada.
Cálculo da grade interna:
4 + 4 + 4 = 12 → total exato da mini-grade interna, garantindo que os três indicadores fiquem alinhados horizontalmente.
a - Visualização do Resultado no Escritório Virtual
O resultado visual dentro do Escritório Virtual ficará assim:
- Lado esquerdo (4 unidades):
- Posição 1: “Card de Perfil”
- Posição 2: “Seu Resultado”
- Posição 1: “Card de Perfil”
- Ambos empilhados verticalmente e ocupando toda a largura do espaço (Coluna 12 interna).
- Lado direito (8 unidades):
- Posição 1: “Banner” (largura total)
- Posições 2, 3 e 4: “Pontos e Agrupadores” dispostos lado a lado.
- Posição 1: “Banner” (largura total)
Visualmente, o layout transmite equilíbrio e clareza:
O topo exibe o banner informativo, e abaixo, três cards de desempenho formam um painel de indicadores agrupados.
b - Conclusão e Próximos Passos
Layout Concluído!
Você aprendeu o fluxo completo para construir um layout de dashboard: definir os “espaços” (Layout) e preenchê-los com “conteúdo” (Componentes), usando a lógica do grid de 12 colunas, o empilhamento por Posição e o alinhamento por Colunas aninhadas.
Agora você pode aplicar esse conhecimento para criar novas linhas (Linha 2, Linha 3…) e adicionar todos os widgets que sua operação necessita.
🔗 Links Relacionados:
- [Guia Completo de Widgets do Dashboard] (Aprenda em detalhes o que cada Componente, Compensação e filtro QVA faz).
8. Personalizando o Design (Cores e Logos)
Após organizar a estrutura do seu dashboard na aba “Layout”, o próximo passo é aplicar a identidade visual (White Label) da sua marca.
Nesta seção, vamos focar na aba Personalização, que controla todas as cores, logotipos e imagens de fundo do seu Escritório Virtual.
a - Acessando a Área de Personalização
De volta à tela principal do Designer (o caminho que aprendemos: Escritório → Escritório → Designer), clique na aba Personalização.
Você será levado à tela Escritório – Designer – Templates. É aqui que você define o “White Label” da plataforma.
Vamos dividir esta tela em seções lógicas, começando pela Identidade Visual da Página Principal.
b - Personalização da Página Principal
Esta seção controla as imagens e cores que seu usuário vê após fazer o login, na tela principal do Escritório Virtual.
Configurando a Identidade da Marca (Imagens)
Na coluna direita da tela (como mostrado na imagem abaixo), você definirá as imagens principais da sua marca, que compõem a identidade visual do seu Escritório Virtual:
Ícone (32×32)
Função: controla o favicon — aquela pequena imagem que aparece na aba do navegador.
Recomendação: utilize uma versão simplificada da sua logo, preferencialmente dentro de um círculo colorido, para garantir boa visibilidade em navegadores com abas claras.
Isso evita que logotipos brancos “desapareçam” no fundo do navegador.
Logo (195×65)
Função: define a logomarca principal exibida no cabeçalho superior (header) de todo o Escritório Virtual.
Descrição: é o principal elemento de identidade da sua marca dentro da plataforma, visível em todas as páginas após o login.
- Recomendação: utilize uma imagem com fundo transparente para melhor integração visual com as cores do cabeçalho.
Configurando as Cores do Site
Na coluna da esquerda (destacada em vermelho na imagem abaixo), você define o esquema de cores que será aplicado a todo o Escritório Virtual.
Essas cores afetam elementos como menus, botões, links e áreas de fundo, compondo a base visual da sua marca dentro da plataforma.
Na coluna da esquerda (destacada em vermelho na imagem abaixo), você define o esquema de cores que será aplicado a todo o Escritório Virtual.
Essas cores afetam elementos como menus, botões, links e áreas de fundo, compondo a base visual da sua marca dentro da plataforma.
💡 Dica: Entendendo “s/ mouse” e “c/ mouse”
Você notará que muitos campos aparecem em pares:
- “s/ mouse” (sem mouse): representa a cor padrão do item, quando ele está em repouso.
- “c/ mouse” (com mouse): define a cor de hover, ou seja, a tonalidade que o item assume quando o usuário passa o cursor sobre ele.
Essa diferenciação cria interatividade e contraste visual, tornando a navegação mais intuitiva e agradável.
Vamos agrupar as cores por área:
9. Cores Globais e do Header Principal
a - Cor de Fundo da Página
- Função: Define a cor principal que aparece atrás de todos os widgets e blocos de conteúdo, servindo como base visual do seu Escritório Virtual.
- Importância: Essa cor compõe o plano de fundo geral da interface — é ela que dá o “tom” predominante da sua área logada e reforça a identidade visual da marca.
b - Cor da Barra do Topo
- Função: Define a cor de fundo da faixa superior do site (header).
- O que controla: Afeta a área onde ficam o logotipo, o menu (☰) e o link “Sair”, visível em todas as páginas.
- Dica: Prefira uma cor sólida e com bom contraste para garantir a legibilidade dos ícones e textos do cabeçalho.
c - Cor do texto da barra do topo s/ mouse
- Função: Define a cor do texto do menu superior quando está em repouso (sem interação do usuário).
- O que controla: Determina a cor padrão do texto “MENU”, localizado no canto superior esquerdo do cabeçalho.
- Dica: Escolha uma cor que contraste bem com o fundo da barra para garantir a legibilidade.
d - Cor do texto da barra do topo c/ mouse
- Função: Define a cor do texto do menu superior quando o cursor do mouse passa sobre ele.
- O que controla: Determina a cor de destaque aplicada ao texto “MENU” durante a interação (hover).
- Dica: Escolha uma cor de contraste visível para reforçar o efeito de interação do usuário.
e - Cor do texto menu logado s/ mouse “SAIR”
- Função: Define a cor de destaque do link “Sair” quando o usuário passa o mouse sobre ele.
- O que controla: Determina a cor de hover aplicada ao texto “Sair” no canto superior direito do cabeçalho.
- Dica: Use uma cor contrastante para indicar claramente que o link é interativo.
10. Cores do Menu Lateral
Esses campos controlam o menu lateral exibido ao clicar no link “MENU”.
a - Cor de fundo no header do menu logado
- Função: Define a cor do topo do menu lateral (a faixa onde aparecem o nome e o avatar do usuário).
- O que controla: A cor de fundo apenas da seção superior do menu, destacando a identidade do usuário logado.
- Dica: Utilize uma cor sólida e contrastante em relação ao restante do menu para reforçar a área de identificação do usuário.
b - Cor de fundo menu logado
- O que controla: A cor de fundo da área principal desse menu, onde a lista de links (Início, Loja Virtual, etc.) fica.
c - Cor do texto header menu logado
- O que controla: A cor do texto (nome do usuário e perfil) que aparece na seção superior (header) do menu lateral.
d - Cor do texto menu logado s/ mouse
- O que controla: A cor padrão dos textos dos links de navegação (“Início”, “Loja virtual”, etc.) dentro do menu.
e - Cor texto fundo menu mouse
- O que controla: A cor da barra de fundo (o destaque) que aparece atrás do link quando o mouse está sobre ele.
f - ⚠️ Atenção: Campos Inativos
Os campos a seguir não estão mais em uso e podem ser ignorados, pois não afetarão o visual do seu site:
- Cor texto fundo menu mouse SAIR
- Cor de texto menu deslogado
11. Personalização da Área de Login
Esta seção controla a aparência da sua página pública de login — a primeira impressão que seu usuário tem antes mesmo de entrar no Escritório Virtual.
a - Como Visualizar sua Tela de Login
Antes de alterar as cores e imagens, você precisa saber como visualizar essa página. Como seu navegador “lembra” que você já é cadastrado, ele pode pular a tela de login automaticamente para facilitar seu acesso.
Para ver sua tela de login como um visitante ou um novo usuário veria, siga o método abaixo:
1. Primeiro, copie a URL base (domínio) da sua plataforma. Você pode copiá-la da barra de endereço do seu navegador, apagando qualquer coisa depois de .com.br/ (ou seu domínio principal).
2. Abra uma Nova Janela Anônima (ou “Janela Privada”) no seu navegador.
- (No Google Chrome, o atalho é Ctrl + Shift + N).
- (No Firefox ou Edge, o atalho é Ctrl + Shift + P).
3. Na barra de endereço desta nova janela anônima, cole o domínio que você copiou no Passo 1 e pressione Enter.
4. Pronto! Você verá sua página de login pública. Mantenha esta janela aberta para ver as alterações que faremos.
b - Configurando as Imagens de Fundo (Desktop e Mobile)
Na seção de Login do painel de Personalização, você pode configurar duas imagens de fundo:
Imagem de Fundo do Login (Desktop):
- O que controla: A imagem grande que aparece ao fundo da tela de login quando acessada de computadores e notebooks.
- Tamanho Recomendado: 1920×1000 pixels.
Imagem de Fundo do Login (Mobile):
- O que controla: A imagem de fundo que será exibida apenas quando o usuário acessar a página de login de um dispositivo móvel (celular).
- Tamanho Recomendado: Largura 550 pixels.
🛠️ Dica Técnica: Como visualizar a versão Mobile (Teste com F12)
Para simular um celular e verificar sua Imagem de Fundo do Login (Mobile), siga estes passos:
- Na sua Janela Anônima (onde você está vendo a tela de login desktop), pressione a tecla F12. Isso abrirá as “Ferramentas de Desenvolvedor”.
- No painel que se abriu, procure pelo ícone de “Alternar dispositivo” (parece um celular na frente de um tablet) e clique nele.
3. Sua tela de login irá se transformar imediatamente em uma visualização de celular.
4. (Pressione F12 novamente para fechar).
c - Configurando as Cores do Card de Login
Esta é a parte principal do formulário de login (conforme é possível visualizar na imagem abaixo):
Cor de fundo AuthfastSDK - Externo
- O que controla: A cor de fundo do “card” de login principal — a caixa central onde o usuário insere o ID e a senha.
Cor da borda AuthfastSDK - Externo
- O que controla: A cor do contorno (a borda) ao redor do card de login.
d - Configurando os Títulos da Página de Login
A plataforma permite que você controle três zonas de texto na página de login:
Cores dos Títulos:
- Cor do título 1 – Login:
- O que controla: A cor do texto principal de boas-vindas, que por padrão diz: “Seja bem-vindo(a)!”.
- Cor do título 2 – Login:
- O que controla: A cor do subtítulo, que por padrão diz: “Demo Plataforma Eloss”.
Textos dos Títulos:
Abaixo dos seletores de cor, você pode alterar o conteúdo desses textos:
- Login – Título 1:
Este é um campo de texto simples. Você pode apagar o “Seja bem-vindo(a)!” e escrever livremente o que desejar.
💡 Dica: Editando Campos com HTML (Título 2 e 3)
Você notará que os campos Título 2 e 3 contêm código HTML (ex: <br>, <strong>). Para editar com segurança, altere apenas o texto que está entre os códigos HTML, sem apagar os símbolos < e >.
- Login – Título 2:
- Código Padrão: <br><strong>Demo Plataforma Eloss</strong>
- Como editar: Altere apenas o texto “Demo Plataforma Eloss”.
⚠️ Atenção: Método Especial para Cor e Texto do Título 3
Este campo funciona de forma diferente dos outros.
- A COR: O seletor de cores “Cor do título 3 – Login” (a “caixinha” de cor) NÃO funciona para este campo. Você deve ignorá-lo.
- A cor deste texto deve ser alterada diretamente dentro do código abaixo.
- Login – Título 3 (Campo de Texto):
- Código Padrão: </i><i style=”font-size: 14px; font-style: normal; color: #000000;”><a href=”https://escritorio.dominio.com.br/register/” style=”color: #000000;”><i style=”font-style: normal; color: #000000;”</a>É novo(a) na XXXXXX? <strong style=”color: #772c86;”>Registre-se agora!.</strong></a><br>Você precisa ser um membro da rede para poder fazer login.</i>
- Como editar:
- Para alterar os textos: Altere as frases visíveis (ex: “É novo(a) na XXXXXX?”, “Registre-se agora!.”).
- Para alterar as cores: Você deve substituir os códigos hexadecimais (ex: color: #000000; ou color: #772c86;) pelo novo código de cor que você deseja (ex: color: #FF0000; para vermelho).
- Para alterar o link: Você deve atualizar a URL href=”…” para apontar para o link de registro correto do seu domínio.
e - Personalização da Área de Cadastro
Esta seção controla a aparência da sua página de Cadastro, que é o fluxo que o usuário segue antes de ter um login.
Como Visualizar sua Tela de Cadastro
- Primeiro, acesse sua página pública de login (usando o método da Janela Anônima que explicamos na seção anterior).
- Na tela de login, clique no link “CADASTRE-SE” (geralmente localizado no canto superior direito ou no rodapé).
3. Isso o levará para a primeira etapa do fluxo de cadastro (a busca por patrocinador), que é a página que iremos personalizar agora.
