Paggamit ng Page Editor

Ang page editor ng B1 ay isang visual na drag-and-drop na builder na nagbibigay-daan sa iyong idisenyo ang mga pahina ng website ng iyong simbahan nang hindi nagsusulat ng anumang code. Maaari kang magdagdag ng mga seksyon at bloke ng nilalaman, i-customize ang mga estilo, i-preview ang iyong ginawa, at bawiin ang mga pagbabago -- lahat mula sa loob ng iyong browser.

Bago Magsimula

• Tapusin ang Initial Setup upang maikonpigura ang iyong website
• Gumawa ng kahit isang pahina sa Managing Pages
• Kailangan mo ng pahintulot na content.edit upang ma-access ang editor

Pagbubukas ng Editor

1. Sa B1 Admin, i-click ang Website sa kaliwang menu.
2. Hanapin ang pahinang nais mong i-edit sa talahanayan ng Pages at i-click ang Edit.

Magbubukas ang editor sa full-screen na mode. Ipinapakita ng kaliwang panel ang istraktura ng iyong pahina at mga available na elemento ng nilalaman; ipinapakita ng gitnang lugar ang live na preview ng iyong pahina.

Impormasyon

Laging nagpapakita ang editor sa light mode, anuman ang setting ng tema ng iyong B1 Admin. Tinitiyak nito na eksaktong tumutugma ang preview sa kung paano titingnan ng mga bisita ng website ang iyong pahina.

Istraktura ng Pahina: Mga Seksyon at Elemento

Binubuo ang bawat pahina mula sa dalawang antas:

• Mga Seksyon -- Ang mga top-level na container na naghahati sa iyong pahina sa mga pahalang na banda (halimbawa, isang hero section, isang bloke ng nilalaman, o isang footer strip). Dapat may kahit isang seksyon ang bawat pahina bago ka makapagdagdag ng nilalaman.
• Mga Elemento -- Ang mga indibidwal na piraso ng nilalaman na inilagay sa loob ng isang seksyon, tulad ng teksto, mga larawan, pindutan, card, form, at kalendaryo.

Pagdaragdag ng Seksyon

1. I-click ang Add Section (o ang pindutang + sa itaas ng kaliwang panel).
2. Piliin kung paano magsisimula:
   • From a template — mag-browse sa gallery ng template ng seksyon na nakaayos ayon sa kategorya (Hero, About, Services, Giving, atbp.) at i-click ang isa upang isingit ito bilang isang lubos na na-style at napunang seksyon. Maaari mong i-customize ang lahat matapos itong idagdag.
   • Blank section — pumili ng column layout (isa, dalawang column, tatlong column, atbp.) at bumuo mula sa simula.
3. Lilitaw ang bagong seksyon sa preview. I-click ito upang piliin ito at ikonpigura ang kulay ng background, padding, at iba pang opsyon ng estilo nito.

Pagpapalit ng Layout ng isang Seksyon

Nabuo mo na ba ang isang seksyon ngunit gusto mo ng ibang istraktura? Gamitin ang layout switcher sa seksyong iyon upang palitan ang kaayusan ng column nito ng iba mula sa gallery habang pinananatili sa lugar ang iyong umiiral na nilalaman at mga elemento.

Pagdaragdag ng mga Elemento sa isang Seksyon

