--- title: "Layout" slug: "layout" updated: 2026-09-09T19:20:00Z published: 2026-09-09T19:20:00Z canonical: "docs.omnisiga.ai/layout" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.omnisiga.ai/llms.txt > Use this file to discover all available pages before exploring further. # Layout A tela de **Layout** permite customizar toda a experiência visual do site que seu cliente final utilizará para realizar agendamentos. Nela, você define desde as cores da sua marca e fontes até as imagens, links do menu e blocos informativos da página inicial. Quando você conclui essa configuração, o modelo de layout fica salvo e pronto para ser **vinculado a um Portal** no passo final da montagem do seu site. ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(798).png) --- ### Guia passo a passo --- ## Configurações básicas Campos simples para identificar e organizar este visual no seu painel. - **Nome do Layout** *Obrigatório* | Digite o nome interno para identificar este modelo visual nas listas e no cadastro de Portais. *Exemplo:* `Layout Institucional - Unidades de Atendimento` - **Descrição** *Opcional* | Escreva um resumo curto explicando onde ou como esse layout deve ser utilizado. *Exemplo:* `Modelo visual padrão com as cores oficiais para portais de atendimento presencial.` - **Status do Layout** *Interruptor (Ativo/Inativo)* | Define se este modelo está liberado para uso. Para funcionar no site do cliente, o layout precisa estar como **Ativo** e selecionado no Portal correto. ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(797).png) --- ## Cores e Identidade Visual Defina as cores da sua instituição. Você pode usar combinações prontas ou personalizar cada tom individualmente. #### Temas Prontos Escolha um dos temas sugeridos para aplicar uma paleta harmônica instantaneamente: - 🔵 **Azul Institucional** - 🟢 **Verde** - 🍷 **Vinho** - 🌊 **Petróleo** - 🟣 **Roxo** - 🔘 **Grafite** > *Dica:* Após aplicar um tema pronto, você pode alterar qualquer uma das cores abaixo individualmente. #### Detalhamento da Paleta de Cores | Campo | Onde essa cor é aplicada no site público? | Exemplo | | --- | --- | --- | | **Cor Primária** | Cabeçalho superior, títulos principais e destaques da marca. | `#0C326F` | | **Cor de Ação** | Botões de clique, links, ícones e horário selecionado pelo cliente. | `#1351B4` | | **Texto sobre a Primária** | Textos e ícones que ficam dentro da barra do cabeçalho. | `#FFFFFF` | | **Fundo da Página** | Cor de fundo de todas as páginas do site. | `#FFFFFF` | | **Cor do Rodapé** | Cor de fundo da faixa inferior do rodapé da página. | `#F5F7FB` | | **Texto Principal** | Parágrafos e textos explicativos informativos. | `#16243B` | | **Títulos** | Títulos de seções, caixas de informação e nomes de campos. | `#27282C` | | **Texto Secundário** | Textos de ajuda, legendas e orientações complementares. | `#52617C` | | **Texto de Apoio** | Informações menores, como datas, etiquetas e opções secundárias. | `#5E6E89` | | **Bordas** | Linhas de divisão e contorno das caixas de conteúdo. | `#E6EBF3` | --- ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(800).png) ## Tipo e Estilo de Fonte - **Fonte da Página** Escolha a família de letras que será usada em todo o site. - **Sistema (Recomendada):** Usa a fonte nativa do celular ou computador do cliente (garante o carregamento mais rápido). - **Opções tradicionais:** `Arial` ou `Georgia`. - **Opções modernas:** `Public Sans`, `Inter`, `Roboto` ou `Lora`. --- ## Nome e Título do Cabeçalho Configure o texto que aparece no topo da página, ao lado do seu logotipo. - **Texto do Título** | Nome curto exibido no topo (Ex: `Agendamento Online`). Se deixar em branco, o site mostrará apenas a imagem do logo. - **Tamanho do Texto** | Escolha entre a opção *Padrão* ou tamanhos fixos de `14px` a `32px`. - **Espessura da Letra** | Define se a letra será normal, média ou negrito. - **Cor do Título** | Selecione a cor do texto. Se não escolher nenhuma, o sistema usará a cor de texto do cabeçalho. ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(803).png) --- ## Logotipos e Ícones da Marca Selecione as imagens do catálogo de mídias para representar sua organização. - **Logotipo Principal** A imagem principal que fica no topo da página. - *Recomendação:* Fundo transparente, altura de 80 pixels e tamanho máximo de 1 MB. - **Logotipo do Rodapé** Imagem para a parte inferior do site. Se não enviar uma imagem específica, o site usará o logotipo principal. - *Recomendação:* Fundo transparente com altura aproximada de 36 pixels. - **Ícone do Navegador / Favicon** A imagem pequena que aparece na aba do navegador do cliente. - *Recomendação:* Imagem quadrada de no mínimo 64x64 pixels. ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(801).png) --- ## Links de Navegação Adicione links úteis ao final do site para direcionar seu cliente a outros portais. - **Texto do Link:** Nome exibido no menu (Ex: `Site Oficial`). - **Endereço da Web:** O link de destino (Ex: `https://www.prefeitura.gov.br`). - **Estilo Visual:** Escolha se o item parecerá um **Link simples** ou um **Botão destacado**. - **Identificador e Ativo:** Gerenciados automaticamente ao adicionar ou excluir um link. ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(802).png) --- ## Montagem da Página Inicial Você pode construir a página inicial do portal adicionando, movendo de lugar ou removendo blocos de conteúdo. #### Ajustes Gerais de Qualquer Bloco: - **Fundo do Bloco:** Escolha entre `Simples`, `Tonalizado` (com uma leve cor) ou `Superfície`. - **Cor Personalizada da Faixa:** Escolha a cor caso utilize o fundo tonalizado. - **Espaçamento:** Define a distância vertical em relação aos outros blocos (`Nenhum`, `Compacto`, `Padrão` ou `Amplo`). - **Alinhamento do Texto:** Alinhe o conteúdo à `Esquerda`, `Centro` ou `Direita`. --- ## Detalhamento das Seções Disponíveis #### A. Bloco de Destaque Principal (Hero) É a primeira grande imagem e chamada do topo do site *(Permitido no máximo 1 por layout)*. - **Imagem de Fundo:** Selecione a foto e se ela ficará na esquerda ou direita (Recomendado: imagem na resolução 1920x1080 px). - **Pré-título:** Texto pequeno acima do título principal. - **Título Principal e Destaque:** A mensagem principal de boas-vindas e a palavra que ganhará a cor de destaque. - **Subtítulo:** Texto explicativo abaixo da chamada principal. - **Busca e Botão:** Títulos do assistente de agendamento e o texto do botão principal de ação (Ex: `Ver horários disponíveis`). #### B. Bloco de Cartões Informativos (Cards) Ideal para listar informações em formato de caixas verticais ou horizontais. - **Modo de Exibição:** Exiba em formato de **Grade** ou **Carrossel** no computador e celular. - **Colunas na Grade:** Escolha exibir `2`, `3`, `4` ou `6` cartões por linha. - **Quantidade Visível:** Defina quantos cartões aparecem antes do cliente clicar em "Ver mais". - **Visual dos Ícones:** Escolha a forma do fundo do ícone (`Círculo`, `Arredondado`, `Quadrado` ou `Nenhum`) e sua posição. - **Itens do Cartão:** Para cada cartão, defina o ícone, a cor do ícone, o título e o texto explicativo. #### C. Bloco de Passo a Passo (Etapas) Mostra ao cliente os passos necessários para ser atendido. - **Orientação:** Exiba a sequência na `Horizontal` ou `Vertical`. - **Etapas:** Adicione cada passo contendo seu ícone, cor, título e instrução. #### D. Bloco de Destaques e Benefícios (Destaque) Destaque informações importantes dentro de quadros visuais. - **Estilo do Quadro:** Escolha entre `Caixa Branca`, `Tonalizado` ou `Simples`. - **Itens:** Monte os pontos de destaque com ícone, cor e texto. #### E. Bloco de Texto Livre (Texto) Um espaço para mensagens longas, avisos ou regimentos. - **Título e Descrição:** Escreva sua mensagem em texto simples. *(Nota: Por segurança, o sistema exibe o texto exatamente como digitado, sem formatação de código HTML).* ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(804).png) --- ## Opções de Login do Cliente Ajuste a exibição do acesso para clientes no topo do site. - **Exibir Botão de Entrada** | Ligue para mostrar o botão de acesso/login no cabeçalho do portal. - **Texto do Botão** | Digite o texto que aparecerá no botão (Ex: `Entrar`, `Acessar Minha Conta`). ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(805).png) --- ## Visualização em Tempo Real No lado direito da tela, você conta com um simulador visual para acompanhar como as mudanças estão ficando sem precisar abrir o site real: - **Alternar Telas:** Veja a aparência da `Página Inicial`, da `Listagem` ou dos `Detalhes`. - **Alternar Dispositivo:** Veja como seu site responde em computadores ou em telas de celulares. - **Modo Tela Cheia:** Expande o teste para ocupação total da tela. ![Image](https://cdn.document360.io/d1786d22-23e4-4145-98ac-accd680324d8/Images/Documentation/image(806).png) --- Dicas e Regras para a configuração - **Nome :** Sempre dê um nome claro ao layout para encontrá-lo facilmente depois. - **Harmonia de Cores:** A cor principal da sua marca e a cor dos botões/links devem ser diferentes para garantir destaque visual. - **Acessibilidade de Cores:** O sistema avisa automaticamente se a combinação de cores dificultar a leitura do texto e oferece um botão para corrigir a tonalidade. - **Links Seguros:** Qualquer link cadastrado para sites externos deve começar obrigatoriamente com `http://` ou `https://`. - **Confirmação ao Salvar:** Após clicar em **Salvar**, o sistema exibirá uma mensagem de confirmação para evitar alterações acidentais.