Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Usar o Editor de CSS

Se você souber programação e quiser fazer mais ajustes do que o painel Estilos do Site oferece, é possível adicionar um código CSS usando o 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

Antes de começar

Reveja as nossas recomendações sobre o que pode ou não ser alterado com CSS nas Perguntas Frequentes sobre código personalizado.

Note: Custom code, including CSS, falls outside the scope of our support. This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. CSS customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Adicione o código CSS

Para adicionar o código CSS: 

  1. No Home Menu (Menu Inicial), clique em Designe em seguida em Custom CSS (CSS Personalizado).
  2. Para abrir o editor em uma janela expansível, clique em Abrir na Janela. A janela se fechará se você sair do painel CSS Personalizado.
  3. Adicione o seu código.
  4. Quando tiver concluído, clique em Save (Salvar) para publicar suas alterações.

Line numbers display on the left to help you reference pieces of code. Syntax errors display at the bottom in red.

Note: Squarespace’s CSS Editor syntax checking system is a parser. Rather than validating against a set of rules, the parser tests what's actually going to work in different browsers. Even if your code doesn’t return an error on a CSS validator, the parser will flag it if it thinks that a line may not work the way it's intended. If you see a syntax error, revise the CSS to ensure it’s written and formatted correctly and nothing’s missing.

Faça upload de arquivos (opcional)

Use the file upload area to upload assets for custom images or font files:

  1. Click Manage Custom Files under the CSS Editor.
  2. Click Add images or fonts or drag files into that area to upload your file.

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.

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

Use arquivos carregados (opcional)

Se tiver carregado arquivos de imagem ou de fonte na área de Arquivos Personalizados , é provável que você queira usá-los em seu código.

A maneira mais rápida de fazer isso é escrever seu código até o ponto em que o URL do arquivo é necessária para fazer referência. Em seguida, deixe o cursor onde deseja inserir o URL no código e então clique no arquivo. O Editor de CSS colará automaticamente o URL direto para este arquivo para que seja possível fazer referência a ele em seu código.

 

Atenção: o CSS Personalizado não é transferido quando você alterna templates. Se você voltar para o template anterior, o CSS adicionado ainda estará lá.
Esse artigo foi útil?
Usuários que acharam isso útil: 51 de 125