Vai al contenuto principale

Tutorial Divi: come usare il modulo di ricerca

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Utilizzando il modulo di ricerca, puoi inserire un modulo di ricerca ovunque sul tuo sito. Questo modulo di ricerca consentirà ai tuoi visitatori di cercare in tutti i contenuti del tuo sito web, comprese tutte le pagine e i post del blog. Questo ti dà la funzionalità del widget di ricerca di WordPress con la flessibilità offerta da Divi Builder. Non solo puoi controllare il posizionamento dei moduli di ricerca sulla pagina, ma anche personalizzarne il design.

Come aggiungere un modulo di ricerca alla tua pagina

Prima di poter aggiungere un modulo di ricerca alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

costruttore di divi

Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.

divi.png modulo di ricerca

Individua il modulo di ricerca nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "cerca" e quindi fare clic su Invio per cercare e aggiungere automaticamente il modulo di ricerca! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Esempio di caso d'uso: aggiunta di un modulo di ricerca personalizzato a una pagina del blog a larghezza intera

Per questo esempio, ti mostrerò come aggiungere un modulo di ricerca come invito all'azione principale nella parte superiore di una pagina del blog. Ciò consente agli utenti di cercare facilmente i contenuti del tuo blog senza confusione.

Questa pagina ha un'intestazione a larghezza intera in alto con il modulo di ricerca direttamente sotto. Sotto il modulo di ricerca c'è un modulo blog che utilizza il layout a griglia.

esempio blog con modulo di ricerca divi.jpg

Utilizzando Visual Builder, aggiungi una nuova sezione standard alla pagina del blog con una riga a larghezza intera (1 colonna). Quindi inserisci il modulo di ricerca nella riga.

Aggiorna le impostazioni del modulo di ricerca come segue:

Opzioni di contenuto

Testo riservato: Cerca nel nostro blog ...
Nascondi il pulsante: SÌ

Opzioni di design

Colore di sfondo del campo di input: # f8f8f8
Colore segnaposto: # 888888
Dimensione carattere di input: 16px
Colore del testo di input: # 888888
Altezza della linea di entrata: 1em
Imbottitura personalizzata: 20px Top, 20px Bottom

divi search configuration content.png

Salva le impostazioni

Ora torna indietro per modificare la larghezza della riga contenente il modulo di ricerca. Nella scheda Progettazione delle impostazioni della linea, assegna alla linea una larghezza personalizzata di 300 px. Ciò manterrà il modulo di ricerca compatto e concentrato sulla pagina.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

configurazione divi.png larghezza

Questo è tutto!

Cerca opzioni di contenuto

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.

ricerca modulo divi contenu.png

Testo segnaposto

Digita il testo che desideri utilizzare come segnaposto per il campo di ricerca.

Nascondi pulsante

Se abiliti questa opzione, il pulsante Cerca sarà nascosto.

Escludi pagine

Se abiliti questa opzione, le pagine verranno escluse dai risultati della ricerca.

Esclusione di oggetti

Abilitando questa opzione si escluderanno i messaggi dai risultati della ricerca.

Escludi categorie

Scegli le categorie che desideri escludere dai risultati di ricerca.

Etichetta amministrativa

Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.

Cerca opzioni di progettazione

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.

divi search design.png

Colore di sfondo del campo di input

Qui puoi cambiare il colore di sfondo della barra di ricerca.

Segnaposto Colore

Prima che il campo di ricerca venga utilizzato, il testo segnaposto esiste all'interno del campo. Se hai regolato il colore di sfondo del campo, puoi anche regolare il colore del testo segnaposto per assicurarti che sia leggibile.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Colore del testo

Qui puoi scegliere il valore del tuo testo. Se stai lavorando su uno sfondo scuro, il tuo testo dovrebbe essere acceso. Se stai lavorando con uno sfondo chiaro, il tuo testo dovrebbe essere scuro.

Orientamento del testo

Questo controlla come il testo è allineato nel modulo.

Polizia di ingresso

È possibile modificare il carattere del testo di input selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Immettere la dimensione del carattere

Qui puoi regolare la dimensione del testo di input. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Colore del testo di input

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo di input, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo di input, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della linea

L'altezza della riga influisce sullo spazio tra ogni riga del testo di input.Se desideri aumentare lo spazio tra ogni riga, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo. voce a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Colore pulsante e bordo

Questo cambierà lo sfondo e il colore del bordo del pulsante di ricerca.

Carattere del pulsante

È possibile modificare il carattere del testo del pulsante selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del pulsante

Qui puoi regolare la dimensione del testo del pulsante. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Colore del testo del pulsante

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del pulsante, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere del pulsante

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della linea del pulsante

L'altezza della riga influisce sullo spazio tra ogni riga del testo del pulsante Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Larghezza massima

Per impostazione predefinita, la larghezza massima della barra di ricerca è impostata su 100%. Ciò significa che la barra di ricerca verrà visualizzata alla sua larghezza naturale a meno che la larghezza della barra di ricerca non superi la larghezza della colonna principale, nel qual caso la barra di ricerca sarà limitata al 100% della larghezza della colonna. Se desideri limitare ulteriormente la larghezza massima della barra di ricerca, puoi farlo inserendo qui il valore di larghezza massima desiderato. Ad esempio, un valore del 50% limita la larghezza della barra di ricerca al 50% della larghezza della colonna padre.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto o a sinistra ea destra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Imbottitura personalizzata

Il riempimento è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Opzioni avanzate del modulo di ricerca

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

moduli di opzioni avanzate divi search.png

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Altri tutorial di Divi

Questo articolo contiene i commenti 4

  1. Buongiorno,

    Grazie per questo articolo.
    C'è un punto che non hai affrontato (e purtroppo è proprio questo il punto che mi pone un problema ...):

    Quando si sceglie di visualizzare il pulsante di ricerca, per impostazione predefinita il testo del pulsante è "Cerca" e, vorrei sapere, come posso modificare questo testo per personalizzarlo? Non importa quanto guardassi attentamente, non ho trovato alcun campo o spazio in cui sia possibile apportare questo cambiamento ...

    Grazie in anticipo per il vostro aiuto !

  2. Ciao, grazie per l'articolo. Ho una domanda, il modulo di ricerca può essere utilizzato solo per una sezione di una pagina? ad esempio per la sezione FAQ, vorrei impostare un form di ricerca limitato alle sole domande delle FAQ (+ 20 domande) in questo modo l'utente non deve leggerle tutte ma trova solo grazie al form di ricerca quelli con le parole chiave a cui tiene. Grazie in anticipo per la sua risposta.

  3. Grazie per questo articolo, bello rimuovere le pagine dal modulo di ricerca, ma puoi anche escludere le pagine quando fai una ricerca con la lente d'ingrandimento dell'intestazione ?? grazie

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
21 azioni
quota12
Tweet2
Enregistrer7