Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Como meu site será exibido em dispositivos móveis?

Os sites do Squarespace são projetados para garantir que os visitantes possam navegar facilmente no seu site em qualquer dispositivo que escolherem, de computadores a tablets e smartphones.

Todos os sites do Squarespace se ajustam a navegadores menores e ao formato de um dispositivo. Fazemos isso com design responsivo, em que seu conteúdo é redimensionado automaticamente com base no tamanho da janela do navegador que visualiza seu site. Em geral, o conteúdo se acumula verticalmente em dispositivos móveis. Isso significa que os visitantes podem rolar para ver todo o seu conteúdo, em vez de precisar apertar, ampliar e rolar em várias direções.

Se seu site estiver no Squarespace versão 7.0, seu modelo também pode ter estilos móveis integrados adicionais que são ativados quando seu site detecta que ele está sendo visualizado em um dispositivo móvel. Os estilos móveis geralmente afetam os elementos de navegação e design para ajudar a manter seu site amigável para dispositivos móveis e atender a gestos de toque. Para saber mais, consulte a seção Estilos móveis Versão 7.0 abaixo

Na versão 7.1, os sites se adaptam automaticamente à visualização móvel, mas algumas áreas têm opções de estilo específicas para dispositivos móveis.

Este guia explica como determinados elementos do site aparecem em dispositivos móveis e oferece dicas para ajustar seus estilos 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.

Simulador de Dispositivos

O Modo de Exibição de Dispositivos é uma ferramenta para você ver as diferentes exibições móveis do seu site. É uma boa maneira de testar o design responsivo do seu site a partir de uma área de trabalho enquanto você está editando. Para obter instruções detalhadas, visite a Exibição de dispositivos.

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 Exibição de Dispositivos. 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).

SEO e mantendo o site otimizado para dispositivos móveis.

O Google dá maior prioridade aos sites otimizados para dispositivos móveis. Os estilos exclusivos para dispositivos móveis dos sites do Squarespace significam que eles são amigáveis aos mecanismos de pesquisa e estão prontos para ser encontrados em pesquisas móveis. Para saber mais, visite O que o Squarespace faz para 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.

Barra de Notificações

A barra de anúncio aparece na parte superior da página no celular.

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

  • Brine
  • York

Arquivos de áudio e vídeo

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

Os arquivos de vídeo são reproduzidos na página nos browsers compatíveis com a versão móvel. Se você adicionou uma miniatura personalizada como sobreposição de imagem, toque duas vezes para reproduzir o vídeo.

Imagens de banner

As imagens de banner sempre apresentarão cortes nos dispositivos móveis. Há algumas coisas que podem ser feitas para minimizar o corte:

  • Altere os estilos do seu site para editar a posição ou o tamanho de um banner.
  • Os padrões funcionam melhor que as palavras e as paisagens funcionam melhor que os retratos.
  • Na maioria das imagens de banner, você pode ajustar o ponto focal da imagem para controlar como a imagem é cortada.

Blocos

Os blocos adicionam conteúdo a seções, Páginas de layout e quaisquer outras áreas editáveis, como postagens de blog. O design responsivo do Squarespace empilha automaticamente blocos verticalmente em dispositivos móveis.

Para mais informações e vídeo sobre o funcionamento, acesse Alterações de layout de blocos e páginas nos dispositivos móveis.

  • Colunas únicas - Os blocos de largura total são empilhados verticalmente nos dispositivos móveis, mantendo o layout de desktop 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.
  • Os blocos flutuantes são exibidos em cima do Bloco de Texto nos dispositivos móveis.

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

Domínios

Os domínios internos e personalizados do seu site funcionam tanto no desktop quanto no celular. Você não precisa de uma URL móvel separada.

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 é 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.

Seções de galeria:

Na versão móvel, a exibição das seções de galeria depende do layout: 

  • Grade: Simples - Exibe como uma grade. As seções definidas como coluna são exibidas em uma coluna. As seções definidas como duas ou mais colunas são exibidas em duas colunas. 
  • Grade: Tiras - Exibição empilhada em uma coluna.
  • Grade: em tijolos - aparece como uma grade. As seções definidas como coluna aparecem em uma coluna. As seções definidas como duas ou mais colunas aparecem em duas colunas. 
  • Todos os layouts de apresentação de slides- Permanece como uma apresentação de slides.

As legendas não são exibidas na lightbox.

Blocos de Galeria

