Vai al contenuto principale

Aspetto

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

Prima di Iniziare

  • Completa la Configurazione Iniziale per il 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 già una guida di stile

Accesso alle Impostazioni di Aspetto​

  1. In B1 Admin, clicca su Sito Web nel menu a sinistra.
  2. Clicca sulla scheda Aspetto nella parte superiore della vista Pagine 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.

Palette di Colori​

  1. Clicca su Palette di Colori nel pannello Impostazioni di Stile.
  2. Vedrai Colori Base (tonalità chiare, accentate e scure) e Colori Semantici (Primario, Secondario, Successo, Avvertimento ed Errore).
  3. Clicca su qualsiasi campione di colore per aprire il selettore colori. Trascina il selettore o inserisci un valore esadecimale per scegliere il tuo colore.
  4. L'Anteprima Combinazioni di Colori mostra come i tuoi colori selezionati funzionano insieme.
  5. Usa Palette Suggerite per applicare rapidamente uno schema di colori predefinito.
  6. Clicca su Salva quando sei soddisfatto.

Tipografia​

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

Spaziatura​

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

Logo e Branding​

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

Per risultati migliori, usa un logo con sfondo trasparente in formato PNG. Questo garantisce che appaia benissimo sia su sfondi chiari che scuri sul tuo sito web e app mobile.

Stili di Navigazione​

Personalizza i colori della barra di navigazione del tuo sito web sia per la modalità solida che trasparente:

  1. Scorri fino alla sezione Stili di Navigazione
  2. Clicca su Modifica Stili di Navigazione
  3. Configura i colori per la navigazione solida (con sfondo) e la navigazione trasparente (modalità overlay)
  4. Clicca su Salva per applicare i colori della tua navigazione

Per istruzioni dettagliate, consulta Stili di Navigazione.

CSS e JavaScript Personalizzati​

  1. Clicca su CSS e Javascript nel pannello Impostazioni di Stile.
  2. Aggiungi CSS Personalizzato per sovrascrivere gli stili predefiniti per personalizzazioni avanzate.
  3. Aggiungi HTML Personalizzato per codici di tracciamento o altri script.
  4. Usa la sezione Esempi Javascript Comuni per snippet 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 desiderato utilizzando i controlli incorporati di colore, carattere e spaziatura. Usa CSS personalizzato solo se ti senti a tuo agio con lo sviluppo web.

Temi di Stile​

Se desideri un punto di partenza rapido, le Palette Suggerite nella sezione Palette di Colori offrono temi predefiniti che impostano colori coordinati con un solo clic. Puoi sempre perfezionare le singole impostazioni dopo aver applicato un tema.

Prossimi Passi​