Edite as fontes, as cores e o layout das páginas do seu site.
Use as opções nos estilos do site para alterar o estilo do site. Você pode editar estilos gerais para fazer alterações em todo o site e, assim, criar um visual uniforme; ou pode ajustar uma seção específica.
Este guia mostra como usar as opções de estilo, chamadas de "ajustes", para alterar o visual do site. Recomendamos testar as diversas opções de design enquanto você monta o site. Ao testar diversas fontes, cores e configurações de página, você tem uma compreensão do que é possível e pode criar um design que lhe agrade.
Dica: além de guias e tutoriais em vídeo, oferecemos dois webinars Começando no Squarespace. Nessas sessões, orientaremos você na criação de templates com o Kit de Design Squarespace com IA, na navegação do site, nas opções de domínio e e-mail, na preparação do conteúdo do site, na criação de uma página inicial e no estilo de cores e fontes. Os webinars normalmente duram uma hora e não exigem site nem conta Squarespace para se matricular.
Assista a este vídeo
Opções de estilo na versão 7.1 x versão 7.0
Dependendo da versão do site, as alterações no estilo funcionam de forma diferente. Nas seções abaixo, clique na aba da sua versão para conferir os passos no seu site.
Versão 7.1
Na nossa versão mais recente do Squarespace, você usa os estilos do site na maioria das alterações do estilo, incluindo fonte, cor e espaçamento. As alterações feitas com os estilos do site geralmente são em tela cheia, mas você pode ajustar seções específicas ou áreas de texto para fazer alterações mais minuciosas.
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.
Como não é necessário trocar de template, essa opção não está disponível na versão 7.1. Confira as etapas deste guia para testar diferentes visuais para o site.
Versão 7.0
Na versão 7.0, a versão anterior do Squarespace, cada template tem opções específicas de estilo e de configurações padrão. Cada template têm ajustes diferentes, que são agrupados em seções como Cabeçalho do site e Conteúdo principal. Saiba mais no guia do seu template.
Encontre um ajuste no estilo
A forma de achar um ajuste de estilo depende da versão do site e de se você está editando o site no computador ou no app do Squarespace.
Para abrir o painel "Estilos do site", clique no ícone do pincel no canto superior direito durante a edição de uma página.
A partir daí, você pode clicar em Temas para procurar pacotes pré-criados, como Profissional, Ousado e Descontraído. Ao selecionar um dos pacotes, a fonte, a cor e os botões se ajustarão para os do pacote. Após selecionar um pacote pré-criado, você pode editar estilos específicos; basta clicar em um elemento do site, como fontes ou cores. Este guia mostra em detalhes as etapas em cada painel.
Para fechar o estilos do site, clique duas vezes na prévia da página, clique no ícone do pincel ou clique em Encerrar no topo do painel. As alterações no estilo permanecerão intactas até que você as salve ou as desfaça.
Com os estilos do site fechados, você pode editar uma seção específica. Para isso, passe o cursor sobre a seção e clique em Editar seção no ícone de lápis. Os estilos da seção substituem os estilos gerais do site.
Aqui você também pode escolher diferentes layouts de seções de , layout automático, coleção e de galeria. As alterações no estilo em uma seção de coleção afeta todos os layouts desse tipo. Por exemplo: se você tem duas seções de blog que usam um layout de tijolos, todas as alterações no estilo feitas em uma seção afetarão ambas as seções.
Para abrir os estilos do site:
- Abra o painel "Páginas".
- Clique na página desejada. 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).
- Clique em Site no canto superior esquerdo do painel "Páginas", depois clique em Design e depois em Estilos do site.
- No painel "Estilos do site", clique em um ajuste para fazer as alterações.
A edição do site é desativada quando o recurso "estilos do site"está aberto. Para adicionar ou excluir conteúdo, feche os 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 afetam todas as páginas desse tipo no site. Por exemplo: se você alterar o estilo de uma página da loja, a ação afeta todas as páginas da loja no seu site.
Dica: cada página de entrada é estilizada separadamente.
No painel da prévia, clique na área de uma página para ver 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ê clicar. Para voltar a todas as opções, clique em Mostrar tudo. Esse atalho está disponível na maioria dos templates e na maioria das áreas do seu site.
Veja como isso fica no template Brine:
Em alguns ajustes, é possível clicar e arrastar elementos dentro da prévia para ajustar a configuração:
Dependendo da versão do site, as alterações no estilo funcionam de forma diferente no app.
Estilos da versão 7.1 no app
Com os estilos do site, é possível alterar o estilo do seu site em grande escala com um único toque. As alterações feitas nos estilos do site (incluindo alterações de fonte, cor e espaçamento) geralmente ocorrem em todo o site, mas você pode fazer ajustar seções específicas ou áreas de texto.
Para fazer alterações no estilo:
- Toque em uma página de seu site e depois em Prévia.
- Toque em Editar no canto superior esquerdo.
- Toque no ícone do pincel para abrir os estilos do site.
- Toque na área desejada no site, como Fontes ou Cores.
- Use as opções no painel para personalizar essa área.
- Em Fontes, toque em Sans-serif, Serif ou Mista para conferir os pacotes de fontes de cada tipo. Toque no nome de uma fonte para alterar o tamanho básico.
- Em Cores, escolha uma cor Realce, Claro e Escuro para cada tema de cor.
Dica: também é possível abrir os estilos do site na aba "Configurações".
Para ajustar o estilo de uma seção:
- Toque na página desejada e depois toque em Prévia.
- Toque em Editar e depois toque em uma seção para ajustar o estilo.
- Toque no ícone do lápis na barra de ferramentas da seção.
- Toque em Formatar, Fundo ou Cores e escolha um novo estilo.
- Toque em Concluído e depois em Salvar alterações.
Estilos da versão 7.0 no app
Faça alterações no estilo nos estilos do site:
- Toque em Mais, depois em Páginas e depois toque na página a ser alterada. Assim, os estilos do site mostrarão opções específicas para a página sendo editada, além da prévia das alterações. No caso de uma alteração geral no site, como nos menus de navegação ou no rodapé, abra uma página qualquer.
- Toque em ... e depois em Estilos do site.
- O painel dos estilos do site será aberto com uma lista de ajustes no estilo. Toque em um 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 alterar as fontes depende da versão do site.
Para alterar uma fonte, abra os estilos do site e clique em > ao lado de "Fontes".
No painel "Fontes", escolha um pacote de fontes para usar nos textos de todo o site ou para alterar a fonte de um tipo específico de texto. Saiba mais em Alteração de fontes.
Numa área de texto, você pode também mudar o formato dele para título, texto de parágrafo ou texto monoespaçado; ou ainda 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 nos estilos do site. Saiba mais em Alteração de fontes.
Cores
A forma de alterar as cores do site depende da versão do site.
Para alterar as cores do seu site, abra os estilos do site e clique em > ao lado de "Cores".
A paleta de cores faz alterações em todas as cores do site ao mesmo tempo 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". Confira as recomendações de acessibilidade em "Criação de conteúdo acessível para o site".
Para alterar as cores, selecione um ajuste nos estilos do site com um círculo de cores ao lado da etiqueta. Saiba mais em "Alteração de cores". Confira as recomendações de acessibilidade em "Criação de conteúdo acessível para o site".
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 no topo 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 cursor 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 de redes sociais e um botão de chamada para ação.
Confira os passos detalhados em Criando o cabeçalho do site.
O estilo de cabeçalho do site depende do template. Saiba mais sobre as configurações de cabeçalho específicas no guia do template.
Alguns templates têm recursos especiais no cabeçalho. Confira a lista de recursos disponíveis em Criação do cabeçalho do site.
Rodapé
O estilo do rodapé depende da versãodo site.
Para ajustar o estilo do rodapé:
- No canto superior esquerdo, clique em Editar.
- Paire o cursor sobre o rodapé e clique em Editar rodapé.
- Clique em Editar seção ou no ícone de lápis para fazer alterações no estilo.
Saiba mais em Edição de rodapé.
O estilo do rodapé do site depende do template. Saiba mais sobre as configurações específicas do rodapé no guia do template.
Saiba mais sobre diversas opções de rodapé por template em Edição do rodapé.
Espaçamento e margem
A forma como você altera o espaçamento do site depende da versão dele.
Para alterar o espaçamento do site, abra o painel "Espaçamento".
Os seguintes 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 site. Dependendo da configuração "Largura da página", esse ajuste não tem efeito visível no conteúdo da página. O ajuste afeta todo o site, incluindo o cabeçalho. Na seção de galeria, o espaçamento superior e inferior também muda em relação à largura da margem.
Você pode alterar o espaçamento de uma seção específica no editor da seção.
Muitos ajustes de estilo relacionados ao tamanho, como preenchimento, espaçamento, largura e bordas, ficam no título Tamanhos e valores. Dependendo do template, eles também aparecem em outras seções.
Para alterar o tamanho, passe o cursor sobre um ajuste de tamanho e use o controle deslizante ou informe um número no campo.
Barra lateral (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 nos 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 nos estilos do site.
Imagens e animações
Use as seções abaixo para saber como ajustar o estilo de um bloco de imagens ou de um banner, ajustar a proporção da imagem e aplicar animações.
Bloco de imagens
A ajuste do estilo de um bloco de imagens depende da versão do site. Alguns layouts têm as próprias configurações de estilo quanto às fontes, cores e botões nos estilos do site.
Saiba mais sobre os estilos de bloco de imagens de ambas as versões em "Bloco de imagens".
Banners
A forma de editar os banners depende da versão do site.
Para criar um banner de página, adicione uma seção de bloco com uma imagem de fundo no topo da página.
- Se você quiser somente uma imagem no banner, comece com uma seção vazia .
- Os blocos adicionados à seção sobrepõem o banner.
- Para alterar a altura, clique em Editar seção ou no ícone de lápis e ajuste 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ágina, que você pode adicionar nas configurações da sua página.
- Para ver todas as opções de banner por família de templates, confira "Adição de imagens ao banner".
- Saiba mais sobre as configurações de banner específicas do seu site no guia do seu template.
Proporção da imagem
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 a proporção da imagem nos editores de seção e bloco.
- Na versão 7.0, você pode alterar as proporções de imagem nos estilos do site e editores de bloco.
- Em ambas as versões, você pode usar o editor da imagem para alterar a proporção da imagem após 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 movem pelo site. Saiba mais em Animações em todo o site.
Fundo
A forma de alterar o fundo do site depende da versão do site.
Para alterar o fundo:
- Use o painel "Cores" para alterar o fundo do site.
- Use o editor da seção para alterar a cor do fundo de uma seção específica ou para adicionar uma imagem ao fundo ou a um vídeo. Isso inclui seções de rodapé.
- Se uma seção tiver uma imagem de fundo como Inserção, você pode 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 do fundo da área de conteúdo principal nos 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. Saiba mais em Alteração das cores.
Alguns templates oferecem uma imagem de fundo para cada página ou para todo o site, adicionada nos 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. Saiba mais em Adição de imagens no fundo geral do site na versão 7.0.
Botão
A forma como um botão de estilo depende da versão do site; e se o botão aparece em todo o site ou apenas em uma página ou seção específica.
Confira os passos para todas as situações em "Ajuste do estilo dos botões".
Produtos
A forma de ajustar o estilo dos produtos depende da versão do site.
Para ajustar o estilo da página principal da loja, abra os estilos da seção da loja. Você pode conferir as opções para alterar o formato da seção, o fundo e as cores.
Para ajustar o estilo de um produto, abra os estilos do site da página de detalhes do produto. Essas configurações afetam apenas a página de detalhes desse produto. Algumas opções são apenas para produtos com várias imagens; portanto, certas alterações não aparecem em produtos com apenas uma.
Saiba mais em Ajuste do estilo da página da loja.
As opções de estilo dos produtos dependem do template do site e de se o template usa uma página clássica, avançada ou exclusiva da loja.
Confira a lista detalhada de opções de estilo do produto em "Ajuste no estilo da página da loja".
Oculte ou mostre um recurso
A forma de ocultar ou mostrar diversos elementos e recursos do site depende da versão do site.
Para ocultar determinados recursos de design, como ícones de redes sociais, banners e rodapés, apague o bloco ou a seção ou oculte o cabeçalho e o rodapé.Abra o editor da seção para conferir as diversas opções dessa seção da página.
Em alguns templates, você pode ocultar recursos de design, como títulos de página, ícones de redes sociais, margens, banners e rodapés. Esses ajustes geralmente ficam na seção Opções dos estilos do site.
Salve ou desfaça uma alteração
Você pode salvar alterações no estilo, desfazer a alteração anterior ou voltar uma área do site para o estilo original.
Salve uma alteração
Feitas as alterações no estilo e no conteúdo, clique em Salvar no canto superior esquerdo do editor da página. A alteração é irreversível; você pode reverter para os estilos padrão, mas não é possível restaurar as alterações anteriores após salvar.
Desfaça uma alteração
Você pode desfazer a maioria das alterações no estilo de duas formas diferentes:
- Clique na seta de 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 na seta de refazer para refazer uma alteração.
Dica: ao editar os estilos do site na versão 7.1, você pode fechar o painel "Estilos do site" para editar o conteúdo da página e ainda desfazer ou refazer a última alteração no estilo.
- Em alguns painéis, clique no ponto ao lado do ajuste alterado. Essa ação reverte o ajuste para a última alteração salva. Os pontos permanecem visíveis até você salvar as alterações.
Dica: se você fizer uma alteração no estilo e desfazê-la, a opção "Salvar" não aparecerá. Ela só aparece se você alterar e manter o ajuste.
Volte para o estilo padrão
É possível retornar algumas opções de estilo para os padrões do site. Essa ação reverte a área para a o estilo original de quando você iniciou o site. Depois de salva, essa alteração é irreversível.
Veja os detalhes em Recomeçando.
Adicione um CSS personalizado
Todos os sites Squarespace controlam automaticamente o CSS do site sem código personalizado. No entanto, se você estiver familiarizado com CSS e não encontrar uma alteração necessária nos estilos do site, é possível adicionar CSS no Editor de CSS.
O CSS personalizado pode interferir na funcionalidade do seu site; todos os códigos personalizados fogem do escopo do suporte do Squarespace.
Mais ajuda
Além dos nossos guias, oferecemos outros recursos para você mudar o estilo do seu site:
- Confira as respostas para perguntas em "Perguntas frequentes sobre mudanças no estilo".
- Participe do webinar Introdução ao Squarespace (uma hora de duração), que aborda o básico da configuração do site, como a criação de páginas e o ajuste dos estilos do site.
- Entre para o programa de parceiros do Squarespace para web designers profissionais, o Circle - lá tem um fórum no qual você pode tirar dúvidas sobre o uso de código personalizado.
- Contrate um designer independente no Squarespace Marketplace para personalizar o design do seu site.
Mais ajuda com a versão 7.0
Para mais ajuda nas alterações de estilo da versão 7.0, assista a este vídeo.