Melhore o estilo e a aparência do seu site usando habilidades avançadas de codificação.

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.

A adição do código ao site é uma modificação avançada e está fora do escopo do suporte do Squarespace. Se você domina codificação e precisa de mais ajuda, confira o Squarespace Forum. Se você criou três sites ativos, também pode ingressar na comunidade Squarespace Circle, onde profissionais criativos respondem às perguntas mais técnicas. Se você não domina codificação, mas quer adicionar um código personalizado ao site, contrate um Squarespace Expert.

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:

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

Se o seu código personalizado não aparecer

Se o código personalizado não aparecer, atualize o browser. Se isso não ajudar, pode ser porque:

• 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.
• Você ativou o carregamento Ajax - o Ajax pode entrar em conflito com o código personalizado incorporado, personalizações baseadas em código, links de âncora e redirecionamentos de URL. Para resolver, tente desativar o carregamento Ajax.

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:

• W3Schools
• CodeCademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse

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ê:

• Conheça as práticas recomendadas para adicionar um código personalizado.
• Leia o nosso guia geral sobre personalizações baseadas em código.
• Visite nosso Squarespace Forum para clientes e desenvolvedores.
• Contrate um Squarespace Expert para criar um código personalizado para o seu site.
• Conheça nossos planos premium e empresarial para desenvolver uma solução mais personalizada para sua empresa.