Vai al contenuto principale

Aspetto

La pagina Aspetto ti permette di personalizzare l'aspetto generale del tuo sito web della chiesa. Dai colori e font alla spaziatura e al 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 rapporto d'aspetto 4:1
  • Conosci i colori del brand della tua chiesa (valori esadecimali) se hai una guida di stile esistente

Accedere alle impostazioni dell'aspetto​

  1. In B1 Admin, clicca Website nel menu a sinistra.
  2. Clicca la scheda Appearance in cima alla vista Website Pages.
  3. Si carica la pagina Site Styles con un'anteprima dal vivo del tuo sito web a sinistra e le opzioni Style Settings a destra.

Palette colori​

  1. Clicca Color Palette nel pannello Style Settings.
  2. Vedrai Base Colors (tonalità chiare, accent e scure) e Semantic Colors (Primary, Secondary, Success, Warning ed Error).
  3. Clicca su qualsiasi campione di colore per aprire il selettore colore. Trascina il selettore o inserisci un valore esadecimale per scegliere il tuo colore.
  4. Il Color Combinations Preview mostra come i tuoi colori selezionati funzionano insieme.
  5. Usa le Suggested Palettes per applicare rapidamente uno schema di colori pre-progettato.
  6. Clicca Save quando sei soddisfatto.

Tipografia​

  1. Clicca Typography Settings nel pannello Style Settings.
  2. Clicca Select a Font per aprire il browser dei font. Puoi cercare per nome o navigare categorie come Serif, Sans Serif, Display, Handwriting e Monospace.
  3. Imposta i font sia per i titoli che per il testo del corpo.
  4. Clicca Typography Scale per regolare la gerarchia delle dimensioni da Heading 1 a Heading 4. Usa i campi del moltiplicatore di scala e della dimensione base per regolare finemente.
  5. Clicca Save per applicare le tue scelte di font.

Spaziatura​

  1. Clicca Spacing Scale nel pannello Style Settings.
  2. Regola i valori di spaziatura da Extra Small a Extra Large. Esempi pratici mostrano come ogni valore influisce sul layout.
  3. Clicca Save Spacing per applicare i valori su tutto il tuo sito.

Logo e branding​

  1. Clicca Logo nel pannello Style Settings.
  2. Carica il tuo Logo sfondo chiaro e Logo sfondo scuro. Per i migliori risultati, usa immagini con sfondo trasparente e rapporto d'aspetto 4:1.
  3. Carica un'Immagine 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 sul tuo sito web e sull'app mobile.

CSS e JavaScript personalizzati​

  1. Clicca CSS and Javascript nel pannello Style Settings.
  2. Aggiungi Custom CSS per sovrascrivere gli stili predefiniti per personalizzazioni avanzate.
  3. Aggiungi Custom HTML per codici di tracciamento o altri script.
  4. Usa la sezione Common Javascript Examples 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 scorretto. La maggior parte delle chiese può ottenere l'aspetto desiderato usando i controlli integrati di colore, font e spaziatura. Usa il CSS personalizzato solo se hai familiarità con lo sviluppo web.

Temi di stile​

Se vuoi un punto di partenza rapido, le Suggested Palettes nella sezione Color Palette offrono temi pre-costruiti che impostano colori coordinati con un clic. Puoi sempre regolare finemente le singole impostazioni dopo aver applicato un tema.

Prossimi passi​

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