Descrição: Esta ferramenta permite definir a identidade visual e o estilo gráfico (cores, fontes, layout) de todo o seu sistema Framework360, garantindo consistência entre o site e as comunicações.
Para que serve? (Exemplos práticos)
Use para:
- Garantir que todos os elementos gráficos (botões, títulos, links) respeitem as cores e a marca da empresa.
- Configurar a tipografia (fontes e tamanhos) para melhorar a legibilidade do site e das comunicações.
- Definir rapidamente a aparência do sistema através da geração automática de estilos baseada em Inteligência Artificial.
Funcionalidades principais
1. Geração de Estilo via AI
É possível gerar automaticamente um conjunto básico de cores e estilos clicando no botão "Genera stile tramite AI". O sistema irá guiá-lo através de um processo rápido de criação e permitirá visualizar uma prévia antes de aplicar o design.
2. Configurações Gerais
- Contenitore: Define a largura máxima do conteúdo (em pixels) para diferentes tamanhos de tela (Extra Large, Large, Medium, Small).
- Colori: Permite configurar a paleta de cores padrão do sistema (ex.: Primario, Secondario, Successo, Errore) por meio de uma ferramenta seletora de cor. Essas cores estarão disponíveis para uso em todo o sistema.
3. Tipografia e Estilos
- Titoli (H1-H6): Permite definir uma fonte específica, cor, altura da linha e tamanho (em pixels) para cada nível de título, de H1 a H6.
- Corpo Pagina: Configura a fonte principal, o tamanho e altura da linha para o texto padrão, além da cor do texto e cor de fundo da página.
- Logo: Permite definir uma largura padrão (em pixels) para o logo da empresa.
- Link: Define a cor dos hyperlinks e a cor que assumem quando o usuário passa o mouse sobre eles (estado "hover").
4. Gestão do Fundo
Se escolher usar uma imagem de fundo para o corpo da página, é possível configurar opções avançadas:
- Immagine di sfondo: Upload de um arquivo de imagem.
- Dimensione: Modo de exibição da imagem (ex.:
cover,contain,auto). - Ripeti: Se a imagem deve ser repetida (verticalmente, horizontalmente ou para preencher o espaço).
- Posizione: Onde a imagem deve ser ancorada dentro da página (ex.: centro, topo à esquerda).
- Attaccamento: Se a imagem deve rolar com a página (
scroll) ou permanecer fixa (fixed).
5. Fontes Personalizadas
É possível carregar suas próprias fontes corporativas (nos formatos .ttf ou .otf). Uma vez carregadas, essas fontes estarão imediatamente disponíveis no seletor de fontes para títulos e corpo da página.
6. Estilos dos Botões
Esta seção avançada permite personalizar a aparência de todos os botões predefinidos do sistema (baseados nas cores definidas na seção "Colori"). É possível usar um editor visual para detalhar o estilo (bordas, sombras, cores de fundo e texto) para cada tipo de botão.
Como configurar
Todas as configurações estão organizadas em seções dentro do módulo de edição. Após fazer alterações, é necessário clicar no botão padrão de salvar do sistema.
| Seção | Opção de Configuração | Descrição |
|---|---|---|
| Generali | Larghezza Contenitore | Define o tamanho máximo do conteúdo para dispositivos (Extra Large, Large, Medium, Small). |
| Generali | Colori (Primario, Successo etc.) | Definição da paleta cromática principal do sistema. |
| Titoli (H1-H6) | Font, Colore, Dimensione | Escolha da fonte e propriedades visuais para todos os títulos. |
| Corpo Pagina | Font, Dimensione, Colore | Configurações para o texto principal da página. |
| Corpo Pagina | Sfondo e Immagine | Definição da cor do fundo e upload/gestão de uma imagem de fundo. |
| Logo | Larghezza predefinita | Tamanho padrão do logo em pixels. |
| Link | Colore e Colore Hover | Definição das cores dos links nos estados normal e ao passar o mouse. |
| Caratteri Personalizzati | Caricamento Font | Upload dos arquivos .ttf/.otf para uso no sistema. |
| Pulsanti | Stile per tipo | Personalização avançada da aparência para cada estilo de botão (ex.: Pulsante Primario, Pulsante di Avviso). |
Integrações automáticas
Consistência em Emails Transacionais
As configurações de estilo e cor definidas neste módulo são aplicadas automaticamente para formatar os emails enviados pelo sistema (como notificações ou templates de comunicação). Isso garante que os emails mantenham a mesma aparência gráfica do seu site web.
