Como adicionar uma barra de pesquisa ao cabeçalho no Squarespace 7.1

Índice

1. Introdução
2. Construindo a barra de pesquisa na Squarespace 7.1
3. Configuração inicial
4. Adicionando o código JavaScript
5. Adicionando o código CSS personalizado
6. Adicionando o elemento de pesquisa
   • 6.1 Adicionando um bloco de pesquisa no rodapé
   • 6.2 Copiando o seletor do bloco de pesquisa
7. Atualizando o código JavaScript
8. Resultado final
9. Conclusão
10. Assine nossa newsletter

Como criar uma barra de pesquisa no Squarespace 7.1

👉 Introdução

Muitas vezes, ao projetar um website, uma das funcionalidades mais importantes é a capacidade de realizar pesquisas. Neste tutorial, vou te mostrar como construir uma barra de pesquisa na plataforma Squarespace 7.1. Com uma barra de pesquisa eficiente, seus visitantes poderão encontrar o conteúdo desejado rapidamente, melhorando a usabilidade e a experiência do usuário.

👉 Construindo a barra de pesquisa na Squarespace 7.1

A construção da barra de pesquisa na Squarespace 7.1 pode ser dividida em algumas etapas fundamentais. Vamos começar com a configuração inicial e, em seguida, explicarei todo o processo passo a passo. Certifique-se de acompanhar cada etapa com atenção para garantir que tudo funcione perfeitamente.

👉 Configuração inicial

Antes de iniciar o processo de construção da barra de pesquisa, é importante garantir que você tenha uma conta Squarespace 7.1 e esteja logado no painel de controle do seu site. Depois de fazer o login, vamos prosseguir para a primeira etapa.

👉 Adicionando o código JavaScript

O primeiro passo é adicionar o código JavaScript necessário para que a barra de pesquisa funcione corretamente. Para fazer isso, siga as seguintes instruções:

1. Copie o código JavaScript fornecido no artigo.
2. No painel de controle do Squarespace, navegue até a seção "Configurações Avançadas".
3. Selecione a opção "Injeção de Código".
4. Cole o código JavaScript na seção de Código de Cabeçalho.
5. Salve as alterações.

Agora que o código JavaScript está no lugar, avançaremos para a próxima etapa.

👉 Adicionando o código CSS personalizado

Depois de adicionar o código JavaScript, precisamos adicionar o código CSS personalizado para estilizar a barra de pesquisa. Siga as etapas abaixo:

1. Copie o código CSS fornecido no artigo.
2. No painel de controle do Squarespace, navegue até a seção "Design do Site".
3. Selecione a opção "CSS personalizado".
4. Cole o código CSS na seção de CSS personalizado.
5. Salve as alterações.

Ótimo! Agora que o código CSS está configurado, podemos prosseguir para a próxima etapa.

👉 Adicionando o elemento de pesquisa

Agora vamos adicionar o elemento de pesquisa ao nosso site. Existem várias maneiras de fazer isso, mas neste tutorial vamos usar um bloco de pesquisa no rodapé do site. Siga as instruções abaixo:

6.1 Adicionando um bloco de pesquisa no rodapé

1. No painel de controle do Squarespace, vá para a página que deseja adicionar o bloco de pesquisa.
2. Navegue até a seção "Editar Rodapé".
3. Selecione a opção "Adicionar Bloco".
4. Escolha o bloco de pesquisa e adicione-o à página.
5. Salve as alterações.

Agora que o bloco de pesquisa está no lugar, vamos prosseguir para a próxima etapa.

6.2 Copiando o seletor do bloco de pesquisa

Para que o código JavaScript funcione corretamente, precisamos copiar o seletor único do bloco de pesquisa. Siga as etapas abaixo:

1. Abra o seu site em uma nova janela anônima ou guia do navegador.
2. Encontre o bloco de pesquisa que adicionamos anteriormente.
3. Clique com o botão direito no bloco de pesquisa e escolha a opção "Inspecionar" (ou "Inspect" em inglês).
4. No painel do inspetor, encontre o seletor do bloco de pesquisa.
5. Copie o seletor do bloco de pesquisa.

Agora que temos o seletor copiado, vamos atualizar o código JavaScript.

👉 Atualizando o código JavaScript

A etapa final é atualizar o código JavaScript com o seletor do bloco de pesquisa que copiamos anteriormente. Siga as etapas abaixo:

1. Volte para o painel de controle do Squarespace e navegue até a seção "Injeção de Código".
2. Localize o trecho de código JavaScript que adicionamos anteriormente.
3. Cole o seletor do bloco de pesquisa no local adequado dentro do código.
4. Salve as alterações.

Ótimo! Agora que todas as etapas foram concluídas, podemos verificar o resultado final.

👉 Resultado final

Após seguir todas as etapas acima, você terá uma barra de pesquisa funcional no cabeçalho do seu site Squarespace 7.1. Além disso, a barra de pesquisa também será exibida corretamente em dispositivos móveis.

Agora você pode oferecer aos visitantes do seu site uma maneira rápida e conveniente de pesquisar todo o seu conteúdo. Aproveite essa funcionalidade para melhorar a experiência de seus usuários e fornecer um site mais fácil de usar.

👉 Conclusão

Neste tutorial, aprendemos como construir uma barra de pesquisa na Squarespace 7.1. Espero que essas instruções tenham sido claras e fáceis de seguir. Agora você pode adicionar uma barra de pesquisa eficiente ao seu site e melhorar a experiência de seus visitantes.

Se você gostou deste tutorial e deseja receber mais conteúdo como este, não se esqueça de assinar nossa newsletter. Fique atualizado sobre nossos novos tutoriais e envie-nos suas perguntas ou dúvidas.

Caso você encontre alguma dificuldade durante o processo de construção da barra de pesquisa, não hesite em entrar em contato conosco. Estaremos felizes em ajudar.

📧 Assine nossa newsletter para mais tutoriais e novidades!