Como adicionar código personalizado ao seu site

Com tantos conceitos e regras abstratos, a codificação assusta um pouco. Criar um site do zero, além de ter que depurar erros durante o processo, é demais para muitos empreendedores. Deve ser por isso que você criou seu site no Squarespace. Porém, há jeitos mais fáceis de usar código para elevar o nível do seu site.

Sou Rache e faço parte do Circle — o programa do Squarespace para parceria de profissionais em web design. Quando comecei como designer de sites, eu queria superar os limites dos projetos dos meus clientes. Quando descobri que bastava usar código para fazer isso, fundei a Squarestylist, uma biblioteca de recursos criativos que combinam design e código nos sites, a fim de impressionar as pessoas em um mar de mesmices. Confira dicas e formas de usar código personalizado para deixar seu site mais especial.

Por que adicionar código personalizado ao site?

Pesquisas mostram que, em 94% das vezes, a primeira impressão do visitante com o site tem a ver com design. Portanto, vale a pena o esforço de você mesmo criar o visual do seu espaço digital.

Quero deixar bem claro: código personalizado não é requisito no Squarespace. É possível já começar com uma funcionalidade tranquila. Dito isso, a codificação tem seu valor como ferramenta para adicionar recursos ou requisitos do site que você já tenha, mas que ainda não foram incorporados.

Recomendações para o código personalizado

Sendo autodidata como desenvolvedora e designer da web, aprendi a codificar um trecho de cada vez, resolvendo cada problema ou caso de uso à medida que eles ocorriam. Sempre que me deparo com um problema técnico desconhecido, procuro fóruns e grupos on-line e imediatamente coloco o que aprendi em prática.

Com a repetição desse processo, adquiri alguns bons hábitos que fizeram toda a diferença no meu desenvolvimento profissional.

1. Maximize os recursos incorporados

Conheça bem o editor do Squarespace e explore cada botão que encontrar. O construtor é mais útil do que você imagina. Metade do tempo é para saber onde achar o que você precisa nas configurações padrão; a outra metade é se familiarizar com as funções para saber o que digitar na barra de busca.

2. Saiba o que você está adicionando

Ao achar, na internet, um trecho de código útil para o seu site, não basta copiar e colar no painel "CSS personalizado" ou "Injeções de código". Analise uma linha de cada vez para entender como ele afetará o site. Anote as palavras-chave e os padrões — o que você acha que eles significam?

Foi assim que fiquei fluente na linguagem dos browsers, mesmo sem educação formal: aos pouquinhos, como uma criancinha faz. Atice sua curiosidade e faça tudo com prazer, sem medo. Você vai se surpreender com o tanto que se aprende assim.

Quer uma abordagem mais orientada para aprender código? Use meu curso gratuito de noções básicas de CSS como ponto de partida.

3. Cuidado com a qualidade

É claro que o design da web vai além das preferências visuais. Ao optar pelo método "faça você mesmo", há algumas perguntas importantes a responder durante o processo:

• O código afeta involuntariamente outros elementos do site?

• Como o site reage às mudanças no tamanho e na orientação da tela?

• Como ele aparece em diferentes browsers?

• Esse recurso extra deixará o site mais lento?

• Como essa personalização afeta a acessibilidade?

Com essas considerações, você terá mais cuidado com o impacto que o código causa além da prévia do site padrão. Acima de tudo, precisamos oferecer aos usuários uma experiência interessante em todos os níveis.

Trechos de código para testar

Sua primeira incursão no CSS não precisa ser complexa. No início, me lembro de adicionar alguns detalhes aqui e ali, para depois aumentar gradualmente meu repositório de códigos. 

Acesse o painel "CSS", onde você pode adicionar códigos personalizados na sua conta Squarespace. Para isso, clique em Site e Ferramentas do site no pé da barra lateral; em seguida, clique em CSS personalizado. Você pode começar a ajustar o site com alguns desses snippets.

1. Defina uma fonte de contraste

