Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros guias estão disponíveis apenas em inglês.
Fazer mudanças de estilo

Mudanças de estilo são edições no visual do site, como fontes, cores, fundos e espaçamento. Você pode criar e ver a prévia das alterações no estilo pelo painel Estilos do Site.

A área Estilos do Site de cada template tem opções diferentes, chamadas "ajustes". Este guia mostra como usar o painel Estilos do Site para aperfeiçoar o design do seu site e explica os ajustes encontrados em todos os nossos templates.

Recomendamos usar o recurso Estilos do Site à medida que você cria seu site. Ao experimentar os ajustes do seu template, você entenderá melhor todas as possibilidades e criará um site perfeito.

Dica: o painel de Estilos do Site se chamava Editor de Estilos.
As instruções deste guia são para a versão 7.0. Se o seu site estiver na versão 7.1, acesse Opções de estilo e design para a versão 7.1 para ver mais informações.

Assistir a um vídeo

Abra Estilos do Site

Tweaks are grouped into sections like General, Site Header, and Main Content. Tweaks unique to your template are usually under Options

Site editing is disabled when Site Styles is open. To add or remove content, close Site Styles and open the Pages panel.

To open Site Styles:

  1. In the Home Menu, click Pages
  2. Open a page where you want the changes to apply. This tells Site Styles to show options relevant to the page you're seeing and display a preview of your changes. If you're changing a site-wide feature like navigation menus or a footer, open any page.
  3. Double-click Pages at the top of the panel to return to the Home Menu. 
  4. Click Design, then click Site Styles
  5. The Site Styles panel will open with a list of editable style tweaks. Click any tweak to make changes. 
  1. Tap Pages, then tap the page where you want the changes to apply. This tells Site Styles to show options relevant to the page you're seeing and display a preview of your changes. If you're changing a site-wide feature like navigation menus or a footer, open any page.
  2. Tap the preview bar to collapse the page preview.
  3. Tap Settings, then tap Site Styles
  4. The Site Styles panel will open with a list of style tweaks. Tap any tweak to make changes.

Visualizar estilos específicos da página

Na pré-visualização no Estilo do Site de um dos tipos de página abaixo, aparecerá uma seção de ajustes específicos ao tipo de página. Para ver esses ajustes, primeiro abra a página, depois navegue até Estilos do Site.

  • Página de Entrada (Consulte a nota abaixo)
  • Página de Blog
  • Página de Eventos
  • Página da Galeria
  • Página do Índice
  • Página de Produtos

Quaisquer alterações nesses ajustes serão aplicadas a todas as páginas desse tipo em todo o seu site. Por exemplo, se você tiver várias Páginas de Produtos e fizer alterações de estilo específicas na Página de Produtos, a mesma alteração será aplicada a todas as Páginas de Produtos. Isso cria uma aparência consistente para o site.

Alguns itens de coleção, como publicações do blog ou eventos, também oferecem ajustes específicos para cada item no painel Estilos do Site. Para fazer alterações, abra o Estilos do Site enquanto visualiza um item de coleção individual.

Observação: quando uma Página de Entrada for aberta no Estilos do Site, você verá somente os ajustes da Página de Entrada. Para saber mais, acesse Como estilizar uma Página de Entrada.

Encontrar um ajuste de estilo

Em Estilos do Site, clique na área de uma página para exibir os ajustes de estilo disponíveis para essa área e ocultar o resto. A caixa do marcador de estilo aparece próxima ao elemento no qual você clicou. Esse atalho está disponível na maioria dos templates e na maioria das áreas do seu site.

Por exemplo, para alterar o visual do seu menu de navegação, clique no link de navegação na pré-visualização. Os ajustes de estilo que controlam o menu de navegação aparecerão no painel Estilos do Site, como no exemplo abaixo. Os outros ajustes de estilo serão ocultados.

Retorne para todas as opções, clicando em Show All (Mostrar tudo).

Observação: veja a lista completa dos ajustes do seu template na nossa lista de guias de "Ajustes no painel Estilos do Site".

Clique em um elemento na página para ver os ajustes de estilo disponíveis nessa área.

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

Em Estilos do site, o ato de clicar e arrastar ajusta o espaçamento de área do banner no template Five.

Mudanças de estilo comum

Embora o Estilos do Site de cada template tenha dezenas de ajustes, há elementos comuns entre eles.

Typography (Tipografia)

Para alterar fontes e tamanhos, use os ajustes de Typography (Tipografia) ou Font (Fonte) . Para saber mais, visite Alterar fontes.

