Saiba como vários elementos do site aparecem na versão móvel.

Os sites do Squarespace são projetados para que os visitantes naveguem com facilidade no seu site em qualquer aparelho, seja no computador, no tablet ou no smartphone.

Este guia explica como determinados elementos do site aparecem em dispositivos móveis e oferece dicas para alterar seus estilos de dispositivos móveis.

Assista ao vídeo

Como manter seu site compatível com dispositivos móveis

Todos os sites do Squarespace se ajustam a browsers menores e ao formato do aparelho. Fazemos isso com design responsivo, no qual o conteúdo é ajustado automaticamente com base no tamanho da janela do browser no qual o site foi aberto. Em geral, o conteúdo se acumula verticalmente na versão móvel. Assim, os visitantes podem rolar para ver todo o conteúdo, em vez de pinçar, ampliar e rolar em várias direções.

Na versão 7.0 do Squarespace, o template pode ter outros estilos móveis integrados que serão ativados quando o site detecta que está sendo aberto na versão móvel. Saiba mais na seção "Estilos móveis da versão 7.0" abaixo.

Na versão 7.1, os sites se adaptam automaticamente à visualização na versão móvel, mas algumas áreas, como as seções do Editor Intuitivo e os cabeçalhos, têm opções de estilo específicas para essa versão.

SEO para dispositivos móveis

O Google dá prioridade aos sites otimizados para a versão móvel. Os estilos móveis exclusivos dos sites do Squarespace são ajustados para os buscadores e prontos para ser encontrados nas buscas feitas nos aparelhos móveis. Saiba mais em O que o Squarespace faz para a SEO.

Além de designs otimizados para dispositivos móveis, há certas providências que você pode tomar para garantir que seu site permaneça amigável para dispositivos móveis, incluindo limitar o conteúdo em um portfólio ou página de índice, usar trechos de blog, reduzir o tamanho da imagem e minimizar o número de imagens em uma página. Para saber mais, visite Dicas para manter seu site compatível com dispositivos móveis.

Conheça seu site nos dispositivos móveis

A melhor maneira de aprender como seu site funciona em dispositivos móveis é testá-lo por si mesmo. Recomendamos usar a Exibição de dispositivos integrada e testar em um dispositivo móvel.

Prévia por aparelho

A ferramenta "prévia por aparelho" mostra as diferentes exibições do seu site na versão móvel. Essa é uma boa forma de testar o design responsivo do seu site enquanto você edita no computador. Veja os detalhes em Prévia por aparelho. Nas áreas que usam o Editor Intuitivo, use a prévia por aparelho para editar seu layout para versão móvel de forma independente do layout para computador.

Use seus dispositivos

Os tamanhos das janelas variam de acordo com os dispositivos, e alguns recursos móveis terão uma aparência diferente em um dispositivo móvel real do que na prévia por aparelho. Por isso, é útil visitar seu site em qualquer dispositivo que você puder.

Para acessar seu site em um dispositivo móvel, digite a URL dele na barra de navegação do navegador do dispositivo móvel.

Dica: na versão móvel, durante a avaliação, para ver o site como visitante, adicione uma senha geral do site (em vez do login do proprietário).

Áudio e vídeo

Arquivos de áudio e vídeos são abertos e reproduzidos de acordo com cada aparelho ou browser. Em alguns casos (como no iOS), os arquivos de áudio abrem no reprodutor de mídias do próprio aparelho.

Os vídeos são reproduzidos na página em todos os browsers compatíveis na versão móvel. Se você adicionou uma miniatura personalizada (como uma sobreposição de imagem), toque duas vezes para reproduzir o vídeo. A próxima seção mostra como os banners de vídeo funcionam na versão móvel.

Blocos

Os blocos adicionam conteúdo a seções, páginas e outras áreas editáveis, como uma publicação do blog. A forma como os blocos aparecem na versão móvel depende da versão do site e de onde os blocos são adicionados.

Na versão 7.1, nas áreas dos sites que usam o Editor Intuitivo, organize seu layout para versão móvel independentemente do layout para computador.

