Vai al contenuto principale

Stili Navigazione

Personalizza i colori della barra di navigazione del tuo sito web della chiesa per corrispondere al tuo marchio. Puoi configurare i colori sia per gli sfondi solidi che per gli overlay trasparenti, dandoti il controllo completo su come la tua navigazione appare su diverse pagine.

Prima di Iniziare

  • Hai bisogno del permesso per gestire il sito web della tua chiesa. Vedi Ruoli e Permessi per i dettagli.
  • Tieni pronti i colori del tuo marchio, inclusi i codici di colore esadecimali (ad es., #03A9F4).
  • Comprendi la differenza tra gli stili di navigazione solida e trasparente sul tuo sito web.

Comprensione delle Modalità Navigazione​

La navigazione del tuo sito web può apparire in due stili diversi a seconda della pagina:

  • Navigazione solida -- Barra di navigazione con un colore di sfondo, tipicamente utilizzato su pagine di contenuto
  • Navigazione trasparente -- Navigazione che si sovrappone al contenuto della pagina, tipicamente utilizzato su pagine con immagini hero o sfondi a schermo intero

Puoi personalizzare i colori per entrambe le modalità indipendentemente.

Accesso agli Stili Navigazione​

  1. In B1 Admin, apri il menu Jump (la barra di ricerca in alto a sinistra) e espandi Website
  2. Fai clic su Appearance
  3. Nell'elenco Impostazioni Stile, fai clic su Navigation

L'editor Navigation Styling ha due schede: Header (solid) e Header over hero (transparent).

Configurazione Navigazione Solida​

La navigazione solida appare con un colore di sfondo dietro la barra di navigazione. Queste impostazioni si trovano nella scheda Header (solid). Puoi personalizzare:

Colore Sfondo​

  1. Attiva l'interruttore Sovrascrivi per il Colore Sfondo
  2. Fai clic sul selezionatore di colore
  3. Scegli il colore di sfondo desiderato
  4. L'impostazione predefinita è bianco (#FFFFFF)
  1. Attiva l'interruttore Sovrascrivi per il Colore Link
  2. Scegli il colore per il testo del link di navigazione
  3. Questo influisce sui link nel loro stato predefinito
  4. L'impostazione predefinita è grigio scuro (#555555)
  1. Attiva l'interruttore Sovrascrivi per il Colore Hover Link
  2. Scegli il colore in cui i link cambiano quando gli utenti li passano sopra
  3. Questo fornisce un feedback visivo per i link cliccabili
  4. L'impostazione predefinita è blu chiaro (#03A9F4)

Colore Attivo​

  1. Attiva l'interruttore Sovrascrivi per il Colore link attivo
  2. Scegli il colore per il link della pagina attualmente attiva
  3. Questo aiuta gli utenti a sapere su quale pagina si trovano
  4. L'impostazione predefinita è blu chiaro (#03A9F4)

Configurazione Navigazione Trasparente​

La navigazione trasparente si sovrappone al contenuto della tua pagina senza sfondo. Queste impostazioni si trovano nella scheda Header over hero (transparent). Puoi personalizzare:

  1. Attiva l'interruttore Sovrascrivi per il Colore Link
  2. Scegli un colore che contrasta bene con lo sfondo della tua pagina
  3. Spesso i colori bianchi o chiari funzionano meglio su sfondi scuri
  4. L'impostazione predefinita è grigio scuro (#555555)
  1. Attiva l'interruttore Sovrascrivi per il Colore Hover Link
  2. Scegli il colore dello stato hover
  3. Assicurati che sia visibile rispetto allo sfondo della tua pagina
  4. L'impostazione predefinita è blu chiaro (#03A9F4)

Colore Attivo​

  1. Attiva l'interruttore Sovrascrivi per il Colore link attivo
  2. Scegli il colore dell'indicatore di pagina attiva
  3. Dovrebbe risaltare mentre si adatta ancora al tuo design
  4. L'impostazione predefinita è blu chiaro (#03A9F4)
Info

La navigazione trasparente non ha un'impostazione del colore di sfondo poiché si sovrappone direttamente al contenuto della pagina.

Salvataggio delle Modifiche​

  1. Dopo aver configurato i tuoi colori, fai clic su Salva Navigazione
  2. Le tue modifiche si applicano immediatamente al tuo sito web live
  3. Visita il tuo sito web per vedere la navigazione in entrambe le modalità

Ripristino ai Valori Predefiniti​

Se desideri tornare ai colori predefiniti:

  1. Disattiva gli interruttori Sovrascrivi per eventuali colori personalizzati
  2. Fai clic su Salva Navigazione
  3. La navigazione torna allo schema di colore predefinito

Oppure fai clic su Annulla per scartare tutte le modifiche senza salvarle.

Migliori Pratiche​

Contrasto Colore​

  • Leggibilità -- Assicurati che i colori dei link abbiano un contrasto sufficiente con lo sfondo
  • Conformità WCAG -- Punta a un rapporto di contrasto di almeno 4,5:1 per l'accessibilità
  • Prova entrambe le modalità -- Visualizza l'anteprima del tuo sito con navigazione solida e trasparente

Coerenza del Marchio​

  • Usa i colori del tuo marchio -- Abbina il tuo logo e il tema del sito web
  • Limita la tua tavolozza -- Mantieniti a 2-3 colori per un aspetto coeso
  • Considera le tue immagini -- Se usi la navigazione trasparente, testala rispetto ai sfondi delle pagine tipiche

Hover e Stati Attivi​

  • Feedback chiaro -- Rendi gli stati hover ovviamente diversi dai link predefiniti
  • Distingui le pagine attive -- Usa un colore distinto in modo che gli utenti sappiano dove si trovano
  • Transizioni fluide -- Il sistema anima automaticamente le modifiche dei colori

Risoluzione Problemi​

I Colori Non Sembrano Giusti​

  • Svuota la cache -- La memorizzazione nella cache del browser potrebbe mostrare i colori precedenti
  • Controlla i codici esadecimali -- Assicurati di aver inserito codici di colore esadecimali validi
  • Prova su sfondi diversi -- I colori potrebbero apparire diversi a seconda della pagina
  • Modalità trasparente -- Se usi la navigazione trasparente su immagini chiare, il testo scuro potrebbe essere difficile da vedere
  • Soluzione -- Regola i colori del link o usa sfondi di pagina più scuri
  • Alternativa -- Aggiungi un'ombra sottile o un overlay di sfondo all'area di navigazione

Dettagli Tecnici​

Gli stili di navigazione vengono archiviati come JSON e applicati utilizzando variabili CSS:

  • Le modifiche hanno effetto immediato senza ricostruire il sito
  • I colori si diffondono a tutti gli elementi di navigazione
  • Le sostituzioni sono opzionali; i colori non impostati usano i valori predefiniti del tema

Articoli Correlati​