1. I-click sa loob ng isang seksyon sa preview upang piliin ito.
2. I-click ang Add Content at pumili ng uri ng elemento mula sa listahan:
   • Text -- Mga heading, talata, at rich text
   • Image -- Mag-upload o mag-link sa isang larawan
   • Button -- Isang na-click na link ng call-to-action
   • Card -- Isang larawang may title at paglalarawan
   • Form -- I-embed ang isang form nang direkta sa pahina
   • Calendar -- Ipakita ang isang kalendaryo ng kaganapan
   • FAQ -- Mga bloke ng tanong at sagot na estilong accordion
   • Video -- I-embed ang isang video sa pamamagitan ng URL
   • Groups Browser -- Isang naaaring i-filter na directory ng lahat ng grupo ng simbahan na may opsyonal na paghahanap, filter ng kategorya, at filter ng label
   • Icon Feature -- Isang icon na may title at maikling paglalarawan, para sa mga highlight ng feature o ministri
   • Gallery -- Isang multi-photo grid o masonry layout
   • Testimonial -- Isa o higit pang mga sipi na may pangalan ng may-akda, tungkulin, at larawan
   • Social Icons -- Mga naka-link na icon para sa mga profile sa social media ng iyong simbahan
   • Countdown -- Isang timer na bumibilang pababa hanggang sa isang petsa o linggu-linggong oras ng serbisyo
   • Stats -- Isang hanay ng malalaking numero na may mga label (mga miyembro, taon, campus)
   • Campaign Progress -- Isang live na progress bar para sa isang kampanya ng pagbibigay, na nagpapakita ng kabuuang nakolekta patungo sa isang layunin ng pondo
   • Staff Grid -- Mga photo card para sa mga miyembro ng isang grupo; dapat naka-on ang opsyong public roster ng grupo
   • Service Times -- Ang iskedyul ng serbisyo ng iyong mga campus, na awtomatikong kinukuha mula sa pag-set up ng attendance
   • Sermons -- Ang iyong library ng sermon, bilang isang buong browser o isang grid, listahan, o featured-latest layout
   • Map -- Isang naka-embed na mapa na nakasentro sa tirahan ng iyong simbahan
   • Table -- Isang simpleng grid ng mga hilera at column para sa nilalaman na tabular
   • Text with Photo -- Teksto at isang larawan magkatabi
   • Logo -- Ang logo ng iyong simbahan, kinukuha mula sa Appearance
   • Live Stream -- Ang iyong live stream player, naka-embed nang direkta sa pahina
   • Donation -- Isang pindutan ng pagbibigay o naka-embed na form ng donasyon
   • Raw HTML -- Custom na HTML markup para sa mga advanced na gamit
   • iFrame -- I-embed ang panlabas na nilalaman sa pamamagitan ng URL
3. Ikonpigura ang elemento gamit ang panel ng mga setting na lilitaw.

Pag-aayos Muli ng Nilalaman

I-drag ang mga seksyon o elemento gamit ang icon ng hawakan (anim na tuldok) sa kaliwang bahagi ng bawat item upang ayusin muli ang mga ito. Maaari mong i-drag ang mga elemento sa loob ng isang seksyon o ilipat ang mga ito sa pagitan ng mga seksyon.

Pag-style sa Iyong Pahina

Mga Estilo ng Seksyon

I-click ang anumang seksyon upang buksan ang panel ng estilo nito. Maaari mong itakda ang:

• Background -- Solid na kulay, gradient, o larawan. Kapag gumagamit ng larawan bilang background, ang isang picker na Focal Point ay nagbibigay-daan sa iyong mag-click upang itakda kung aling bahagi ng larawan ang mananatiling nakasentro habang nag-i-scale ang seksyon, at ang isang opsyon na kulay na Overlay ay nagbibigay-daan sa iyong magdagdag ng semi-transparent na tint sa ibabaw ng larawan upang mapabuti ang pagkabasa ng teksto.
• Padding -- Espasyo sa itaas at ibaba sa loob ng seksyon
• Width -- Full-width o centered/contained
• Dividers -- Mga dekorasyong shape divider (wave, slant, curve, triangle, at marami pang iba) sa itaas o ibabang gilid ng seksyon, na may mga opsyon ng kulay, taas, at flip

Mga Estilo ng Elemento

I-click ang anumang elemento upang buksan ang panel ng estilo nito. Kasama sa mga karaniwang opsyon ang laki ng font, kulay, pagkakahanay, margin, at padding. Para sa mga larawan, maaari mong itakda ang alt text at mga target ng link.

Custom CSS

Para sa advanced na pag-istilo, may field na Custom CSS ang bawat seksyon at elemento kung saan maaari kang magsulat ng iyong sariling mga panuntunan sa CSS. Naka-scope ang mga ito sa elementong iyon, kaya hindi nila hindi-sinasadyang maaapektuhan ang natitirang bahagi ng pahina.

Tip

Kung kailangan mong maglapat ng mga istilo sa buong site mo -- tulad ng isang custom na font o pandaigdigang kulay -- gamitin ang mga setting ng Appearance sa halip na custom CSS sa indibidwal na mga pahina.

Pag-preview sa Iyong Pahina

