Lumipat sa pangunahing nilalaman

Anyo

Ang Appearance page ay nagbibigay-daan sa inyo na i-customize ang pangkalahatang hitsura at pakiramdam ng inyong website ng parokya. Mula sa mga kulay at fonts hanggang spacing at custom CSS, maaari ninyong kontrolin ang bawat visual aspect ng inyong site mula sa isang lugar.

Bago Magsimula

  • Kumpletuhin ang Initial Setup para sa inyong website
  • Magkaroon ng inyong logo ng parokya handa sa PNG format na may transparent background at 4:1 aspect ratio
  • Alamin ang mga brand colors ng inyong parokya (hex values) kung mayroon kayong umiiral na style guide

Pag-access ng 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. Ang Site Styles page ay nag-load na may live preview ng inyong website sa kaliwang bahagi at Style Settings options sa kanan.

Color Palette​

  1. I-click ang Color Palette sa Style Settings panel.
  2. Makikita ninyo 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 magsulat ng hex value upang pumili ng inyong kulay.
  4. Ang Color Combinations Preview ay nagpapakita kung paano ang inyong mga piniling kulay ay nagtutulungan.
  5. Gamitin ang Suggested Palettes upang mabilis na mag-apply ng isang pre-designed 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 upang buksan ang font browser. Maaari ninyong 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 parehong headings at body text.
  4. I-click ang Typography Scale upang ayusin ang size hierarchy para sa Heading 1 hanggang Heading 4. Gamitin ang scale multiplier at base size fields upang fine-tune.
  5. I-click ang Save upang mailapat ang inyong mga pagpipilian ng font.

Spacing​

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

Logo and Branding​

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

Para sa pinakamahusay na mga resulta, gamitin ang isang logo na may transparent background sa PNG format. Ito ay sinisiguro na ito ay magmumukhang maganda sa parehong light at dark backgrounds sa buong inyong website at mobile app.

I-customize ang mga kulay ng navigation bar ng inyong website para sa parehong solid at transparent modes:

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

Para sa mga detalyadong instruksyon, tingnan ang Navigation Styles.

Custom CSS and JavaScript​

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

Ang Custom CSS ay makapangyarihan ngunit maaaring masira ang layout ng inyong site kung hindi ginagamit nang tama. Ang karamihan ng mga parokya ay makakamit ang hitsura na gusto nila gamit ang built-in na mga kontrol ng kulay, font, at spacing. Lamang gamitin ang custom CSS kung kayo ay komportable sa web development.

Style Themes​

Kung gusto ninyo ng isang mabilis na starting point, ang Suggested Palettes sa Color Palette section ay nag-aalok ng pre-built themes na nagtatatag ng coordinated colors sa isang click. Maaari ninyong palaging fine-tune ang mga indibidwal na setting pagkatapos ng pag-apply ng isang theme.

Mga Susunod na Hakbang​

  • Managing Pages -- Bumuo at i-organize ang inyong mga pahina ng website
  • Files -- I-upload ang media assets para sa inyong site