Como adicionar a pesquisa Ajax em tempo real ao seu site Divi

Ajax é uma ótima maneira de adicionar pesquisa ao vivo ao Divi. Com o Ajax, a página não precisa ser recarregada para mostrar aos usuários os resultados da pesquisa. Isso permite que os visitantes vejam os resultados com muito mais rapidez, o que ajuda a mantê-los nas páginas por mais tempo. O resultado é um site que parece mais limpo e funciona de maneira mais suave.

A pesquisa Ajax não está embutida no Divi, mas pode ser facilmente adicionada usando um plug-in de terceiros. Neste tutorial, veremos como adicionar a pesquisa Ajax ao Divi e ver como estilizar a pesquisa para se adequar ao design do seu site.

Para o tutorial.

Espiada

Antes de começarmos, veja como ficará nossa pesquisa Ajax quando terminarmos. Esta é a visualização da área de trabalho. Vou adicionar uma pesquisa Ajax a uma loja WooCommerce. Estou usando a página de show do pacote de layout da Loja Online. Também definiremos o estilo da pesquisa para corresponder ao layout. Claro, como este é um site de teste, estou trapaceando e usando os produtos de teste WooCommerce. Os resultados funcionarão da mesma forma com qualquer produto.

Esta é a aparência do mesmo design em um telefone.

Como adicionar a pesquisa Ajax em tempo real ao seu site Divi

Inscreva-se no nosso canal no Youtube

1. Instalação do Divi Ajax Search

Primeiro, compre o Divi Ajax Search no Divi Marketplace. Normalmente custa US $ 29 e inclui uso ilimitado e um ano de suporte e atualizações. O Divi Ajax Search permite pesquisar páginas, publicações, projetos e produtos WooCommerce. Funciona da mesma forma com cada um desses tipos de postagem. Ele pode pesquisar o título, trecho e imagem em destaque e exibi-los de acordo com suas configurações.

Para instalar o plug-in, vá para Plug - ins > Adicionar novo e selecione Carregar plug-in .

Selecione Escolher arquivo, navegue até o local do arquivo em seu computador e selecione-o. Clique em Instalar agora .

Assim que o plug-in for instalado, selecione Ativar plug-in .

2. Adicione Ajax Search ao seu site Divi

Aqui está uma olhada no layout original. inclui o cabeçalho, as categorias que se sobrepõem à imagem do cabeçalho e o módulo WooCommerce para exibir os produtos. Vou adicionar o recurso de pesquisa Ajax acima do módulo de loja. Também vou estilizá-lo para combinar com os elementos do layout.

Adicionar pesquisa Divi Ajax ao layout

Clique no ícone sob o módulo de loja para abrir o modal do módulo. Role ou pesquise Divi Ajax Search e adicione-o ao layout. Estou mostrando a visualização de wireframe, mas qualquer uma das visualizações funciona da mesma forma.

Arraste e solte o módulo acima do módulo da loja.

Configurando a caixa de pesquisa

Clique na engrenagem para abrir as opções. Mudei para a visualização da área de trabalho para poder ver minhas alterações ao vivo.

Primeiro, vamos ajustar o texto do espaço reservado. O texto do espaço reservado padrão usa a palavra Pesquisar. Tudo bem, mas estou mudando para Pesquisar nossos produtos para que o usuário saiba que está pesquisando na loja, em vez de postagens de blog ou outro conteúdo. Vou deixar o texto Ordenar por , Ordem e Sem resultados com seus padrões.

• Placeholder text - Pesquise nossos produtos
• Resultado da pesquisa - 10
• Pedido por - data
• Ordem - desc
• Nenhum texto de resultado - Nenhum resultado encontrado

Decida o que exibir nos resultados da pesquisa

Na seção chamada Área de Pesquisa, selecione o que deseja pesquisar. Estou deixando as configurações padrão, que incluem Título, Conteúdo e Trecho.

Em seguida, escolha os tipos de postagem. Você pode tê-lo para pesquisar postagens, páginas, projetos, produtos ou todos os itens acima. Estou selecionando produtos.

Procure em:

• Título
• Contente
• Excerto

Tipos de postagem:

• Produtos

Selecione o que exibir

Role para baixo até a área de exibição para escolher como os resultados serão exibidos. Estou mantendo as configurações padrão para o ícone de pesquisa, título, trecho e imagem em destaque. Também habilitei o preço do produto, mudei o número de colunas para 4 e selecionei o uso de alvenaria. Isso me dará o layout que desejo.

Mostrar ícone de pesquisa:

• sim

Campos de exibição:

• Título
• Excerto
• Imagem em destaque
• Preço do produto

Numero de colunas:

• 4

