Estilos móveis avançados na versão 7.0

Ultima atualização 26 de Outubro de 2023

Conheça os templates da versão 7.0 que possuem opções especiais de estilos móveis.

Todos os sites do Squarespace são otimizados com design responsivo, para que seu site possa se ajustar ao formato de qualquer dispositivo móvel ou navegador.

Na versão 7.0, alguns templates oferecem ajustes específicos para a versão móvel nos estilos do site, ampliando o nível de personalização. Este guia mostra essas opções.

Acessando o recurso

Este guia é sobre a versão 7.0. A versão 7.1 não tem estilos móveis separados. Para saber mais, acesse Como meu site será exibido em dispositivos móveis?.

Opções por template

Para ver o design na versão móvel enquanto faz as alterações, abra prévia por aparelho antes de abrir o painel estilos do site.

  • Para encontrar ajustes móveis, pressione Ctrl + F (Command + F no Mac) e procure a palavra Mobile.
  • Para dimensionar fontes, procure a palavra Min.

Veja as opções na versão móvel das seguintes famílias de template:

Família de template Opções
Avenue
  • Ajustar o tamanho do logotipo

Aviator

Brine

  • Adicionar uma ou duas barras de navegação móveis
  • Escolha se a barra superior está fixa
  • Definir estilos separados para ícones de cabeçalho
  • Ajustar onde os ícones aparecem
  • Defina a largura na qual o site muda para visualização móvel (ponto de interrupção)
  • Opções de estilo de página da loja

Farro

  • Adicionar uma ou duas barras de navegação móveis
  • Escolha se a barra superior está fixa
  • Definir estilos separados para ícones de cabeçalho
  • Ajustar onde os ícones aparecem
  • Opções de estilo de página da loja
Flatiron
  • Ocultar os títulos da grade de miniaturas da Página Índice
Galapagos
  • Definir a cor e a fonte do título do site
  • Se tiver um logotipo na visualização de computador, você pode adicionar um logotipo móvel separado e definir sua altura, ou exibir um título de site.

Skye

  • Dimensionamento de fontes
  • Opções de estilo de página da loja
Supply
  • Substitua o logotipo pelo título do site

Tremont

  • Dimensionamento de fontes
  • Diferentes configurações de tamanho para diferentes larguras do navegador. Por exemplo, defina a altura do logotipo para computador, tablet e smartphone.
  • Opções de estilo de página da loja
Wells
  • Definir a fonte e o tamanho do título do site
Wexley
  • Ajustar a cor de fundo da navegação móvel

York

  • Dimensionamento de fontes
  • Barra superior de navegação móvel
  • Definir estilos separados para ícones de cabeçalho
  • Opções de estilo de página da loja

Tipos de estilos móveis

Dimensionamento de fontes

O dimensionamento de fontes permite que você defina manualmente os tamanhos máximo e mínimo para títulos, cabeçalhos e outros textos-chave. Para saber mais, acesse Dimensionar Fontes.

Logo Size (Tamanho do Logo)

Nos templates em que você pode ajustar o tamanho móvel do logotipo, recomendamos definir o logotipo do site para ser exibido em tamanho menor no celular e reduzir a aglomeração.

Anotação

somente o Galapagos aceita o upload de um logotipo separado para a versão móvel.

Barras de navegação móveis

As barras de navegação móveis são exibidas na parte superior ou inferior do seu site móvel. Eles contêm elementos de cabeçalho, como o título do site ou logotipo, carrinho de compras e ícone de pesquisa. Você pode personalizar as cores da barra, escolher onde os elementos são exibidos e dar estilos móveis únicos a eles.

Por exemplo, o template Brine suporta até duas barras móveis:

KB Guide Image

Página da loja

Nos templates que aceitam página avançada de produtos, você pode dar aos títulos, preços e preços de venda um estilo exclusivo na versão móvel. Saiba mais em Estilizar Páginas da loja.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Estilos móveis avançados na versão 7.0