Como adicionar um botão personalizado no Squarespace

O botão de chamada para ação (botão CTA) é o elemento de maior valor em uma landing page, já que todo visitante que você direciona para o checkout, um formulário de contato ou um recurso para download precisa clicar em um para chegar lá. E um botão que se destaca da seção ao redor — com sua própria cor, um ícone ou um efeito hover — obtém uma taxa de cliques visivelmente melhor do que um que se mistura ao restante da página.

O Squarespace tem um Bloco de Botão nativo, mas a estilização é feita pelo painel global de Estilos do Site, e não selecionando o botão em si. Os botões vêm em três tipos: primário, secundário e terciário. Cada tipo é estilizado em todo o site, então você tem três designs de botão no total. Reestilizar um botão primário afeta todos os botões primários do site, e o mesmo vale para os tipos secundário e terciário. As configurações também são limitadas por si só, sem opções de ícones, efeitos hover ou gradientes.

Existem duas formas de dar a um botão seu próprio design sem alterar todos os outros botões do site. Você pode escrever ou comprar CSS personalizado e colá-lo no painel de CSS Personalizado para direcionar aquele bloco específico, ou pode usar um widget hospedado gratuito, estilizar o botão em um construtor visual e colar o código de incorporação em um bloco de código.

Se você é proprietário de um site Squarespace, profissional de marketing ou designer e deseja criar botão CTA personalizado no Squarespace sem escrever CSS ou pagar um desenvolvedor por um snippet, este guia mostra como adicionar um botão no Squarespace usando ambos os métodos — começando pelo método CSS e depois pelo widget.

Opção 1: Usar blocos nativos com snippets de CSS personalizado

A forma padrão de obter um design de botão único em uma página do Squarespace é adicionar o bloco de botão nativo e depois sobrescrever sua estilização com seu próprio CSS. O Squarespace tem um painel de CSS Personalizado para isso, e direcionar um único bloco pelo seu ID mantém a alteração em apenas um botão, em vez de afetar todos os botões do mesmo tipo.

Veja como adicionar um botão no Squarespace com CSS personalizado:

1. Abra a página no editor, passe o mouse sobre a seção onde deseja adicionar o botão, clique em Add Block e escolha Button.

2. Clique no ícone de lápis ou dê um duplo clique no botão para definir o texto e o link. Escolha primário, secundário ou terciário e depois clique em Save no canto superior esquerdo.

3. Em seguida, encontre o ID do bloco. Cada bloco em uma página do Squarespace tem um ID único, e colocá-lo antes do seu CSS limita a alteração a apenas aquele botão, em vez de aplicá-la a todos os botões do mesmo tipo. Você pode encontrá-lo inspecionando a página no navegador, clicando com o botão direito no bloco e selecionando Inspecionar, ou usando uma das extensões gratuitas de navegador para localizar IDs no Squarespace. 

4. Fora do editor, vá até Website na barra lateral, clique em Pages, depois em Custom Code e selecione Custom CSS.

5. Escreva e salve suas regras — direcione para aquele ID de bloco e depois clique em Save. Os estilos nativos do Squarespace são específicos o suficiente para que, muitas vezes, você precise adicionar !important para que os seus entrem em vigor. Uma vez salvo, aquele botão específico fica com a aparência desejada, enquanto todos os outros botões do site permanecem como estavam.

Errar o direcionamento é o problema mais comum, já que um snippet escrito para “.sqs-block-button-element” sem um ID de bloco na frente reestiliza todos os botões nativos do site, incluindo o botão CTA do cabeçalho e os botões de checkout. Outro problema frequente é a aparência no celular — larguras fixas e tamanhos de fonte grandes que ficam bons no desktop podem empurrar o botão para fora da tela do celular ou quebrar o texto em linhas de uma única letra.

Snippets são fáceis de encontrar, e designers de Squarespace publicam vários deles gratuitamente em seus blogs, embora os efeitos hover e de animação mais elaborados tendam a ser vendidos como complementos pagos. De qualquer forma, você está colando código que não escreveu em um painel que afeta todo o seu site, e fica por sua conta depurar caso algo não fique como esperado.

