O Bloco de Formulário de Busca permite adicionar uma caixa de busca totalmente funcional a qualquer página do SeedProd, oferecendo aos visitantes uma maneira instantânea de encontrar o conteúdo que procuram. Esteja você criando um blog, uma landing page ou um site completo, adicionar um formulário de busca ajuda a reduzir o atrito e mantém os usuários engajados, exibindo conteúdo relevante rapidamente.
O bloco oferece configuração flexível — escolha entre um botão de ícone ou um botão de texto, defina um placeholder personalizado, controle a altura e a largura do formulário e ajuste as cores para a entrada de busca e o botão. Você pode alinhar o formulário em qualquer posição e ajustar o espaçamento para um layout limpo e consistente em todos os tamanhos de tela.
Adicionando o Bloco de Formulário de Busca às Suas Páginas
Siga estas etapas para adicionar um bloco de Formulário de Busca à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Formulário de Busca na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Formulário de Busca para abrir suas configurações. Na aba Conteúdo, a seção Configuração do Formulário de Busca permite configurar o texto do placeholder, o estilo do botão, o tamanho do formulário e o alinhamento.
- Placeholder: Insira o texto de dica exibido dentro do campo de entrada de busca antes que um visitante comece a digitar (por exemplo, “Buscar…” ou “O que você está procurando?”). Isso orienta os usuários sobre o que eles podem pesquisar.
- Tipo de Botão: Escolha como o botão de envio da busca aparece — Ícone exibe um botão de ícone compacto (escolha entre uma lupa ou uma seta), enquanto Texto exibe um botão com rótulo de texto completo. Quando Texto é selecionado, um campo Texto aparece para que você possa definir o rótulo do botão (por exemplo, “Buscar” ou “Ir”).
- Ícone: (Visível quando o Tipo de Botão está definido como Ícone.) Selecione qual estilo de ícone usar para o botão de busca — um ícone de lupa circular ou um ícone de seta.
- Tamanho: Defina a altura geral do formulário de busca usando o controle deslizante (30–80px). Isso controla a altura do campo de entrada e do botão na página.
- Alinhamento: Defina o alinhamento horizontal do formulário de busca — Esquerda, Centro ou Direita.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode ajustar as cores e dimensões do formulário de busca, depois controlar o espaçamento e a visibilidade em diferentes dispositivos.
Cores & Largura:
- Fundo da Busca: Defina a cor de fundo do campo de entrada de busca.
- Cor do Texto da Busca: Defina a cor do texto digitado no campo de entrada de busca, bem como a cor do texto do placeholder.
- Fundo do Botão: Defina a cor de fundo do botão de envio da busca.
- Cor do Botão: Defina a cor do ícone ou texto do botão de envio da busca.
- Largura: Defina a largura geral do formulário de pesquisa como uma porcentagem de seu contêiner (10–100%). Use um valor menor para tornar o formulário mais estreito ou defina-o como 100% para uma barra de pesquisa de largura total.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Formulário de Pesquisa (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o formulário e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno do seu bloco de Formulário de Pesquisa (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o formulário de pesquisa e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Formulário de Pesquisa. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript.
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-search|enabled).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Formulário de Pesquisa em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Formulário de Pesquisa em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de Formulário de Pesquisa em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando o bloco de Formulário de Pesquisa entra na visualização. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muito mais.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Formulário de Pesquisa e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Formulário de Pesquisa à sua página! Um formulário de pesquisa bem posicionado melhora a navegação e mantém os visitantes engajados, ajudando-os a encontrar exatamente o que precisam sem sair do seu site. Experimente com estilos de botão, cores de entrada e configurações de largura para criar uma experiência de pesquisa que se encaixe perfeitamente no design da sua página.