Vai al contenuto principale

Appearance

The Appearance page lets you customize the overall look and feel of your church website. From colors and fonts Per spacing and custom CSS, you can control every visual aspect of your site from one place.

Prima di Iniziare

  • Complete the Initial Setup for your website
  • Have your church logo ready in PNG format with a transparent background and a 4:1 aspect ratio
  • Know your church's brand colors (hex values) if you have an existing style guide

Accessing Appearance Impostazioni​

  1. In the B1 Admin, Fai clic Sito Web in the left menu.
  2. Fai clic the Appearance tab at the top of the Sito Web Pages Visualizza.
  3. The Site Styles page loads with a live preview of your website on the left and Style Impostazioni options on the right.

Color Palette​

  1. Fai clic Color Palette in the Style Impostazioni panel.
  2. You will see Base Colors (light, accent, and dark shades) and Semantic Colors (Primary, Secondary, Success, Warning, and Error).
  3. Fai clic any color swatch Per Apri the color picker. Drag the selector or Inserisci a hex value Per Scegli your color.
  4. The Color Combinations Preview shows how your selected colors work together.
  5. Use Suggested Palettes Per quickly apply a pre-designed color scheme.
  6. Fai clic Salva when you are satisfied.

Typography​

  1. Fai clic Typography Impostazioni in the Style Impostazioni panel.
  2. Fai clic Seleziona a Font Per Apri the font browser. You can Cerca by name or browse categories like Serif, Sans Serif, Display, Handwriting, and Monospace.
  3. Set fonts for both headings and body text.
  4. Fai clic Typography Scale Per adjust the size hierarchy for Heading 1 through Heading 4. Use the scale multiplier and base size fields Per fine-tune.
  5. Fai clic Salva Per apply your font choices.

Spacing​

  1. Fai clic Spacing Scale in the Style Impostazioni panel.
  2. Adjust spacing values for Extra Small through Extra Large. Practical examples show how each value affects layout.
  3. Fai clic Salva Spacing Per apply the values across your entire site.

Logo and Branding​

  1. Fai clic Logo in the Style Impostazioni panel.
  2. Carica your Light Background Logo and Dark Background Logo. Use images with a transparent background and a 4:1 aspect ratio for best results.
  3. Carica a Social Media Image for link previews and a Favicon for the browser tab icon.
Suggerimento

For best results, use a logo with a transparent background in PNG format. This ensures it looks great on both light and dark backgrounds across your website and mobile app.

Customize your website's navigation bar colors for both solid and transparent modes:

  1. Scroll Per the Navigation Styles section
  2. Fai clic Modifica Navigation Styles
  3. Configure colors for solid navigation (with background) and transparent navigation (overlay mode)
  4. Fai clic Salva Per apply your navigation colors

For detailed instructions, see Navigation Styles.

Site Widgets​

Site widgets appear on every page of your site, floating above the page content:

  • Announcement Banner -- A dismissible bar at the top of your site for Ora-sensitive messages, like an upcoming Evento or a Servizio change.
  • Launcher -- A floating button that opens a quick-access menu, for example links Per give, check in, or Visualizza the bulletin.
  1. Fai clic Site Widgets in the Style Impostazioni panel.
  2. Turn on the widgets you want and configure their text, links, and colors.
  3. Fai clic Salva.

Analytics​

Aggiungi your Google Analytics 4 Measurement ID in the Style Impostazioni panel Per track visitor traffic on your website.

Custom CSS and JavaScript​

  1. Fai clic CSS and Javascript in the Style Impostazioni panel.
  2. Aggiungi Custom CSS Per override default styles for advanced customization.
  3. Aggiungi Custom HTML for tracking codes or other scripts.
  4. Use the Common Javascript Examples section for snippets like Google Analytics integration.
Avviso

Custom CSS is powerful but can break your site's layout if used incorrectly. Most churches can achieve the look they want using the built-in color, font, and spacing controls. Only use custom CSS if you are comfortable with web development.

Info

Your site enforces a Content Security Policy that blocks inline scripts from any other source. The Custom JavaScript field is the one trusted exception -- code you Salva there runs as-is, so only paste scripts from sources you trust (analytics tags, chat widgets, and similar embeds).

Style Themes​

If you want a quick starting point, the Suggested Palettes in the Color Palette section offer pre-built themes that set coordinated colors in one Fai clic. You can always fine-tune individual Impostazioni after applying a theme.

Avanti Steps​

  • Managing Pages -- Build and organize your website pages
  • Files -- Carica media assets for your site