Nos sites da versão 7.0 e nas áreas dos sites da versão 7.1 que usam o editor clássico, o design responsivo do Squarespace empilha automaticamente os blocos na vertical na versão móvel. O artigo Como os blocos se empilham no celular dá os detalhes e disponibiliza um vídeo sobre como isso funciona no editor clássico.

• Coluna avulsa - na versão móvel, os blocos de tela cheia são empilhados para preservar o layout do computador da página.
• Colunas múltiplas - A segunda e a terceira coluna e as colunas adicionais se movem embaixo da primeira nos dispositivos móveis, sendo empilhadas verticalmente e não horizontalmente.
• No celular, o bloco flutuante aparece acima do bloco de texto.

Blocos Espaçadores são automaticamente ocultados no celular, exceto em alguns templates na versão 7.0 .

Domínios

Os domínios internos e personalizados do seu site funcionam tanto em computadores quanto em dispositivos móveis. Você não precisa de um URL para dispositivos móveis separado.

Se estiver tendo problemas com um domínio de terceiros se conectando em dispositivos móveis, verifique se o vinculou corretamente ao seu site.

Favicon ou ícone de navegador

Dependendo do seu navegador para celular, o favicon, ou ícone de navegador, é exibido. Em alguns casos, o favicon não será exibido.

Galerias

A forma como a galeria é exibida no dispositivo móvel depende da versão do seu site e do formato da galeria.

Dica: arquivos de imagem grandes ou muitas imagens podem fazer com que seu site seja carregado lentamente em dispositivos móveis. Para saber mais, visite Dicas para manter seu site compatível com dispositivos móveis.

Blocos de Galeria

No Editor Intuitivo, os blocos de galeria aparecem de forma igual no aparelho móvel e no computador, mas você pode alterar o tamanho e o posicionamento deles. No editor clássico, a forma como os blocos de galeria aparecem na versão móvel depende do layout dos blocos:

• Grade - aparece em grade, com duas colunas de largura
• Slideshow — Permanecer como slideshow
• Carrossel - aparece em carrossel, mas mostra somente uma imagem por vez
• Empilhado - permanece em pilha

Geralmente, a legenda das imagens aparece da mesma maneira na versão móvel e em computadores. No Bloco de Galeria em Slideshow, as legendas não aparecem em navegadores com menos de 480 pixels.

Para saber mais, visite Blocos de Galeria.

Elementos de cabeçalho

Sua barra de notificações, menus de navegação e título e logotipo do site podem mudar quando visualizados em dispositivos móveis.

Barra de Notificações

A barra de notificações aparece na parte superior da página no celular.

Nessas famílias de templates da versão 7.0, a barra de notificações aparece abaixo da sobreposição do cabeçalho e acima do conteúdo da página:

• Brine
• York

Menus de navegação

A forma como o menu de navegação aparece depende da versão do site.

Para saber mais, visite Navegação de estilo.

Títulos e logos dos sites

A forma como o título ou o logotipo do site aparece depende da versão do seu site.

Imagens

Para compensar a largura estreita dos smartphones, algumas imagens e recursos de imagem mudam no celular.

Imagens de fundo do banner e da seção

Na versão móvel, os banners e as imagens de fundo da seção sempre saem cortados. O corte acontece porque as imagens e vídeos dos banners são largos e horizontais, e a tela dos aparelhos móveis é estreita e vertical.

Siga nossas dicas de formatação da imagem do banner e as práticas recomendadas para uma imagem com design responsivo antes de enviar imagens. Ao ver seu site na versão móvel, lembre-se de que:

• A quantidade recortada vai depender da altura do banner e da largura do navegador.
• As configurações de altura do banner nem sempre valem para a versão móvel.
• Banners de vídeo não serão carregados no celular se a velocidade da conexão for lenta ou se o navegador não permitir. Defina uma imagem de contingência para dispositivos móveis para aparecer quando o vídeo não puder carregar.
• Nos banners gerais do site, a configuração Posição fixa não aparece em alguns aparelhos móveis, como iOS. Saiba mais em Adição de imagens no fundo geral do site na versão 7.0.

Para minimizar os efeitos do corte nas imagens do banner, confira Solução de problemas de corte.

Legendas da imagem

Os tipos de legendas dependem da versão do site.

