Para escolher as cores que aparecerão no seu Basic (modelo) devemos ir a 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 que você configure a identidade visual completa do seu site:

• Paleta de cores: Configure cores primárias e secundárias para menus, botões e elementos interativos
• Tipografia: Escolha a família tipográfica de todo o site em um catálogo de Google Fonts
• Chamadas para ação: Até 3 blocos em destaque na home, cada um com seu próprio texto e botão
• Logo: Envie o logo da sua marca, que aparecerá no cabeçalho do site
• Favicon: Envie o ícone que identifica o seu site na aba do navegador
• Slides: Envie até 3 imagens para o banner principal, cada uma com seu link e, se quiser, um texto por cima
• Rodapé: Indique quem é o responsável pela imobiliária

As alterações são aplicadas automaticamente e você pode ver uma pré-visualização 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é-visualização em tempo real

Na parte superior da página você encontra uma pré-visualização interativa que mostra a sua home completa, do cabeçalho ao rodapé:

A pré-visualização é atualizada instantaneamente quando você altera cores, muda a tipografia, liga uma chamada para ação ou envia imagens novas — tudo antes de salvar.

Paletas de cores

Cor Primária

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

Exemplo: Se a 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.

Tipografia

Você escolhe uma família tipográfica para todo o site a partir de um catálogo selecionado de Google Fonts.

Como escolhê-la

1. Abra o seletor "Família tipográfica"
2. Percorra a lista: cada opção é mostrada na sua própria tipografia, assim você vê como se lê antes de escolhê-la
3. Escolha uma e olhe a amostra tipográfica que aparece abaixo

A amostra está sempre visível e muda na hora com a sua escolha:

Aa                                    Playfair Display
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 áéíóú àãç ÁÉÍÓÚ
&@#$€ .,;:!¡?¿ ()[]/ +=—«»

Inclui ñ, acentos e sinais de abertura de propósito: nem todas as famílias os suportam bem, e assim você vê isso aqui e não no seu site publicado.

A pré-visualização de cima também muda, assim você vê a tipografia aplicada sobre o seu design real antes de salvar.

Voltar à tipografia original

O seletor tem um ✕ à direita. Ao usá-lo, o campo fica vazio e o seu site volta à tipografia original do seu modelo (a que tinha antes de esta opção existir).

Salvar

O botão "Salvar" desta seção só é habilitado quando há uma alteração sem salvar. A tipografia é salva separadamente das cores e das imagens.

Chamadas para ação

São até 3 blocos em destaque que aparecem na sua home, pensados para que o visitante faça algo: pedir uma avaliação, vender, escrever para você.

Cada bloco é independente: tem o seu próprio interruptor e o seu próprio texto. Você pode usar apenas um, dois ou os três.

Eles não ficam os três juntos: caem distribuídos ao longo da home, separando blocos de conteúdo. Isso decide qual convém você usar:

Os campos de cada bloco

Ligar e desligar

Cada bloco tem um interruptor Visível / Oculto. Ao ligá-lo, ele aparece na hora na pré-visualização de cima, na sua posição real dentro da home.

Opções do link do botão

Esta é a parte mais flexível: o botão pode levar a uma página sua, abrir o WhatsApp, iniciar uma chamada ou abrir o e-mail.

Como se monta o número do WhatsApp

O número vai junto, sem +, sem espaços, sem hifens e sem o 0 nem o 15: código do país + código de área + número.

tel: — importante antes de usá-lo

O que convém fazer:

• Se o seu público chega em sua maioria a partir do celular (o habitual em imobiliárias), tel: funciona bem.
• Se você quer que funcione sempre, em qualquer dispositivo, use o WhatsApp (https://wa.me/...): ele abre o app no celular e o WhatsApp Web no computador.
• Escreva o número também no título ou na descrição do bloco. Assim, mesmo que o clique não faça nada, o visitante pode lê-lo e discá-lo à mão. É a rede de segurança mais simples.
• Outra opção segura: aponte o botão para /contacto, onde o visitante tem o formulário e todos os seus dados juntos.

Links que o sistema não aceita

Por segurança dos seus visitantes, o link deve ser uma rota interna, um endereço http/https, um tel: ou um mailto:. Qualquer outra coisa é rejeitada ao salvar e você verá o campo marcado em vermelho com o detalhe.

Um erro frequente: escrever wa.me/5491122334455 sem https:// na frente. Não basta — tem que ser o endereço completo.

Salvar

Os 3 blocos são salvos juntos com o botão "Salvar" desta seção, que é habilitado quando há alterações e todos os links são válidos.

Imagens do site

Cada imagem que você envia tem dois botões: Substituir, para colocar outra, e Remover, para voltar à que vem com o seu design. Remover nunca deixa o lugar vazio.

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 enviar o logo:

1. Clique em "Enviar Logo" (ou "Substituir Logo" se já existir um)
2. Selecione o arquivo a partir do seu computador
3. Espere terminar o envio (você verá um spinner de carregamento)
4. O logo aparecerá imediatamente na pré-visualização

Pré-visualização com zoom: Clique sobre a imagem do logo para vê-la em tamanho completo em um modal.

Favicon

O favicon é o ícone pequenininho que identifica o seu site na aba do navegador, nos favoritos e na tela inicial do celular quando alguém salva o seu site.

Envie a imagem que você tiver: nós a convertemos. Não é preciso que você a prepare nem que saiba qual formato cada navegador pede.

Recomendamos uma imagem quadrada, que é a proporção com a qual os navegadores mostram o ícone. Aceitamos qualquer outra: é uma recomendação, não um requisito.

• Formatos aceitos: JPG, PNG, WEBP
• Tamanho máximo: 5 MB
• O que fazemos com ela: nós a convertemos para um PNG de 512 × 512 pixels, que é o que todos os navegadores usam

Como enviá-lo:

1. Clique em "Enviar Favicon" (ou "Substituir Favicon" se você já tiver um)
2. Selecione o arquivo a partir do seu computador
3. Espere terminar o envio

Se a sua imagem não for quadrada ela não é recortada: entra completa e centralizada, e o espaço que sobra fica transparente. Você não vai perder nem um pedaço do seu logo.

Por isso recomendamos a proporção quadrada, e convém saber por quê. O navegador mostra o favicon dentro de um quadrado muito pequeno, então uma imagem alongada fica perfeita mas minúscula:

Se você enviar uma imagem muito alongada, avisamos na hora, para que possa trocá-la se quiser.

A única coisa que sim convém escolher bem é QUAL imagem você envia. O favicon é mostrado do tamanho de uma letra, então um logo com o nome inteiro fica ilegível de tão pequeno. O que funciona melhor é o símbolo ou a inicial da sua marca.

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 um
• 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. Enviar imagem:
   • Clique em "Enviar Slide X" (ou "Substituir Slide X")
   • Selecione a imagem a partir do seu computador
   • Espere a confirmação de envio bem-sucedido
2. Configurar URL do link:
   • No campo "URL do Link", escreva a rota interna (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. Escrever o texto sobre a foto (opcional):
   • Título sobre a imagem: o texto grande. Cada linha que você escrever aparece em uma linha separada, então você pode montar um título de duas ou três linhas
   • Texto secundário: uma frase menor, abaixo do título
   • São opcionais e independentes: você pode colocar só o título, só o secundário, os dois ou nenhum
   • Se você os deixar vazios, a foto é mostrada limpa, sem nada por cima
4. Salvar:
   • Uma vez configurados os 3 slides, clique em "Salvar URLs de Slides"
   • Esse botão salva as URLs e os textos dos 3 slides juntos

Como se vê o texto: aparece centralizado sobre a foto, com um véu escuro suave por trás. O véu está lá para que se leia bem sobre qualquer imagem, mesmo uma muito clara.

Pré-visualização com zoom: Clique sobre qualquer imagem de slide para vê-la em tamanho completo.

Navegação do slider: A pré-visualização 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é-visualização mostrará um placeholder cinza com o texto "Slide 1/2/3".

Rodapé

Os dados que aparecem no final de todas as páginas do seu site.

Responsável

Uma linha livre para indicar quem é o responsável pela imobiliária. É mostrada no rodapé, acima do endereço, com o seu ícone.

O que escrever: o que você quiser que se leia, tal e qual. Normalmente o nome do responsável e a sua matrícula:

Responsable Juan Pérez — Matrícula 1234

É um campo livre de propósito: o que cada imobiliária é obrigada a informar muda dependendo da província e do conselho, então em vez de dar caixinhas fixas deixamos você escrever a frase completa.

Se você a deixar vazia, a linha não aparece e o rodapé não fica com um buraco. Você pode apagá-la quando quiser: apaga o texto e salva.

Como configurar as cores

1. Selecionar cores

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

1. Clicar no seletor de cor (círculo de cor)
2. Escolher a cor a partir da paleta visual
3. Ou escrever o código hexadecimal diretamente (ex: #FF5733)

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

2. Ajustar o contraste

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

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

3. Ver a pré-visualização em tempo real

Na parte superior da página você verá a pré-visualização interativa completa da sua home, do cabeçalho ao rodapé (ver a seção Pré-visualização em tempo real).

Ela é atualizada instantaneamente à medida que você altera as cores, então você pode testar combinações sobre o design real antes de salvar.

4. Salvar alterações

Importante: Cada seção é salva separadamente — cores, tipografia, chamadas para ação e imagens têm o seu próprio botão "Salvar". Salvar uma não afeta as outras.

Para salvar cores:

1. Altere as cores desejadas
2. Clique em "Salvar" (dentro da seção "Configuração de Cores")
3. Confirme a ação no diálogo de confirmação
4. As alterações são aplicadas imediatamente ao site

Para salvar imagens:

• O logo, o favicon e os slides são enviados automaticamente ao selecionar o arquivo
• As URLs e os textos dos slides são salvos juntos com o botão "Salvar URLs de Slides"

Nota: O botão "Salvar" de cores só está habilitado quando há alterações sem salvar.

Recomendações de design

Acessibilidade

Para garantir que o 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 só a cor: Os elementos importantes devem ser identificáveis sem depender unicamente da cor

Identidade de marca

• Consistência: Usar as mesmas cores que a 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 se veem bem

Ferramentas úteis

Você pode usar ferramentas online para:

• Cores: Verificar o 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 o seu logo oficial em alta qualidade
• Fundo transparente (PNG) é preferível
• Se o seu logo for muito detalhado, considere usar uma versão simplificada

Para o favicon:

• Use o símbolo ou a inicial da sua marca, não o logo com o nome inteiro: é mostrado do tamanho de uma letra
• Quadrado é a proporção recomendada, embora aceitemos qualquer outra
• Se o seu logo tiver muito detalhe, uma versão simplificada se lê melhor nesse tamanho

Para os slides:

• Imagens próprias: Use fotos dos seus próprios imóveis para mostrar o seu portfólio
• Bancos de imagens: Se você 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 a 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 a sua marca usa duas cores (ex: verde e laranja):

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

Marca minimalista

Se você prefere um estilo minimalista:

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

Perguntas frequentes

As alterações são aplicadas imediatamente?

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

Imagens: O logo, o favicon e os slides são mostrados imediatamente depois de enviá-los. As URLs e os textos dos slides são aplicados ao salvar.

Não é necessário republicar nem esperar.

Posso remover uma imagem que enviei?

Sim. Cada imagem que você enviou tem um botão Remover ao lado do de substituir.

Remover não deixa o seu site sem essa imagem: devolve-o à que vem com o seu design, ou à da Mapaprop se o seu design não tiver uma. É a forma de desfazer um envio e voltar a como estava antes. Você pode enviar outra quando quiser.

Posso substituir imagens existentes?

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

No caso do favicon, se você o substituir e na aba continuar vendo o anterior, é a memória do navegador e não um erro do seu site: atualize a página com Ctrl + F5.

O que acontece se eu enviar uma imagem muito grande?

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

Posso voltar às cores anteriores?

Não há função de "desfazer" automática. Se você quiser voltar a uma configuração anterior, deverá anotar os códigos de cor antes de fazer alterações 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 a sua proporção original. Isso significa que podem ser recortadas as bordas superior/inferior ou esquerda/direita 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 impedirá você de salvar cores com baixo contraste, mas o seu site poderia ser difícil de ler. Sempre revise a pré-visualização antes de salvar.

Tenho que enviar exatamente 3 slides?

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

Posso colocar texto sobre as fotos do banner?

Sim. Cada slide tem dois campos opcionais abaixo da foto: Título sobre a imagem e Texto secundário. São salvos com o mesmo botão que as URLs.

O texto aparece centralizado sobre a foto, com um véu escuro suave por trás para que se leia bem sobre qualquer imagem. Se você deixar os dois campos vazios, a foto se vê limpa, sem nada por cima.

Cada linha do título é mostrada em uma linha separada: se você escrever três linhas, o título fica em três linhas.

Posso personalizar mais elementos?

Hoje você pode personalizar cores (primária e secundária), tipografia, chamadas para ação, logo, favicon, 3 slides e o responsável do rodapé. Mais opções (espaçamento, rodapé, seções adicionais) vão sendo adicionadas em atualizações futuras.

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

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

• Verifique que o seu plano inclua a 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 se vejam bem em todas as telas
• Teste antes de confirmar: Use a pré-visualização 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 enviá-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 (landscape) 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 rotas complexas

Geral:

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

Mostrar Biografia e Horários

Dois interruptores que decidem se a informação da sua empresa é mostrada no site. Você os encontra em Site > Design, mais abaixo das imagens.

Onde o texto é carregado

Os dois dados são escritos em Minha Empresa, não nesta tela: Dados da minha imobiliária. Aqui você só decide se eles são publicados ou não.

Se você ainda não carregou o dado

Você pode ativar o interruptor do mesmo jeito. Abaixo vai aparecer um aviso lembrando você de que falta carregá-lo, com o link para fazer isso.

O que acontece se eu os deixar desligados

Nada quebra. Os dois vêm desligados por padrão, então um site que já está publicado não muda de aparência. Desligá-los depois também não apaga o texto: só deixa de ser mostrado.

Mostrar Filiais

Mostra no site os cartões de contato das suas filiais: nome, endereço e telefone de cada escritório. Você pode mostrá-las todas ou escolher quais.

O responsável no rodapé

O campo Responsável (mais acima, em Rodapé) não tem interruptor: se você o carregar, ele é mostrado; se você o deixar vazio, a linha não existe. É identidade legal, não um dado de contato, e por isso vai somente no rodapé — não aparece na página de contato.