Edite as fontes, as cores e o layout das páginas do seu site.
Use as opções nos painéis Estilos do Site e 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.
Dica: matricule-se no nosso webinar "Introdução ao Squarespace", no qual mostraremos os fundamentos da configuração do seu site. Você aprenderá a iniciar uma avaliação gratuita, escolher um template, criar a página inicial e página para contato e alterar fontes e cores.
Assistir a um vídeo
Opções de estilo na versão 7.1 em relação à 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 as etapas no seu site.
Versão 7.1
Na nossa versão mais recente do Squarespace, você usa o recurso Estilos do Site na maioria das alterações do estilo, incluindo fonte, cor e espaçamento. As alterações feitas com o 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. Nas mudanças de estilo mais avançadas, como no design do bloqueio de tela ou na página de finalização de compra, use o painel Design.
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, os Estilos do Site de cada template têm 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 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í, clique no elemento a ser alterado no site, como Fontes ou Cores . Este guia mostra em detalhes as etapas em cada painel. Você também pode abrir os estilos do site no Menu inicial: clique em Design e depois em Estilos do site.
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 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:
- No Menu Inicial, clique em Páginas.
- 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).
- Volte ao Menu Inicial, clique em Design e clique em Estilos do Site.
- 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 valerão para todas as páginas desse tipo no site. Por exemplo: se você alterar o estilo de uma página da loja, a ação valerá para todas as páginas da loja no seu site.
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 template Brine:
Em alguns ajustes, é possível clicar e arrastar elementos dentro da pré-visualização 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
Usando Estilos do Site, é possível aplicar alterações de estilo em grande escala ao seu site com um único toque, incluindo alterações de fonte, cor e espaçamento. As alterações feitas nos Estilos do Site geralmente ocorrem em todo o site, mas você pode fazer alterações mais ajustadas ao estilizar seções específicas ou áreas de texto.
Para fazer alterações de estilo:
- Toque em qualquer página do seu site e depois toque em Editar ou no ícone de lápis.
- Toque no ícone do pincel para abrir Estilos do site.
- Toque na área do site que você deseja estilizar, 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 estilizar uma seção:
- Abra a página que deseja editar e toque em Editar ou no ícone do lápis .
- Toque na seção que você deseja estilizar.
- Toque no ícone do lápis na barra de ferramentas da seção.
- Toque em Formatar, Plano de fundo ou Cores e escolha um novo estilo.
- Toque em Concluído ou ✓ e, em seguida, toque em Salvar alterações.
Estilos da versão 7.0 no app
Faça alterações de estilo em Estilos do Site:
- Toque 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 gerak no site, como nos menus de navegação ou no rodapé, abra uma página qualquer.
- Toque na barra de pré-visualização para ocultar a prévia da página.
- Toque em Configurações, em Configurações do Site e depois em Estilos do Site.
- O painel Estilos do Site será aberto, com uma lista de 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, abra os estilos do site e 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.
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 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, abra os estilos do site e 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 do Site com um círculo de cores ao lado da etiqueta. 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 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 estilizar o 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 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 como você altera o espaçamento do site depende da versão dele.
Para alterar o espaçamento do site, abra Estilos do Site e 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 template, 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 e banners, ajustar a proporção da imagem e aplicar animações.
Blocos de Imagem
A forma de estilização de Blocos de Imagem depende da versão do site. Alguns layouts de bloco têm suas próprias configurações de estilo para fontes, cores e botões em Estilos do Site.
Para saber mais sobre os estilos de bloco de imagens para ambas as versões, acesse blocos 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 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áginas, que você pode adicionar nas configurações da sua página.
- Para revisar todas as opções de banner por família de templates, acesse Adicionar imagens de banner.
- Para saber mais sobre as configurações de banner específicas do seu site, visite o 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 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 ser exibidas em uma ordem diferente da ordem em que 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ão do 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. Saiba mais em Adição de imagens no fundo geral do site na versão 7.0.
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 obter etapas detalhadas para todos os cenários, acesse Estilizar botões.
Produtos
A forma como você estiliza os produtos depende da versão do seu 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 Estilizar Páginas 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.
Para obter uma lista detalhada de opções de estilo de produto, acesse as Estilizar páginas da loja.
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 templates, 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 dos estilos do site.
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
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.
Desfazer alterações
Você pode desfazer a maioria das alterações de estilo de duas maneiras 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: se estiver editando Estilos do Site na versão 7.1, você poderá fechar o painel Estilos do Site para editar o conteúdo da página e ainda desfazer ou refazer sua última alteração de estilo.
- Em alguns painéis, clique no ponto ao lado do ajuste que você alterou. Isso reverte o ajuste para a última alteração salva. Os pontos permanecem visíveis até que você salve as alterações.
Dica: se você fizer uma alteração de estilo e desfazê-la, a opção Salvar não aparecerá. A opção Salvar só aparece se você alterar um ajuste e o mantiver.
Redefinir para estilos padrão
é possível redefinir algumas opções de estilo para os padrões do site. Isso reverte a área para a maneira original que foi definida quando você iniciou seu site pela primeira vez. Depois de salvar, essa alteração não é reversível.
Veja os steps detalhados em Recomeçando.
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:
- Visite as Perguntas frequentes sobre mudanças de estilo para revisar as respostas a perguntas comuns.
- 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 receber mais ajuda nas alterações de estilo da versão 7.0, assista a este vídeo.