Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Fazer mudanças de estilo

Use as opções no painel Design para fazer alterações de estilo no site. Você pode editar estilos globais para fazer alterações que se aplicam a todo o site para obter uma aparência uniforme, ou pode estilizar seções individuais.

Este guia analisa como usar as opções de estilo, chamadas de "ajustes", para alterar a aparência do site. Recomendamos experimentar as diversas opções de design enquanto você constrói o site. Ao testar diversas fontes, cores e configurações de página, você terá uma compreensão do que é possível e criar um design que você vai adorar.

Assistir a um vídeo

Este vídeo é para a versão 7.1. Para obter um vídeo da versão 7.0, consulte a seção Mais ajuda.

Opções de estilo na versão 7.1 em relação à versão 7.0

As alterações de estilo funcionam de forma diferente dependendo da versãodo site. Ao usar este guia, clique na guia da sua versão para ver as etapas do site.

Versão 7.1

Em nossa versão mais recente do Squarespace, os ajustes de estilo são classificados por tipo no painel Design. As alterações feitas no painel Design geralmente são globais, mas você pode fazer alterações mais ajustadas ao estilo de seções ou áreas de texto específicas.

Como todos os sites da versão 7.1 compartilham o mesmo template, eles têm os mesmos recursos e opções de estilo. Além disso, todos também usam uma seção para adicionar conteúdo às páginas.

Não é necessário alternar modelos, portanto essa opção não está disponível na versão 7.1. Em vez disso, utilize as etapas deste guia para experimentar outras aparências para o site.

Versão 7.0

Em nossa versão anterior do Squarespace, você usa o painel Estilos do site para fazer todas as alterações de estilo. Cada Estilo do Site do template tem ajustes diferentes, que são agrupados em seções como Cabeçalho do site e Conteúdo principal.

Na versão 7.0, cada template tem suas próprias opções de estilo exclusivas e configurações padrão. Para saber mais, visite o guia do template.

Encontrar um ajuste de estilo

A forma como você encontra um ajuste de estilo depende da versão do site.

Para fazer alterações em todo o site, use as opções no painel Design. No Menu Inicial, clique em Designe, em seguida, clique no elemento do site que deseja alterar, como Fontes ou Cores. Use este guia para obter etapas mais detalhadas em cada painel. 

Você pode fazer alterações mais precisas, editando uma seção específica. Para estilizar uma seção, edite a página, passe o mouse sobre a seção e clique no ícone do lápis. Os estilos de seção substituem estilos de todo o site.

edit_a_section.png

Aqui você também pode escolher diferentes layouts de seções de coleção e de galeria.

Se você fizer alterações de estilo em uma seção de coleção, ela afetará todos os layouts desse tipo. Por exemplo, se você tiver duas seções de blog que usam um layout de tijolos, todas as alterações de estilo feitas em uma seção afetarão ambas as seções. 

Para abrir Estilos do Site:

  1. No Menu Inicial, clique em Páginas
  2. Abra a página que você deseja estilizar. Para recursos em todo o site, como rodapés, abra qualquer página. Para itens de coleção, abra qualquer item de coleção desse tipo (como uma publicação do blog ou item de produto). 
  3. Volte ao Menu Inicial, clique em Designe clique em Estilos do Site
  4. No painel Estilos do Site, clique em qualquer ajuste para fazer alterações. 

A edição do site é desativada quando Estilos do Site está aberto. Para adicionar ou excluir conteúdo, feche Estilos do Site e abra o painel Páginas.

Os Estilos do Site mostram opções para a página em que você está. Quaisquer alterações nesses ajustes serão aplicadas a todas as páginas desse tipo em seu site. Por exemplo, se você fizer alterações de estilo em uma Página de Produtos, a mesma alteração será aplicada a todas as Páginas de Produtos em seu site. Para obter uma lista completa dos ajustes do seu template, consulte o guia de ajustes de estilo do seu template.

Dica: cada Página de Entrada é estilizada separadamente.

Clique em uma área de uma página no painel de pré-visualização para exibir os ajustes de estilo disponíveis para essa área e ocultar o restante. A caixa de marcador de estilo aparece ao redor do elemento em que você está clicando. Volte a todas as opções clicando em Mostrar tudo. Este atalho está disponível na maioria dos templates e para a maioria das áreas do seu site. 

Veja como isso pode parecer no modelo Brine: 

Clicking_an_element_on_the_page_displays_the_style_tweaks_available_for_that_area.png

