Vai al contenuto principale

Aspetto

La pagina Aspetto ti permette di personalizzare l'aspetto e lo stile generale del sito web della tua chiesa. Da colori e font a spaziatura e CSS personalizzato, 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 d'aspetto 4:1
  • Conosci i colori del marchio della tua chiesa (valori esadecimali) se hai già una guida di stile

Accedere alle Impostazioni di Aspetto​

  1. In B1 Admin, clicca su Sito Web nel menu a sinistra.
  2. Clicca 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 Stile a destra.

Tavolozza Colori​

  1. Clicca su Tavolozza Colori nel pannello Impostazioni Stile.
  2. Vedrai i Colori Base (tonalità chiare, accento e scure) e i Colori Semantici (Primario, Secondario, Successo, Avviso ed Errore).
  3. Clicca su qualsiasi campione di colore per aprire il selettore. Trascina il selettore o inserisci un valore esadecimale per scegliere il tuo colore.
  4. L'Anteprima delle Combinazioni di Colore mostra come i colori selezionati funzionano insieme.
  5. Usa le Tavolozze 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 Stile.
  2. Clicca su Seleziona un Font per aprire il browser dei font. Puoi cercare per nome o sfogliare per categorie come Serif, Sans Serif, Display, Corsivo e Monospace.
  3. Imposta i font sia per i titoli sia per il testo del corpo.
  4. Clicca su Scala Tipografica per regolare la gerarchia delle dimensioni per Titolo 1 fino a Titolo 4. Usa il moltiplicatore di scala e i campi della dimensione base per affinare il risultato.
  5. Clicca su Salva per applicare le tue scelte di font.

Spaziatura​

  1. Clicca su Scala di Spaziatura nel pannello Impostazioni Stile.
  2. Regola i valori di spaziatura da Extra Small a Extra Large. Esempi pratici mostrano come ogni valore influisce sul layout.
  3. Clicca su Salva Spaziatura per applicare i valori all'intero sito.

Logo e Identità Visiva​

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

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

Stili di Navigazione​

Personalizza i colori della barra di navigazione del tuo sito web sia per la modalità solida sia per quella 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à sovrapposta)
  4. Clicca su Salva per applicare i colori di navigazione

Per istruzioni dettagliate, vedi Stili di Navigazione.

Widget del Sito​

I widget del sito compaiono su ogni pagina del tuo sito, fluttuando sopra il contenuto della pagina:

  • Banner di Annuncio -- Una barra chiudibile in cima al tuo sito per messaggi urgenti, come un evento imminente o un cambio di orario del servizio.
  • Launcher -- Un pulsante fluttuante che apre un menu di accesso rapido, ad esempio link per donare, registrarsi al check-in o visualizzare il bollettino.
  1. Clicca su Widget del Sito nel pannello Impostazioni Stile.
  2. Attiva i widget che desideri e configura testo, link e colori.
  3. Clicca su Salva.

Analytics​

Aggiungi il tuo ID Misurazione Google Analytics 4 nel pannello Impostazioni Stile per tracciare il traffico dei visitatori sul tuo sito web.

CSS e JavaScript Personalizzati​

  1. Clicca su CSS e Javascript nel pannello Impostazioni 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 frammenti di codice come l'integrazione con Google Analytics.
Avviso

Il CSS personalizzato è potente, ma può rompere il layout del tuo sito se usato in modo scorretto. La maggior parte delle chiese può ottenere l'aspetto desiderato usando i controlli integrati per colori, font e spaziatura. Usa il CSS personalizzato solo se hai dimestichezza con lo sviluppo web.

Temi di Stile​

Se vuoi un punto di partenza rapido, le Tavolozze Suggerite nella sezione Tavolozza Colori offrono temi predefiniti che impostano colori coordinati con un clic. Puoi sempre affinare le impostazioni singole dopo aver applicato un tema.

Prossimi Passi​

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