Não é necessário usar sempre o itálico para enfatizar determinadas palavras ou expressões no site. Esse recurso usa uma fonte de exibição como contraste — usada com moderação, ela chama a atenção das pessoas.

1. Defina o estilo da sua fonte em "Diversos", que servirá como fonte de contraste. Para isso, acesse Estilos do site > Fontes > Diversos. Escolha uma família de fontes e ajuste as propriedades da fonte.

2. Para adicionar a linha de código, acesse Site > Ferramentas do site > CSS personalizado. Copie e cole abaixo o código. Se já houver um código, cuidado para não apagar. Basta colar o código extra na próxima linha disponível.

3. Adicione um bloco de texto a uma seção do site com o elemento Título 1, Título 2 ou Título 3. Selecione uma palavra ou grupo de palavras e aplique o itálico — basta pressionar o botão "I" na janela pop-up do painel do texto. O estilo da fonte de contraste será aplicado às palavras em itálico.

Código CSS

Adicione a Site > Ferramentas do site > CSS personalizado

h1 em, h2 em, h3 em {
font-family:var( --meta-font-font-family);}

Assista à apresentação de Rache sobre código personalizado no Squarespace Circle Day

2. Decore as linhas

Para fins visuais, as linhas finas dão um toque de elegância a um site minimalista. Você talvez já use o bloco de linhas horizontais incorporado no editor do Squarespace. Para adicionar linhas verticais, basta inserir algumas linhas de código no painel CSS.

1. Adicione uma seção vazia. Para facilitar o posicionamento dos elementos, deixe visível a grade do Editor Intuitivo — basta pressionar G no teclado.

2. Clique no botão "Adicionar bloco" (canto superior esquerdo da seção) e escolha Bloco de forma.

3. Para abrir as configurações do bloco de forma, clique duas vezes no bloco.

4. Abra o item suspenso de formas e escolha a última opção (Trapézio).

5. Acesse Site > Ferramentas do site > CSS personalizado. Copie e cole o código na última linha vazia do painel.

6. Após colar o CSS, o bloco de forma em trapézio se transformará numa linha vertical. Para alterar a cor, ative a opção Traço nas configurações do bloco de forma e escolha uma cor no seletor.

7. Na versão móvel, a linha vertical se transforma numa linha horizontal. Ajuste o posicionamento do bloco; isso não afeta a tela no modo desktop.

Código CSS

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"] {

&::before {

width: 1px;

content: ''; height: 100%; background-color: var(--shape-block-stroke-color); position: absolute;} svg {display: none !important;}.sqs-shape > * {stroke-width: 0 !important;}

}

@media screen and (max-width: 767px) {

.website-component-block .sqs-shape-block-container[data-shape-name="keystone"]::before {

height:1px;

width: 100%;

}

}

3. Mostre os efeitos da imagem ao passar o cursor

O movimento dinâmico também aumenta o interesse visual aos layouts do site. Confira um exemplo que ativa os efeitos em 3D sempre que o cursor parar em uma imagem. É o exemplo perfeito de como aproveitar os recursos incorporados. Você está usando o código para diminuir a distração e turbinar a interatividade do site.

1. Adicione um bloco de imagens ou escolha um já existente.

2. Nas configurações do bloco de imagens, selecione Efeitos de imagem e escolha um efeito.

3. Como padrão, o efeito da imagem aparecerá ao carregar a página. Para que ele apareça somente ao passar o cursor, acesse Site > Ferramentas do site > CSS personalizado e cole o código abaixo.

Código CSS

.sqs-block-image .design-layout-fluid .fluid-image-container {img {visibility: visible !important;}}.imageEffectContainer {opacity: 0;transition:0.5s;}.sqs-block-image:hover .imageEffectContainer {opacity: 1;}

Espero que este artigo anime você a sair da zona de conforto e a mexer mais na sandbox do seu editor de código. Boa codificação!

Tudo pronto para criar e personalizar seu site?