Na versão móvel, a exibição do Bloco de Galeria depende do layout dele: 

  • Grade - aparece em grade, com duas colunas de largura.
  • Apresentação deslides - Permanecer como uma apresentação de slides.
  • Carrossel - aparece em carrossel, mas mostra somente uma imagem por vez.
  • Empilhado - permanece em pilha.

Na maioria dos casos, a legenda das imagens aparece da mesma maneira na versão móvel e no desktop. No Bloco de Galeria em Slideshow, as legendas não aparecem em browsers com menos de 480 pixels.

Páginas de Galeria

Muitos templates usam a Página de Galeria padrão. Nesses templates, na versão móvel:

  • Grade - as Páginas de Galeria são empilhadas na vertical. Toque em uma imagem para ver em lightbox. No lightbox, toque no ponto no canto inferior direito para ver o título e a descrição da imagem.
  • Slideshow - as Páginas de Galeria aparecem em slideshow. Toque para navegar. O título e a descrição das imagens não aparecem em browsers com menos de 480 pixels.

Se seu template suportar links de URL ou URL de links direto, eles também funcionam nos dispositivos móveis.

A Página de Galeria tem propriedades exclusivas na versão móvel das seguintes famílias de templates:

  • Avenue - As imagens são empilhadas verticalmente.
  • Flatiron - as imagens são empilhadas embaixo do título da página e do texto da descrição.
  • Forte - as imagens são empilhadas na vertical. O título e a descrição aparecem abaixo da imagem. O slideshow em lightbox é desativado.
  • Ishimoto - As imagens são empilhadas verticalmente.
  • Momentum - As setas de navegação desaparecem após o primeiro slide.
  • Montauk - as imagens são empilhadas abaixo da descrição da página. O título e a descrição da imagem aparecem abaixo de cada imagem.
  • Supply - As Páginas de Galeria são empilhadas embaixo do título da página e do texto de descrição. Os títulos e descrições das imagens aparecem embaixo da imagem.
  • Tremont - na maioria dos smartphones, as imagens da galeria são empilhadas na vertical. Smartphones e tablets maiores apresentam o layout normal.

Blocos de Galeria

Na versão móvel, a exibição do Bloco de Galeria depende do layout dele: 

  • Grade - aparece em grade, com duas colunas de largura.
  • Apresentação deslides - Permanecer como uma apresentação de slides.
  • Carrossel - aparece em carrossel, mas mostra somente uma imagem por vez.
  • Empilhado - permanece em pilha.

Na maioria dos casos, a legenda das imagens aparece da mesma maneira na versão móvel e no desktop. No Bloco de Galeria em Slideshow, as legendas não aparecem em browsers com menos de 480 pixels.

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: 

  • Menus suspensos com pasta são exibidos quando tocados.
  • 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.

Legendas da imagem

Os tipos de legendas que seu site usa dependem da versãodo seu site.

  • Seções da Galeria - Normalmente, as legendas são exibidas da mesma forma em dispositivos móveis e na área de trabalho, exceto que as legendas não são exibidas no layout Apresentação de slides: Simples.
  • Bloco de Imagem e Bloco de Galeria - as legendas normalmente aparecem da mesma forma na versão móvel e no desktop. Nas imagens, as legendas com efeito de cursor podem aparecer sempre, nunca ou somente quando tocadas, dependendo do aparelho móvel e da largura do browser.
  • Bloco de Imagem e Bloco de Galeria - as legendas normalmente aparecem da mesma forma na versão móvel e no desktop. Nas imagens, as legendas com efeito de cursor podem aparecer sempre, nunca ou somente quando tocadas, dependendo do aparelho móvel e da largura do browser.
  • Página de Galeria - a exibição na versão móvel depende do template.

Instagram, Flickr, e Blocos de 500px

Blocos que exibem imagens de contas sociais, como Instagram, Flickr e 500px, exibem as 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 imagem tiver uma legenda que aparece ao passar o mouse, um ponto branco aparecerá no canto inferior direito da caixa de luz. 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.

Menus de navegação

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

A aparência móvel da navegação depende do layout do cabeçalhodo site. A Navegação Principal sempre se recolhe atrás de um ícone de menu, mas você pode definir o layout de navegação e o tipo de ícone nas configurações de cabeçalho. 

Na versão móvel, a aparência da navegação depende do template, mas a Navegação Principal geralmente se recolhe atrás de um ícone de menu (conhecido como ícone de "hambúrguer") ou um link. 

Se seu site estiver na versão 7.0 e seu modelo suportar Navegação de Rodapé, ele será exibido na parte inferior da página, empilhado verticalmente. 

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

