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 tiver conhecimentos de programação e desejar personalizar seu site para além dos ajustes possíveis no Editor de Estilos, é possível adicionar 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.

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.

Nota: Códigos personalizados, inclusive CSS, não entram no escopo de nosso suporte. Isso significa que não é possível fornecermos auxílio para as configurações ou resolução de problemas. Além disso, com uma solução baseada em código, não é possível garantirmos sua funcionalidade ou compatibilidade completa com o Squarespace. Isso inclui o seu funcionamento com nosso design responsivo, especialmente sua aparência em dispositivos móveis, e seu funcionamento com todos os templates. Personalizações de CSS também podem causar problemas de exibição com as atualizações futuras de nossa plataforma. Embora não seja possível fornecermos ajuda adicional neste tópico, há muitos recursos que podem indicar a direção correta:

Assistir a um vídeo

Passo 1 - Abra o editor de CSS

No Home Menu (Menu Inicial), clique em Designe em seguida em Custom CSS (CSS Personalizado).

Você verá um aviso sobre o Editor de CSS afirmando que a alteração do CSS poderia comprometer seu design. 

Note: If you don't see Custom CSS, click Advanced, then Custom CSS.

Passo 2 - Adicione código CSS

Com o CSS Editor (Editor de CSS) aberto, é possível começar a escrever seu código.

Para abrir o editor em uma janela expansível, clique em Open in Window (Abrir na Janela).

Você verá números de linha à medida em que adiciona mais códigos para ajudá-lo a fazer referência a partes de seu código CSS.

Os erros de sintaxe serão exibido em vermelho na parte inferior.

Nota: O sistema de verificação de sintaxe do Editor de CSS do Squarespace é um analisador. No lugar de validar em comparação a um conjunto de regras, o analisador testa o que realmente vai funcionar em diferentes navegadores. Mesmo que seu código não acuse um erro em um validador de CSS, o analisador o acusará se determinar que uma linha pode não funcionar da maneira pretendida. Se vir um erro de sintaxe, reveja o CSS para garantir que o código está escrito e formatado corretamente e que não há nada faltando.

Passo 3 - Carregue arquivos (opcional)

Talvez você deseje utilizar imagens personalizadas ou arquivos de fonte. O Editor de CSS possui uma área para carregamento de arquivos onde é possível carregar estes recursos.

Para abrir esta área, clique em Manage Custom Files (Gerenciar Arquivos Personalizados) no CSS Editor (Editor de CSS).

Uma vez aberta a área de Arquivos Personalizados , clique e arraste os arquivos para esta área ou clique no espaço em branco para abrir um menu de seleção de arquivo e selecione os arquivos de seu computador.

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

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

Passo 5 - Salve alterações

Quando tiver concluído, clique em Save (Salvar) para publicar suas alterações.

Nota: O CSS Personalizado não é transferido quando você alterna templates.

I can't find the CSS Editor

To find the CSS Editor on most sites, go to the Home Menu, click Design, then click Custom CSS.

On some new sites, we're testing a new look for style options. If you don't see Custom CSS in the Design panel, click Advanced, then Custom CSS.

CSS-advanced.png

Esse artigo foi útil?
Usuários que acharam isso útil: 43 de 107