Em alguns ajustes, é possível clicar e arrastar elementos dentro da pré-visualização para ajustar a configuração:

drag-spacers.gif

Você pode fazer alterações de estilo no aplicativo Squarespace em ambas as versões do Squarespace. 

Dica: na versão 7.1, o painel de estilos do app Squarespace é rotulado como Estilos do Site e Editor de Estilos, dependendo de onde você o abrir. Isso é diferente do painel Design usual que você veria em um computador, mas as opções dentro do painel ainda correspondem ao que você veria em um computador. 

Para aplicar estilo a uma página:

  1. Toque em Páginas e depois toque na página a ser alterada. Dessa forma, o painel Estilos do Site mostrará opções relevantes para a página aberta, além de uma prévia das alterações. Para fazer uma alteração no site todo, como nos menus de navegação ou no rodapé, abra uma página.
  2. Toque na barra de pré-visualização para ocultar a prévia da página.
  3. Toque em Configurações e depois em Estilos do Site
  4. O painel Editor de estilos será aberto a partir da parte inferior, com uma lista de sub-painéis e ajustes de estilo. Toque em qualquer ajuste para fazer alterações.

Fontes e cores

Use as seções abaixo para saber como alterar as fontes e cores do seu site. 

Fontes

A forma de se alterarem as fontes depende da versão do site. 

Para alterar uma fonte, clique em Designe, em seguida, clique em Fontes.

No painel Fontes, escolha um pacote de fontes para aplicar a todo o texto do site ou alterar a fonte de tipos específicos de texto. Para mais informações, acesse Alterar fontes

Em qualquer área de texto, você pode também alterar o formato de texto para um título, um texto de parágrafo, texto monoespaçado ou adicionar um link

  • Os links são sempre sublinhados.
  • Quando o visitante clica em um link, uma linha pontilhada aparece ao redor do link, para deixar o site mais acessível a todos os visitantes.

Para alterar fontes e tamanhos, use os ajustes de Tipografia ou Fonte em Estilo do Site. Para saber mais, acesse Alterar fontes.

Cores

A forma de se alterarem as cores do site depende da versãodo site.

Para alterar as cores do site, no Menu Inicial, clique em Designe, em seguida, clique em Cores.

Com as paletas de cores, você faz alterações em todas as cores do site de uma só vez ou personaliza as cores de cada elemento do site. Saiba mais sobre como alterar as cores do site e de uma seção em Alteração de cores.

Para alterar as cores, selecione qualquer ajuste de Estilos de Site com um círculo de cores ao lado do rótulo. Para saber mais, acesse Alterar cores.

Layout

Use as seções abaixo para saber como alterar o layout e o espaçamento da página do seu site. 

Cabeçalho

Os visitantes usam o cabeçalho na parte superior para navegar no site. A forma de edição do cabeçalho depende da versão do site. 

Para editar o cabeçalho do site, clique em Editar no canto superior esquerdo da prévia do site, passe o mouse sobre o cabeçalho e clique em Editar cabeçalho do site . Use as opções no editor para personalizar o título do site ou o logotipo e os links de navegação. você pode também adicionar um ícone de carrinho de compras, ícones sociais e um botão de chamada para ação. 

Para obter etapas mais detalhadas, acesse Como construir um cabeçalho de site.

O estilo de cabeçalho do site depende do seu template. Saiba mais sobre as configurações de cabeçalho específicas no guia do template

Alguns modelos têm recursos especiais no cabeçalho. Para ver uma lista de recursos disponíveis, acesse Como construir um cabeçalho de site

Rodapé

O estilo do rodapé depende da versãodo site.

Para estilizar o rodapé:

  1. No canto superior esquerdo, clique em Editar.
  2. Paire o cursor sobre o rodapé e clique em Editar rodapé.
  3. Clique no ícone de lápis para fazer alterações de estilo.

Saiba mais em Edição de rodapé.

O estilo de rodapé do site depende do seu modelo. Saiba mais sobre as configurações específicas do rodapé no guia do modelo.

Para saber mais sobre diversas opções de rodapé por modelo, acesse Edição de rodapés.

Espaçamento e margem

A forma de se alterar o espaçamento do site depende da versãodo site. 

Para alterar o espaçamento do site, no Menu Inicial, clique em Design e, em seguida, clique em Espaçamento.

