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 aparecerá em um dispositivo móvel?

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 teste, utilize Acesso de visitante (não o Login de Proprietário para visualizar seu site como um visitante móvel.

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.

Nota: Alguns templates têm opções de estilo específicas de celular no Editor de Estilos. Como você não pode editar o site em um dispositivo móvel, pode fazer essas alterações em um computador desktop. Para obter ajuda com isso, visite Fazer alterações de estilo.

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.
  • Veja nossas dicas de resolução de problemas para ajustes no Editor de Estilos 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:

  • Use o Editor de Estilo para editar a posição do banner, mudar o tamanho 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.

A rolagem com paralaxe é um efeito especial disponível em alguns templates em que a imagem de plano de fundo parece se mover mais lentamente do que o conteúdo no primeiro plano. Disponível para dispositivos móveis nos templates a seguir:

  • Família Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

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.

Nota: Se estiver vendo uma sobreposição de textos no celular, ajuste a altura da linha da fonte no Editor de Estilos.

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 – Exibição em grade, com duas colunas de largura.
  • Slideshow - Permanece como um slideshow. 
  • Carrossel - Exibido em carrossel, mas mostra somente uma imagem de cada vez.
  • Empilhado - Permanece empilhado.
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

Todo template possui suas próprias regras de como as Páginas de Galeria são exibidas nos dispositivos móveis. Em geral:

  • Gird (Grade) - As Páginas de Galeria são empilhadas verticalmente. Toque em uma imagem para a visualização em lightbox. Os títulos e descrições das imagens não são exibidos.
  • Slideshow - As Páginas de Galeria são exibidas como slideshow. Toque para navegar.
  • Se seu template suportar links de URL ou URL de links direto, eles também funcionam nos dispositivos móveis.

As Páginas de Galeria dos templates a seguir têm propriedades exclusivas em dispositivos móveis. Os templates são agrupados por família.

Template Notas
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 é desativado.
Galapagos Para as imagens do lightbox em grade, toque no ponto no canto inferior direito para exibir títulos e descrições de imagem.
Ishimoto As imagens são empilhadas verticalmente.
Momentum As setas de navegação desaparecem após o primeiro slide.

Família Montauk

Julia, Kent, Montauk, Om

As imagens são empilhadas embaixo da descrição da página. Os títulos e descrições da imagem aparecem embaixo 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.

Família Tremont

Camino, Carson, Henson, Tremont

As imagens da galeria são empilhadas verticalmente na maioria dos smartphones. Smartphones e tablets maiores mostrarão o layout regular. 
Wells  As imagens são empilhadas verticalmente. Os títulos e descrições das imagens aparecem embaixo da imagem.
Wexley As imagens são empilhadas verticalmente. O Lightbox está desativado.

 

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. Existem alguma poucas exceções listadas abaixo. Esta lista agrupa os templates por família.

Template Notas

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Aparece na barra de dispositivos móveis superior ou inferior. Pode ser ocultada.

Família Farro

Farro, Haute

Aparece na barra de dispositivos móveis superior ou inferior. Pode ser ocultada.

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Aparece como um botão.

Família Tremont

Camino, Carson, Henson, Tremont

Aparece na sobreposição de navegação ou no cabeçalho. Podem ser ocultados.

Família York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

É exibido na parte superior da sobreposição de navegação.

As Páginas de Produtos Avançadas e Únicas possuem características especiais dos produtos. Atualmente, aQuick view (Visualização rápida) e oProduct Image Zoom (Zoom da Imagem do Produto) não estão disponíveis nos dispositivos móveis. Em alguns templates, é possível ajustar a estilização dos dispositivos móveis para seu carrinho de compras.

Páginas Simples e blocos

Os blocos adicionam conteúdo às Páginas Simples e quaisquer áreas editáveis como barras laterais, rodapés e postagens de blog. O design responsivo do Squarespce 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.

Os estilos de celulares são ativados por padrão, mas você pode desativar os estilos de celulares na maioria dos templates no painel de Advanced Design (Design Avançado). Para saber mais, visite Dasativação de estilos de celulares.

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 permite que o conteúdo do site seja automaticamente dimensionado para a melhor exibição, com base na resolução e no tamanho atuais da tela. Todos os sites do Squarespace são criados com um design responsivo.

Estilos de celulares são incorporados em cada template que reorganiza como o conteúdo de um site é visualizado nos dispositivos móveis.Esses estilos permitem uma visualização ideal do conteúdo de um site em telas menores. Um site com estilos de celulares parecerá diferente de um site visualizado em um navegador no 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: 27 de 82
Como meu site aparecerá em um dispositivo móvel?