Usar o Editor de CSS

Aplique CSS personalizado a fontes de estilo, cores e fundos além das opções embutidas do Squarespace.

Ultima atualização 3 de Fevereiro de 2025

Se você domina codificação e quiser personalizar o site além das opções integradas de estilo, pode adicionar código CSS no Editor de CSS.

O CSS deve ser utilizado somente para alterar fontes, cores e planos de fundo. Outras alterações em CSS podem danificar seu site.

Assistir a um vídeo

Limitações

  • Reveja nossas recomendações sobre o que você deve e não deve mudar com CSS em nossas Perguntas frequentes para códigos personalizados.
  • Na versão 7.0, o CSS personalizado não é transferido quando você muda de templates. Se voltar para um template anterior, o CSS que você adicionou a ele ainda estará lá.
  • O sistema de verificação de sintaxe do Editor CSS do Squarespace é um analisador, que testa o que vai funcionar em diferentes navegadores. Mesmo que seu código não retorne um erro em um validador CSS, o analisador irá sinalizá-lo se achar que uma linha pode não funcionar da maneira esperada. Se você vir um erro de sintaxe, revise o CSS para garantir que ele está escrito e formatado corretamente e nada está faltando.

Anotação

códigos personalizados, incluindo CSS, estão fora do escopo de nosso suporte. Isso significa que não podemos ajudar em sua configuração ou resolução de problemas. Além disso, não garantimos a funcionalidade ou compatibilidade integral de nenhuma solução em código com o Squarespace. Isso inclui o funcionamento dele com nosso design responsivo, principalmente a aparência na versão móvel, e se ele funciona em todos os templates. Personalizações de CSS também pode causar problemas de exibição nas futuras versões da nossa plataforma. Ainda assim, há muitos recursos para auxiliar você:

Adicione o código CSS

Para adicionar código CSS:

  1. Abra o painel CSS personalizado.
  2. Para abrir o editor em uma janela expansível, clique em Abrir em nova janela. A janela se fechará se você sair do painel "CSS Personalizado".
  3. Adicione o seu código.
  4. Quando terminar, clique em Salvar para publicar suas alterações.

Números de linha são exibidos à esquerda para ajudá-lo a acessar pedaços de código. Os erros de sintaxe são exibidos em vermelho na parte inferior.

KB Guide Image

Faça upload de arquivos (opcional)

Use a área de upload de arquivos para carregar ativos voltados para imagens personalizadas ou arquivos de fonte:

  1. Clique em Arquivos personalizados. Na versão 7.0, o texto do botão é Gerenciar arquivos personalizados
  2. Clique em Adicionar imagens ou fontes ou arraste arquivos para essa área para carregar o arquivo.

Dica

se a área de upload de arquivos não abrir, permita pop-ups no navegador.

Tipos de arquivos aceitos

A área Arquivos Personalizados aceita arquivos de imagem e fonte válidos:

  • .jpg
  • .png
  • .gif
  • .ttf
  • .otf
  • .woff

O campo não aceita arquivos .svg.

Usando arquivos personalizados

Para usar os arquivos:

  1. Escreva o código até o ponto em que a URL do arquivo seja necessária para fazer referência.
  2. Deixe o cursor onde a URL deve ficar no código.
  3. Clique no arquivo.

O Editor de CSS colará automaticamente a URL direta no arquivo para que você faça referência a ela no código.

Arquivos personalizados e SSL

O URL do arquivo será formatado como seguro ou inseguro de acordo com as configurações de ativação do SSL. Se você alterar a preferência de SSL do seu site, recomendamos que você atualize o URL do arquivo para corresponder. Por exemplo, se você ativar o SSL:

  1. Abra o Editor de CSS.
  2. Clique em Gerenciar Arquivos Personalizados.
  3. Clique no arquivo.
  4. Altere o URL para que ele comece com https.
  5. Clique em Save (Salvar).
add-the-s.png
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.