Estes ajustes alteram o espaçamento em todas as páginas do site:

  • Largura da página (máx.) - altere a largura máxima possível das páginas do site. A largura real depende do browser e do aparelho. Este ajuste não afeta o espaçamento no cabeçalho do site.
  • Margem do Site – Altere a largura da margem em ambos os lados do seu site. Dependendo da configuração Largura da Página, esse ajuste pode não ter um efeito visível no conteúdo da sua página. Esse ajuste afeta todo o site, incluindo o cabeçalho. Nas seções de galeria, o espaçamento superior e inferior também mudará em relação à largura da margem.

Você pode alterar o espaçamento de seções individuais no editor de seções .

Muitos ajustes de estilo relacionados ao tamanho, como preenchimento, espaçamento, largura e bordas, estão sob o cabeçalho Tamanhos e valores. Dependendo do modelo, eles podem também estar em outras seções. 

Para alterar um tamanho, passe o mouse sobre um ajuste de tamanho e, em seguida, use o controle deslizante ou insira um número no campo.

Barras laterais (versão 7.0)

Os sites da versão 7.1 não incluem barras laterais.

Se o seu template incluir uma barra lateral, você pode alterar a aparência dele em Estilos do Site. Em alguns templates, por exemplo, é possível mover a barra lateral à esquerda ou à direita. Para encontrar os ajustes de estilo da barra lateral, clique na barra lateral na prévia da página; ou procure pelo título da barra lateral em Estilos do Site.

Imagens e animações

Use as seções abaixo para saber como estilizar Blocos de Imagem, banners, ajustar a proporção da imagem e aplicar animações. 

Blocos de Imagem

A forma de se estilizarem Blocos de Imagem depende da versãodo site. Alguns layouts de bloco têm suas próprias configurações de estilo para fontes, cores e botões no painel Design.

Saiba mais sobre os estilos do Bloco de Imagem de ambas as versões em Bloco de Imagem.

Banners

A forma de se editarem os banners depende da versãodo site.

Você pode criar uma imagem de banner em qualquer página adicionando uma seção de bloco com uma imagem de fundo na parte superior da página.

  • Se você quiser somente uma imagem no banner, comece com uma seção em branco .
  • Quaisquer blocos adicionados à seção sobrepõem o banner.
  • Para alterar a altura, clique no ícone de lápis e defina a altura da seção.
  • Ao escolher uma imagem de fundo, siga nossas dicas de formatação de imagens.

Saiba mais em Adição de imagem no banner.

A maioria dos templates aceita banners de páginas, que você pode adicionar nas configurações da sua página.

Relação de aspecto

Proporção da imagem é a proporção entre a largura e a altura dela, expressa em número, como 3:4. Ao ajustar a proporção da imagem, a imagem é cortada na forma escolhida (como 1:1 quadrada), normalmente em torno do ponto focal.

  • Na versão 7.1, você pode alterar as proporções de imagem nos editores de seção e bloco. 
  • Na versão 7.0, você pode alterar as proporções de imagem em Estilos do Site e editores de bloco.
  • Em ambas as versões, você pode usar o Editor de imagens integrado para alterar a proporção de uma imagem depois de carregá-la no site.

Se a proporção da imagem ficar como Automática, as imagens serão reorganizadas para caber na página. Elas podem ficar em uma ordem diferente da qual foram carregadas. Saiba mais em Entendendo a proporção da imagem.

Animações

Para adicionar interesse visual, use o painel Animações para animar sutilmente seu conteúdo à medida que os visitantes se moverem pelo site. Para saber mais, acesse animações em todo o site.

Plano de fundo

A forma de se alterar o plano de fundo do site depende da versãodo site. 

Para alterar o plano de fundo:

  • Use o painel Cores para alterar o plano de fundo do site.
  • Use o editor de seção para alterar a cor de fundo de seções individuais ou adicionar imagens de fundo ou vídeos. Isso inclui seções de rodapé.
  • Se uma seção tiver uma imagem de fundo definida como Inserção, você poderá definir a cor de borda da inserção.
  • O cabeçalho tem a mesma cor de fundo que a seção superior quando transparente. Desative a transparência no editor de cabeçalho para definir outro tema de cor do cabeçalho.

Você pode definir a cor de fundo da área de conteúdo principal em Estilos do Site. Alguns templates também têm opções para adicionar uma cor de fundo ao cabeçalho, rodapé e outros espaços ao redor do conteúdo. Para saber mais, visite Alterar cores.

