Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Como meu site será exibido em dispositivos móveis?

Os templates do Squarespace são projetados para garantir que os visitantes possam navegar facilmente pelo site em qualquer dispositivo escolhido, desde desktops a tablets e smartphones.

Todos os sites Squarespace se ajustam a navegadores menores e se encaixam no formato de um dispositivo. Fazemos isso de duas maneiras:

  • Design responsivo - O conteúdo será automaticamente redimensionado com base no tamanho da janela do navegador que exibe o site.
  • Estilos móveis - A maioria dos templates Squarespace possuem estilos móveis integrados adicionais que são ativados quando o site detecta que 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 o site otimizado para dispositivos móveis e atender aos gestos de toque.

Apesar de a maneira exata que o site aparece em dispositivos móveis variar de acordo com o template, a maioria dos templates possuem funcionalidade similar. Esse guia define o que você pode esperar do site para dispositivos móveis e oferece dicas para ajustar seus estilos móveis.

Conheça seu site nos dispositivos móveis

A melhor maneira de saber como seu site funciona em dispositivos móveis é testá-lo você mesmo. Há dois métodos principais para visualizar a funcionalidade móvel do seu site: Simulador de Dispositivos e testá-lo em dispositivos móveis e navegadores menores. Recomendamos ambos.

Simulador de Dispositivos

O Simulador de Dispositivos é uma ótima maneira de testar o design responsivo do seu site em um desktop durante a edição. Para abrir o Simulador de Dispositivos, faça login em seu site e passe sobre a página na parte superior do navegador. Clique na seta que aparece e selecione um tipo de dispositivo. Para instruções detalhadas, acesse Simulador de Dispositivos.

Use seus dispositivos

O Simulador de Dispositivos proporciona uma idéia geral de como seu site aparecerá em um navegador típico de celular, mas não é 100% preciso para todo celular ou tablet. O tamanho das janelas varia de acordo com o dispositivo, e os recursos de dispostivos móveis de alguns templates são exibidos no dispositivo móvel de forma diferente da visualização no Simulador de Dispositivos. Portanto, é uma boa ideia visitar o site em qualquer dispositivo que puder.

Para acessar seu site em um dispositivo móvel, digite o URL dele na barra de navegação do navegador do dispositivo móvel. O site não possui um endereço diferente para dispositivos móveis.

Dica: durante o período de avaliação, para visualizar seu site como se fosse um visitante com dispositivo móvel, adicione uma senha para todo o site (em vez do login do proprietário).

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

O Google dá maior prioridade a sites otimizados para dispositivos móveis. Os estilos móveis exclusivos dos templates do Squarespace são ajustados para os motores de busca e estão prontos para ser encontrados nas buscas dos dispositivos móveis. Para saber mais, acesse Visão geral de SEO e do Squarespace

Além dos templates otimizados para dispositivos móveis, há algumas coisas que podem ser feitas para garantir que o site continue ajustado aos dispositivos móveis, incluindo limitar o conteúdo na Página Índice, usar um trecho do blog, reduzir o tamanho da imagem e minimizar o número de imagens em uma página. Para saber mais, acesse Manter o site Squarespace otimizado para dispositivos móveis.

Regras gerais

No geral, o conteúdo é empilhado verticalmente no celular. Isso significa que os visitantes podem rolar para ver todo o conteúdo, em vez de ter que pinçar, ampliar e rolar em muitas direções.

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

As informações a seguir listam as regras gerais para certos elementos em dispositivos móveis.

Atenção: alguns templates têm opções de estilo específicas para dispositivos móveis. Como não é possível editar o site em dispositivos móveis, faça as alterações em um computador. Se precisar de ajuda, acesse Como fazer alterações de estilo.

Barra de notificações

Na versão móvel da maioria dos templates, a barra de notificações aparece no topo da página.

Nos templates das seguintes famílias, a barra de notificações 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 dispositivo ou navegador. Em alguns dispositivos, inclusive no iOS, os arquivos de áudio abrem no player de mídia do dispositivo.

Os arquivos de vídeo são reproduzidos na página em todos os navegadores suportados para dispositivos móveis. Se você adicionou uma miniatura personalizada como sobreposição de imagem, toque duas vezes para reproduzir o vídeo.

Imagens de plano de fundo

As imagens de plano de fundo são suportadas nos dispositivos móveis. Em alguns templates, pode ser necessário tornar transparente a área de conteúdo ou a tela para que a imagem de plano de fundo apareça. Para saber como, acesse Mudar cores.

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:

  • Ao escolher uma imagem de fundo, o formato da imagem pode fazer uma grande diferença no modo como ela é exibida em dispositivos móveis.
  • Confira nossas dicas de solução de problemas para ver configurações de estilo que funcionam bem em dispositivos móveis.
  • Ao adicionar uma imagem de fundo, use um dispositivo móvel ou o Simulador de Dispositivos para ver como ele é exibido em dispositivos móveis.

