Blog

Como adicionar um banner personalizado no Squarespace

Última Atualização: 
Como adicionar um banner personalizado no Squarespace

Banners promocionais são essenciais para gerar tráfego em qualquer site, seja para promover sua liquidação de fim de ano, anunciar um novo produto ou divulgar um evento próximo. Um banner personalizado eficaz utiliza mídia rica, contadores regressivos e chamadas para ação impactantes para aumentar as taxas de cliques e o engajamento dos clientes.

Para usuários do Squarespace, adicionar um banner pode exigir uma solução externa. O Squarespace oferece uma barra de aviso nativa, mas essa opção é limitada a uma única linha de texto com um link básico e requisitos rígidos de exibição. Você também pode criar uma seção hero como barra de anúncio usando o editor Fluid Engine, mas ela não possui as qualidades compactas e dinâmicas de um banner.

Para criar um verdadeiro banner personalizado no Squarespace, se você não escreve código CSS, há duas opções: comprar um plug-in premium de terceiros ou um snippet de código, ou usar um widget serverless gratuito e leve.

Opção 1: Instalar um plug-in premium do Squarespace ou um snippet CSS personalizado

Muitos usuários contornam as limitações do Squarespace pagando um serviço terceirizado ou um criador de código por um plug-in personalizado. O código personalizado permite que você contorne restrições de design e posicione elementos na sua página manualmente. Você precisará encontrar e adquirir uma licença e, em seguida, adicionar o código a um bloco de página personalizado ou ao seu site no Squarespace usando a Injeção de Código.

Depois de encontrar um código que atenda às suas necessidades, você pode adicioná-lo ao seu site de duas formas, dependendo se deseja aplicá-lo a uma única página ou a todas as páginas do seu site. Veja como fazer em ambos os casos:

Site completo

  1. Clique na aba Pages no menu de navegação à esquerda.
Captura de tela do editor de sites do Squarespace
  1. Selecione o menu suspenso Custom Code na parte inferior do menu e clique em Code Injection.
Captura de tela da página "Pages" do Squarespace
  1. Cole seu código personalizado no cabeçalho (header) ou rodapé (footer) do seu site.
Captura de tela da ferramenta de Injeção de Código do Squarespace

Página única

  1. Abra a página e clique no botão Edit na parte superior.
Captura de tela do editor de sites do Squarespace
  1. Clique em Add Block onde você deseja adicionar seu banner.
Captura de tela do editor Fluid Engine do Squarespace com o botão Add Block destacado
  1. Role para baixo e clique na opção Code.
Captura de tela de um bloco do editor Fluid Engine do Squarespace com a opção Code destacada
  1. Clique no seu novo bloco de código, escolha o tipo de código no menu suspenso e cole seu código no bloco. Clique em Save para finalizar.
Captura de tela de um bloco de código em branco no editor Fluid Engine do Squarespace

O problema com essa abordagem é a imprevisibilidade e os custos de pagar por código premium. Algumas opções custam US$ 25 ou mais por um banner básico, contador regressivo ou ferramenta semelhante.

Opções “freemium” também podem ser enganosas. Elas podem facilmente apresentar falhas quando o Squarespace atualiza sua infraestrutura principal ou deixar seu site lento com recursos não otimizados ou não adaptados para dispositivos móveis.

Você não deveria ter que pagar para tornar a criação de um site mais eficaz. É por isso que o Jotform oferece uma opção gratuita de banner personalizado interativo para usuários do Squarespace.

Opção 2: Adicionar um widget de banner gratuito e interativo (recomendado)

Se você quer um banner, mas não quer pagar por licenças, assinaturas recorrentes ou código personalizado, a melhor solução é um embed hospedado e confiável. Com o Widget de Banner do Jotform, você pode personalizar facilmente seu banner e gerar um código de incorporação exclusivo para colar diretamente no Squarespace.

Veja como adicionar essa alternativa gratuita aos snippets pagos no site do Squarespace:

  1. Acesse a página do Widget de Banner do Jotform e clique no botão Get Started Now no canto superior direito para abrir seu novo widget.
Captura de tela da página inicial do Widget de Banner do Jotform
  1. Personalize seu banner usando o menu Widget Properties.
Captura de tela do construtor de widgets do Jotform
  1. Quando seu banner estiver pronto, clique em Publish e depois clique no botão Copy Code para gerar seu código de incorporação.
Captura de tela da página de publicação do Widget de Banner do Jotform

Em seguida, siga estas etapas para incorporar um banner promocional no Squarespace, seja no site completo ou página por página:

Site completo

  1. Clique na aba Pages no menu de navegação à esquerda.
Captura de tela do editor de sites do Squarespace
  1. Selecione o menu suspenso Custom Code na parte inferior do menu e clique em Code Injection.
Captura de tela da página "Pages" do Squarespace
  1. Cole seu código personalizado no cabeçalho (header) ou rodapé (footer) do seu site.
Captura de tela da ferramenta de Injeção de Código do Squarespace

Página única

  1. Abra a página onde você deseja adicionar um banner e clique no botão Edit na parte superior.
Captura de tela do editor de sites do Squarespace
  1. Clique em Add Block onde você deseja adicionar seu banner.
Captura de tela do editor Fluid Engine do Squarespace com o botão Add Block destacado
  1. Role para baixo e clique na opção Code.
Captura de tela de um bloco do editor Fluid Engine do Squarespace com a opção Code destacada
  1. Clique no seu novo bloco de código, escolha o tipo de código no menu suspenso e cole seu código no bloco. Clique em Save para finalizar.
Captura de tela de um bloco de código em branco no editor Fluid Engine do Squarespace

O Jotform não apenas facilita a adição desse widget de banner gratuito no Squarespace, mas também permite que você personalize seu banner diretamente no construtor de widgets por meio de um editor visual, de forma totalmente gratuita. Você pode personalizar as imagens de fundo do seu banner, incorporar vídeos do YouTube ou Vimeo, adicionar botões interativos de chamada para ação, inserir contadores regressivos e controlar a visibilidade por dispositivo. Além disso, como o Jotform funciona fora do servidor, adicionar o banner personalizado no site não entrará em conflito com as atualizações principais do Squarespace nem quebrará seu layout.

Potencialize seu site Squarespace com widgets inteligentes e serverless

Com o Jotform, suas opções não se limitam a banners. O Jotform oferece um conjunto completo de widgets gratuitos para sites que ajudam a maximizar conversões, manter seu site leve e eliminar assinaturas desnecessárias de plug-ins premium.

Captura de tela do diretório de Widgets para Sites do Jotform, incluindo Google Reviews, Contador de Visitantes e Chave de Torneio

Esses widgets adicionam recursos poderosos ao seu site Squarespace com simples códigos de incorporação, incluindo

Você pode até usar o Jotform para criar uma conexão perfeita entre seus formulários online e seu site Squarespace usando a integração Jotform-Squarespace.

Não gaste seu tempo e dinheiro gerenciando um plug-in premium apenas para adicionar um banner personalizado à sua página inicial. Use os widgets gratuitos e serverless do Jotform para elevar a experiência do seu site e capturar leads importantes.

Este artigo é destinado a proprietários de sites Squarespace, fotógrafos e agências boutique que desejam incorporar banners promocionais interativos e ricos, com contadores regressivos ou formulários de captação de leads, sem depender de blocos nativos básicos ou comprar snippets de código premium.

Enviar Comentário:

Jotform Avatar
Este site é protegido por reCAPTCHA, sendo aplicáveis a Política de Privacidade e os Termos de Serviço do Google.

Podo Comment Seja o primeiro a comentar.