Gamitin ang mga kontrol ng preview sa toolbar upang suriin kung paano lumilitaw ang iyong pahina sa iba't ibang laki ng screen:

• Desktop -- Full-width na view ng browser
• Mobile -- Makitid na view na kasing-laki ng telepono

I-click ang Preview upang buksan ang live na bersyon ng pahina sa bagong tab ng browser, eksaktong tulad ng makikita ng mga bisita.

Pagsusuri sa Accessibility

I-click ang icon na Accessibility sa toolbar upang magpatakbo ng mabilisang pagsusuri para sa mga karaniwang isyu -- mga larawang walang alt text, mababang kaibahan ng kulay, o mga heading na hindi ayos. Ang bawat isyu ay direktang naka-link sa elementong kailangang bigyang-pansin upang maayos mo ito sa lugar.

Pagbawi ng mga Pagbabago

Awtomatikong sinusubaybayan ng editor ang kasaysayan ng iyong pag-e-edit. Gamitin ang mga pindutan ng toolbar o mga keyboard shortcut upang mag-navigate:

• Undo (Ctrl+Z / Cmd+Z) -- Bawiin ang iyong huling aksyon
• Redo (Ctrl+Y / Cmd+Y) -- Ulitin muli ang isang binawing aksyon

Maaari mo ring ibalik ang pahina sa isang naunang snapshot. I-click ang History sa toolbar upang makita ang isang listahan ng mga naka-save na snapshot na may mga paglalarawan, at i-click ang anumang entry upang ibalik sa puntong iyon.

Babala

Ang pagpapanumbalik ng isang snapshot ay pumapalit sa kasalukuyang nilalaman ng iyong pahina ng bersyon ng snapshot. Hindi ito mababawi gamit ang karaniwang pindutan ng undo. Mag-save ng snapshot ng iyong kasalukuyang estado bago magpanumbalik ng isang lumang snapshot kung gusto mong manatili ang opsyon na bumalik.

Pag-save at Pag-publish

Awtomatikong nase-save ang mga pagbabago habang nagtatrabaho ka. Ipinapakita ng isang indicator ng katayuan sa toolbar kung na-save na ang iyong mga pagbabago.

Draft at nai-publish na estado

Maaaring magkaroon ang mga pahina ng estadong published, na kumokontrol kung kailan makikita ng mga bisita ang iyong mga pagbabago. Ipinapakita ng toolbar ang isang status chip na nagpapakita ng kasalukuyang estado:

• Live on Save -- Hindi gumagamit ang pahina ng workflow ng pag-publish. Direktang nagiging live ang bawat na-save na pagbabago. Ito ang default para sa mga bagong pahina.
• Unpublished Changes -- Nai-publish na ang pahina noon, ngunit may mga pagbabago kang ginawa mula noong huling pag-publish. Nakikita pa rin ng mga bisita ang nakaraang nai-publish na bersyon.
• Published -- Live na ang pahina at tumutugma ang iyong na-save na nilalaman sa nakikita ng mga bisita.

Upang i-publish ang iyong mga pagbabago, i-click ang pindutang Publish sa toolbar. Agad na magiging live ang pahina.

Upang bumalik sa huling nai-publish na bersyon nang hindi naaapektuhan ang nakikita ng mga bisita, buksan ang overflow menu (⋮) at i-click ang Discard Changes.

Upang alisin nang lubusan ang isang pahina online, buksan ang overflow menu at i-click ang Unpublish. Hindi na makikita ng mga bisita ang pahinang iyon hangga't hindi mo ito nai-publish ulit.

Tip

Gamitin ang workflow ng draft/publish kapag nais mong maghanda ng isang pahina -- halimbawa, para sa isang darating na kaganapan -- at gawin lamang itong live sa tamang sandali. Bumuo at i-preview ang pahina, pagkatapos ay i-click ang Publish kapag handa ka na.

Kaugnay na mga Artikulo

• Managing Pages -- Gumawa ng mga pahina, itakda ang mga URL, at pamahalaan ang navigation ng site
• Appearance -- Itakda ang mga kulay, font, at branding na sakop ng buong site
• Files -- Mag-upload ng mga larawan at dokumento na gagamitin sa editor
• Creating Forms -- Bumuo ng mga form na maaari mong i-embed sa mga pahina