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.

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.

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

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.

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.

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.

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).

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).

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.