Personalizzare la barra di ricerca del sito
Tempo di lettura: 4 min.
Consenti ai tuoi visitatori di cercare qualsiasi cosa sul tuo sito utilizzando la barra di ricerca di Wix Site Search. I risultati della ricerca vengono visualizzati in un elenco, in modo che i tuoi visitatori possano trovare facilmente ciò che stanno cercando. Puoi modificare il layout e il design della barra di ricerca in modo che corrisponda al design del tuo sito.
In questo articolo scopri di più su come:
Personalizzare le impostazioni della barra di ricerca
Personalizza il testo placeholder della barra di ricerca e i suggerimenti sui risultati.
Per personalizzare le impostazioni della barra di ricerca:
- Clicca sulla barra di ricerca nell'Editor
- Clicca su Impostazioni
- Personalizza le opzioni delle impostazioni:
- Testo placeholder: aggiungi un breve testo che viene visualizzato quando la barra di ricerca è vuota
Nota: questo testo scompare quando il visitatore del sito inizia a digitare nella barra di ricerca - Suggerimenti su risultati: abilita o disabilita la visualizzazione dei suggerimenti sui risultati quando un utente inizia a digitare
- Articoli di tendenza: abilita o disabilita la visualizzazione degli articoli di tendenza prima che un utente inizi a digitare
Nota: l'abilitazione degli articoli di tendenza è possibile solo se sono abilitati anche i suggerimenti sui risultati
- Testo placeholder: aggiungi un breve testo che viene visualizzato quando la barra di ricerca è vuota
Modificare il layout della barra di ricerca
Imposta il layout, l'allineamento e la spaziatura sulla barra di ricerca dal pannello Layout.
Per modificare il layout della barra di ricerca:
- Clicca sulla barra di ricerca nell'Editor
- Clicca sull'icona Layout
- Personalizza le opzioni di layout:
- Scegli un layout: scegli uno stile per la tua barra di ricerca
- Allineamento icona: seleziona la posizione dell'icona di ricerca
- Allineamento del testo: seleziona la posizione del testo
- Spaziatura testo: imposta lo spazio tra il bordo della barra di ricerca e il testo
- Spaziatura icona: imposta la dimensione dell'area dell'icona
Nota:
Le opzioni disponibili variano a seconda del layout scelto.
Personalizzare il design della barra di ricerca
Personalizza il design della barra di ricerca per i diversi stati:
- Regolare: quando la barra non è in uso
- Passaggio mouse: quando i visitatori passano il mouse sulla barra
- Focus: quando i visitatori hanno cliccato sulla barra
Per personalizzare il design della tua barra di ricerca:
- Clicca sulla barra di ricerca nell'Editor
- Clicca sull'icona Design
- Seleziona un design predefinito
- Clicca su Personalizza design per personalizzarlo ulteriormente
- Clicca su una scheda per scegliere lo stato che desideri personalizzare; Regolare, Passaggio mouse o Focus
- Personalizza lo stato utilizzando le opzioni disponibili:
- Colore e opacità: cambia il colore dello sfondo della barra e dell'icona:
- Sfondo campo input: clicca sulla casella del colore per selezionare il colore dello sfondo del campo di input e trascina il cursore per aumentare o diminuire l'opacità
- Sfondo tasto: clicca sulla casella del colore per selezionare il colore dello sfondo dell'icona di ricerca e trascina il cursore per aumentare o diminuire l'opacità
- Tasto icona: clicca sulla casella del colore per selezionare il colore dell'icona di ricerca e trascina il cursore per aumentare o diminuire l'opacità
- Bordo: aggiungi e personalizza un bordo per la barra:
- Opacità e colore: clicca sulla casella del colore per selezionare il colore del bordo e trascina il cursore per aumentare o diminuire l'opacità
- Stile del bordo: seleziona lo stile del bordo e su quali lati viene visualizzato
- Larghezza: trascina il cursore per rendere il bordo più spesso o più sottile
- Angoli: curva gli angoli della barra:
- Inserisci un valore in un angolo o clicca sull'icona Lucchetto per modificare tutti i valori insieme
- Ombra: aggiungi un'ombra alla barra:
- Clicca sull'interruttore Attiva ombra per aggiungere un'ombra
- Personalizza l'ombra utilizzando le opzioni:
- Angolo: seleziona l'angolo dell'ombra
- Distanza: trascina il cursore per aumentare o diminuire la distanza dell'ombra
- Dimensione: trascina il cursore per aumentare o diminuire la dimensione dell'ombra
- Sfocatura: trascina il cursore per aumentare o diminuire la sfocatura dell'ombra
- Opacità e colore: clicca sulla casella del colore per selezionare il colore dell'ombra e trascina il cursore per aumentare o diminuire l'opacità dell'ombra
- Testo: formatta il testo sulla barra:
- Colore del placeholder: clicca sulla casella del colore per selezionare il colore del placeholder e trascina il cursore per aumentare o diminuire l'opacità
- Colore testo: clicca sulla casella del colore per selezionare il colore del testo di input
- Tema: clicca sul menu a tendina e seleziona il tema del testo
- Carattere: clicca sul menu a tendina e seleziona il carattere del testo
- Dimensione carattere: trascina il cursore per impostare la dimensione del testo
- Grassetto/Corsivo: clicca sulle opzioni per formattare il testo
- Colore e opacità: cambia il colore dello sfondo della barra e dell'icona:
Modifica la posizione della barra di ricerca:
Per riposizionare la barra di ricerca, clicca e trascinala nell'intestazione o nel piè di pagina del tuo sito.
Hai trovato utile questo articolo?
|