Quatro exemplos comuns de código personalizado no Squarespace

O Squarespace é uma plataforma robusta, com opções de personalização que atendem a diversos estilos e demandas profissionais. Os melhores recursos do Squarespace atendem a uma ampla variedade de casos de uso, sendo a opção ideal para muitos empreendedores e criativos como você. Porém, e nos casos extremos, que não podem ser resolvidos por esses recursos integrados? É aí que a mágica do código se torna útil.

Sou Rache e fundei a Squarestylist, uma biblioteca de recursos criativos para integrar design e código em sites que inspiram admiração. A seguir, mostrarei como usar código para chegar a quatro das personalizações de site mais procuradas. 

Antes, recomendo consultar nosso artigo no blog sobre como adicionar código personalizado ao seu site Squarespace. Ele traz recomendações para adicionar o código, um trecho de cada vez. 

Atenção: o conteúdo foi criado por um membro do Squarespace Circle e não é recomendação oficial do Squarespace. Como o produto Squarespace está sempre evoluindo, o código do Squarespace está sujeito a alterações a qualquer momento; o Squarespace não garante que os exemplos abaixo funcionem para sempre. As equipes de suporte ao cliente não resolvem problemas relacionados a códigos personalizados adicionados a um site Squarespace. Parte do código abaixo é adicionado via injeção de código, disponível em alguns planos do Squarespace.

1. Adicione o botão "Rolar para o topo"

O recurso de rolar para o topo é uma adição útil ao seu site Squarespace, principalmente em páginas mais longas. Ele traz um meio fácil para os usuários voltarem ao topo da página e acessarem o menu ou os itens da navegação. 

Confira abaixo os passos para adicionar um botão acessível e com a sua marca. 

1. Role até o fim da página e edite o rodapé do site.

2. Adicione uma imagem ao rodapé. Ela servirá como botão de rolagem para o topo. Você pode escolher ou criar qualquer imagem ou gráfico de acordo com a sua identidade visual. Para dar clareza, adicione uma seta ou o texto “Rolar para o topo”.

3. Deixe o texto alternativo como "Rolar para o topo", para fins de acessibilidade.

4. Crie um link "#topo" e deixe o botão "Abrir link em uma nova aba" desativado.

5. Para adicionar a funcionalidade em que o botão só aparece quando a página é rolada, adicione o primeiro trecho de código (abaixo) a "Página > Ferramentas o site > Injeção de código > Rodapé".

6. Para ajustar o estilo do botão, você pode adicionar código CSS a "Página > Ferramentas do site > CSS personalizado".

Código: passo 5

<script>

document.addEventListener('DOMContentLoaded',()=>{const b=document.body,l=document.querySelector('footer a[href="#top"]'),f=l?.closest('.fe-block');f?.classList.add('scroll-to-top');const t=()=>b.classList.toggle('is-scrolled',window.scrollY>200);window.addEventListener('scroll',t);t()});

</script>

Código: passo 6

html.fe-block.scroll-to-top a@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-topbody.is-scrolled .fe-block.scroll-to-top abody:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-topbody:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections
.fe-block.scroll-to-top {
right:2vw;
bottom:2vw;
width:100px;
height:100px;
}

2. Altere a cor da navegação do cabeçalho em uma página

Personalizar a cor da navegação do cabeçalho de uma página específica é uma solicitação comum e geralmente necessária quando a página tem um plano de fundo ou esquema de cores exclusivo. Antes de aplicar o código personalizado, vamos conhecer os recursos integrados do Squarespace que atendem a esse requisito.

1. Clique em Editar cabeçalho do site e vá para a aba Design.

2. Em Cores, você encontrará opções de estilo, incluindo Adaptativo.

3. Com essa opção, o cabeçalho se adapta ao tema de cores da primeira seção, garantindo um bom contraste.

Você também pode testar as opções Cheio ou Gradiente para padronizar o cabeçalho em todas as páginas.

Se essas opções nativas não atenderem às suas demandas, você pode usar o código personalizado para controlar mais as cores do cabeçalho e os elementos dele:

1. Vá para a página cuja cor do cabeçalho você quer alterar.

2. Clique no ícone "Configurações" ao lado do nome da página.

3. Na aba "Avançado", você encontrará a área de injeção de código específica da página.

