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

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 sob o 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: 86 de 239