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.

Todos os sites na versão 7.1 compartilham o mesmo template. Isso significa que todos têm as mesmas opções de estilo e características. Todos eles também usamseções 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 Estilo do aplicativo Squarespace é rotulado como Estilo do site e Editor de estilos, mas as opções ainda correspondem às que você vê no painel Design no 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.

Alterar 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.

Alterar 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.

Adicionar animações (versão 7.1)

As animações em todo o site estão disponíveis somente na versão 7.1. Se o site estiver na versão 7.0, você poderá adicionar animações aos Blocos de Imagem e aos Blocos de Citação .

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.

Estilizar 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.

Alterar espaçamento e preenchimento

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.

Use estes ajustes:

  • 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, este ajuste pode não ter um efeito visível no conteúdo da página. Este ajuste afeta todo o site, incluindo o cabeçalho.

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.

Alterar a proporção de uma 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 ficar em uma ordem diferente da qual foram carregadas. Saiba mais em Entendendo a proporção da imagem.

Edite o estilo dos itens de produto

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

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

Blocos de imagem de estilo

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.

Para mais informações sobre os estilos de Bloco de Imagem para ambas as versões, acesse Blocos de Imagem

Editar o 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.

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.

Estilize os 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.

Alguns templates vêm com uma image de banner para todo o site e que pode ser adicionada pelo painel Estilos do Site. Clique no ajuste Imagem do banner ou Imagem do cabeçalho; ou no ícone da imagem correspondente no painel Estilos do Site.

Para as imagens por página, abra as configurações da página, clique na aba Media (Mídia) e carregue uma imagem.

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

Estilo do 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 modelo. Saiba mais sobre as configurações de cabeçalho específicas no guia do modelo

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

Estilize o 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.

Editar uma 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 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.

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 todo o site com os estilos padrão.

Salvar as alterações

Ao concluir todas as alterações, clique em Salvar no canto superior esquerdo. As mudanças aparecerão no seu site no ar.

Essa mudança não é reversível. Embora você possa reverter para os estilos padrão do site, não é possível restaurar as 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 alterado. Isso cancela uma mudança de estilo específica, em qualquer ordem. Os pontos permanecem visíveis até que você salve as alterações.

style_dot.png

Atenção: 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 194