As fontes podem ser alteradas com o ajuste Tipografia ou Fonte.

Cores

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

Os círculos de cor aparecem ao lado dos ajustes de cor.

Sizes & values (Tamanhos e valores)

Muitas alterações de estilo estão relacionadas ao tamanho, como preenchimento, espaçamento, largura e bordas. Esses ajustes podem ser encontrados sob o título Sizes & Values (Tamanhos & Valores). Dependendo do seu template, ele também pode estar em outras seções. Os tamanhos são geralmente medido em pixels (px).

Para fazer esta mudança de estilo, passe o mouse sobre um ajuste de tamanho. Use o controle deslizante ou insira um número no campo.

O ajuste dos controles deslizantes afeta o tamanho do espaçamento, das bordas e de outros elementos.

Relação de aspecto

A relação de aspecto de uma imagem é proporção entre sua largura e sua altura, expressa como um número, como 3:4. Quando você escolhe um ajuste de relação de aspecto, a imagem será cortada nessa forma, por exemplo, 1:1 Square (Quadrado),normalmente em torno do ponto focal.

Se a relação de aspecto for definida como Auto,as imagens serão reorganizadas para criar o melhor ajuste na página. Elas podem ser exibidas em uma ordem diferente de como elas foram enviadas.

Opções diferentes de proporção de imagem em um menu suspenso.

Background image (Imagem de fundo)

Alguns templates oferecem uma imagem de fundo ou que abrange todo o site adicionada pelo 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 cena de banco de imagem.

Para saber mais, visite Adicionar uma imagem de fundo.

Alguns templates têm o ajuste de Imagem de fundo do website.

Banner Image (Banner)

Alguns templates oferecem uma imagem de banner que abrange todo o site que você pode adicionar do Estilos do Site. Clique no ajuste da Imagem de banner, 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 de banner.

Alguns templates têm um ajuste de imagem de fundo do cabeçalho do banner em todo o site.

Sidebar (Barra lateral)

Se o seu template incluir uma barra lateral, você poderá 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.

Aqui está um exemplo de como os ajustes da barra lateral podem parecer no seu modelo:

Os ajustes de barra lateral aparecem nos templates com barra lateral.

Ocultar e mostrar

Em alguns templates, é possível ocultar recursos de design, como o título da página, ícones de redes sociais, bordas, banners e rodapés. Normalmente, esses ajustes são caixas de seleção encontradas na seção Opções

Ao marcar ou desmarcar certos ajustes, você oculta ou altera elementos no website.

Desfazer uma mudança de estilo

É possível desfazer uma mudança de estilo de duas maneiras diferentes:

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

Clique no ícone de desfazer para desfazer as alterações de estilo.

  1. Clique no ponto ao lado do ajuste alterado. Isso permite que você cancele uma alteração de estilo específica, em qualquer ordem. Os pontos permanecem visíveis até que as alterações sejam salvas.

Clique no ponto ao lado de um ajuste de estilo para desfazer uma alteração recente.

Nota:Se fizer uma alteração de esilo e depois, desfizer, você não verá uma opção Save (Salvar) na parte superior do painel. A opção Salvar só aparecerá se você alterar um ajuste e mantê-lo.

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.

Nota: Essa alteração não pode ser desfeita. Embora você possa retornar para estilos padrão do template, não é possível restaurar as mudanças de estilo anteriores.

Redefinir para estilos padrão

Para recomeçar, você pode redefinir o estilo do site de volta aos padrões do template. Essa ação reverte para as fontes, cores e espaçamento originais do template.

  1. Role até a parte inferior do painel Estilos do Site e clique em Voltar para estilos padrão.
  2. Revise a mensagem de confirmação e clique em Reset (Redefinir).
  3. Após salvar, o template voltará para seu estilo padrão.
Atenção : após salvar Estilos do Site, a mudança é irreversível.

Adicionar CSS personalizado

Estilos do Site controla o CSS do seu site sem códigos personalizados. No entanto, caso você saiba CSS e não encontra uma alteração que você precisa em Estilos do Site, você pode adicionar CSS no Editor de 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.

Perguntas Frequentes

Para obter mais ajuda, acesse as Perguntas Frequentes sobre alterações de Estilo.

Explore os estilos de seu template

Cada template tem opções específicas de estilo e configurações padrão. Para saber mais, acesse os guias detalhados dos templates.

Esse artigo foi útil?
Usuários que acharam isso útil: 59 de 156