Imagens de banner e rolagem com paralaxe

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 site para editar a posição de um banner, alterar o tamanho dele ou configurar para que seja fixo.
  • Os padrões funcionam melhor que as palavras e as paisagens funcionam melhor que os retratos.
  • Nas imagens do banner de página, é possível ajustar o ponto focal da imagem para controlar como ela é cortada.

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. Ela está disponível na versão móvel da família Brine:

Páginas de Entrada

As Páginas de Entrada se adaptam aos dispositivos móveis com base no layout. Para saber mais, acesse Estilos móveis da Página de Entrada.

Fontes

Geralmente, as fontes mantêm o mesmo estilo nos dispositivos móveis, mas fontes grandes, como títulos, podem diminuir para se encaixarem na largura do navegador.

Alguns templates usam dimensionamento de fontes para que você possa definir, manualmente os tamanhos máximo e mínimo dos títulos, cabeçalhos e de outros textos importantes.

Atenção: se houver sobreposição de textos na versão móvel, ajuste a altura da linha da fonte.

Preenchimento

Geralmente, os templates possuem preenchimento integrado para celular, o que ajuda a otimizar o site em navegadores menores e design responsivo. Isso significa que os ajustes de espaçamento e preenchimento que afetam o site no desktop podem nem sempre afetar a aparência no celular.

Galerias

O modo como a Página de Galeria ou Bloco de Galeria aparecem nos dispositivos móveis depende do formato.

Dica: Arquivos de imagem grandes ou muitas imagens podem fazer com que o site carregue lentamente no celular. Para saber mais, visite Manter seu site do Squarespace otimizado para dispositivos móveis.

Blocos de Galeria

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

Saiba mais em Usando Blocos de Galeria.

Nota: Na maioria dos casos, as legendas das imagens são exibidas da mesma maneira nos dispositivos móveis e no desktop: Em Blocos de Galeria em Slideshow, as legendas não são exibidas em navegadores mais estreitos  do que 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 exibir em lightbox. No lightbox, toque no ponto no canto inferior direito para exibir títulos e descrições de imagem.
  • Slideshow - as Páginas de Galeria aparecem em slideshow. Toque para navegar. Descrições e títulos de imagem não são exibidas em navegadores com menos de 480 pixels de largura.
  • Se seu template suportar links de URL ou URL de links direto, eles também funcionam nos dispositivos móveis.

A Páginas de Galeria têm propriedades exclusivas na versão móvel das seguintes famílias de template:

  • Avenue - As imagens são empilhadas verticalmente.
  • Flatiron - As imagens são empilhadas embaixo do título da página e do texto de descrição.
  • Forte - As imagens são empilhadas verticalmente. Os títulos e descrições das imagens são exibidas abaixo da imagem. Lightbox slideshow é desativada.
  • 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 - as imagens da galeria são empilhadas na vertical na maioria dos smartphones. Smartphones e tablets maiores apresentam o layout normal. 

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. 

Menus de navegação

A aparência de sua navegação no dispositivo móvel depende do template, mas a Navegação Principal geralmente colapsa atrás do ícone (conhecido como ícone de "hambúrguer") ou link de menu. Se seu template suportar a Navegação no Rodapé, ela aparecerá na parte inferior da página, empilhada verticalmente. Para informações específicas sobre seu template, acesse os ícones no menu Navigation (Navegação)

Segue um exemplo de como é a navegação do template Supply nos dispositivos móveis:

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 será exibido nos dispositivos móveis.

Páginas de Produtos e eCommerce

Os clientes podem fazer compras em seu site através dos dispositivos móveis mais ou menos do mesmo jeito que fariam no desktop. Como o resto do site, sua loja do Squarespace se adapta às telas pequenas e são navegáveis nos dispositivos móveis. Os produtos são empilhados verticalmente em uma ou duas colunas. Nas páginas de itens de produtos individuais, a imagem do produto é empilhada em cima da descrição, do preço e do botão Adicionar ao Carrinho.

A navegação por categoria geralmente é exibida como menu suspenso de Filtro.  No Supply, a navegação por categoria é exibida no menu de navegação.

O carrinho de compras aparece quando o cliente adiciona pelo menos um item. Toque no carrinho para ir para a finalização da compra. Na maioria dos templates, o carrinho aparece em uma barra preta móvel na parte de baixo do site.

Tanto a Página de Produtos Avançada quanto a Exclusiva oferecem recursos especiais aos produtos. No momento, a Visualização rápida e o Zoom da imagem do produto não estão disponíveis na versão móvel. Em alguns templates, é possível ajustar o estilo do carrinho de compras na versão móvel.