Use a Maçonaria:

• sim

Mostrar a barra de rolagem

Vá para as configurações da barra de rolagem e decida mostrar ou ocultar a barra de rolagem. Estou incluindo a barra de rolagem para que o usuário saiba melhor que pode rolar.

Barra de rolagem:

• Mostrar

Resultado da pesquisa Divi Ajax

A inserção de um termo de pesquisa mostra os resultados no campo de pesquisa. Parece ótimo, mas não se destaca no conteúdo do site. Vamos estilizá-lo de forma que se encaixe no design do site e não se misture com as imagens do produto.

3. Estilize o Módulo para Ajustar ao Seu Site

Para estilizar a caixa de pesquisa, usarei elementos de design do layout que estou usando. Na parte inferior da página da loja do layout da Loja Online estão alguns elementos de design. Um deles é um módulo de adesão de e-mail interessante. Vou usar isso como minha inspiração para o plano de fundo e o campo. Também usarei a cor de fundo do CTA Compre agora para os resultados da pesquisa. Estou prestando especial atenção a três elementos de design:

• Cor de fundo do boletim informativo - # 757d79
• Cor do plano de fundo da loja CTA - # dcae83
• Preenchimento para ambos - 50 px (superior, inferior), 60 px (direita, esquerda)

Definir o estilo do campo de pesquisa

Abra as configurações de plano de fundo na guia de conteúdo. Esta seção possui três áreas de fundo diferentes. Vá para o último. É apenas chamado de plano de fundo. Insira a cor aqui.

• Cor de fundo - # 757d79

Na guia Design, vá para as configurações de Espaçamento e insira o preenchimento. Isso nos permitirá ver a área ao redor do campo para que possamos ver melhor os resultados à medida que avançamos. Isso também dá à caixa de pesquisa muitas cores ao seu redor, que combinam com os elementos do layout.

• Preenchimento 50px (superior, inferior), 60px (direita, esquerda)

Nas configurações do Campo de Pesquisa, adicione a cor de fundo do campo e a cor do texto do campo. Fiz o campo corresponder ao fundo do módulo e apenas selecionei branco para o texto.

• Cor de fundo do campo - # 757d79
• Cor do texto do campo - #ffffff

Nas mesmas configurações, role para baixo até Field Border Color e escolha o branco. Também podemos ajustar a espessura e o raio da borda. Vou deixar quadrado para corresponder ao campo de texto do módulo optin.

• Cor da borda do campo - #ffffff

Abra as configurações do ícone de pesquisa e selecione branco.

• Cor do ícone de pesquisa - #ffffff

Abra as configurações do Carregador e selecione branco para a Cor do Carregador . O carregador será visto apenas momentaneamente, mas terá uma aparência melhor se corresponder ao resto dos elementos.

• Cor do carregador - #ffffff

Definir o estilo do campo de resultados

Abra as configurações de plano de fundo na guia Conteúdo e adicione a cor aos planos de fundo da caixa de resultados da pesquisa e do item de resultado da pesquisa . Isso não ficará visível enquanto estamos estilizando o módulo, pois só aparece quando exibe os resultados da pesquisa.

• Cor de fundo - # dcae83

Na guia Design, abra as configurações para o Texto do item do resultado da pesquisa . Na guia Título, selecione o estilo de fonte all-caps e escolha branco para a cor do texto. Estou deixando todas as outras configurações de título como padrão.

• Estilo da fonte do título - TT
• Cor do texto do título - #ffffff

Abra a guia Excerto e selecione branco para a Cor do texto do trecho .

• Cor do texto do trecho - #ffffff

Abra a guia Preço. Selecione Semi negrito para o peso do preço e branco para a cor do texto.

• Peso da fonte de preço - Semi negrito
• Cor do texto do trecho - #ffffff

Resultados

Esta é a aparência do Ajax Search na área de trabalho com meu estilo. Os resultados da pesquisa são exibidos quase imediatamente. Parece elegante e suave.

É assim que fica no telefone. Os resultados são empilhados e ajustados para caber na tela.

Reflexões finais

Adicionar pesquisa Ajax ao seu site Divi é rápido e fácil com o plugin Divi Ajax Search. É fácil de usar, fácil de estilizar para combinar com seu site, e os resultados são rápidos e têm uma aparência fantástica. Você tem muitas opções para os tipos de postagem que pode pesquisar e para os tipos de conteúdo que exibirá nos resultados.

Agora o seu site Divi pode ter um recurso de pesquisa Ajax projetado profissionalmente que seus visitantes irão apreciar!

Nós queremos ouvir de você. Você adicionou uma pesquisa Ajax em tempo real ao seu site Divi? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via Kroster / shutterstock.com