Blocos do Instagram e do Flickr

Blocos que exibem imagens de contas nas redes sociais, como Instagram e Flickr, mostram imagens em uma grade com duas colunas de largura.

Lightboxes

Os aparelhos móveis em geral aceitam efeitos de lightbox, mas com algumas limitações:

• O recurso de zoom com movimento de pinça não é suportado.
• Se a legenda da imagem aparecer ao se passar o cursor, aparecerá um ponto branco no canto inferior direito do lightbox. Toque no ponto para mostrar a legenda.
• Na versão 7.0, as caixas de luz são desativadas nas Páginas de Galeria Wexley.

Elementos da página

Os efeitos ao passar o cursor e espaçamento mudam no celular para manter seu site otimizado.

Efeitos hover

Aparelhos com touchscreen, como smartphones, tablets e alguns laptops, não têm o efeito de cursor, que aparece no site quando se toca em um elemento que tenha esse recurso. Por exemplo:

• O menu suspenso aparece quando tocado.
• Nome e preços dos itens de produto são exibidos abaixo da imagem.
• O caption das imagens pode aparecer sempre, aparecer quando ela for tocada ou nunca aparecer, dependendo do tipo de dispositivo e da largura do navegador.
• Os títulos das subpáginas do portfólio e as imagens em destaque podem nunca ser exibidos. 

Preenchimento

Os sites do Squarespace geralmente vêm com margens móveis para otimizar o site para browsers menores e um design responsivo. Com isso, os ajustes do espaçamento e das margens que afetam o site no computador nem sempre afetam como ele aparece no celular.

Pop-ups promocionais

É possível manter os pop-ups promocionais ativados no aparelho móvel. Na versão móvel, todos os pop-ups têm o estilo padrão de meia página para cumprir as regras do Google quanto ao ranking dos sites nos resultados de busca.

Use o painel "Estilo" para personalizar o design móvel; ou desative os pop-ups móveis no painel Exibição e tempo).

Páginas da loja e Commerce

Na versão móvel do seu site, os clientes fazem compras mais ou menos do mesmo jeito que fariam no computador. Assim como o resto do site, a loja do Squarespace se adapta à tela pequena e é navegável no aparelho móvel. Os produtos se empilham na vertical. Na página de detalhes de cada produto, a imagem é empilhada sobre a descrição, o preço e o botão Adicionar ao carrinho.

Outros estilos dependem da versão do seu site.

Texto e fontes

Normalmente, as fontes mantêm o mesmo estilo em dispositivos móveis, mas fontes grandes, como títulos, podem ser reduzidas para caber na largura do navegador. Se o texto estiver sobreposto no dispositivo móvel, altere a altura da linha da fonte.

Números de telefone adicionados ao corpo ou ao rodapé do seu site são exibidos como links no navegador Safari para dispositivos móveis.

Alguns templates da versão 7.0 usam fontes de escala para que você possa definir manualmente os tamanhos máximo e mínimo de títulos, cabeçalhos e outros textos importantes.

Estilos móveis da versão 7.0

Assista ao vídeo

Os seguintes recursos são exclusivos da versão 7.0:

• Páginas de Entrada — as páginas de entrada se adaptam ao celular com base em seu layout.
• Cabeçalhos e rodapés específicos da página - Para templates que suportam cabeçalhos ou rodapés de página, o conteúdo é exibido em dispositivos móveis.
• Rolagem parallax - Rolagem parallax é um efeito especial disponível em determinados templates em que a imagem de fundo parece se mover mais lentamente do que o conteúdo em primeiro plano. Está disponível no celular na família Brine .
• Barras Laterais - As barras laterais são exibidas na parte inferior da página no celular. No template Ishimoto , as barras laterais não são exibidas em dispositivos móveis.
• Imagens do fundo geral do site — essas imagens são aceitas na versão móvel. Talvez seja necessário deixar a área do conteúdo transparente para que a imagem de fundo apareça.

Estilos específicos do template

Para saber mais sobre as opções de celular para um template específico, visite nossos guias de templates.

Para obter uma lista de todos os templates com opções específicas para celular, visite Estilos de celular avançados.

Desative os estilos móveis

