Você já sentiu que a barra de pesquisa do seu site ocupa muito espaço e sua navegação parece confusa? Mas e se ela pudesse ser um pouco mais envolvente, um pouco mais moderna?
Ao longo dos anos, mudamos o design do nosso site várias vezes e experimentamos tornar o formulário de pesquisa mais atraente. E com base em nossa experiência, usar um formulário de pesquisa modal pode transformar a experiência de pesquisa em seu site.
Essas pequenas e úteis caixas de pesquisa pop-up podem aprimorar seriamente a experiência do usuário do seu site, e não são tão complicadas de configurar quanto você imagina.
Neste artigo, mostraremos como adicionar um formulário de pesquisa modal no WordPress sem editar o código.
O que é um Formulário de Pesquisa Modal e Por Que Usá-lo?
Um formulário de pesquisa modal é uma janela pop-up que se sobrepõe à sua página atual. Quando um usuário clica em um ícone de pesquisa no seu site WordPress, uma janela aparece diretamente sobre a página, contendo apenas o campo de entrada de pesquisa e o botão de envio. Pense nisso como um holofote, chamando a atenção para esse conteúdo específico.
É diferente de uma barra de pesquisa tradicional que pode estar localizada no seu cabeçalho ou barra lateral, que está sempre visível. Formulários de pesquisa modais ficam ocultos por padrão e aparecem apenas quando um usuário realmente deseja pesquisar.
Por exemplo, no SearchWP, usamos um formulário de pesquisa modal para proporcionar uma experiência de pesquisa sem distrações aos nossos usuários. Veja como fica em nosso site:
Um formulário de pesquisa modal mantém o layout da sua página limpo e organizado. Chega de barras de pesquisa volumosas ocupando espaço valioso. Além disso, a atenção do usuário é imediatamente atraída para a função de pesquisa quando ela aparece. É difícil de perder, o que é ótimo para melhorar o engajamento.
Além disso, um formulário de pesquisa modal oferece flexibilidade de design. Quer o seu site tenha um design minimalista ou um layout complexo, ele pode se encaixar perfeitamente.
Agora, vamos ver como adicionar um formulário de pesquisa modal ao seu site WordPress.
Adicionando um Formulário de Pesquisa Modal no WordPress
A maneira mais fácil de exibir um formulário de pesquisa modal é usando o plugin SearchWP Modal Search Form.
A melhor parte é que o plugin de pesquisa do WordPress é totalmente gratuito e se baseia no estilo do seu tema WordPress ativo. Você não precisa tocar em uma única linha de código para editar sua aparência ou estilo.
Para começar, você precisará instalar e ativar o plugin SearchWP Modal Search Form. Se precisar de ajuda, consulte este guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode acessar a página SearchWP » Modal Form no painel do WordPress. A partir daqui, você verá que a opção 'Enable Modal Form' estará ativa.
Em seguida, você pode rolar para baixo e selecionar qual arquivo CSS carregar para o seu site. Por exemplo, SearchWP Modal Search Form permitirá que você escolha entre posicionamento e estilo visual, estilo de posicionamento ou nenhum estilo.
Recomendamos usar a configuração padrão de ‘Posicionamento e estilo visual’. Dessa forma, você terá mais controle sobre onde o formulário de pesquisa aparecerá e como ele ficará.
Além disso, também há opções para ativar o modo de tela cheia e desativar a rolagem.
O Modo de Tela Cheia cobrirá toda a tela quando um usuário abrir o formulário, proporcionando uma experiência sem distrações.
Você também pode ativar a opção Desativar Rolagem. Isso melhora ainda mais a experiência de pesquisa, reduzindo o movimento de fundo quando um usuário rola acidentalmente.
Quando terminar, basta clicar no botão ‘Salvar Configurações’.
Exibindo o Formulário de Pesquisa Modal em seu Site
Em seguida, você precisará exibir o formulário de pesquisa modal em qualquer lugar do seu site. O SearchWP permite adicionar o formulário ao menu do seu site, usar um bloco Gutenberg ou um shortcode.
Vamos analisar cada método para exibir o formulário de pesquisa modal no WordPress.
1. Adicionando um Formulário de Pesquisa Modal ao Menu do WordPress
Dependendo do seu tema do WordPress, você pode adicionar o formulário de pesquisa modal a qualquer menu do seu site.
Basta acessar Aparência » Menus no painel do WordPress. O SearchWP agora adicionará um novo grupo chamado ‘Formulários de Pesquisa Modal SearchWP’ sob os itens de menu.
Vá em frente e selecione o formulário modal e clique no botão ‘Adicionar ao menu’.
Quando terminar, não se esqueça de clicar no botão ‘Salvar Menu’.
Depois disso, você pode visitar seu site para vê-lo em ação.
2. Exibir Formulário de Pesquisa Modal em Posts e Páginas do Blog
Você também pode adicionar o formulário de pesquisa modal a qualquer post de blog ou página de destino usando o bloco Gutenberg ou um shortcode. Isso é perfeito se você quiser mostrar uma opção de pesquisa dentro do conteúdo do seu site.
Primeiro, você precisará visitar a página ou post onde deseja exibir o formulário de pesquisa. Uma vez no editor de conteúdo, basta clicar no botão ‘+’ e adicionar o bloco ‘Formulário Modal’.
Depois disso, você pode alterar as configurações do bloco Formulário Modal no painel à direita.
Por exemplo, existem opções para alterar o texto, escolher um modelo e selecionar se o formulário será um link ou um botão.
Quando terminar, basta clicar no botão Salvar ou Publicar.
A partir daqui, você pode visitar a página ou post para ver o formulário modal dentro do seu conteúdo.
Se preferir usar shortcodes, você pode inserir o seguinte shortcode para exibir o formulário modal em qualquer lugar do seu site.
[searchwp_modal_search_form]
Você também pode aplicar personalizações que controlam vários atributos do próprio modal. Por exemplo, o seguinte shortcode exibirá um botão com o texto ‘Abrir Pesquisa’:
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Você pode editar cada atributo no shortcode para personalizar o formulário de pesquisa modal. Por exemplo, basta substituir o tipo por link se você não quiser mostrar um botão e editar o texto.
3. Mostrar o Formulário de Pesquisa Modal na Área de Widgets
Você também pode adicionar um formulário de pesquisa modal à área de widgets do seu tema WordPress, como a barra lateral ou o rodapé.
Para começar, basta acessar Aparência » Widgets no painel de administração do WordPress. Depois disso, você pode clicar no botão ‘+’ e adicionar o bloco de widget Formulário Modal.
Em seguida, você verá diferentes opções para editar as configurações do formulário modal no painel à direita.
Existem opções para alterar o texto, escolher um modelo e alterá-lo de um link para um botão.
Quando terminar, prossiga e clique no botão 'Atualizar'.
A partir daqui, você pode visitar seu site e ver o formulário modal na área de widgets. Por exemplo, nós o adicionamos à barra lateral do nosso site de demonstração.
Próximos Passos…
Agora que você sabe como adicionar facilmente um formulário de pesquisa modal ao seu site, pode ir um passo adiante e melhorar a experiência geral de pesquisa para seus visitantes.
A pesquisa padrão do WordPress tem muitas limitações e não inclui informações como categorias, tags, campos personalizados, detalhes do produto e muito mais no processo de pesquisa. No entanto, você pode mudar isso usando SearchWP e substituir as configurações de pesquisa padrão.
O plugin ajudará você a criar mecanismos de pesquisa personalizados ilimitados para seu site, configurar formulários de pesquisa personalizados e incluir taxonomias, campos personalizados, arquivos de mídia e outras informações importantes ao pesquisar conteúdo em seu site.
A melhor parte é que você pode usar o plugin SearchWP Modal Search Form com SearchWP e usar todo o potencial da pesquisa do seu site.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um formulário de pesquisa modal no WordPress. Você também pode consultar nosso guia sobre como criar um modelo de página de resultados de pesquisa Divi e como configurar as configurações de pesquisa do WordPress para obter os melhores resultados.
Pronto para criar uma experiência de pesquisa WordPress melhor e mais personalizada? Comece com o SearchWP hoje mesmo!