4. Cole o código abaixo; não esqueça de incluir as tags de estilo de abertura e fechamento.

Código

<style>
:root {
--headerbg: #F4BAB5;
--headerText:#12294C;
}
/
*Change Header Background Color */
@media (min-width: 800px) and (hover: hover), (min-width: 1025px) {
.header-border {
    background: var(--headerbg);
}
}
/*Change Color  Header Nav Links on Desktop */
.header-display-desktop nav.header-nav-list a {
    color: var(--headerText) !important;
}
/*Change Color Header Nav Elements on desktop */
.header-display-desktop a.user-accounts-text-link.header-nav-item {
color: var(--headerText) !important;
}
 .header-display-desktop .header-title-text a {
color: var(--headerText) !important;
}
 .header-display-desktop .header-actions-action.header-actions-action--social svg {
fill: var(--headerText) !important;
}
 .header-display-desktop .Cart-inner path {
fill: var(--headerText) !important;
stroke: var(--headerText) !important;
}
 .header-display-desktop span.sqs-cart-quantity {
color: var(--headerText) !important;
}
</style>

Para facilitar a personalização das cores, esse código usa variáveis CSS. É possível alterar os códigos das cores do plano de fundo e do texto. 

Ao alocar essas cores, sempre considere a acessibilidade — dê contraste suficiente entre a cor dos elementos do cabeçalho e a cor de fundo do cabeçalho. O código acima foi escrito cuidadosamente para afetar somente a tela da área de trabalho, que provavelmente é o alvo pretendido.

3. Oculte o título do site na página inicial

Às vezes, é bom ocultar o título ou o logotipo do cabeçalho em uma página específica, geralmente a página inicial. Isso é útil quando se tem um logotipo em destaque na primeira seção e você quer evitar a repetição.

Saiba como ocultar o título do site em uma página específica:

1. Selecione a página desejada.

2. Clique no ícone "Configurações" ao lado do nome da página.

3. Vá para a aba "Avançado".

4. Adicione o código abaixo à área de injeção de código do cabeçalho da página.

Código

<style>
.header-display-desktop .header-title {
    display: none;
}
</style>

4. Aplique uma imagem personalizada ao cursor

Um cursor personalizado deixa seu site ainda mais exclusivo, mas é importante implementá-lo cuidadosamente para manter uma boa experiência aos usuários. Saiba como adicionar um cursor personalizado ao seu site Squarespace.

1. Prepare a imagem do cursor.

• Ele deve ter menos de 128 pixels de largura ou altura (recomendo de 30 a 50 pixels).

• Use um arquivo SVG, se possível, para evitar pixelização. Um PNG pequeno também serve.

2. Carregue a imagem do cursor.

• Crie uma página temporária na seção Não vinculadas do seu site.

• Adicione um bloco de texto e insira a imagem do cursor como arquivo com link.

• Salve e clique no link para obter o caminho do arquivo.

3. Adicione o CSS personalizado.

• Acesse o painel "CSS personalizado".

• Cole o código abaixo e insira o caminho do arquivo entre aspas.

Código

body:not(.sqs-edit-mode-active) {
  cursor:url(" "), auto;
}

Como padrão, esse código só muda o cursor padrão. No caso dos links e botões, ele volta para o cursor básico. Se você também quiser um cursor personalizado para os estados de foco, use o código abaixo e carregue uma imagem separada.

Código

body:not(.sqs-edit-mode-active) {
  a:hover, button:hover {
    cursor:url(""), pointer; 
  }
}

O cursor personalizado dá um toque exclusivo ao seu site. No entanto, use com cuidado para não descaracterizar a navegação dos seus usuários.

Vá além de copiar e colar

Embora seja conveniente copiar e colar esses trechos de código, eu sempre incentivo a compreensão de como eles funcionam. Isso é fundamental para solucionar problemas e fazer modificações personalizadas no seu site Squarespace.

Caso tenha interesse, confira meu curso básico de CSS — gratuito para usuários do Squarespace. Ele aborda os fundamentos do CSS, os casos de uso comuns do código do Squarespace e onde encontrar ajuda. 

Espero que esse recurso tenha inspirado você a adicionar personalizações ao seu site. Feliz codificação!