# 用区块搭建landing page

> 从11个模板之一或空白页面开始制作landing page，加入区块和现成区段，选择字体，设置实时区块，然后保存。
>
> Source: https://docs.bcl.my/zh/landing-page-builder/

Landing page编辑器用区块为表单制作一个完整的页面：文字、图片、视频、实时价格、倒数计时、评价和按钮。你把区块拖到页面上，然后在右边的面板修改它们。点击**Save**之前，所有更改都不会上线。

## 打开编辑器

付款表单的**Type of Form**为**Landing Pages**时，就会使用编辑器。活动、预约和lead表单在开启**Use Landing Pages**时使用它。打开方法：

1. 编辑表单，把**Type of Form**设为**Landing Pages**，或在活动、预约或lead表单上开启**Use Landing Pages**。
2. 点击表单顶部的**Edit Landing Page**。BCL会先保存表单，然后打开编辑器。

   *(Screenshot: Edit Payment Form顶部，已标示Edit Landing Page)*

编辑器左边有三个标签页：**Blocks**、**Ready-made**和**Layers**。页面在中间，你点击的区块的设置在右边。

*(Screenshot: Landing page编辑器，已标示Blocks、Ready-made和Layers标签页)*

## 从模板开始

每种表单类型都有11个现成页面，附有照片和示例文字，有些是英文，有些是马来文。每张卡片上的标签显示它的版面：

| 版面 | 用途 |
|---|---|
| **Classic sales page** | 长页面，有视频、成果、优惠和常见问题 |
| **Problem-first** | 先讲顾客的问题，再展示你的解决方法 |
| **Buy now** | 短页面，先显示照片和实时价格，方便快速购买 |
| **Event agenda** | 活动页面，有议程、照片、价格和地点 |
| **Sign-up** | 报名或候补名单页面，有好处介绍和主办人 |
| **Local service** | 服务业务，有配套、服务流程、过往作品和WhatsApp |

使用模板的方法：

1. 点击右边的**Templates**，或右键菜单里的**Templates**。
2. 在你要的页面上点击**Use template**，或点击**Start blank**使用空白页面。如果你的页面已有区块，点击**Replace page**确认，或点击**Keep my page**返回。
3. 修改任何文字、图片或颜色，然后点击**Save**。

   *(Screenshot: Start with a template窗口，模板卡片上的Problem-first版面标签已标出)*

> **Caution**
> 模板会取代你现有的页面。如果选错了，请在保存之前点击**Undo**。

## 加入区块和现成区段

你在**Blocks**标签页制作页面。点击区块就能加入，或把它拖到页面上你要的位置。区块分成三组：

| 组别 | 区块 | 用途 |
|---|---|---|
| **Basics** | Section, Text, Image, Button, Divider, Space | 版面、你的文案和购买按钮 |
| **Media & Contact** | Gallery, Video, WhatsApp, Map | 照片、视频、聊天按钮和你的地址 |
| **Selling & Trust** | Price, Sold / Left, Timer, Testimonial, Badges, FAQ | 实时销售资料、评价、付款标志和常见问题 |

**Section**可以放其他区块，上下排列或并排。如果要现成的设计，请打开**Ready-made**标签页。它有15个区段，例如**Hero**、**Pricing**、**Offer**、**Urgency**、**Testimonials**和**FAQ**。点击一个区段加入，然后修改它的文字。

*(Screenshot: Ready-made标签页，显示Introduce和Sell区段)*

## 更改字体

有文字的区块，例如**Text**、**Button**、**Price**、**Testimonial**和**FAQ**，都有**Font**列表。更改区块字体的方法：

1. 在页面上点击该区块。
2. 在右边的面板里点击**Style**。
3. 在**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: Text区块的Style标签页，Font列表已标出)*

**Timer**区块还有**Digital**组，用于数字，例如Orbitron。

## 显示实时价格和已售数量

**Price**和**Sold / Left**区块会读取你的表单，所以你卖出产品或更改价格时，它们都保持正确。

- **Price**显示表单的价格。在**Crossed-out price**下，选择**From sale**在特价期间显示划掉的原价，选择**My own**自己输入价格，或选择**None**。价格本身请在表单设置里修改。

  *(Screenshot: Price区块设置，价格取自表单)*

- **Sold / Left**显示**How many sold**或**How many left**，每隔几分钟刷新一次。**Show once at least**会先隐藏它，直到卖出那个数量，所以新页面永远不会显示“0 sold”。

  *(Screenshot: Sold / Left区块设置，有How many sold、Wording和Show once at least)*

## 为每位访客倒数

**Timer**区块可以倒数到一个日期，或给每位访客各自的倒数计时。为每位访客设置倒数计时：

1. 加入一个**Timer**区块。
2. 在**Counts Down To**下，点击**Each visitor**。
3. 设置**Lasts**和**Unit**，例如15分钟。访客第一次打开页面时开始倒数。用同一个设备再次打开，倒数不会重设。
4. 在**When It Ends**下，选择**Show 00**、**Show text**显示一段信息，或**Redirect**让访客跳转到另一个页面。

   *(Screenshot: Timer区块设置，Counts Down To设为Each visitor)*

计时器不会关闭你的表单。如果要在某个日期停止销售，请看[显示倒数计时](/zh/countdown-timer/)。

## 排列、复制和隐藏区块

在页面上右键点击任何区块，就会出现菜单，有**Edit**、**Duplicate**、**Copy**、**Paste below**、**Move up**、**Move down**、**Add block above**、**Add block below**和**Delete**。

*(Screenshot: 区块的右键菜单，已标示Hide on phone和Hide on desktop)*

同一个菜单还有**Hide on phone**和**Hide on desktop**，让区块只在一种屏幕上显示。要查看结果，请点击编辑器顶部的手机按钮。点击旁边的电脑按钮就能返回。

*(Screenshot: 手机视图下的编辑器，已标示手机按钮)*

**Layers**标签页按页面上的顺序，从上到下列出每个区块。在很长的页面上，可以用它来查找和选择区块。

*(Screenshot: Layers标签页，列出页面上的区块)*

## 撤销和保存

编辑器会保留你的更改，直到你点击右上角的**Save**。在那之前，页面标题会显示**Unsaved**。编辑器支持以下键盘快捷键：

| 操作 | 快捷键 |
|---|---|
| **Undo** | Ctrl + Z |
| **Redo** | Ctrl + Shift + Z |
| **Duplicate** | Ctrl + D |
| **Delete** | Del |
| **Deselect** | Esc |

在Mac上，用Cmd代替Ctrl。如果你在有未保存的更改时离开，BCL会问你要不要先保存。

## 小贴士

- **开始制作之前先选模板**。模板会取代整个页面，所以先选一个，再慢慢修改。
- **用Price区块，不要自己输入价格**。你更改表单时它会自动更新，所以页面和结账页面永远不会显示不同的价格。
- **保存之前先查看手机视图**。大部分顾客都是用手机打开页面。

## 常见问题

### 我可以从现成的landing page开始，而不是空白页面吗？

可以。在编辑器里点击Templates，为你的表单类型选择11个页面之一，或选择Start blank。然后修改任何文字、图片或颜色。模板会取代你现有的页面，所以请在开始制作之前选好。

### 怎样让区块只在手机上或只在电脑上显示？

在页面上右键点击该区块，然后开启Hide on phone或Hide on desktop。用编辑器顶部的手机按钮查看页面在手机上的样子，然后点击Save。

### 我更改表单的价格时，landing page上的价格会跟着改变吗？

会，前提是你使用Price区块。它从表单读取价格并自动更新，所以请在表单设置里修改价格，而不是在页面上修改。