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

Adicionar código personalizado ao seu site

Você pode criar um site no Squarespace sem códigos ou experiência em design. Quando adiciona um bloco, você está adicionando HTML ao seu site sem escrever o código por conta própria. Da mesma forma, quando faz alterações de estilo, você está mudando o CSS do seu site. A plataforma Squarespace é poderosa e flexível, e é possível resolver a maioria dos desafios de design com opções de estilo integradas.

Para personalizar ainda mais o seu site, você pode usar código personalizado. É recomendável ter conhecimento de codificação antes de adicionar código personalizado. Algumas alterações de codificação entrarão em conflito com o código subjacente do seu site e você pode ter dificuldades em estilizar essas alterações.

Atenção: a adição do código ao site é uma modificação avançada e está fora do escopo do suporte do Squarespace.

Assista a este vídeo

Formas de adicionar código personalizado

O Squarespace aceita a adição de código do lado do cliente ao seu site. As opções dependem do seu plano. Todas as opções estão disponíveis durante uma avaliação:

Opção Plano Código aceito Sobre
Bloco de Código (Básico) Todos os planos

CSS

HTML

Markdown

Adicione código a uma página específica para alterar o layout ou design.
Bloco de Código (Avançado) Planos Business e Commerce

CSS

HTML

iframes

JavaScript

Markdown

Adicione código a uma página específica para alterar o layout ou design.
Injeção de Código Planos Business e Commerce

HTML
JavaScript

Adicione código que afeta todo o seu site ou uma página inteira, como o Pixel do Facebook ou serviços de chat ao vivo.
Editor de CSS Todos os planos

CSS

Altere fontes, cores e fundos. Não faça alterações de layout.
Bloco de Incorporação Todos os planos

HTML

JavaScript

Incorpore conteúdo de sites externos que usam o padrão oEmbed.
Plataforma para desenvolvedores do Squarespace Versão 7.0 apenas nos planos Business e Commerce

CSS
HTML
JavaScript
Markdown

Acesse todo o código subjacente do template da versão 7.0, crie templates personalizados e pare de receber atualizações de template do Squarespace.

O Squarespace não aceita código do lado do servidor, incluindo PHP, Ruby, Ruby on Rails e SQL.

Blocos de Código x Blocos de Incorporação

O Bloco de Incorporação extrai conteúdo de sites e serviços externos que usam o Padrão oEmbed. Você pode usar o Bloco de Incorporação para exibir conteúdo básico de terceiros em seu site, como uma publicação no Facebook ou um vídeo de um host não aceito pelo Squarespace.

Se você tem um código mais avançado e personalizável, o Bloco de Código é a melhor escolha. É versátil e pode renderizar código em HTML e Markdown. Você também pode usá-lo para exibir trechos de código. É comum usar Blocos de Código para personalizações baseadas em código, como:

  • Incorporação de documentos por meio de um serviço como Issuu
  • Adição de formulários não aceitos por meio de um serviço como o Wufoo
  • Adição de uma pesquisa MLS

HTML, JavaScript e CSS

Saiba mais sobre esses tipos comuns de código personalizado que você pode adicionar ao seu site.

HTML

O código usado para adicionar conteúdo a uma página da Web. Quando adiciona um bloco, você está adicionando HTML ao seu site.

JavaScript

O código usado para adicionar interatividade a uma página da Web. O JavaScript funciona nos bastidores para fazer coisas como slideshows, controles deslizantes e lightboxes funcionarem.

CSS

O CSS é a linguagem de codificação usada para aplicar estilo e design a uma página web escrita em HTML. Todos os templates do Squarespace têm CSS incorporado e todos os templates têm ajustes e opções de estilo. Quando faz alterações nos Estilos do Site, você está mudando o CSS do seu site. Se você decidir aplicar CSS personalizado ao seu site, use-o com moderação.

Você pode usar o editor CSS para personalizar:

  • Fontes
  • Cores
  • Planos de fundo

Você não deve usar CSS para personalizar:

  • Margem
  • Margens
  • Floats
  • Tamanhos (blocos, imagens ou banners)
  • Posição

O CSS personalizado tem um limite de 128.000 caracteres.

Plataforma do Desenvolvedor do Squarespace (somente versão 7.0)

Se for um usuário avançado versão 7.0 , você poderá usar a Plataforma para desenvolvedores do Squarespace para acessar o código subjacente do template do seu site. Esta plataforma foi projetada para desenvolvedores e agências de design para modificar nossos templates existentes e até mesmo criar templates a partir do zero.

Se você não puder colar código personalizado

Se estiver tendo problemas para colar no seu código, tente o atalho de teclado. Clique na área em que deseja colar e pressione:

PC Mac
Ctrl + V Command + V

Se o seu código personalizado não aparecer

O código personalizado pode não aparecer por alguns motivos:

  • Você está conectado – Como medida de segurança, o código em um Bloco de Código pode não aparecer para você quando estiver conectado, mesmo que os visitantes possam vê-lo. Isso acontece quando você tenta visualizar JavaScript integrado por meio de uma conexão segura (https://). Para testar isso, visite seu site em um navegador no modo de navegação anônima.
  • O código está em uma Página Índice – Seu código pode não ser renderizado se você o adicionou a uma página dentro de um Índice. Para testar isso, remova a página do Índice no painel Páginas e depois visite seu site em um navegador no modo de navegação anônima.

Se o código ainda não estiver funcionando, entre em contato com a fonte do código, pois eles estão mais familiarizados com o código e a maneira como ele deve funcionar. O código de terceiros está fora do escopo do suporte do Squarespace, por isso, não podemos ajudá-lo com nenhuma solução de problemas adicional.

Se você receber um erro CORS

Você receberá um erro CORS (Cross Origin Resource Sharing) se usar JavaScript para fazer solicitações com o navegador. Todas as solicitações devem originar de um aplicativo do servidor. Não aceitamos solicitações de CORS.

Recursos de codificação

Seguem alguns sites populares e confiáveis que recomendamos para tutoriais, solução de problemas e guias de referência:

Atenção: o código personalizado está fora do escopo do nosso suporte. Isso significa que não podemos ajudar na configuração nem na soluçã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ê:
Este artigo foi útil?
Utilizadores que acharam útil: 142 de 287