Alterar o aspeto do seu site: estilo, cores, tipos de letra e logótipo

Atualizado em

O aspeto do seu site define-se no painel Estilo do editor: um estilo base, um par de tipos de letra, as suas próprias cores, a forma das fotografias e o espaçamento. Cada alteração aparece logo na pré-visualização, e os seus visitantes veem-na depois da sua próxima publicação. O seu logótipo e o pequeno ícone do separador do navegador estão em Definições do site.

Abrir o painel Estilo

  1. No editor, abra o menu … na barra no topo.
  2. Clique em Estilo.

Cada alteração é guardada automaticamente e aparece de imediato na pré-visualização: não é preciso clicar em Atualizar. Cada alteração é também uma versão, por isso a seta de anular e Versões funcionam como para qualquer outra edição.

Escolheu um primeiro estilo quando criou o site. Pode alterá-lo aqui a qualquer momento.

O painel Estilo: estilos base, tipos de letra e cores

Os 4 estilos base

Em Estilo base, cada cartão define as cores e os tipos de letra de todo o site.

EstiloCoresTipos de letra
Ardósiafundo branco, botões e ligações em azul-esverdeado escuroElegante
Costeirofundo branco-sujo, azul-marClássica
Campofundo creme quente, verde-oliva e ocreAcolhedora
Loft urbanofundo cinzento-claro, vermelho-tijolo, texto quase pretoModerna

Os tipos de letra e as cores que escolhe por si (ver abaixo) mantêm-se quando muda para outro estilo base. Assim, pode experimentar os quatro estilos sem perder a cor da sua marca.

Tipos de letra

Cada par de Tipos de letra tem um tipo de letra para os títulos e outro para o texto:

  • Elegante: Gilda Display para os títulos, Hanken Grotesk para o texto
  • Clássica: Playfair Display e Source Sans 3
  • Acolhedora: Lora e Nunito Sans
  • Moderna: Manrope e Inter

Clique num par para o usar. Para voltar aos tipos de letra do seu estilo base, clique em Usar os tipos de letra do estilo.

Num site em russo, Elegante aparece a cinzento com Indisponível em russo: os seus tipos de letra não têm letras russas. As páginas em chinês usam os tipos de letra chineses do dispositivo do visitante.

Não há nenhuma definição para o tamanho do texto.

As suas próprias cores

Em Cores, pode substituir três cores do estilo:

  • Cor principal (botões e ligações)
  • Fundo
  • Texto
  1. Clique no quadrado de cor para escolher uma cor, ou escreva o código dela no campo ao lado (por exemplo #1d6a85) e prima Enter.
  2. Veja o exemplo por baixo das cores: um botão Reservar e Uma ligação mostram o aspeto que terão.
  3. Para abandonar as suas cores e voltar às do estilo, clique em Usar as cores do estilo.

Um único conjunto de cores aplica-se a todo o site: um bloco não pode ter cores próprias, e não há versão escura do site.

Cores do seu logótipo

Quando o seu site tem um logótipo, Cores do seu logótipo mostra até 3 cores encontradas nele. Clique numa delas para a tornar a sua cor principal. O branco, o preto e os cinzentos são ignorados, por isso um logótipo a preto e branco mostra “Não foi encontrada nenhuma cor no seu logótipo.”

Como a Nowistay mantém as suas cores legíveis

Algumas cores são difíceis de ler num site, por exemplo um botão amarelo-pálido com texto branco. A Nowistay ajusta-as por si:

  • Os botões mantêm a sua cor principal. Quando é demasiado clara para se destacar do fundo, a Nowistay escurece-a apenas o necessário. O texto do botão é branco ou escuro, consoante o que se lê melhor.
  • As ligações usam um tom mais escuro da sua cor principal quando é preciso, para que se possam ler sobre o fundo.
  • O fundo fica sempre claro, e o texto fica suficientemente escuro para se ler.

Quando a Nowistay altera uma das suas cores, o painel indica: “Ajustadas para que tudo continue legível: as ligações usam um tom mais escuro da sua cor, os fundos ficam claros e o texto suficientemente escuro.”

Exemplo: arrenda uma moradia à beira-mar, a Villa Azur, e o seu logótipo é um sol amarelo-pálido. Em Cores do seu logótipo, clica no amarelo. Na pré-visualização, os botões passam a um amarelo um pouco mais forte com texto escuro, e as ligações a um tom mais escuro do mesmo amarelo, enquanto o fundo continua claro. Se quiser botões mais marcados, escreva por si um amarelo mais forte em Cor principal (botões e ligações).

Formas e espaçamento

Em Formas e espaçamento:

  • Forma das fotografias: Quadrada, Ligeiramente arredondada (cantos ligeiramente arredondados) ou Arco (topo arredondado). Altera as fotografias do banner principal e das fichas de alojamentos.
  • Espaçamento: Amplo deixa mais espaço entre as partes de cada página, Normal aproxima-as.

Logótipo e ícone

O logótipo e o ícone definem-se nas definições do site.

  1. Abra o menu … e depois Definições do site.
  2. Em Identidade do site, em Logótipo, clique em Carregar e escolha o seu ficheiro. Use Substituir ou Remover para o alterar mais tarde.
  3. Em Ícone, clique em Carregar e escolha uma imagem quadrada.
LogótipoÍcone
Onde apareceno topo de cada página e no rodapéno separador do navegador, e como imagem quando alguém adiciona o seu site ao ecrã principal de um telemóvel
FicheiroPNG, JPEG ou WebP, até 2 MB, com pelo menos 200 px de larguraum PNG, JPEG ou WebP quadrado, com pelo menos 512 × 512 px, até 2 MB
Sem nenhumo nome do seu site aparece escrito no tipo de letra dos títulosnenhum ícone seu no separador

O topo das suas páginas tem sempre um fundo claro, por isso use a versão do seu logótipo feita para fundos claros (um logótipo branco não se veria). Ambos são opcionais.

Mais informação sobre as outras definições em Definições do site: nome, contactos, alojamentos e Google.

Pedir antes à IA

A IA pode alterar por si o estilo base, os tipos de letra, as cores, a forma das fotografias e o espaçamento. Por exemplo:

  • “Use o estilo Campo com fotografias em arco.”
  • “Ponha como cor principal o azul das nossas portadas, um pouco mais escuro.”

Não pode alterar o logótipo nem o ícone. Consulte Editar o seu site com IA.

Colocar o novo aspeto online

A pré-visualização mostra logo o seu novo aspeto. Para o verificar num ecrã pequeno, clique no ícone Telemóvel na barra do editor.

Os seus visitantes veem-no depois de publicar: clique em Publicar e depois em Publicar as alterações. A partir daí, o calendário de reservas do seu site também adota as suas cores e os seus tipos de letra. Consulte Publicar o seu site e colocar as alterações online.

Pronto para pôr o seu alojamento em piloto automático?

Junte-se a mais de 1000 gestores de alojamentos que poupam horas todas as semanas com a comunicação com hóspedes assistida por IA.