# Bina landing page dengan blok

> Mulakan landing page daripada 11 template atau page kosong, tambah blok dan seksyen siap, pilih font, tetapkan blok langsung, kemudian simpan.
>
> Source: https://docs.bcl.my/ms/landing-page-builder/

Landing page builder membina page penuh untuk sesuatu form daripada blok: teks, gambar, video, harga semasa, kiraan detik, ulasan dan butang. Anda seret blok ke atas page dan tukar tetapannya dalam panel di sebelah kanan. Tiada apa-apa yang live sehingga anda klik **Save**.

## Buka builder

Payment form menggunakan builder apabila **Type of Form** ialah **Landing Pages**. Event form, booking form dan lead form menggunakannya apabila **Use Landing Pages** on. Untuk membukanya:

1. Edit form itu dan tetapkan **Type of Form** kepada **Landing Pages**, atau on-kan **Use Landing Pages** pada event form, booking form atau lead form.
2. Klik **Edit Landing Page** di bahagian atas form. BCL menyimpan form itu, kemudian membuka builder.

   *(Screenshot: Bahagian atas Edit Payment Form dengan Edit Landing Page ditanda)*

Builder ada tiga tab di sebelah kiri: **Blocks**, **Ready-made** dan **Layers**. Page berada di tengah, dan tetapan blok yang anda klik berada di sebelah kanan.

*(Screenshot: Landing page builder dengan tab Blocks, Ready-made dan Layers ditanda)*

## Mula daripada template

Setiap jenis form ada 11 page siap dengan foto dan contoh teks, sebahagiannya dalam bahasa Inggeris dan sebahagiannya dalam bahasa Melayu. Label pada setiap kad menunjukkan susun aturnya:

| Susun atur | Guna untuk |
|---|---|
| **Classic sales page** | Page panjang dengan video, hasil, tawaran dan FAQ |
| **Problem-first** | Page yang bermula dengan masalah pelanggan anda, kemudian menunjukkan penyelesaian anda |
| **Buy now** | Page pendek dengan foto dan harga langsung di atas, untuk pembelian yang cepat |
| **Event agenda** | Event dengan atur cara, foto, harga dan lokasi |
| **Sign-up** | Page pendaftaran atau senarai menunggu dengan manfaat dan penganjur |
| **Local service** | Bisnes servis dengan pakej, cara ia berfungsi, hasil kerja lepas dan WhatsApp |

Untuk menggunakan template:

1. Klik **Templates** di sebelah kanan, atau **Templates** dalam menu klik kanan.
2. Klik **Use template** pada page yang anda mahu, atau **Start blank** untuk page kosong. Jika page anda sudah ada blok, klik **Replace page** untuk mengesahkan, atau **Keep my page** untuk kembali.
3. Tukar apa-apa teks, gambar atau warna, kemudian klik **Save**.

   *(Screenshot: Tetingkap Start with a template, dengan label susun atur Problem-first pada kad template ditanda)*

> **Caution**
> Template menggantikan page yang anda ada sekarang. Jika anda tersilap pilih, klik **Undo** sebelum anda simpan.

## Tambah blok & seksyen siap

Anda bina page daripada tab **Blocks**. Klik blok untuk menambahnya, atau seret ke tempat yang anda mahu pada page. Blok terbahagi kepada tiga kumpulan:

| Kumpulan | Blok | Guna untuk |
|---|---|---|
| **Basics** | Section, Text, Image, Button, Divider, Space | Susun atur, teks jualan anda dan butang beli |
| **Media & Contact** | Gallery, Video, WhatsApp, Map | Foto, video, butang chat dan alamat anda |
| **Selling & Trust** | Price, Sold / Left, Timer, Testimonial, Badges, FAQ | Butiran jualan semasa, ulasan, lencana bayaran dan soalan |

**Section** memuatkan blok lain, bertindan atau sebelah-menyebelah. Untuk reka bentuk yang sudah siap, buka tab **Ready-made**. Tab ini ada 15 seksyen, seperti **Hero**, **Pricing**, **Offer**, **Urgency**, **Testimonials** dan **FAQ**. Klik satu untuk menambahnya, kemudian tukar teksnya.

*(Screenshot: Tab Ready-made dengan seksyen Introduce dan Sell)*

## Tukar font

Blok yang ada teks, seperti **Text**, **Button**, **Price**, **Testimonial** dan **FAQ**, ada senarai **Font**. Untuk menukar font blok:

1. Klik blok itu pada page.
2. Dalam panel di sebelah kanan, klik **Style**.
3. Pilih font di bawah **Font**. Senarai ini ada tiga kumpulan:

   | Kumpulan | Font |
   |---|---|
   | **Popular** | Inter, Roboto, Poppins, Montserrat, Open Sans, Lato |
   | **Sans serif** | Plus Jakarta Sans, DM Sans, Manrope, Figtree, Nunito, Raleway, Ubuntu, Barlow, Space Grotesk |
   | **Serif** | Playfair Display, Merriweather, Lora |

   *(Screenshot: Tab Style bagi blok Text dengan senarai Font ditanda)*

