Lumipat sa pangunahing nilalaman

Hitsura

Ang pahina ng Hitsura ay nagbibigay-daan sa inyo na i-customize ang kabuuang hitsura at pakiramdam ng website ng inyong simbahan. Mula sa mga kulay at font hanggang sa spacing at custom CSS, makokontrol ninyo ang bawat visual na aspeto ng inyong site mula sa isang lugar.

Bago Magsimula

  • Kumpletuhin ang Paunang Setup para sa inyong website
  • Ihanda ang logo ng inyong simbahan sa PNG format na may transparent na background at 4:1 aspect ratio
  • Alamin ang mga brand color ng inyong simbahan (hex value) kung mayroon kayong kasalukuyang style guide

Pag-access sa mga Setting ng Hitsura​

  1. Sa B1 Admin, i-click ang Website sa kaliwang menu.
  2. I-click ang Appearance tab sa itaas ng Website Pages view.
  3. Maglo-load ang pahina ng Site Styles na may live preview ng inyong website sa kaliwa at mga opsyon ng Style Settings sa kanan.

Color Palette​

  1. I-click ang Color Palette sa Style Settings panel.
  2. Makikita ninyo ang Base Colors (maliwanag, accent, at madilim na shade) at Semantic Colors (Primary, Secondary, Success, Warning, at Error).
  3. I-click ang anumang color swatch para buksan ang color picker. I-drag ang selector o maglagay ng hex value para piliin ang inyong kulay.
  4. Ipinapakita ng Color Combinations Preview kung paano nagtutulungan ang inyong mga napiling kulay.
  5. Gamitin ang Suggested Palettes para mabilis na mag-apply ng pre-designed na color scheme.
  6. I-click ang Save kapag nasiyahan na kayo.

Typography​

  1. I-click ang Typography Settings sa Style Settings panel.
  2. I-click ang Select a Font para buksan ang font browser. Maaari kayong maghanap ayon sa pangalan o mag-browse ng mga kategorya tulad ng Serif, Sans Serif, Display, Handwriting, at Monospace.
  3. Magtakda ng mga font para sa parehong heading at body text.
  4. I-click ang Typography Scale para i-adjust ang hierarchy ng laki para sa Heading 1 hanggang Heading 4. Gamitin ang scale multiplier at base size field para i-fine-tune.
  5. I-click ang Save para i-apply ang inyong mga pagpiling font.

Spacing​

  1. I-click ang Spacing Scale sa Style Settings panel.
  2. I-adjust ang mga spacing value para sa Extra Small hanggang Extra Large. Ipinapakita ng mga praktikal na halimbawa kung paano nakakaapekto ang bawat value sa layout.
  3. I-click ang Save Spacing para i-apply ang mga value sa buong site.

Logo at Branding​

  1. I-click ang Logo sa Style Settings panel.
  2. I-upload ang inyong Light Background Logo at Dark Background Logo. Gumamit ng mga larawang may transparent na background at 4:1 aspect ratio para sa pinakamahusay na resulta.
  3. I-upload ang isang Social Media Image para sa mga link preview at isang Favicon para sa icon ng browser tab.
Tip

Para sa pinakamahusay na resulta, gumamit ng logo na may transparent na background sa PNG format. Tinitiyak nitong maganda ang hitsura nito sa parehong maliwanag at madilim na background sa inyong website at mobile app.

Custom CSS at JavaScript​

  1. I-click ang CSS and Javascript sa Style Settings panel.
  2. Magdagdag ng Custom CSS para i-override ang mga default na style para sa advanced na customization.
  3. Magdagdag ng Custom HTML para sa mga tracking code o iba pang script.
  4. Gamitin ang seksyon ng Common Javascript Examples para sa mga snippet tulad ng Google Analytics integration.
Babala

Malakas ang custom CSS pero maaari nitong masira ang layout ng inyong site kung ginamit nang hindi tama. Karamihan sa mga simbahan ay makakamit ang hitsura na gusto nila gamit ang mga built-in na kontrol ng kulay, font, at spacing. Gamitin lamang ang custom CSS kung komportable kayo sa web development.

Mga Style Theme​

Kung gusto ninyo ng mabilis na panimulang punto, ang Suggested Palettes sa seksyon ng Color Palette ay nag-aalok ng mga pre-built na tema na nagtatakda ng mga coordinated na kulay sa isang click. Maaari ninyong i-fine-tune ang mga indibidwal na setting pagkatapos mag-apply ng tema.

Mga Susunod na Hakbang​