Vai al contenuto principale

Aspetto

La pagina Aspetto ti consente di personalizzare l'aspetto generale e l'atmosfera del tuo sito web della chiesa. Dai colori e ai caratteri alla spaziatura e CSS personalizzati, puoi controllare ogni aspetto visivo del tuo sito da un unico posto.

Prima di Iniziare

  • Completa la Configurazione Iniziale del tuo sito web
  • Tieni pronto il logo della tua chiesa in formato PNG con sfondo trasparente e un rapporto di aspetto 4:1
  • Conosci i colori del marchio della tua chiesa (valori esadecimali) se hai una guida di stile esistente

Accesso alle Impostazioni di Aspetto​

  1. In B1 Admin, fai clic su Sito Web nel menu a sinistra.
  2. Fai clic sulla scheda Aspetto in cima alla vista Pagine del Sito Web.
  3. La pagina Stili del Sito si carica con un'anteprima dal vivo del tuo sito web a sinistra e le opzioni Impostazioni di Stile a destra.

Tavolozza dei Colori​

  1. Fai clic su Tavolozza dei Colori nel pannello Impostazioni di Stile.
  2. Vedrai Colori Base (sfumature chiare, accentate e scure) e Colori Semantici (Primario, Secondario, Successo, Avvertenza e Errore).
  3. Fai clic su qualsiasi campione di colore per aprire il selettore di colore. Trascina il selettore o inserisci un valore esadecimale per scegliere il tuo colore.
  4. L'Anteprima delle Combinazioni di Colori mostra come i tuoi colori selezionati funzionano insieme.
  5. Usa Tavolozze Consigliate per applicare rapidamente uno schema di colori predesignato.
  6. Fai clic su Salva quando sei soddisfatto.

Tipografia​

  1. Fai clic su Impostazioni di Tipografia nel pannello Impostazioni di Stile.
  2. Fai clic su Seleziona un Carattere per aprire il browser dei caratteri. Puoi cercare per nome o navigare per categorie come Serif, Sans Serif, Display, Handwriting e Monospace.
  3. Imposta i caratteri sia per i titoli che per il testo del corpo.
  4. Fai clic su Scala Tipografica per regolare la gerarchia delle dimensioni per i Titoli da 1 a 4. Usa i campi del moltiplicatore della scala e della dimensione di base per perfezionare.
  5. Fai clic su Salva per applicare le tue scelte di caratteri.

Spaziatura​

  1. Fai clic su Scala di Spaziatura nel pannello Impostazioni di Stile.
  2. Regola i valori di spaziatura da Extra Piccolo a Extra Grande. Gli esempi pratici mostrano come ogni valore influisce sul layout.
  3. Fai clic su Salva Spaziatura per applicare i valori su tutto il tuo sito.

Logo e Branding​

  1. Fai clic su Logo nel pannello Impostazioni di Stile.
  2. Carica il Logo Sfondo Chiaro e Logo Sfondo Scuro. Usa le immagini con sfondo trasparente e un rapporto di aspetto 4:1 per i migliori risultati.
  3. Carica un'Immagine per i Social Media per le anteprime dei link e una Favicon per l'icona della scheda del browser.
Suggerimento

Per i migliori risultati, usa un logo con sfondo trasparente in formato PNG. Questo assicura che appaia bene sia su sfondi chiari che scuri su tutto il tuo sito web e app mobile.

Stili di Navigazione​

Personalizza i colori della barra di navigazione del tuo sito web sia per i modi solido che trasparente:

  1. Scorri fino alla sezione Stili di Navigazione
  2. Fai clic su Modifica Stili di Navigazione
  3. Configura i colori per la navigazione solida (con sfondo) e la navigazione trasparente (modo overlay)
  4. Fai clic su Salva per applicare i tuoi colori di navigazione

Per istruzioni dettagliate, vedi Stili di Navigazione.

CSS e JavaScript Personalizzati​

  1. Fai clic su CSS e Javascript nel pannello Impostazioni di Stile.
  2. Aggiungi CSS Personalizzato per eseguire l'override degli stili predefiniti per la personalizzazione avanzata.
  3. Aggiungi HTML Personalizzato per i codici di tracciamento o altri script.
  4. Usa la sezione Esempi Javascript Comuni per i frammenti come l'integrazione di Google Analytics.
Avviso

Il CSS personalizzato è potente ma può rompere il layout del tuo sito se usato in modo errato. La maggior parte delle chiese può ottenere l'aspetto che desidera utilizzando i controlli di colore, carattere e spaziatura incorporati. Usa solo CSS personalizzato se sei a tuo agio con lo sviluppo web.

Temi di Stile​

Se desideri un punto di partenza veloce, le Tavolozze Consigliate nella sezione Tavolozza dei Colori offrono temi precostruiti che impostano i colori coordinati in un clic. Puoi sempre perfezionare le impostazioni individuali dopo aver applicato un tema.

Passaggi Successivi​

  • Gestione delle Pagine -- Crea e organizza le pagine del tuo sito web
  • File -- Carica le risorse multimediali per il tuo sito