Alguns templates oferecem uma imagem de fundo para cada página ou para todo o site, adicionada no painel Estilos do Site. Para adicionar uma, clique no ajuste de Imagem de fundo ou no ícone da imagem correspondente dentro do Estilos do Site. Você pode carregar sua própria imagem ou buscar e adicionar uma do acervo de imagem. Para saber mais, acesse Adicionar imagens de fundo em todo o site.

Botões

A forma como os botões de estilo dependem da versão do seu site e se o botão aparecer em todo o site ou apenas em uma página ou seção específica.  

Para ver etapas detalhadas de todos os casos, acesse Botões de estilo.

Produtos

A forma de se aplicar estilos nos itens de produto depende da versãodo site. 

Para estilizar sua página principal da loja, abra os estilos das seçõesda loja. Você verá opções para alterar o formato da seção, o plano de fundo e as cores. 

Para estilizar itens de produto, abra as opções de estilo no painel Design:

  1. No Menu Inicial, clique em Design.
  2. Clique em Itens de produto.

Essas configurações afetam uma página específica de detalhes do produto. Como algumas dessas opções valem apenas para produtos com várias imagens, talvez não haja nenhuma alteração se o produto tiver apenas uma imagem.

Saiba mais em Edição de estilo da Página de Produtos.

As opções de estilo dos seus produtos dependem do template do seu site e se o template usar uma Página de Produtos Clássico, Avançado ou Exclusivo .

Para obter uma lista detalhada de opções de estilo de produto, acesse Styling Products Pages. você pode também ver todos os ajustes de produto no guia de ajustes de estilo do modelo

Ocultar ou mostrar recursos

A forma de ocultar ou exibir diversos elementos e recursos do site depende da versãodo site.

Você pode ocultar determinados recursos de design, como ícones sociais, banners e rodapés, excluindo o bloco ou a seção. Abra o editor de seção para explorar as diversas opções dessa seção da página. 

Em alguns modelos, você pode ocultar recursos de design, como títulos de página, ícones sociais, bordas, banners e rodapés. Esses ajustes geralmente são encontrados na seção Opções de Estilo do Site. Para ver uma lista dessas opções, acesse o guia de ajustes de estilo do modelo

Salvar ou desfazer alterações

Você pode salvar alterações de estilo, desfazer a alteração anterior ou redefinir áreas do seu site para seus estilos padrão.

Salvar as alterações

Depois de fazer todas as alterações e gostar do que vê, clique em Salvar no canto superior esquerdo. Essa mudança não é reversível. Embora você possa reverter para estilos padrão, não é possível restaurar alterações de estilo anteriores após salvar.

Desfazer alterações

Você pode desfazer a maioria das alterações de estilo de duas maneiras diferentes:

  • Clique no ícone Desfazer no topo do painel. Isso cancela a última alteração de estilo que você fez. Clique várias vezes para cancelar mais alterações em sequência. Você também pode clicar no ícone de refazer para refazer uma alteração.

theme_-_undo_and_redo.png

  • Em alguns painéis, clique no ponto ao lado do ajuste que você alterou. Isso cancela uma alteração de estilo específica. Os pontos permanecem visíveis até que você salve as alterações.

style_dot.png

Dica: ao desfazer uma alteração, você não verá a opção Salvar no topo do painel. Essa opção só aparece se você alterar e manter o ajuste.

Redefinir para estilos padrão

Para algumas opções de estilo no painel Design, é possível redefinir o estilo dos padrões do site. Isso reverte a área para a maneira original como ela foi definida quando você iniciou site pela primeira vez. Depois de salvar, essa alteração não será reversível.

Para obter etapas detalhadas, acesse Como começar de novo

Adicionar CSS personalizado

Todos os sites do Squarespace controlam automaticamente o CSS do site sem código personalizado. No entanto, se você estiver familiarizado com CSS e não conseguir encontrar uma alteração necessária em Estilo do Site, poderá adicionar CSS no Editor CSS.

O CSS personalizado pode interferir na funcionalidade do seu site e todos os códigos personalizados ficam fora do escopo do suporte do Squarespace.

Mais ajuda

Além dos nossos guias, oferecemos outros recursos para ajudá-lo a mudar o estilo do site:

Mais ajuda com a versão 7.0

Para receber mais ajuda nas alterações de estilo da versão 7.0, assista a este vídeo.

Este artigo foi útil?
Utilizadores que acharam útil: 66 de 203
Fazer mudanças de estilo