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 foram projetados para garantir que os visitantes possam navegar facilmente no seu site, em qualquer dispositivo que escolherem, de 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 modelos do Squarespace na versão 7.0 têm 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 seu site compatível com dispositivos móveis e atender a 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

A visualização por dispositivo dá uma ideia geral de como seu site aparecerá em um navegador típico de dispositivo móvel, mas não é 100% preciso para todos os celulares ou tablets. O tamanho das janelas varia de acordo com o dispositivo. Além disso, no dispositivo em si, o visual dos recursos é diferente do que na visualização por dispositivo. Portanto, é uma boa ideia acessar o site em todos os dispositivos possíveis.

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 aos sites otimizados para dispositivos móveis. Os estilos móveis exclusivos dos sites do Squarespace são ajustados para os motores de busca e prontos para ser encontrados nas buscas feitas em dispositivos móveis. Para saber mais, acesse Visão geral de SEO e do Squarespace

Além dos designs otimizados para dispositivos móveis, há certas coisas que você pode fazer 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 Índice, usar trechos de blog, reduzir o tamanho da imagem e minimizar o número de imagens em uma página. Para saber mais, acesse Como manter seu site do Squarespace compatível com 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.

Observação: alguns modelos da versão 7.0 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 essas alterações em um computador desktop. Para obter ajuda com isso, acesse Fazendo alterações de estilo.

Barra de Notificações

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

As barras de anúncio aparecem abaixo da sobreposição de cabeçalho e acima do conteúdo da página nestas famílias de modelos da versão 7.0:

  • 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 fundo são suportadas em dispositivos móveis. Talvez seja necessário tornar a seção ou a área de conteúdo transparente para que a imagem de fundo seja exibida. Para saber como fazer isso, acesse Alteração de 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.

Arolagem paralaxe é um efeito especial disponível em determinados modelos da versão 7.0 onde a imagem de fundo parece mover-se mais lentamente do que o conteúdo em primeiro plano. Está disponível para celulares na família Brine.

Páginas de Entrada

As Páginas de Capa estão disponíveis somente na Versão 7.0.

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.

Texto e 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 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.

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.

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

Preenchimento

O site do Squarespace geralmente tem preenchimento móvel integrado, o que ajuda a otimizar o site em navegadores menores e com design responsivo. Isso significa que os ajustes de espaçamento e preenchimento que afetam seu site no desktop nem sempre afetam a aparência nos dispositivos móveis.

Galerias

A exibição da galeria em 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.

Seções de galeria:

A exibição das seções da galeria no celular 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.

Saiba mais em Seção de galeria na versão 7.1.

Blocos de Galeria

A exibição dos Blocos de Galeria em dispositivos móveis depende do layout deles: 

  • 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 em pilha.

Na maioria dos casos, as legendas de imagem são exibidas da mesma maneira em dispositivos móveis que no desktop. Nos Blocos de Galeria de Slideshow, as legendas não são exibidas em navegadores com menos de 480 pixels.

Saiba mais em Usando Blocos de Galeria.

Páginas de Galeria

A Página de Galeria só está disponível na versão 7.0.

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 da navegação em dispositivos móveis depende do modelo, mas a Navegação Principal normalmente se retrai por trás de um ícone de menu (conhecido como ícone ou link "hambúrguer"). Se o modelo for compatível com navegação por rodapé, será exibido na parte inferior da página, empilhado verticalmente. Para receber informações específicas sobre o modelo, acesse Navegação de estilo.

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 modelos da versão 7.0 que suportam cabeçalhos de página ou rodapés, o conteúdo será exibido em dispositivos móveis.

Páginas de Produtos e eCommerce

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

Na versão 7.0, há diversas imagens de produto são exibidas em miniaturas ou empilhadas em páginas de detalhes do produto. Na versão 7.1, são exibidas várias imagens em uma apresentação de slides que os compradores podem percorrer.

Anavegação por categoria normalmente é exibida como um menu de Filtro suspenso. Em Suprimento, a navegação por categoria é exibida no menu de navegação. Na versão 7.1, a navegação por categoria é exibida horizontalmente para que os compradores passem o dedo.

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

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

Legendas da imagem

  • 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.
  • 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.
  • Páginas de Galeria - A exibição em dispositivos móveis depende do template

Barras Laterais

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

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 móveis específicos do modelo versão 7.0

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

Desativar estilos móveis na versão 7.0

Os estilos móveis traduzem recursos de modelos da versão 7.0 em uma interface amigável para dispositivos móveis para gestos de toque, como menus de navegação dobrá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.
  • Se sua imagem tiver uma legenda, um ponto branco é exibido na parte inferior direita do lightbox. Toque no ponto para mostrar a legenda.
  • Na versão 7.0, as lightboxes são desativadas na página de galeria do modelo Wexley.

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.

Os estilos móveis são regras integradas a cada site. Eles reorganizam como o conteúdo de um site é exibido nos dispositivos móveis. Esses estilos criam uma visualização ideal do site em telas menores. Um site com estilos móveis terá um visual diferente de um site visualizado em um navegador de 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 ajudamos com essa configuração nem com nenhuma modificação ou inclusão de código de terceiros. Para dúvidas relativas a códigos, recomendamos o Fórum do Squarespace. Para adicionar um CSS personalizado, veja mais informações em Uso do 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.

Este artigo foi útil?
Utilizadores que acharam útil: 43 de 120