Hai mai avuto la sensazione che la barra di ricerca sul tuo sito occupi molto spazio e la tua navigazione appaia disordinata? Ma se potesse essere un po' più coinvolgente, un po' più moderna?
Nel corso degli anni, abbiamo cambiato più volte il design del nostro sito web e sperimentato per rendere il modulo di ricerca più attraente. E sulla base della nostra esperienza, l'utilizzo di un modulo di ricerca modale può trasformare l'esperienza di ricerca sul tuo sito.
Questi piccoli e ingegnosi box di ricerca pop-up possono migliorare seriamente l'esperienza utente del tuo sito web e non sono così complicati da impostare come potresti pensare.
In questo articolo, ti mostreremo come aggiungere un modulo di ricerca modale in WordPress senza modificare il codice.
Cos'è un Modulo di Ricerca Modale & Perché Usarlo?
Un modulo di ricerca modale è una finestra popup che si sovrappone alla pagina corrente. Quando un utente fa clic su un'icona di ricerca sul tuo sito WordPress, una finestra appare direttamente sopra la pagina, contenente solo il campo di input di ricerca e il pulsante di invio. Pensala come un riflettore, che porta l'attenzione su quel contenuto specifico.
È diverso da una barra di ricerca tradizionale che potrebbe trovarsi nell'intestazione o nella barra laterale, che è sempre visibile. I moduli di ricerca modali sono nascosti per impostazione predefinita e appaiono solo quando un utente desidera attivamente cercare.
Ad esempio, su SearchWP, utilizziamo un modulo di ricerca modale per offrire un'esperienza di ricerca senza distrazioni ai nostri utenti. Ecco come appare sul nostro sito web:
Un modulo di ricerca modale mantiene il layout della tua pagina pulito e ordinato. Niente più barre di ricerca ingombranti che occupano spazio prezioso. Inoltre, l'attenzione dell'utente viene immediatamente attratta dalla funzione di ricerca quando appare. È difficile da perdere, il che è ottimo per migliorare il coinvolgimento.
Inoltre, un modulo di ricerca modale offre flessibilità di progettazione. Sia che il tuo sito abbia un design minimalista o un layout complesso, può adattarsi perfettamente.
Ora, vediamo come aggiungere un modulo di ricerca modale al tuo sito WordPress.
Aggiungere un Modulo di Ricerca Modale in WordPress
Il modo più semplice per visualizzare un modulo di ricerca modale è utilizzare il plugin SearchWP Modal Search Form.
La parte migliore è che il plugin di ricerca WordPress è completamente gratuito da usare e si basa sullo stile del tuo tema WordPress attivo. Non devi toccare una singola riga di codice per modificarne l'aspetto o lo stile.
Per iniziare, dovrai installare e attivare il plugin SearchWP Modal Search Form. Se hai bisogno di aiuto, consulta questa guida su come installare un plugin WordPress.
Dopo l'attivazione, puoi andare alla pagina SearchWP » Modal Form dalla dashboard di WordPress. Da qui, vedrai che l'opzione 'Abilita Modulo Modale' sarà attiva.
Successivamente, puoi scorrere verso il basso e selezionare quale file CSS caricare per il tuo sito. Ad esempio, SearchWP Modal Search Form ti permetterà di scegliere tra posizionamento e stile visivo, stile di posizionamento o nessun stile.
Consigliamo di utilizzare l'impostazione predefinita 'Posizionamento e stile visivo'. In questo modo, avrai un maggiore controllo su dove apparirà il modulo di ricerca e come sarà visualizzato.
Inoltre, ci sono anche opzioni per abilitare la modalità a schermo intero e disabilitare lo scorrimento.
La Modalità Schermo Intero coprirà l'intero schermo quando un utente apre il modulo, offrendo un'esperienza senza distrazioni.
Puoi anche abilitare l'opzione Disabilita Scorrimento. Questo migliora ulteriormente l'esperienza di ricerca riducendo il movimento dello sfondo quando un utente scorre accidentalmente.
Al termine, fai semplicemente clic sul pulsante 'Salva Impostazioni'.
Visualizzare il Modulo di Ricerca Modale sul Tuo Sito Web
Successivamente, dovrai visualizzare il modulo di ricerca modale ovunque sul tuo sito web. SearchWP ti consente di aggiungere il modulo al menu del tuo sito, utilizzare un blocco Gutenberg o uno shortcode.
Esaminiamo ciascun metodo per mostrare il modulo di ricerca modale in WordPress.
1. Aggiungere un Modulo di Ricerca Modale al Menu di WordPress
A seconda del tuo tema WordPress, puoi aggiungere il modulo di ricerca modale a qualsiasi menu del tuo sito.
Vai semplicemente su Aspetto » Menu dalla dashboard di WordPress. SearchWP aggiungerà ora un nuovo gruppo chiamato 'Moduli di Ricerca Modale SearchWP' sotto le voci di menu.
Procedi e seleziona il modulo modale e fai clic sul pulsante 'Aggiungi al menu'.
Al termine, non dimenticare di fare clic sul pulsante 'Salva Menu'.
Dopodiché, puoi visitare il tuo sito per vederlo in azione.
2. Visualizzare il Modulo di Ricerca Modale nei Post del Blog e nelle Pagine
Puoi anche aggiungere il modulo di ricerca modale a qualsiasi post del blog o pagina di destinazione utilizzando il blocco Gutenberg o uno shortcode. Questo è perfetto se vuoi mostrare un'opzione di ricerca all'interno del contenuto del tuo sito.
Per prima cosa, dovrai visitare la pagina o il post in cui desideri mostrare il modulo di ricerca. Una volta nell'editor dei contenuti, fai semplicemente clic sul pulsante '+' e aggiungi il blocco 'Modulo Modale'.
Successivamente, puoi modificare le impostazioni del blocco Modulo Modale dal pannello a destra.
Ad esempio, ci sono opzioni per cambiare il testo, scegliere un modello e selezionare se il modulo sarà un link o un pulsante.
Al termine, fai semplicemente clic sul pulsante Salva o Pubblica.
Da qui, puoi visitare la pagina o il post per vedere il modulo modale all'interno del tuo contenuto.
Se preferisci usare gli shortcode, puoi inserire il seguente shortcode per visualizzare il modulo modale ovunque sul tuo sito.
[searchwp_modal_search_form]
Puoi anche applicare personalizzazioni che controllano vari attributi del modale stesso. Ad esempio, il seguente shortcode mostrerà un pulsante con il testo 'Apri Ricerca':
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
Puoi modificare ogni attributo nello shortcode per personalizzare il modulo di ricerca modale. Ad esempio, sostituisci semplicemente il tipo con un link se non vuoi mostrare un pulsante e modifica il testo.
3. Mostrare il Modulo di Ricerca Modale nell'Area Widget
Puoi anche aggiungere un modulo di ricerca modale all'area widget del tuo tema WordPress, come la barra laterale o il piè di pagina.
Per iniziare, vai semplicemente su Aspetto » Widget dal pannello di amministrazione di WordPress. Successivamente, puoi fare clic sul pulsante '+' e aggiungere il blocco widget Modulo Modale.
Successivamente, vedrai diverse opzioni per modificare le impostazioni del modulo modale nel pannello a destra.
Ci sono opzioni per cambiare il testo, scegliere un modello e cambiarlo da link a pulsante.
Al termine, fai clic sul pulsante 'Aggiorna'.
Da qui, puoi visitare il tuo sito e vedere il modulo modale nell'area dei widget. Ad esempio, lo abbiamo aggiunto alla barra laterale del nostro sito demo.
Cosa fare dopo…
Ora che sai come aggiungere facilmente un modulo di ricerca modale al tuo sito, puoi fare un passo avanti e migliorare l'esperienza di ricerca complessiva per i tuoi visitatori.
La ricerca predefinita di WordPress ha molte limitazioni e non include informazioni come categorie, tag, campi personalizzati, dettagli del prodotto e altro nel processo di ricerca. Tuttavia, puoi cambiarlo utilizzando SearchWP e sostituire le impostazioni di ricerca predefinite.
Il plugin ti aiuterà a creare motori di ricerca personalizzati illimitati per il tuo sito web, impostare moduli di ricerca personalizzati e includere tassonomie, campi personalizzati, file multimediali e altre informazioni importanti quando cerchi contenuti sul tuo sito.
La parte migliore è che puoi usare il plugin SearchWP Modal Search Form con SearchWP e sfruttare tutto il potenziale della ricerca del tuo sito web.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un modulo di ricerca modale in WordPress. Potresti anche voler consultare la nostra guida su come creare un modello di pagina dei risultati di ricerca Divi e come impostare le impostazioni di ricerca di WordPress per ottenere i migliori risultati.
Pronto a creare un'esperienza di ricerca WordPress migliore e più personalizzata? Inizia oggi stesso con SearchWP!
