Para escolher as cores que aparecerão no seu Site Express Básico (modelo) precisamos ir em Site > Design ou Site > (serviço de hospedagem). Dentro do cartão de configuração do site haverá um botão que diz "editar design"

Visão geral

Esta página permite configurar a identidade visual completa do seu site:

• Paleta de cores: Configure cores primárias e secundárias para menus, botões e elementos interativos
• Logo: Faça upload do logo da sua marca que aparecerá no cabeçalho do site
• Slides: Faça upload de até 3 imagens para o banner principal com links personalizados

As mudanças são aplicadas automaticamente e você pode ver uma prévia em tempo real antes de salvar.

Disponibilidade: Esta função requer um plano atual (Website, Pro+, Business). Não está disponível para planos com Legacy Hosting.

Prévia em tempo real

Na parte superior da página você encontra uma prévia interativa que mostra como o seu site vai ficar:

• Cabeçalho: Logo e links de redes sociais com bordas da cor primária
• Menu de navegação: Barra com cor primária e botão com cor secundária
• Slider de imagens: Banner com as 3 imagens carregadas e navegação manual (setas)

A prévia é atualizada automaticamente quando você modifica cores ou carrega novas imagens.

Paletas de cores

Cor Primária

A cor primária é usada nos elementos principais de navegação:

Exemplo: Se sua marca usa verde, configure a cor primária como verde e o texto como branco para garantir a legibilidade.

Cor Secundária

A cor secundária é usada para elementos interativos e chamadas para ação:

Exemplo: Se você usou verde como primária, pode usar laranja como secundária para os botões de contato.

Imagens do site

Logo

O logo aparece no cabeçalho superior do site (antes do menu de navegação).

Características:

• Formatos aceitos: JPG, PNG, WEBP
• Tamanho máximo: 5MB
• Dimensões recomendadas: Altura máxima de 64px (é redimensionado automaticamente)
• Fundo transparente: Recomendado para logos em PNG

Como fazer upload do logo:

1. Clique em "Fazer Upload do Logo" (ou "Substituir Logo" se já existir um)
2. Selecione o arquivo no seu computador
3. Aguarde até terminar o upload (você verá um spinner de carregamento)
4. O logo aparecerá imediatamente na prévia

Prévia com zoom: Clique na imagem do logo para vê-la em tamanho completo em um modal.

Slides do banner

O slider mostra 3 imagens em rotação manual na parte superior do site (abaixo do menu).

Características de cada slide:

• Formatos aceitos: JPG, PNG, WEBP
• Tamanho máximo: 5MB cada
• Dimensões recomendadas: Largura de pelo menos 1920px para telas grandes
• Proporção: As imagens são recortadas para cobrir o espaço (mantêm a proporção original)

Como configurar os slides:

Para cada um dos 3 slides:

1. Fazer upload da imagem:
   • Clique em "Fazer Upload do Slide X" (ou "Substituir Slide X")
   • Selecione a imagem no seu computador
   • Aguarde a confirmação de upload bem-sucedido
2. Configurar URL do link:
   • No campo "URL do Link", digite o caminho interno (ex: /contacto, /propiedades)
   • Você verá a URL completa gerada automaticamente abaixo do campo
   • Você pode clicar no link verde para testá-lo em uma nova aba
3. Salvar URLs:
   • Depois de configurar as URLs dos 3 slides, clique em "Salvar URLs dos Slides"
   • As URLs são salvas todas juntas com um único botão

Prévia com zoom: Clique em qualquer imagem de slide para vê-la em tamanho completo.

Navegação do slider: A prévia mostra setas laterais para navegar entre os 3 slides manualmente (sem rotação automática).

Dica: Se um slide não tiver imagem, a prévia mostrará um placeholder cinza com o texto "Slide 1/2/3".

Como configurar as cores

1. Selecionar cores

Para cada paleta (Primária e Secundária):

