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 template poderá ter estilos móveis incorporados extras que serão ativados quando seu site detectar que ele está sendo visualizado em um dispositivo móvel. 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 por dispositivo móvel, mas algumas áreas, como cabeçalhos, 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 alterar seus estilos de 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.

Simulador de Dispositivos

A ferramenta Visualização por dispositivo móvel mostra as diferentes exibições móveis do seu site. Esta é 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 fundo do banner e da seção

Banners e imagens de fundo de seção sempre experimentarão algum corte em dispositivos móveis. Para minimizar os efeitos do corte:

  • Altere os estilos do seu site para editar a posição ou o tamanho da seção.
  • Padrões abstratos e imagens sem texto ou bordas funcionam melhor.
  • Na maioria das imagens de fundo da seção, você pode ajustar o ponto focal para controlar onde a imagem está centralizada.

Blocos

Os blocos adicionam conteúdo a seções, páginas e outras áreas editáveis, como publicações 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: Alvenaria - Seções definidas como uma coluna são exibidas em uma coluna. As seções definidas como duas ou mais colunas são exibidas 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.

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 - Imagens empilham 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 na vertical
  • 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 da descrição. O título e a descrição aparecem abaixo 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
  • Slideshow - Permanecer como slideshow
  • 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 site

A aparência da navegação na versão móvel depende do layout do cabeçalho do site. A Navegação Principal sempre se recolhe atrás de um ícone de menu, mas é possível definir o layout de navegação, o tipo de ícone e a cor de sobreposição 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 o template aceitar a Navegação do rodapé, ela aparecerá no fim da página, empilhada na vertical. 

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 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ã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.
  • Os produtos são exibidos em uma única coluna.
  • 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. 
  • Os produtos são exibidos em duas ou mais colunas.
  • 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. 
  • As Páginas da Loja Avançadas e Exclusivas têm recursos especiais do produto. Em alguns templates, você pode alterar o estilo móvel do seu carrinho de compras.

Texto e fontes

As fontes normalmente mantêm o mesmo estilo em dispositivos móveis, mas fontes grandes, como títulos, podem ser dimensionadas para se ajustar à largura do browser. 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

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

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

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: 

  • A desativação de estilos móveis faz com que seu site pareça o mesmo em um dispositivo móvel que em um desktop. Em vez de empilhar o conteúdo do site em uma coluna vertical, os blocos e outros conteúdos aparecem no mesmo layout que você vê em um browser da área de trabalho.
  • 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.
  • Não é possível desativar estilos móveis para Páginas de Entrada

Para desativar estilos móveis:

  1. No Menu Inicial, clique em Design e depois em Configurações de 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
  • Galápagos
  • Skye
  • Supply 
  • Tremont
  • York

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.

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.

  • Osestilos móveis são exclusivos para os templates da versão 7.0. Esses estilos afetam apenas a navegação específica para dispositivos móveis, as restrições colocadas ao carregamento de fundos de conteúdo e outros elementos de design que podem ser complexos em dispositivos móveis. Esses elementos são desativados quando você desabilita estilos móveis para apresentar uma versão mais semelhante ao desktop do seu site.
  • Design responsivo refere-se à capacidade do seu site e seus elementos de conteúdo de ajustar seu tamanho para caber na janela do browser do visitante. O design responsivo permanece em vigor para todos os sites do Squarespace, mesmo com estilos móveis 7.0 desabilitados. Isso significa que o site completo ainda será dimensionado para caber em dispositivos menores, mas se os estilos móveis estiverem desativados, o conteúdo não será reorganizado para facilitar a navegação. Os estilos móveis não podem ser desativados na versão 7.1, portanto, o conteúdo sempre será reorganizado e redimensionado. Para saber mais, visite 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ê:

Este artigo foi útil?
Utilizadores que acharam útil: 46 de 127