Instruções

O site usa design fluido baseado no tamanho de fonte do corpo. Tenha isso em mente ao fazer alterações no template.
‍
O que isso significa: cada parte deste site é totalmente responsiva e se ajusta à largura da tela. Foi construído para ser escalável e garantir uma experiência perfeita e consistente em todos os dispositivos. Por isso, siga as recomendações a seguir:

• Nunca altere o tamanho de fonte do corpo.
  

• Se desejar alterar o tamanho de um elemento tipográfico, consulte a respectiva tag no Guia de Estilo. Por exemplo, Parágrafo, Parágrafo destaque, Título grande, etc.
  

• Se quiser alterar ou adicionar padding, margem ou tamanho de tipografia, prefira a unidade "em" para garantir que a proporção geral do site permaneça impecável.
  

• Use a unidade "px" para elementos pequenos ou que você não quer escalar entre viewports. Neste design, o tamanho de fonte dos parágrafos é fixo.
  

• Ao usar a unidade "em", provavelmente você não precisará se preocupar com responsividade; ela escala automaticamente em todos os viewports para uma edição fácil e rápida. Verifique designs mais complexos, principalmente em telas verticais.
  

• Use a tag "Is Padding" para adicionar paddings horizontais consistentes aos seus contêineres.
  

• O site usa uma grade de 12 colunas. Não hesite em usar as classes de coluna para criar seus próprios layouts, se necessário. Confira a aba Utilitário do Guia de Estilo para mais informações.
  

O contêiner de imagens está oculto; para trocar as imagens, siga estes passos:

• Procure o "Hero Interactive Container". Ele contém todas as imagens interativas.
  

• Abra os subblocos e selecione o elemento de imagem.
  

• Pressione "d" para abrir as configurações ou clique no ícone de engrenagem no canto superior direito.
  

• Clique em "replace image" e envie a imagem desejada. Repita para as 12 imagens.
  

• Por fim, publique seu site para tornar as alterações visíveis aos visitantes.
  

O popup de info está oculto. Para alterá-lo, siga estes passos.

• Dê duplo clique no Componente de Navegação para abrir as configurações. Selecione a div Info Popup.
  

• Procure a propriedade que controla o display e altere de "none" para "flex". Isso tornará o popup de Info visível no site.
  

• Agora você pode editar o conteúdo do Info Popup conforme suas necessidades.
  

• Após fazer as alterações desejadas, lembre-se de voltar a propriedade display para "none". Isso ocultará o popup novamente.
  

• Por fim, publique seu site para tornar as alterações visíveis aos visitantes.
  

Ao aplicar estes passos, a seleção de texto nas imagens interativas será desativada, proporcionando uma experiência mais suave ao impedir que as imagens sejam selecionadas e permitir uma interação fluida.

• Clique na aba "Pages" na barra lateral esquerda (ícone de papel).
  

• Passe o mouse sobre a página "Home" e selecione o ícone de configurações (engrenagem).
  

• Nas configurações, encontre a seção de código personalizado e cole o código a seguir na opção "Inside <head> tag":
  

• <style>
  .prevent-select img, header.prevent-select {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  }
  </style>
  

• Salve as alterações e publique seu site.
  

Se precisar de ajuda, tiver observações ou quiser deixar um feedback, não hesite em me contatar: fi@specimen.studio

Fico feliz em ajudar e gostaria de saber como posso melhorar sua experiência.