Vai al contenuto principale

Come aggiungere un campo di ricerca al menu secondario Divi

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]

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

versione mobile della casella di ricerca di divi

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.

json file

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à.

generatore di temi per la casella di ricerca divi

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

importare file

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

intestazione globale

Aggiungi un campo di ricerca alla barra dei menu secondaria

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

editor di intestazione globale

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

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]

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

modulo di ricerca nella terza colonna

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.

testo segnaposto all'interno della casella di ricerca divi

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.

opzioni di trasformazione

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

trasforma per cellulare

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.

stile casella di ricerca

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

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]

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.

opzioni di linea

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.

campo di ricerca

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

Salva il tuo lavoro

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

salva le modifiche

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.

casella di ricerca divi salva le modifiche

Risultati finali

Non resta che ammirare il tuo lavoro sul tuo sito!

ufficio

versione desktop

Mobile

versione 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 ai tuoi visitatori, assicurarti che i tuoi contenuti siano ricercabili dovrebbe essere una delle tue priorità principali. Spero che tu possa usare questo metodo semplice e veloce e applicarlo presto al tuo sito Divi!



Fonte

Questo articolo contiene i commenti 0

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
0 azioni
quota
Tweet
Enregistrer