Estilos móveis da página de entrada na versão 7.0

Ultima atualização 23 de Agosto de 2024

Veja como a página de entrada da sua versão 7.0 fica na versão móvel.

Para garantir que sua página de entrada fique ótima em todos os dispositivos, seu design responsivo empilhará automaticamente o conteúdo em uma única coluna. Isso significa que sua página de entrada no celular naturalmente terá uma aparência um pouco diferente do computador. Embora a aparência exata da sua página de entrada para dispositivos móveis dependa do seu layout e conteúdo, aqui estão algumas regras gerais.

Acessando o recurso

A página de entrada não está disponível na versão 7.1. Para criar um visual parecido, você pode ocultar o cabeçalho e o rodapé em determinadas páginas.

Visualizar com a prévia por aparelho

Use a Prévia por aparelho para ver como sua página de entrada aparece na versão móvel, tablet ou no computador. Também recomendamos acessar o seu site no seu próprio aparelho. Para acessar o site por um aparelho móvel, digite o URL da página na barra de navegação do browser. O endereço do site é igual na versão móvel.

Mobile background images

Se você estiver usando imagens de fundo em sua página de entrada, recomendamos usar uma imagem sem texto ou bordas que ofereça alguma flexibilidade com o corte. Para obter mais ajuda com isso, analise nossas práticas recomendadas para imagens de fundo

Text on mobile

Se o corpo do texto em uma página de entrada tiver um tamanho de fonte muito grande, palavras e frases mais longas poderão ser cortadas em dispositivos móveis. Para obter melhores resultados, recomendamos manter o corpo do texto curto, usar um tamanho de fonte menor para o corpo do texto e adicionar espaços entre as palavras.

Overall layout changes on mobile

Aqui estão alguns ajustes que você notará quando sua página de entrada for visualizada em um dispositivo móvel:

  • Split layouts (like Flash and Spotlight) stack vertically with the image stacked above the text.
KB Guide Image
  • Layouts with split text (like Debut and Projector) stack the left-side text above the right-side.
KB Guide Image
  • O layout Harbor se divide horizontalmente, com o mapa empilhado acima do texto.
KB Guide Image
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Estilos móveis da página de entrada na versão 7.0