Come aggiungere un campo di ricerca al menu secondario Divi

Senza un campo di ricerca, la navigazione del tuo sito ne risentirà. Potresti avere l'esperienza di navigazione più solida su Internet, ma se i tuoi utenti non riescono a cercare esattamente quello che stanno cercando, rischi (e probabilmente perderai) affari. Questo tutorial ti guiderà nell'aggiunta di una casella di ricerca al menu secondario Divi in ​​modo che, in ogni caso, i tuoi utenti saranno sempre a pochi clic di distanza da tutto ciò di cui hanno bisogno.

Panoramica della casella di ricerca Divi

ufficio

Mobile

Scarica e/o modifica l'intestazione globale

Per questo articolo, utilizzeremo l'intestazione/piè di pagina gratuiti forniti con il nostro pacchetto di layout per la consegna della spesa. Puoi semplicemente scaricare il .Zip *: francese archiviare ed estrarre il necessario .json file sul tuo computer.

Dopodiché vai alla dashboard di WordPress e vai a Divi - Generatore di temi. Da lì devi fare clic su icona frecce su e giù per aprire le opzioni di portabilità.

Nella nuova modalità, fai clic su importazione scheda e trova il .json file che hai scaricato. Quando sei pronto, seleziona Importa modelli builder da Tema Divi per avviare il download.

A questo punto sei pronto per entrare nel Intestazione globale parte di Modello di sito web per impostazione predefinita,. Importare da .json file dovrebbe aver applicato automaticamente l'omaggio come intestazione generale del sito.

Aggiungi un campo di ricerca alla barra dei menu secondaria

Usando Divi Visual Builder, dovresti vedere qualcosa di simile a questo come intestazione globale.

La prima cosa che vogliamo fare è creare spazio per il campo di ricerca. Vogliamo assicurarci che il campo di ricerca sia facilmente accessibile a tutti. Visitatori, quindi lo aggiungeremo al menu secondario (sopra il file Home / Contatti linea).

Per cominciare, aggiungeremo la casella di ricerca utilizzando il Modulo di ricerca Divi nella terza colonna della prima riga.

Il testo segnaposto è importante per i campi di ricerca, quindi quando il modulo è a posto, vai a Parametri e imposta il tuo Area riservata testo a qualcosa che ricordi all'utente cosa cercare. Mettiamo Trova gli oggetti! come segnaposto in modo che l'utente sappia che questo è ciò che può cercare poiché stiamo utilizzando il pacchetto di layout di consegna della spesa.

La casella di ricerca nella terza colonna non è buona. Quindi vogliamo inserire il Modulo di ricerca impostazioni e vai su Disegno lingua. Trovalo trasformatore opzioni, quindi vai a tradurre scheda (la seconda). Puoi quindi trascinare il modulo di ricerca in posizione e Divi gestirà tutto il CSS e la spaziatura per esso.

Usiamo anche% per questo valore in modo che rimanga relativo indipendentemente dalla finestra sul desktop. Usando pixels potrebbe distorcere alcune risoluzioni diverse.

Divi Trasformatore Traduci anche le opzioni devono essere regolate per il cellulare. Se non lo fai, è lo stesso. Quindi assicurati di andare al reattività impostazioni e impostare la posizione del modulo di ricerca nelle opzioni del menu secondario. Abbiamo appena regolato il posizionamento verticale del cellulare perché posizionandolo nella terza colonna della riga lo mostra automaticamente nella parte inferiore degli elementi della riga.

Disegnare il modulo di ricerca Divi

Anche se non hai molte opzioni di stile per una casella di ricerca, ne hai alcune. Ovvero il colore del testo e del campo stesso, sia quando è inattivo sia quando un utente ci ha cliccato sopra. (E spaziatura e dimensionamento e altre opzioni di progettazione Divi standard, ovviamente.)

Per trovare le opzioni di colore, vai su Champ menu nel Disegno lingua. Una volta espanso, hai la possibilità di modificare il colore del testo del segnaposto, il colore di sfondo del campo e il colore del testo del campo (testo inserito dall'utente, cioè da dire). Inoltre il concentrare le variazioni si verificano quando l'utente interagisce specificamente con la casella di ricerca.

Quando questo è in stile a tuo piacimento, fai clic sul pulsante Salva.

Controlla le impostazioni di visibilità

Alcuni dei nostri pacchetti di layout e intestazioni gratuiti sono dotati di diverse opzioni di visualizzazione per desktop e dispositivi mobili. Se vedi mod in grigio/disattivo nel visual builder, indica che il mod è disabilitato su alcuni dispositivi.

Per l'intestazione della consegna della spesa, le ultime due colonne sono disattivate sui dispositivi mobili. Vogliamo entrare nel Impostazioni linea e clicca sulle impostazioni delle colonne che vuoi visualizzare sul cellulare. In questo caso è il terzo.

Allora vai su progresso lingua e vai a visibilità opzione. Qui, assicurati che tutte le opzioni sotto disattivare siamo deselezionato per la colonna contenente il campo di ricerca. Fare clic sul pulsante Salva (segno di spunta verde), e i moduli dovrebbero apparire a colori e non essere più scoloriti.

Una volta che ti sei assicurato che tutto sia visibile, sei pronto per mettere questa cosa online!

Salva vostro laboro

Assicurati di fare clic su pulsante verde salva in basso a destra dello schermo.

Ora sei pronto per chiudere il generatore visivo usando la X nell'angolo in alto a destra. Nella schermata successiva, assicurati che Divi Theme Builder abbia salvato tutte le tue opzioni. Se dice Salva le modifiche, Fare clic sul pulsante. Se dice Tutte le modifiche salvate, allora il tuo campo di ricerca è già attivo nel tuo menu secondario Divi.

Risultati finali

Non resta che ammirare il tuo lavoro sul tuo sito!

ufficio

Mobile

Conclusione con il campo di ricerca Divi

Le caselle di ricerca sono una parte fondamentale di una buona esperienza utente per il tuo sito. Se vuoi fornire il miglior servizio possibile al tuo Visitatori, assicurarti che i tuoi contenuti siano disponibili per la ricerca dovrebbe essere una delle tue massime priorità. Spero che tu possa utilizzare questo metodo semplice e veloce e applicarlo presto al tuo sito Divi!