Lumipat sa pangunahing nilalaman

Appearance

Ang pahina ng Appearance ay nagbibigay-daan sa iyo na i-customize ang pangkalahatang hitsura at pakiwari ng website ng iyong simbahan. Mula sa mga kulay at font hanggang sa spacing at custom CSS, maaari mong kontrolin ang bawat visual na aspeto ng iyong site mula sa isang lugar.

Bago Ka Magsimula

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

Pag-access sa Appearance Settings​

  1. Sa B1 Admin, i-click ang Website sa kaliwang menu.
  2. I-click ang Appearance tab sa itaas ng Website Pages view.
  3. Mag-lo-load ang Site Styles page na may live preview ng iyong 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 mo ang Base Colors (light, accent, at dark shades) at Semantic Colors (Primary, Secondary, Success, Warning, at Error).
  3. I-click ang anumang color swatch upang buksan ang color picker. I-drag ang selector o maglagay ng hex value upang pumili ng iyong kulay.
  4. Ang Color Combinations Preview ay nagpapakita kung paano gumagana nang magkasama ang iyong mga napiling kulay.
  5. Gamitin ang Suggested Palettes upang mabilis na maglapat ng isang pre-designed na color scheme.
  6. I-click ang Save kapag nasiyahan ka na.

Typography​

  1. I-click ang Typography Settings sa Style Settings panel.
  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. Magtakda ng mga font para sa parehong 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 base size fields upang mag-fine-tune.
  5. I-click ang Save upang ilapat ang iyong mga pagpili ng font.

Spacing​

  1. I-click ang Spacing Scale sa Style Settings panel.
  2. Ayusin ang mga halaga ng spacing para sa Extra Small hanggang Extra Large. Ang mga praktikal na halimbawa ay nagpapakita kung paano nakakaapekto ang bawat halaga sa layout.
  3. I-click ang Save Spacing upang ilapat ang mga halaga sa buong iyong site.

Logo at Branding​

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

Para sa pinakamahusay na resulta, gumamit ng logo na may transparent na background sa PNG format. Tinitiyak nito na maganda ito sa parehong light at dark na mga background sa buong iyong website at mobile app.

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

  1. Mag-scroll pababa sa seksyon ng Navigation Styles
  2. I-click ang Edit Navigation Styles
  3. I-configure 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 nabigasyon

Para sa detalyadong mga tagubilin, tingnan ang Navigation Styles.

Custom CSS at JavaScript​

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

Ang custom CSS ay makapangyarihan ngunit maaaring masira ang layout ng iyong site kung hindi ginagamit nang tama. Karamihan ng mga simbahan ay maaaring makamit ang gusto nilang hitsura gamit ang built-in na mga kontrol ng kulay, font, at spacing. Gumamit lamang ng custom CSS kung komportable ka sa web development.

Style Themes​

Kung gusto mo 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 coordinated na mga kulay sa isang pag-click. Maaari mo palaging mag-fine-tune ng mga indibidwal na setting pagkatapos maglapat ng tema.

Mga Susunod na Hakbang​

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