Usando il modulo di ricerca, puoi posizionare a forma cerca ovunque sul tuo sito. Questo forma la ricerca consentirà ai tuoi visitatori di cercare tutti i contenuti del tuo sito Web, comprese tutte le pagine e i post del blog. Questo ti offre la funzionalità del widget di ricerca di WordPress con la flessibilità offerta da Divi Builder. Non puoi solo controllare la posizione di forme cercare nella 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 il Tema Divi installato 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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Altri tutorial di Divi

• siti 5 che utilizzano Divi ristorante a tema
• Come aggiungere testo su un prodotto Divi WooCommerce
• Come cambiare il colore del menu tra le pagine Divi
• Come personalizzare le griglie di un blog con Divi
• Come utilizzare il ruolo di Editor Divi su WordPress
• Come creare un dispositivo di scorrimento Divi a schermo intero
• Come cambiare il colore dei menu tra le pagine di Divi
• Funzionalità che probabilmente non conosci su Divi
• Come usare Divi Builder su WordPress
• Come usare il modulo di scorrimento video Divi
• Come utilizzare il modulo Divi Builder Flip
• Come aggiungere un modulo di testimonianza su Divi Builder
• Come usare il modulo di testo Divi
• Come creare un dispositivo di scorrimento su Divi
• Come modificare un ruolo utente Divi
• Come usare il modulo Divi Social Media
• Come utilizzare il modulo negozio sul tema WordPress Divi
• Come utilizzare il modulo barra laterale Divi
• Come utilizzare il modulo Tabella prezzi Divi
• Come utilizzare il modulo del titolo delle pubblicazioni Divi
• Come aggiungere un modulo video di Divi
• Come utilizzare il modulo di navigazione dell'articolo
• Come usare il modulo di ricerca Divi
• Come utilizzare il modulo portafoglio Divi
• Come usare il modulo persona su Divi Builder
• Come usare il modulo portafoglio con filtro Divi
• Come utilizzare il modulo di scorrimento a larghezza piena
• Come utilizzare il modulo immagine Divi Builder
• Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
• Come utilizzare il modulo della galleria di immagini
• Come utilizzare il modulo Divi Builder Full-Width Card
• Come utilizzare il modulo Divi Full Width Portfolio
• Come utilizzare il modulo di intestazione a tutta larghezza Divi
• Come utilizzare il modulo contatore Divi
• Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
• Come utilizzare il modulo Divi Email Optin