Opção 2: Adicionar um widget de botão personalizável e gratuito (recomendado)

Criar botão em uma ferramenta separada é a alternativa ao CSS personalizado no Squarespace, já que você está inserindo um novo botão na página em vez de sobrescrever a estilização de um nativo. Aqui, você configura o botão personalizado em um construtor visual, copia o código de incorporação e cola em um bloco de código na sua página.

Antes de começar, verifique seu plano do Squarespace. Adicionar um código de incorporação em um bloco de código é um recurso premium que requer o plano Core ou superior. No plano de entrada, o código permanece no bloco, mas não funciona.

Em relação a qual widget escolher, o Widget de Botão do Jotform é um widget de botão gratuito para Squarespace que oferece mais controle visual do que o bloco nativo. Você pode personalizar as cores de fundo, texto e hover de forma independente, adicionar um ícone antes ou depois do rótulo e ajustar raio dos cantos, altura, espaçamento, tamanho do texto e sombra. 

Veja como adicionar um botão no Squarespace usando o widget:

1. Na página do seu Workspace do Jotform, clique em Create, selecione Website Widget, pesquise por “Button” e depois clique em Use Widget.

2. Na aba General, escolha o que o botão faz — seja abrir uma página web, iniciar um e-mail ou abrir um chat do WhatsApp — e depois insira a URL do link e o rótulo do botão. Vá para a aba Style para cores, ícones e formatos, e depois para a aba Layout para escolher se o botão será inline ou flutuante e se aparecerá no desktop, no celular ou em ambos.

3. Clique em Publish e depois clique em Copy Code na seção Embed. 

4. No seu editor do Squarespace, clique em Add Block, escolha Code, defina o modo do bloco como HTML, apague o texto de exemplo, cole seu código e clique em Save.

Como o botão é estilizado no Jotform e não no painel de CSS Personalizado, ele não entrará em conflito com os Estilos do Site globais, e suas alterações não afetarão outros botões do site. Testar uma cor ou rótulo diferente significa editar o widget em vez de rastrear um ID de bloco e reescrever um snippet.

Potencialize seu site Squarespace com widgets inteligentes e serverless

Como profissional de marketing, proprietário de site ou designer, seu tempo é valioso demais para gastá-lo rastreando um ID de bloco só para que um botão CTA tenha uma aparência diferente do restante do site. Um widget de botão resolve isso em poucos minutos, e você pode reestilizá-lo depois sem precisar tocar no painel de CSS Personalizado novamente.

Um botão é apenas uma das várias coisas que você pode adicionar a uma página do Squarespace sem um snippet de código ou um plug-in pago. O diretório de widgets gratuitos para sites do Jotform tem mais de 150 opções, incluindo

• Um cronômetro de contagem regressiva para um lançamento ou prazo de inscrição, criando urgência que um botão estático não consegue
• Um popup para a oferta de cadastro que, de outra forma, exigiria um plug-in premium para funcionar
• Um feed de redes sociais que mantém suas últimas publicações na página, para que um site atualizado ocasionalmente ainda pareça atual

Cada um é incorporado por meio de um bloco de código da mesma forma que o botão. Isso significa que você não precisa comprar outro snippet ou plug-in toda vez que quiser mais um elemento em uma página.

Se você ainda está criando um site ou planejando uma reformulação, vale a pena saber quais elementos podem ser adicionados depois sem a necessidade de um desenvolvedor. A integração Jotform-Squarespace incorpora formulários no seu site da mesma forma, então um botão que direciona as pessoas para uma página de cadastro pode encaminhar para o formulário que coleta as informações delas.

Independentemente de qual alternativa de call-to-action para Squarespace você escolher, um botão que se destaca vale mais do que um que combina com todo o restante da página. O widget é simplesmente uma forma mais rápida e econômica de conquistar o clique.