Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Usar o Editor de CSS

Se tem conhecimento de codificação e deseja personalizar seu site além dos ajustes que você pode fazer no painel Design, é possível adicionar código CSS usando o Editor 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.
Obs.: 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 podemos garantir a funcionalidade ou compatibilidade integral de soluções baseadas em código com o Squarespace. Isso inclui como ele funciona com nosso design responsivo – especialmente sua aparência em dispositivos móveis – e seu funcionamento em todos os templates. Personalizações de CSS também pode causar problemas de exibição nas futuras versões da nossa plataforma. Embora não ofereçamos suporte, existem muitos recursos que podem auxiliar você:

Adicione o código CSS

Para adicionar o código CSS: 

  1. No Menu Inicial, clique em Design e, em seguida, clique em 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.

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.

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 Gerenciar arquivos personalizados no Editor de CSS.
  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

Este artigo foi útil?
Utilizadores que acharam útil: 75 de 188