A maioria dos templates do Squarespace tem um design exclusivo otimizado para dispositivos móveis, o que ajuda seus visitantes a visualizar e navegar no seu site a partir de qualquer dispositivo. Alguns templates têm uma opção para desativar esse recurso se você preferir, embora nossa recomendação seja manter os estilos móveis ativados.

Lembre-se:

• Com os estilos móveis desativados, o site aparece do mesmo jeito no aparelho móvel e no computador. Em vez de o conteúdo do site ficar empilhado em uma coluna, os blocos e outros conteúdos aparecem no mesmo layout que você vê no browser de computador.
• Desativar estilos móveis pode afetar seu SEO. Em abril de 2015, o Google começou a considerar “facilidade para dispositivos móveis” ao classificar sites em pesquisas de dispositivos móveis. Os sites do Squarespace só estão em conformidade com os requisitos do Google quando os estilos móveis estão ativados.
• Desativar estilos móveis desabilita a navegação móvel.
• Na Página de Entrada, não é possível desativar estilos móveis.

Para desativar estilos móveis:

1. Abra o painel "Design" e clique em Configurações do template.
2. Marque Desativar estilos móveis.
3. Clique em Salvar.

Essa opção só aparece nos templates que aceitam a desativação dos estilos móveis. Os estilos móveis não podem ser desativados nos templates das famílias:

• Brine
• Farro
• Galapagos
• Skye
• Supply
• Tremont
• York

Perguntas Frequentes

Como o Squarespace decide quando exibir estilos de dispositivos móveis ou de computador?

Quando você acessa um site na versão móvel, o Squarespace detecta automaticamente um sistema operacional móvel. Isso envia um sinal para mostrar os estilos móveis, a menos que o site seja da versão 7.0 e você os tenha desativado.

Posso editar meu site em dispositivos móveis?

Você pode editar seu site em dispositivos móveis usando o aplicativo Squarespace para iOS ou Android.

Você também pode fazer login através do seu navegador móvel e gerenciar alguns aspectos do seu site Squarespace em um dispositivo móvel, mas alguns recursos só estão disponíveis em um computador.

Qual é a diferença entre estilos móveis e design responsivo?

Estilos móveis na versão 7.0 e design responsivo são conceitos diferentes, mas relacionados.

• Os estilos móveis são exclusivos dos templates da versão 7.0. Esses estilos afetam apenas a navegação específica nos aparelhos móveis, as restrições no carregamento do fundo de conteúdos e outros elementos de design que podem ser complexos na versão móvel. Esses elementos são desativados quando você desativa os estilos móveis para apresentar o site com uma versão semelhante à do computador.
• Design responsivo refere-se à capacidade do site e dos elementos do conteúdo de alterar seu tamanho para caber na janela do browser do visitante. O design responsivo permanece em todos os sites do Squarespace, mesmo com estilos móveis 7.0 desativados. Assim, o site inteiro ainda é ajustado para caber nos aparelhos menores, mas, com os estilos móveis desativados, o conteúdo não é reorganizado para facilitar a navegação. Como os estilos móveis não podem ser desativados na versão 7.1, o conteúdo sempre é reorganizado e reajustado. Saiba mais em Design responsivo.

Posso adicionar CSS personalizado para alterar o layout do celular do meu site?

Pode, mas nosso suporte não cobre modificações no código personalizado; ou seja, não ajudamos na configuração nem na solução de problemas. Além disso, não garantimos a funcionalidade ou compatibilidade integral de nenhuma solução em código com o Squarespace. Isso inclui o funcionamento dele com nosso design responsivo, principalmente a aparência na versão móvel, e se ele funciona em todos os templates. O código personalizado também pode causar problemas de exibição nas futuras versões da nossa plataforma. Ainda assim, há muitos recursos para auxiliar você:

• Conheça as práticas recomendadas para adicionar um código personalizado.
• Leia nosso guia geral sobre personalizações de terceiros.
• Visite o Squarespace Forum, nossa comunidade de clientes e desenvolvedores.
• Contrate um Squarespace Expert para criar um código personalizado para o seu site. Saiba mais sobre os serviços especializados disponíveis no Squarespace Marketplace.