1. Clique no seletor de cor (círculo de cor)
2. Escolha a cor na paleta visual
3. Ou digite o código hexadecimal diretamente (ex: #FF5733)

O código hexadecimal é atualizado automaticamente quando você seleciona uma cor na paleta.

2. Ajustar contraste

É fundamental que a cor do texto tenha bom contraste com a cor de fundo:

• Fundos escuros → Usar texto claro (branco ou cinza bem claro)
• Fundos claros → Usar texto escuro (preto ou cinza bem escuro)

Dica: O sistema não valida o contraste automaticamente, por isso é importante revisar a prévia para garantir a legibilidade.

3. Ver a prévia em tempo real

Na parte superior da página você verá uma prévia interativa completa que inclui:

• Cabeçalho com seu logo e cores de redes sociais (cor primária)
• Menu de navegação com cor primária e botão com cor secundária
• Slider de imagens com as 3 imagens carregadas

A prévia é atualizada instantaneamente à medida que você modifica as cores.

4. Salvar mudanças

Importante: As cores e as imagens são salvas separadamente.

Para salvar cores:

1. Modifique as cores desejadas
2. Clique em "Salvar" (dentro da seção "Configuração de Cores")
3. Confirme a ação na caixa de diálogo de confirmação
4. As mudanças são aplicadas imediatamente ao site

Para salvar imagens:

• O logo e os slides são carregados automaticamente ao selecionar o arquivo
• As URLs dos slides são salvas com o botão "Salvar URLs dos Slides"

Nota: O botão "Salvar" das cores só fica habilitado quando há mudanças não salvas.

Recomendações de design

Acessibilidade

Para garantir que seu site seja acessível para todos os usuários:

• Contraste mínimo: Usar uma relação de contraste de pelo menos 4.5:1 entre texto e fundo
• Não usar apenas a cor: Os elementos importantes devem ser identificáveis sem depender unicamente da cor

Identidade de marca

• Consistência: Usar as mesmas cores que sua marca utiliza em outros materiais
• Simplicidade: Não usar mais de 2-3 cores diferentes para manter a coerência visual
• Testes: Ver o site completo depois de salvar para verificar que todos os elementos ficam bem

Ferramentas úteis

Você pode usar ferramentas online para:

• Cores: Verificar contraste de cores (ex: WebAIM Contrast Checker), gerar paletas complementares
• Imagens: Comprimir imagens (TinyPNG, ImageOptim), remover fundos (Remove.bg), redimensionar (Photopea)

Imagens profissionais

Para o logo:

• Use seu logo oficial em alta qualidade
• Fundo transparente (PNG) é preferível
• Se seu logo for muito detalhado, considere usar uma versão simplificada

Para os slides:

• Imagens próprias: Use fotos dos seus próprios imóveis para mostrar seu portfólio
• Bancos de imagens: Se precisar de imagens genéricas, use bancos como Unsplash ou Pexels (verifique as licenças)
• Qualidade profissional: Evite imagens pixeladas ou de baixa qualidade
• Mensagem clara: Cada slide deve comunicar algo específico (ex: "Fale conosco", "Ver imóveis", "Avaliações grátis")

Casos de uso comuns

Marca com uma única cor

Se sua marca usa uma única cor (ex: azul):

• Primária: Azul escuro + texto branco
• Secundária: Azul mais claro + texto branco

Marca com duas cores

Se sua marca usa duas cores (ex: verde e laranja):

• Primária: Verde + texto branco
• Secundária: Laranja + texto branco

Marca minimalista

Se você preferir um estilo minimalista:

• Primária: Preto + texto branco
• Secundária: Cinza escuro + texto branco

Perguntas frequentes

As mudanças são aplicadas imediatamente?

Cores: Sim, assim que você salva as cores, elas são aplicadas de forma imediata.

Imagens: O logo e os slides são exibidos imediatamente depois de carregados. As URLs dos slides são aplicadas ao salvar.

Não é necessário republicar nem esperar.

Posso substituir imagens existentes?

Sim. Se você já tem um logo ou slides carregados, pode clicar em "Substituir Logo" ou "Substituir Slide X" para enviar uma nova imagem. O arquivo anterior será substituído automaticamente.

O que acontece se eu carregar uma imagem muito grande?

O sistema rejeitará arquivos maiores que 5MB. Se sua imagem ultrapassar esse tamanho, você deverá reduzi-la usando ferramentas de compressão de imagens antes de carregá-la.

Posso voltar às cores anteriores?

Não há função de "desfazer" automática. Se quiser voltar a uma configuração anterior, você deverá anotar os códigos de cor antes de fazer mudanças ou lembrar os valores anteriores.

As imagens dos slides são recortadas?

Sim. As imagens são ajustadas para cobrir todo o espaço do slider mantendo sua proporção original. Isso significa que as bordas superior/inferior ou esquerda/direita podem ser recortadas dependendo da proporção da imagem.

Recomendação: Use imagens horizontais com os elementos importantes centralizados.

O que acontece se eu usar cores com mau contraste?

O sistema não vai impedir você de salvar cores com baixo contraste, mas seu site pode ficar difícil de ler. Sempre revise a prévia antes de salvar.

Preciso carregar exatamente 3 slides?

Não. Você pode carregar 1, 2 ou 3 slides. Se não carregar nenhum, o slider mostrará placeholders cinza. O slider sempre tem espaço para 3 imagens, mas somente as que você carregar serão exibidas no site real.

Posso personalizar mais elementos?

Atualmente você pode personalizar cores (primária e secundária), logo e 3 slides. Mais opções de personalização (tipografia, espaçamento, rodapé, etc.) estarão disponíveis em atualizações futuras.

Por que não vejo essa opção?

Se você não vê a página de design ou aparece uma mensagem de "Acesso Restrito":

• Verifique se seu plano inclui personalização de design (Website, Pro+, Business)
• Os planos com Legacy Hosting não têm acesso a esta função
• Considere fazer upgrade para um plano atual

Dicas

Para cores:

• Salve os códigos: Anote os códigos hexadecimais das suas cores de marca para uso futuro
• Cores web-safe: Use cores que fiquem bem em todas as telas
• Teste antes de confirmar: Use a prévia para experimentar diferentes combinações antes de salvar

Para imagens:

• Logo com fundo transparente: Use PNG com transparência para que se adapte melhor ao cabeçalho branco
• Otimize o peso: Comprima as imagens antes de carregá-las para melhorar a velocidade de carregamento do site
• Dimensões do logo: Um logo de 200-400px de largura é suficiente (será redimensionado automaticamente)
• Slides horizontais: Use imagens em formato horizontal (paisagem) com proporção 16:9 ou similar
• Elementos centralizados: Nos slides, mantenha os elementos importantes centralizados para evitar que sejam recortados
• URLs descritivas: Use URLs claras como /contacto ou /propiedades em vez de caminhos complexos

Geral:

• Revise em dispositivos: Depois de salvar, verifique como o site fica em diferentes dispositivos
• Consistência visual: Certifique-se de que as cores do logo e dos slides combinem com a paleta de cores escolhida