Preenchimento

Os sites do Squarespace geralmente têm preenchimento móvel integrado, o que ajuda a otimizar seu site para navegadores menores e design responsivo. Isso significa que ajustes de espaçamento e preenchimento que afetam seu site em um computador nem sempre podem afetar a aparência 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 de Estilo para personalizar o design móvel, ou desabilite os pop-ups móveis no painel Display & Timing (Exibição e Tempo).

Títulos e logos dos sites

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

O estilo do título ou logotipo do site depende do layout do cabeçalho do site. No editor de cabeçalho, clique no ícone Móvel para alterar o layout. 

Na versão móvel, o título ou logotipo do site geralmente fica em uma posição semelhante. Por exemplo: se o título do site aparecer no canto direito superior do desktop, ele normalmente ficará no mesmo canto na versão móvel.

Para obter informações detalhadas sobre como o título do site de cada modelo é exibido em dispositivos móveis, visite Título do site e exibição do logotipo.

Armazenar Páginas 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 são empilhados em uma ou duas colunas verticais. 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ãodo seu site. 

  • Várias imagens de produtos são exibidas em uma apresentação de slides pela qual os clientes podem passar o dedo.
  • A navegação por categoria é exibida horizontalmente para que os compradores passem o dedo.
  • Quando o carrinho de compras está ativado nas configurações de cabeçalho, ele sempre aparece na parte superior da página. Se você desativar o ícone do carrinho de compras, ele só aparecerá na parte inferior da página quando alguém adiciona um produto ao carrinho.
  • No momento, a Visualização rápida e a Aproximação na imagem do produto não estão disponíveis na versão móvel.
  • Várias imagens de produtos são exibidas em miniaturas pequenas ou empilhadas em páginas de detalhes do produto. 
  • A navegação por categoria geralmente é exibida como um menu suspenso Filtro . Em Fornecimento, ele é exibido no menu de navegação.
  • O carrinho de compras aparece depois que o cliente adicionou pelo menos um item. Na maioria dos modelos, ele aparece em uma barra móvel preta na parte inferior do site.
  • Atualmente, a Visualização Rápida e o Zoom da Imagem do Produto não estão disponíveis em dispositivos móveis. 
  • Tanto a Página da Loja Avançada quanto a Exclusiva oferecem recursos especiais aos produtos. Em alguns templates da versão móvel, é possível ajustar o estilo do carrinho de compras.

Texto e fontes

As fontes normalmente mantêm o mesmo estilo em dispositivos móveis, mas fontes grandes, como cabeçalhos, podem ser dimensionadas para se ajustar à largura do navegador. Se você encontrar sobreposição de texto em dispositivos móveis, 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 modelos 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

Esses recursos são exclusivos para sites da versão 7.0 .

Páginas de Entrada

As Páginas de Capa se adaptam ao celular com base em seu layout.

Cabeçalhos e rodapés específicos da página

Para modelos 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 alguns templates. Nela, a imagem de fundo parece se mover mais lentamente do que o conteúdo no primeiro plano. Disponível na versão móvel da família Brine.

Barras Laterais

As barras laterais são exibidas na parte inferior da página no celular. No modelo Ishimoto , as barras laterais não são exibidas em dispositivos móveis.

Imagens de fundo em todo o site

Imagens de fundo em todo o site são suportadas em dispositivos móveis. Talvez seja necessário tornar a área de conteúdo transparente para que a imagem de fundo apareça.

A mesma imagem de fundo é exibida em dispositivos móveis e desktops. Conforme são ajustadas na tela mais longa e estreita do navegador em um dispositivo móvel, as imagens de fundo podem sofrer corte ou distorção. Há algumas coisas que podem ser feitas para minimizar o corte:

Estilos específicos do modelo

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

O recurso Estilos móveis otimiza os templates e recursos em uma interface para versão móvel que atende a movimentos e gestos para, por exemplo, recolher um menu de navegação, além das fontes legíveis. Esse recurso já vem ativado, mas é possível desativar os Estilos móveis na maioria dos templates. 

Nota: O design responsivo é criado em todos os sites do Squarespace e não pode ser desativado.

Perguntas Frequentes

Como o Squarespace decide quando exibir estilos de celulares ou de desktop?

Quando você visita um site em um dispositivo móvel, o Squarespace detecta automaticamente um sistema operacional móvel. Isso envia um sinal para exibir os estilos móveis, a menos que seu site esteja na 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.

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ê:

 

Este artigo foi útil?
Utilizadores que acharam útil: 44 de 121