Lumipat sa pangunahing nilalaman

Anyo

Sa pahina ng Appearance mo ikino-customize ang pangkalahatang anyo at pakiramdam ng website ng iyong simbahan. Mula sa mga kulay at font hanggang sa espasyo at custom na CSS, makokontrol mo ang bawat visual na aspeto ng iyong site mula sa isang lugar.

Bago Magsimula

  • Tapusin ang Initial Setup para sa iyong website
  • Ihanda ang logo ng iyong simbahan sa PNG format na may transparent na background at 4:1 na aspect ratio
  • Alamin ang mga kulay ng brand ng iyong simbahan (hex values) kung mayroon kang umiiral na style guide

Pag-access sa mga Setting ng Appearance​

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

Color Palette​

  1. I-click ang Color Palette sa panel ng Style Settings.
  2. Makikita mo ang Base Colors (mga shade na maliwanag, accent, at madilim) at ang Semantic Colors (Primary, Secondary, Success, Warning, at Error).
  3. I-click ang anumang swatch ng kulay upang buksan ang color picker. I-drag ang selector o maglagay ng hex value upang piliin ang iyong kulay.
  4. Ipinapakita ng Color Combinations Preview kung paano nagtutugma ang iyong mga piniling kulay.
  5. Gamitin ang Suggested Palettes upang mabilis na maglapat ng isang naunang idinisenyong color scheme.
  6. I-click ang Save kapag nasiyahan ka na.

Typography​

  1. I-click ang Typography Settings sa panel ng Style Settings.
  2. I-click ang Select a Font upang buksan ang font browser. Maaari kang maghanap ayon sa pangalan o mag-browse ng mga kategorya tulad ng Serif, Sans Serif, Display, Handwriting, at Monospace.
  3. Itakda ang mga font para sa kapwa mga heading at body text.
  4. I-click ang Typography Scale upang ayusin ang hierarchy ng laki para sa Heading 1 hanggang Heading 4. Gamitin ang scale multiplier at ang mga field ng base size upang i-fine-tune.
  5. I-click ang Save upang ilapat ang iyong mga napiling font.

Spacing​

  1. I-click ang Spacing Scale sa panel ng Style Settings.
  2. Ayusin ang mga value ng espasyo mula 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 upang ilapat ang mga value sa buong site mo.

Logo at Branding​

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

Para sa pinakamainam na resulta, gumamit ng logo na may transparent na background sa PNG format. Tinitiyak nitong maganda itong titingnan sa parehong maliwanag at madilim na background sa buong website at mobile app mo.

Mga Estilo ng Navigation​

I-customize ang mga kulay ng navigation bar ng iyong website para sa parehong solid at transparent na mga mode:

  1. Mag-scroll sa seksyong Navigation Styles
  2. I-click ang Edit Navigation Styles
  3. Ikonpigura ang mga kulay para sa solid navigation (na may background) at transparent navigation (overlay mode)
  4. I-click ang Save upang ilapat ang iyong mga kulay ng navigation

Para sa detalyadong mga tagubilin, tingnan ang Navigation Styles.

Mga Widget ng Site​

Lumilitaw ang mga widget ng site sa bawat pahina ng iyong site, na lumulutang sa ibabaw ng nilalaman ng pahina:

  • Announcement Banner -- Isang bar na maaaring itanggal sa itaas ng iyong site para sa mga mensaheng may kinalaman sa oras, tulad ng isang paparating na kaganapan o pagbabago sa serbisyo.
  • Launcher -- Isang lumulutang na pindutan na nagbubukas ng menu ng mabilisang access, halimbawa mga link para magbigay, mag-check in, o tumingin sa bulletin.
  1. I-click ang Site Widgets sa panel ng Style Settings.
  2. I-on ang mga widget na nais mo at ikonpigura ang kanilang teksto, mga link, at mga kulay.
  3. I-click ang Save.

Analytics​

Idagdag ang iyong Google Analytics 4 Measurement ID sa panel ng Style Settings upang subaybayan ang trapiko ng bisita sa iyong website.

Custom CSS at JavaScript​

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

Makapangyarihan ang Custom CSS ngunit maaaring masira ang layout ng iyong site kung hindi tama ang paggamit. Karamihan ng mga simbahan ay makakamit ang hitsurang gusto nila gamit ang built-in na kontrol ng kulay, font, at espasyo. Gamitin lamang ang custom CSS kung komportable ka sa web development.

Mga Tema ng Estilo​

Kung gusto mo ng mabilisang panimulang punto, nag-aalok ang Suggested Palettes sa seksyong Color Palette ng mga naunang binuong tema na nagtatakda ng magkakatugmang kulay sa isang click. Maaari mo pa ring i-fine-tune ang mga indibidwal na setting matapos maglapat ng isang tema.

Susunod na mga Hakbang​

  • Managing Pages -- Bumuo at ayusin ang mga pahina ng iyong website
  • Files -- Mag-upload ng mga media asset para sa iyong site