Adicione HTML, Markdown, CSS e muito mais para personalizar seu site com mais itens além dos seus recursos integrados.

Use um bloco de código para adicionar um código personalizado à página, à publicação do blog, à barra lateral, ao rodapé ou a outra área de conteúdo. O bloco de código é uma boa opção para incorporar widgets externos ou para personalizar páginas de modos que outros blocos não permitem. Você também pode usar o bloco de código para renderizar HTML e markdown ou mostrar trechos de código.

Saiba mais sobre como escolher o melhor bloco para o seu conteúdo personalizado em Adição de um código personalizado ao seu site.

Em todos os planos, o bloco de código aceita texto simples, HTML, Markdown e código CSS entre as tags <style></style>.

O uso de JavaScript ou iframes no bloco de código é um recurso Premium, disponível nos planos Business, Commerce, Professional e Premium.

Assista ao vídeo

Adicione um bloco de código

Para adicionar um bloco de código:

1. Edite uma página ou publicação, clique em Adicionar bloco ou num ponto de inserção e, em seguida, clique em Código. Para ajuda, confira Adição de conteúdo com blocos.
2. Para abrir o editor do bloco, clique no ícone de lápis no bloco.
3. Adicione o seu código no campo de texto.
4. Ao usar um bloco de código para mostrar trechos de código, ative a opção Fonte de exibição.

Adicione o código

Ao usar o bloco de código para renderizar códigos, selecione HTML ou Markdown no menu Tipo.

Informe ou cole o código no campo de texto. Para colar o código, copie o código, clique no campo e pressione Ctrl + V (Windows) ou Command + V (Mac).

Como padrão, o bloco de código em CSS ou JavaScript mostra o código como texto. Para renderizar CSS ou JavaScript no bloco de código, selecione HTML no menu suspenso. No CSS, coloque o código entre as tags <style> </style>. No JavaScript, coloque o código entre as tags <script> </script>.

Atenção: o bloco de código aceita até 400 KB, ou cerca de 300 mil caracteres.

Mostre a fonte

Ao usar o bloco de código para mostrar trechos de código, ative a opção Fonte de exibição.

Essa opção é útil para mostrar exemplos de código, pois o bloco de código formata automaticamente fragmentos do código para facilitar a leitura, sendo melhor do que o bloco de texto nesse caso.

Atenção: a opção Mostrar a fonte está sempre marcada nas opções CSS, JavaScript e texto simples.

Veja a prévia do código incorporado

Como medida de segurança, às vezes o código não aparece quando você está logado, mesmo se os visitantes puderem vê-lo. Se o código adicionado ao bloco de código não aparecer, clique em Ver prévia no modo de segurança para ver o item incorporado.

Resolução de problemas

Se tiver problemas com o bloco de código:

• Pode ser também que o código não renderize se ele tiver sido adicionado a uma página dentro de um Índice. Para testar, excluir a página do Índice no painel "Páginas" e faça logout do site.
• O carregamento do Ajax pode causar problemas com o código personalizado. Para testar, desative o Ajax e veja se o problema persiste.

Se um problema com o bloco de código impedir você de editar o site, desative os scripts na prévia para editar ou excluir o código.

Se continuar com problemas, recomendamos contatar a fonte (por exemplo, o serviço em que você recebeu o código de um widget), que deve saber melhor como o código funciona.

Atenção: como não oferecemos suporte à personalização baseada em código, não podemos ajudar na configuração nem na solução de problemas de códigos personalizados. Além disso, não garantimos a funcionalidade ou a compatibilidade integral de nenhuma solução em código com o Squarespace. Isso inclui o funcionamento dele com nosso design responsivo, principalmente na versão móvel, e se ele funciona em todos os templates. A personalização com código também pode causar problemas nas futuras versões da nossa plataforma. Ainda assim, há muitos recursos para auxiliar você:

• Confira as recomendações para adicionar um código personalizado.
• Confira nosso guia geral sobre personalizações baseadas em código.
• Visite nosso Squarespace Forum, voltado para clientes e desenvolvedores.
• Contrate um Squarespace Expert para criar um código personalizado para o seu site.