Páginas e Blocos de Layout

Os Blocos adicionam conteúdo às Páginas de Layout e quaisquer áreas editáveis como barras laterais, rodapés e publicações de blog. O design responsivo do Squarespace automaticamente empilha os blocos verticalmente nos 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.

Os Blocos de Espaço são automaticamente ocultos nos celulares para a maioria dos modelos.

Pop-ups promocionais

Se o seu site usa Pop-Ups Promocionais, é possível mantê-los ativados no dispositivo móvel. Todos os pop-ups móveis seguem um estilo padrão de meia página para ajudar a acomodar as regras do Google para o ranking de sites nos resultados de pesquisa.

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

Legendas da imagem

  • Páginas de Galeria - A exibição em dispositivos móveis depende de seu template.
  • Blocos de imagem e Blocos de Galeria - As legendas normalmente são exibidas da mesma forma em dispositivos móveis e em desktops. As legendas de imagens exibidas com o passar do cursor podem ser exibidas sempre, somente quando tocadas ou nunca, dependendo do tipo de dispositivo móvel e da largura do navegador.

Barras Laterais

As barras laterais são exibidas na parte inferior da página, no celular.No Ishimoto, as barras laterais não são exibidas nos celulares.

Títulos e logos dos sites

No geral, o título do site ou logo permanecerão em uma posição semelhante no celular. Por exemplo, se o título do site for exibido no canto direito superior do desktop, ele normalmente será exibido no canto direito superior do celular.

Para uma explicação de como cada template exibe o título de site no celular, visite Adicionar um título de 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. 

Estilos de celulares específicos do template

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

Desativação dos estilos de celulares

Os estilos de celulares transformam os templates e os recursos em uma interface otimizada para dispositivos móveis que atende a movimentos e gestos, como, por exemplo, menus de navegação recolhíveis e fontes legíveis.

Por padrão, a opção estilos móveis já vem ativada, no entanto, você pode desativá-la na maioria dos templates. Para saber mais, acesse Como desativar estilos móveis.

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

Domínios

Os domínios personalizados e incorporados do seu site funcionam no desktop e no celular, não é necessário um URL separado para o celular.

Nota: Se estiver tendo problemas com um domínio de terceiros conectando no celular, certifique-se de ter vinculado esse domínio corretamente ao site

Lightboxes

Em geral, dispositivos móveis oferecem suporte para efeitos de lightbox, mas com algumas limitações:

  • O recurso de zoom com movimento de pinça não é suportado.
  • Os Lightboxes estão desativados na Página da Galeria do template Wexley.
  • Se sua imagem tiver uma legenda, um ponto branco é exibido na parte inferior direita do lightbox. Toque no ponto para mostrar a legenda.

lightbox-caption-mobile.png

Efeitos hover

Dispositivos touchscreen, tais como smartphones, tablets e alguns laptops, não suportam o efeito hover. Esses efeitos serão exibidos em tais dispositivos quando os elementos forem tocados. 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.

Perguntas Frequentes

Qual a diferença entre o design responsivo e os estilos de celulares?

O design responsivo automaticamente dimensiona o conteúdo do seu site para a melhor exibição possível, com base na resolução e no tamanho da tela. Todos os sites do Squarespace são criados com um design responsivo.

Estilos móveis são integrados em templates que reorganizam como o conteúdo de um site é visualizado em dispositivos móveis. Os estilos criam uma visualização ideal do site em telas menores. Um site com estilos móveis terá outra aparência em relação a um site visualizado em um navegador desktop.

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

Quando você visita um site em um dispositivo móvel, o Squarespace detectará, automaticamente, um sistema operacional de celular. Isso envia um sinal para exibir os estilos de celulares, A exceção a isso é se você tiver desativado os estilos de celulares nas configurações.

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

Sim, isso é possível com código personalizado, mas é uma modificação avançada. Não podemos oferecer ajuda com essa configuração e nem com nenhuma modificação ou inclusão de código de terceiros. Recomendamos visitar o fórum da nossa comunidade, answers.squarespace.com, se tiver dúvidas com relação ao código. Para obter mais informações sobre como adicionar CSS personalizado, visite Usar o editor de CSS.

Posso  editar meu site no celular?

Você pode fazer login e gerenciar alguns aspectos do seu site Squarespace em seu dispositivo móvel, mas alguns recursos estão disponíveis somente para computador ou laptop.

Você também pode gerenciar certos aspectos do seu site em dispositivos móveis usando nossos aplicativos para dispositivos móveis.

Esse artigo foi útil?
Usuários que acharam isso útil: 31 de 91