Come aggiungere la ricerca Ajax in tempo reale al tuo sito Web Divi

Ajax è un ottimo modo per aggiungere la ricerca dal vivo a Divi. Con Ajax, la pagina non deve essere ricaricata per mostrare agli utenti i risultati della ricerca. Ciò consente ai tuoi visitatori di vedere i risultati molto più velocemente, il che aiuta a mantenerli sulle tue pagine più a lungo. Il risultato è un sito Web che sembra più pulito e funziona in modo più fluido.

La ricerca Ajax non è integrata in Divi, ma può essere facilmente aggiunta utilizzando un plug-in di terze parti. In questo tutorial, vedremo come aggiungere la ricerca Ajax a Divi e vedremo come modellare la ricerca per adattarla al design del tuo sito web.

Al tutorial.

Sbirciata

Prima di iniziare, ecco come apparirà la nostra ricerca Ajax quando avremo finito. Questa è la vista Desktop. Aggiungerò una ricerca Ajax a un negozio WooCommerce. Sto usando la pagina dello spettacolo dal pacchetto di layout del negozio online. Inoltre, stilizzeremo la ricerca in modo che corrisponda al layout. Naturalmente, poiché questo è un sito di prova, sto barando e sto usando i prodotti di prova di WooCommerce. I risultati funzioneranno allo stesso modo con qualsiasi prodotto.

Ecco come appare lo stesso design su un telefono.

Come aggiungere la ricerca Ajax in tempo reale al tuo sito Web Divi

Iscriviti al nostro canale Youtube

1. Installazione di Divi Ajax Search

Innanzitutto, acquista Divi Ajax Search dal Divi Marketplace. Normalmente costa $ 29 e include un utilizzo illimitato e un anno di supporto e aggiornamenti. Divi Ajax Search ti consente di cercare pagine, post, progetti e prodotti WooCommerce. Funziona allo stesso modo con ciascuno di questi tipi di post. Può cercare il titolo, l'estratto e l'immagine in primo piano e visualizzarli in base alle impostazioni.

Per installare il plug-in, vai su Plugin > Aggiungi nuovo e seleziona Carica plug-in .

Seleziona Scegli file e vai alla posizione del file sul tuo computer e selezionalo. Fare clic su Installa ora .

Una volta installato il plug-in, seleziona Attiva plug-in .

2. Aggiungi Ajax Search al tuo sito web Divi

Ecco uno sguardo al layout originale. include l'intestazione, le categorie che si sovrappongono all'immagine dell'intestazione e il modulo WooCommerce per visualizzare i prodotti. Aggiungerò la funzione di ricerca Ajax sopra il modulo negozio. Lo stilerò anche in modo che corrisponda agli elementi del layout.

Aggiungi Divi Ajax Search al layout

Fare clic sull'icona sotto il modulo negozio per aprire il modulo modale. Scorri o cerca Divi Ajax Search e aggiungilo al layout. Sto mostrando la vista wireframe, ma tutte le viste funzionano allo stesso modo.

Trascina e rilascia il modulo sopra il modulo negozio.

Configurazione della casella di ricerca

Fare clic sull'ingranaggio per aprire le opzioni. Sono passato alla visualizzazione desktop in modo da poter vedere le mie modifiche dal vivo.

Innanzitutto, regoleremo il testo segnaposto. Il testo segnaposto predefinito utilizza la parola Cerca. Va bene, ma lo modifico in Cerca nei nostri prodotti in modo che l'utente sappia che sta cercando nel negozio piuttosto che nei post del blog o in altri contenuti. Lascerò il testo Ordina per , Ordina e Nessun risultato ai valori predefiniti.

• Testo segnaposto – Cerca tra i nostri prodotti
• Risultato della ricerca – 10
• Ordina per – data
• Ordine – desc
• Nessun testo di risultato – Nessun risultato trovato

Decidi cosa visualizzare nei risultati di ricerca

Nella sezione denominata Area di ricerca, seleziona ciò in cui vuoi cercare. Lo lascio con le impostazioni predefinite, che includono Titolo, Contenuto ed Estratto.

Quindi, scegli i tipi di post. Puoi averlo per cercare post, pagine, progetti, prodotti o tutto quanto sopra. Sto selezionando Prodotti.

Cerca nel:

• Titolo
• Contenuto
• Estratto

Tipi di posta:

• Prodotti

Seleziona cosa visualizzare

Scorri verso il basso fino all'area di visualizzazione per scegliere come verranno visualizzati i risultati. Sto mantenendo le impostazioni predefinite per l'icona di ricerca, il titolo, l'estratto e l'immagine in primo piano. Ho anche abilitato il prezzo del prodotto, cambiato il numero di colonne in 4 e selezionato per utilizzare la muratura. Questo mi darà il layout che voglio.

Mostra icona di ricerca:

• sì

Campi di visualizzazione:

• Titolo
• Estratto
• Immagine in evidenza
• Prezzo del prodotto

Numero di colonne:

• 4