Blok **Timer** juga ada kumpulan **Digital** untuk nombornya, seperti Orbitron.

## Paparkan harga & jumlah terjual secara langsung

Blok **Price** dan **Sold / Left** membaca form anda, jadi ia kekal betul apabila anda membuat jualan atau menukar harga.

- **Price** memaparkan harga form. Di bawah **Crossed-out price**, pilih **From sale** untuk memaparkan harga biasa yang dipotong semasa promosi, **My own** untuk menaip harga sendiri, atau **None**. Tukar harga itu sendiri dalam tetapan form.

  *(Screenshot: Tetapan blok Price, dengan harga diambil daripada form)*

- **Sold / Left** memaparkan **How many sold** atau **How many left**, dan refresh setiap beberapa minit. **Show once at least** menyembunyikannya sehingga jumlah itu terjual, jadi page baru tidak pernah memaparkan "0 sold".

  *(Screenshot: Tetapan blok Sold / Left dengan How many sold, Wording dan Show once at least)*

## Kiraan detik untuk setiap pelawat

Blok **Timer** mengira detik hingga satu tarikh, atau memberi setiap pelawat kiraan detik mereka sendiri. Untuk menetapkan kiraan detik bagi setiap pelawat:

1. Tambah blok **Timer**.
2. Di bawah **Counts Down To**, klik **Each visitor**.
3. Tetapkan **Lasts** dan **Unit**, contohnya 15 minit. Kiraan detik bermula apabila pelawat membuka page itu buat kali pertama. Kembali pada peranti yang sama tidak reset kiraan detik itu.
4. Di bawah **When It Ends**, pilih **Show 00**, **Show text** untuk mesej, atau **Redirect** untuk menghantar pelawat ke page lain.

   *(Screenshot: Tetapan blok Timer dengan Counts Down To ditetapkan kepada Each visitor)*

Timer tidak menutup form anda. Untuk menghentikan jualan pada satu tarikh, lihat [Paparkan kiraan detik](/ms/countdown-timer/).

## Susun, copy & sembunyikan blok

Klik kanan mana-mana blok pada page untuk menu dengan **Edit**, **Duplicate**, **Copy**, **Paste below**, **Move up**, **Move down**, **Add block above**, **Add block below** dan **Delete**.

*(Screenshot: Menu klik kanan sesuatu blok dengan Hide on phone dan Hide on desktop ditanda)*

Menu yang sama ada **Hide on phone** dan **Hide on desktop**, untuk memaparkan blok pada satu jenis skrin sahaja. Untuk menyemak hasilnya, klik butang telefon di bahagian atas builder. Klik butang komputer di sebelahnya untuk kembali.

*(Screenshot: Builder dalam paparan telefon, dengan butang telefon ditanda)*

Tab **Layers** menyenaraikan setiap blok dari atas ke bawah, seperti pada page. Gunakannya untuk mencari dan memilih blok pada page yang panjang.

*(Screenshot: Tab Layers yang menyenaraikan blok pada page)*

## Undo & simpan

Builder menyimpan perubahan anda sehingga anda klik **Save** di bahagian atas kanan. Sebelum itu, tajuk page memaparkan **Unsaved**. Shortcut papan kekunci ini boleh digunakan dalam builder:

| Tindakan | Shortcut |
|---|---|
| **Undo** | Ctrl + Z |
| **Redo** | Ctrl + Shift + Z |
| **Duplicate** | Ctrl + D |
| **Delete** | Del |
| **Deselect** | Esc |

Pada Mac, guna Cmd dan bukan Ctrl. Jika anda keluar dengan perubahan yang belum disimpan, BCL bertanya sama ada anda mahu simpan dahulu.

## Tips

- **Pilih template sebelum anda mula membina.** Template menggantikan seluruh page, jadi mulakan dengan satu template dan kemudian ubah suai.
- **Guna blok Price, bukan harga yang ditaip.** Blok ini berubah sendiri apabila anda tukar form, jadi page dan checkout tidak pernah memaparkan harga yang berbeza.
- **Semak paparan telefon sebelum anda simpan.** Kebanyakan pelanggan membuka page pada telefon.

## Isu biasa

### Boleh saya mula dengan landing page yang siap, bukan page kosong?

Boleh. Dalam builder, klik Templates dan pilih satu daripada 11 page untuk jenis form anda, atau Start blank. Kemudian tukar apa-apa teks, gambar atau warna. Template menggantikan page yang anda ada sekarang, jadi pilih template sebelum anda mula membina.

### Bagaimana saya paparkan blok hanya pada telefon atau hanya pada komputer?

Klik kanan blok itu pada page dan on-kan Hide on phone atau Hide on desktop. Guna butang telefon di bahagian atas builder untuk melihat rupa page pada telefon, kemudian klik Save.

### Adakah harga pada landing page saya berubah apabila saya tukar harga form?

Ya, jika anda guna blok Price. Blok ini mengambil harga daripada form anda dan dikemas kini sendiri, jadi tukar harga dalam tetapan form, bukan pada page.