Usa la muratura:

• sì

Mostra la barra di scorrimento

Vai alle impostazioni della barra di scorrimento e decidi di mostrare o nascondere la barra di scorrimento. Includo la barra di scorrimento in modo che l'utente sappia meglio che può scorrere.

Barra di scorrimento:

• Spettacolo

Risultati della ricerca Divi Ajax

L'immissione di un termine di ricerca mostra i risultati sotto il campo di ricerca. Sembra fantastico, ma non si distingue dal contenuto del sito web. Lo stileremo in modo che si adatti al design del sito e non si confonda con le immagini del prodotto.

3. Modella il modulo per adattarlo al tuo sito web

Per definire lo stile della casella di ricerca, utilizzerò elementi di design dal layout che sto utilizzando. Nella parte inferiore della pagina del negozio del layout del negozio online ci sono un paio di elementi di design. Uno è un interessante modulo di attivazione della posta elettronica. Lo userò come ispirazione per lo sfondo e il campo. Userò anche il colore di sfondo dell'invito all'azione Acquista ora per i risultati della ricerca. Sto prestando particolare attenzione a tre elementi di design:

• Colore di sfondo della newsletter – #757d79
• Acquista colore di sfondo CTA – #dcae83
• Imbottitura per entrambi: 50 px (in alto, in basso), 60 px (a destra, a sinistra)

Stile del campo di ricerca

Apri le impostazioni dello sfondo nella scheda dei contenuti. Questa sezione ha tre diverse aree di sfondo. Vai all'ultimo. Si chiama semplicemente Sfondo. Inserisci qui il colore.

• Colore di sfondo – #757d79

Nella scheda Design, vai alle impostazioni Spaziatura e inserisci il padding. Questo ci permetterà di vedere l'area intorno al campo in modo da poter vedere meglio i risultati mentre procediamo. Ciò conferisce anche alla casella di ricerca molto colore attorno ad essa, che corrisponderà agli elementi nel layout.

• Imbottitura 50 px (in alto, in basso), 60 px (a destra, a sinistra)

Nelle impostazioni del campo di ricerca, aggiungi il colore di sfondo del campo e il colore del testo del campo. Ho fatto corrispondere il campo allo sfondo del modulo e ho appena selezionato il bianco per il testo.

• Colore di sfondo del campo – #757d79
• Colore testo campo – #ffffff

Nelle stesse impostazioni, scorri verso il basso fino a Colore bordo campo e scegli bianco. Potremmo anche regolare lo spessore e il raggio del bordo. Lo lascerò quadrato in modo che corrisponda al campo di testo del modulo optin.

• Colore bordo campo – #ffffff

Apri le impostazioni per l'icona di ricerca e seleziona bianco.

• Colore icona di ricerca – #ffffff

Aprire le impostazioni per Loader e selezionare bianco per Loader Color . Il caricatore sarà visibile solo momentaneamente, ma avrà un aspetto migliore se corrisponde al resto degli elementi.

• Colore caricatore – #ffffff

Disegnare il campo dei risultati

Apri le impostazioni dello sfondo nella scheda Contenuto e aggiungi il colore agli sfondi della casella dei risultati della ricerca e dell'elemento dei risultati della ricerca . Questo non sarà visibile mentre stiamo modellando il modulo poiché viene mostrato solo quando mostra i risultati della ricerca.

• Colore di sfondo – #dcae83

Nella scheda Design, apri le impostazioni per il testo dell'elemento dei risultati della ricerca . Nella scheda Titolo, seleziona lo stile del carattere tutto maiuscolo e scegli il bianco per il colore del testo. Lascio tutte le altre impostazioni del titolo di default.

• Stile carattere titolo – TT
• Colore del testo del titolo – #ffffff

Apri la scheda Estratto e seleziona bianco per Colore testo estratto .

• Colore testo estratto – #ffffff

Apri la scheda Prezzo. Seleziona Semi grassetto per il peso del prezzo e bianco per il colore del testo.

• Peso del carattere del prezzo – Semi grassetto
• Colore testo estratto – #ffffff

Risultati

Ecco come appare la ricerca Ajax sul desktop con il mio stile. I risultati della ricerca vengono visualizzati quasi immediatamente. Sembra elegante e liscio.

Ecco come appare sul telefono. I risultati si impilano e si adattano allo schermo.

Pensieri finali

Aggiungere la ricerca Ajax al tuo sito web Divi è facile e veloce con il plug-in Divi Ajax Search. È facile da usare, facile da adattare al tuo sito web e i risultati sono veloci e hanno un aspetto fantastico. Hai molte opzioni per i tipi di post che può cercare e per i tipi di contenuto che visualizzerà nei risultati.

Ora il tuo sito web Divi può avere una funzione di ricerca Ajax progettata professionalmente che i tuoi visitatori apprezzeranno!

Vogliamo sentire da voi. Hai aggiunto una ricerca Ajax in tempo reale al tuo sito Divi? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite Kroster / shutterstock.com