--- title: 如何建立登陆页？ description: 了解登陆页编辑器对您的业务有什么作用。建立专业版的登陆页，吸引访客浏览精美的页面… url: "https://www.benchmarkedm.cn/docs/how-to-create-a-landing-page/" updated: "2025-05-22" category: 登陆页 --- # 如何建立登陆页？ 了解登陆页编辑器对您的业务有什么作用。建立专业版的登陆页，吸引访客浏览精美的页面。 ![landing-page-builder](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/Benchmark-landing-page-builder-illustration.png?resize=1400%2C730&ssl=1) **选择您想了解更多的主题：** - [第一步：建立您的第一个着陆页](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#firststeps) - [如何复制登陆页面#复制](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#duplicate) - [区段](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#sections) - [如何添加背景图片](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#background-images) - [区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) - [订阅表格](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#signup) - [字体#字体](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#typography) - [区块动画#动画](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#animation) #####   --- ##### ##### 第一步：建立您的第一个登陆页 开始动手设计您的第一个着陆页，[登入您的 Benchmark 账户](https://ui.benchmarkemail.com/tw/login)，依照下列步骤操作： 1. 点击导览列的**「登陆页」**，然后选择**「登陆页」**。 2. 点击右上方的**「建立新登陆页」**按钮。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/create-new-lp.png?resize=1252%2C523&ssl=1) 1. 新增登陆页名称。此名称仅供您参考，访客不会看到。完成后点击**「下一步」**。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/add-a-name.png?resize=1274%2C429&ssl=1) ##### **想要复制先前的登陆页，**点击要复制的登陆页旁边的省略号选项 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/09/icon-dots.png?resize=35%2C35&ssl=1)。给复制的登陆页命名，或者保留系统默认的名称，然后，点击「保存」。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/Duplicate-LP.png?resize=1024%2C609&ssl=1) **复制的登陆页**，只复制了原始的登陆页的内容，像是文字，图片和链接。您需要完成登陆页的检查列表，才能发布。 1. 现在，您可以看到**检查列表**。右上角的**「发布」**按钮只有在检查列表底下的项目都完成才能启动。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/checklist.png?resize=1203%2C1006&ssl=1) 1. 填写检查列表底下的页面信息、标题和描述。登陆页标题和描述可以提升您的着陆页转换绩效，[点击此处](https://kb.benchmarkemail.com/tw/landing-page-builder/)了解更多。                                                              **注意：**检查列表底下的每个项目都完成后，检查标志就会变成绿色。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/step-one-done.png?resize=1110%2C252&ssl=1) 1. 现在开始进行**「设计」**步骤。 现在该轮到您动手制定登陆页了。在检查列表底下，点击**「设计登陆页」**按钮。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/click-on-design.png?resize=1400%2C643&ssl=1)   登陆页编辑器等于是我们的邮件编辑器兄弟，如果您已经熟悉邮件编辑器的操作，建立登陆页对您来说轻而易举。如果您不熟，请继续浏览下方说明，了解如何使用拖曳式编辑器。   画面左上方可以看到三个标签。系统默认选取的第一个是**「排版」**。您可以选择**「空白排版」**从头开始设计，或是在**「模板」**处选择其中一款内建模板。两个选项都可以设计出符合移动设备浏览的精美登陆页。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/layouts.png?resize=1271%2C491&ssl=1) 选择排版之后，下图就是您看到的画面。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/screen.png?resize=1764%2C1111&ssl=1) 1. **排版：**您可以在此选项更改默认的模板，或使用空白的排版。如果选择更改模板，已经建立的着陆页内容将永久遗失。**此动作无法还原。** 2. **区块：**您可以在此标签下找到两个选项： 1. [区段](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#sections) 2. [区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) 3. **全局设定：**在此标签底下，您可以找到背景颜色。您可以更改登陆页的背景颜色。 您也可以找到背景图片选项，使用此选项可以新增一张图片作为整个登陆页的背景。了解如何新增背景图片，[**点击此处**](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#background-images)。最后，您也可以设定登陆页标题和内文的[字体](https://kb.benchmarkemail.com/how-to-create-a-landing-page/#typography)。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/global-styles.png?resize=350%2C201&ssl=1) 1. **显示区段按钮：**此按钮会显示登陆页内的区段以及每个区段内的字段数量。显示区段按钮有更改区段的箭头，以及重复，删除和齿轮选项，用于更换区段的背景和内容排版。 2. **显示区块按钮：**点击此按钮，每个区块会出现绿色外框，您可以看到移动、复制或删除区块的选项。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/block-button.png?resize=300%2C349&ssl=1) 1. **移动设备画面按钮：**您使用的响应式编辑器会自动调整并优化区块在移动设备呈现的画面。点击此选项可以将画面改为移动设备置浏览的画面。如果不喜欢移动设备排版，您可以自行修改区段，调整成符合您的内容。记住，这里所做的变动也会影响台式电脑浏览的画面。 2. **名称栏：**画面右上角是您的登陆页名称，不是页面标题。 3. **返回检查列表：**点击此选项会回到检查列表，可以编辑着陆页的其他信息。 4. **登陆页排版：**设计登陆页的地方。您可以拖曳内容区块到此处，自定义您的登陆页内容。 5. **保存选项：**Benchmark 每隔几秒钟备份您编辑的内容。您在这里可以看到上一次储存时间。 6. **预览：**此选项可以让您浏览登陆页在浏览器呈现的样子。 7. **保存及下一步：**点击此选项会储存您编辑的内容并回到检查列表，然后可以选择发布或之后继续编辑。   **隐藏选项** 此选项可以让您在部份设备隐藏某些区块。点击您要隐藏的区块，在左边的区块内容将横杆从灰色切到蓝色。您可以选择在移动设备或台式电脑隐藏某些区块。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/hide-options.png?resize=300%2C123&ssl=1) #####   [返回页首](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#top) ---   ##### 区段 登陆页区由不同的区段组成。一个登陆页可能有多个区段，一个区段可能有不同区块。 您可以在「区块」标签底下找到「区段」选项。您可以新增想要的区段到登陆页。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/sections-behind-blocks.png?resize=300%2C297&ssl=1) 区段由栏位组成，从一栏到四栏的区段都有。 **要新增区段到您的着陆页**，只要选择您要的字段数量的区段，拖曳到右边的编辑画面。请参考下方动图。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/drag-section.gif?resize=960%2C597&ssl=1) 要浏览排版的区段，点击**「显示区段」**按钮。 点击**「显示区段」**，您会看到登陆页分成不同区段**，每个区段会显示栏位数量**以及下列选项： 1. **箭头：**点击箭头可以上下移动区段。 2. **齿轮：**点击齿轮会开启区段设定，您可以在此更改特定区段的背景颜色，或者给特定的区段添加背景图片。 3. **复制：**您可以复制整个区段，复制完区段就可以使用。 4. **垃圾桶：**可以删除整个区段。**此动作无法还原。** 要退出区段模式，点击**「隐藏区段」**按钮。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/sections-areas-icons.png?resize=1277%2C561&ssl=1) #####   [返回页首](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#top) --- ##### 如何添加图片背景 区段和**全局样式**可以使用背景图片。 **新增区段背景图片** 此选项可以在登陆页设计中给特定的**区段**添加背景图片。 1. 在登陆页设计，点击**「显示区段」**选项。 2. 找到想要添加背景图片的区段，点击「齿轮」。 3. 区段设定会显示在左侧。点击**「新增背景」**。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/add-background-image-01.jpg?resize=300%2C273&ssl=1) ##### **添加整个登陆页的背景图片** 从「全局样式」标签添加背景图片，可以为整个登陆页设计添加背景图片。 1. 在登陆页设计，点击**「全局样式」**选项。 2. 点击**「背景图片」**选项。 3. 然后点击**「新增背景」**。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/add-background-from-global.png?resize=300%2C285&ssl=1) **适用两种添加背景图片作法：** 现在，您可以看到[图库](https://kb.benchmarkemail.com/cn/what-is-the-image-gallery/)，选择现有的图片或[新增图片](https://kb.benchmarkemail.com/cn/how-to-add-images/)。 插入图片后，新的设定选项会显示出来。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/settings-for-backgrounds.jpg?resize=915%2C692&ssl=1)   1. **背景样式** 1. **填满。**图片会填满整个区段，滚动页面时，图片保持静止不动。下面是登陆页面使用填满背景范例。此范例中，我们在登陆页的开头以及结尾各使用背景图片。在中间的区段部分，我们添加与，打造一种渐变的效果。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/fill-background-ex.gif?resize=690%2C405&ssl=1) 2. **并排。**根据图片尺寸进行平铺。平铺的图片效果会类似于马赛克墙，图片数量会依据屏幕尺寸有所调整。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/tiled-background.png?resize=1642%2C1147&ssl=1) 3. **视差。**此选项可以固定您的背景图片，拉动登陆页时会制造一种动态的效果。图片占全屏100%，您也可以设定图片的位置。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/parallax-example.gif?resize=690%2C482&ssl=1)**请注意：**上下拉动页面时，视差效果最明显。您可以从一个部分切换到另一个部分，看起来上一个图片消失了，新图片完全覆盖了它。如下方的红酒范例。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/empty-full-cup.gif?resize=690%2C316&ssl=1) 2. **图片位置。**可以轻松更改图片的位置，选择最佳的位置。 3. **编辑选项** 1. **编辑：**使用我们的图片编辑器来裁剪或新增图片效果。 2. **替换：**如果不是您要使用的图片，可以选择替换它。 3. **重新编辑**：此选项可以删除背景图，使用另外的图片，或者背景颜色。 4. **内容排版![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/content-layout.png?resize=296%2C158&ssl=1)** 1. **边框背景：**此选项也称为方框，周边有间距以及应用了背景颜色。内容居中。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/boxed-lp.png?resize=1702%2C883&ssl=1) 2. **全屏背景：**此选项仅显示内容，内容周边不会添加边框。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/full-width-lp.png?resize=1702%2C883&ssl=1) 5. 完成后，记得点击**「保存及关闭」**。 1. #####   [返回页首](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#top) --- ##### ##### 区块 区块是设计元素也具有功能性。点击**「区块」**标签，您会看到两个选项：**「区段」**跟**「内容」。**想浏览可用的区块，点击**「区块」**标签底下的**「内容」**。 要新增区块到您的排版，点击区块并拖曳到您想要放置的位置。请参考下方动图。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/draggin-a-block.gif?resize=960%2C597&ssl=1) 下方是可用的区块。浏览说明，了解如何使用区块。   - [单图区块和图卡区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#image-block) - [图文区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#caption-block) - [文字块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#text-block) - [视频区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#video-block) - [分段区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#divider-block) - [按键区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#button-block) - [社群追踪&社群分享区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#social-block) - [导览列](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#navigation-bar) - [订阅表格](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#signup) - [电子商务区块 ](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#ecommerce-block)**NEW** - [Shopify 产品区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#shopify-product) **NEW** - [已保存的区块](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#saved-block) **NEW** [返回页首](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#top) --- #####   ###  ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/image-blocks-icons.png?resize=229%2C126&ssl=1) ##### ##### 单图区块和图卡区块 您可以透过这些区块上传图片，或从您的图库选择图片。要使用这些区块，将他们拖曳到您的登陆页，然后新增图片。 **单图区块**可以新增图片到您的版型，而**图卡区块**可以同时新增图片和文字，放到您的版型。 下面左边是图片区块，右边是图卡区块。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/image-block-and-card.png?resize=1242%2C663&ssl=1) ###### **该使用哪一个？** 使用**图片区块**可以新增一张简单的图片。 使用**图卡区块**可以给图片添加文字叙述。移除这个区块，文字叙述也会跟着移除。 **想了解如何新增**图卡区块请[点击此处](https://kb.benchmarkemail.com/how-to-add-images/#image-card)**；**单图区块则[点击此处](https://kb.benchmarkemail.com/how-to-add-images/#image-block)**。** **您可能感兴趣的主题：** - [使用图片编辑器编辑您的图片](https://kb.benchmarkemail.com/edit-and-resize-images/) - [什么是图库？它支持什么类型的图片？](https://kb.benchmarkemail.com/what-is-the-image-gallery/) - [如何取得图片的 URL？](https://kb.benchmarkemail.com/how-to-add-images/#how-to-get-an-image-url) - [如何取得免费图片？](https://kb.benchmarkemail.com/how-to-add-images/#stock-photos) - [从编辑器删除图片](https://kb.benchmarkemail.com/how-to-add-images/#deleting-images) #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/iconcaption-blocks.png?resize=347%2C124&ssl=1) ##### ##### 图文区块 编辑器提供三种**图文区块：** **右栏文字** **左栏文字** **底端文字** 想了解如何新增**图文区块**，[点击此处](https://kb.benchmarkemail.com/how-to-add-images/#image-caption)。 **图文区块**可以在区块内同时新增图片以及文字。图文区块和图卡区块最主要的差别在于图文区块没有框架，所以您可以调整区块内的间距，如下图所示（左图为图文区块，右图为图卡区块）。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/caption-block-or-image-card.png?resize=1282%2C709&ssl=1) 想了解如何新增**图文区块，**[**点击此处**](https://kb.benchmarkemail.com/how-to-add-images/#image-caption)**。** #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ##### 文字区块 您可以使用**文本块新增文字到您的登陆页。要使用此区块，将区块拖曳到您想要放置的位置。接着，点击区块，将默认文字改成您的内容。** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/text-block.gif?resize=960%2C597&ssl=1) 使用文本块的几点注意事项。 **复制粘贴** 如果您要复制文字并贴到您的着陆页，我们建议您使用**贴上** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/plain-text-icon.png?resize=25%2C25&ssl=1)功能，移除文字内任何隐藏字符，因为他们可能会影响您的文字设计。 **原始码** **要新增原始码，点击原始码** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/view-code-icon.png?resize=25%2C20&ssl=1) **图示，贴上您的代码。** 如果您没有看到上述的符号，点击工具栏右边的**「更多」**图示。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/text-edit.png?resize=1288%2C260&ssl=1) #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/video-icon.png?resize=112%2C125&ssl=1) ##### ##### 视频区块 视频是非常有效的视觉工具。透过视频，您可以呈现产品的质量，或是为什么顾客应该放弃您的竞争对手，选择您的产品。千万别错失在登陆页使用视频的机会。 如果您想了解如何上传视频到视频库以及如何新增视频到您的排版，[**点击此处**](https://kb.benchmarkemail.com/cn/how-do-i-upload-a-video-into-my-video-gallery/)。 #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/10/Divider.png?resize=116%2C126&ssl=1) ##### ##### 分段区块 使用分段区块将登陆页的不同区块区隔开来。这个区段不一定要设定为空白。要新增分段区块，将区块拖曳到您想要的位置。[了解所有分段区块的信息](https://kb.benchmarkemail.com/cn/using-email-dividers/)。 #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/button-icon.png?resize=112%2C125&ssl=1) ##### ##### 按键区块 行为召唤 (CTA) 按钮是登陆页最重要的部份。它是决定登陆页以及其他营销活动是否成功的决定因素。要新增按键，将区块拖曳到您想要的位置。在左侧面板，您会看到自定义按键的选项。继续阅读，了解如何设定按键**内容。** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/button-screen.png?resize=1762%2C1089&ssl=1) 1. 您可以在这个方框内新增按键文字，也就是所谓的行为召唤。登陆页会有一个目标或营销目的，而行为召唤可以协助您达成这个目的。撰写吸睛的文字，抓住访客的目光。 2. 首先，选择「链接类型」，然后在「网站 URL」输入网址。注意，这个页面可能是外部 URL，或是您同一个登陆页的某个地方。举例，如果按键写「注册」，该按键链接可以导引访客到同一个登陆页的订阅表格。要插入其他连结，请依照下列步骤操作： 1. 您可以点击位于上方的文字编辑工具栏的「插入链接」，然后新增网址。 2. 或是直接在按键区块内容选择「链接类型」。**注意：**要新增锚点，您需要先建立[锚点](https://kb.benchmarkemail.com/tw/what-is-an-anchor-link-can-i-use-one-in-benchmark-email/)。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/other-CTA-options.png?resize=400%2C401&ssl=1) 3. 在画面上方的文字编辑工具栏自定义文字以及链接的各项设定。 4. 如果登陆页有多个按键，您不需要逐一设定。设定其中一个按键，，然后勾选左侧面板「内容」标先底下的「套用所有按键区块」。登陆页上的所有按键就会套用相同的内容设定。 #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/social-media-and-social-follow.png?resize=227%2C121&ssl=1) ##### 社群媒体&社群追踪区块 社群媒体区块很重要。我们的编辑器提供两种类型的区块，可以增加社群渠道。要使用任何一个区块，拖至选定的位置。 **社群媒体区块**可以让您添加社群媒体图标，或者图标加文字。这个区块可以让您添加 20 种不同的社群平台，包括Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor 等。 **社群分享区块**可以添加：Facebook, Twitter, Linkedin, Myspace, 和 instapaper。这个区块可以让用户直接分享登陆页面到社群媒体。 **使用哪一个区块？** 如果您想引导登陆页访客到社群媒体，使用**社群媒体**区块**。**用户点击想要浏览的社群媒体，以及点赞，或者添加到偏好中。 现在，如果您想要用户分享您的内容，就使用**社群分享**区块。 **依据以下指示在两个区块内添加社群媒体：** 1. 拖动想要使用的区块或点击现有的社群媒体区块。 2. 在左侧导览列，找到**「内容」**标签。 3. 点击**「新增」**下拉选单并选择平台，然后点击方框旁边的**加号**图标。 4. 在排版中，点击新增的社群平台图标。自定义图标选项设定会显示在左侧。 5. 新增 URL 链接，自定义图标。完成后，您也能使用选项**「套用圆角至所有区块的按键」**，会应用到所有社群媒体按钮。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/apply-to-all-radius.png?resize=280%2C108&ssl=1) 此外，将鼠标放在社群媒体图标上，您可以**移动**或**删除**。   ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/hoverin-social-icons.png?resize=250%2C104&ssl=1) #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---     ## ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/navigation-bar-icon.png?resize=112%2C125&ssl=1) ##### ##### 导览列 导览列可以让您的访客浏览更多关于您的企业消息。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/content-navigation-bar-options.png?resize=300%2C428&ssl=1) 1. **新增链接**，只要点击「内容」标签底下的「加号」按钮。要自定义链接，点击导览列区块的「链接」，设定的选项会显示在左边面板。您可以新增最多六组链接。链接类型有两种可以选择：文字或图片。 2. 导览列有三种排版供您选择。您可以结合图片和文字。点击并选择符合您设计风格的选项。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/navigation-bar-example.png?resize=1245%2C397&ssl=1) 1. 使用水平对齐和垂直对齐选项设定导览列的排列方式。「间距宽度」决定每个链接之间的距离。 2. 移动设备样式可以选择默认、垂直叠加以及垂直叠加并居中。您可以选择浏览登陆页在移动设备上呈现的样子。 #####   [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ##### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/signup-form-icon.png?resize=112%2C125&ssl=1) ##### ##### 订阅表格 使用登陆页收集订阅用户。收集越多订阅用户就能发送您的讯息给更多人，业绩也会跟成长。 如果先前已建立内嵌式订阅表格（进阶），请依照下列步骤操作。要建立内嵌式订阅表格（进阶），[**点击此处**](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#embedded)**。** 1. 拖曳订阅表格区块到您要放置的编辑画面。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/drag-signup-form-icon.gif?resize=960%2C516&ssl=1) 2. **在左侧面板的下拉式选单中选择现有的订阅表格。 注意：登陆页只能使用内嵌式订阅表格（进阶）。** **![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/select-a-signup-form.png?resize=300%2C184&ssl=1)** 1. 您的订阅表格会出现在刚才选取的位置。在登陆页编辑器，您可以将**「自定义宽度」**从灰色切换成蓝色，自定义订阅表格宽度。如果您要设计订阅表格，点击**「开启订阅表格编辑器」。**您可以在弹出的新页面编辑您的订阅表格。完成后，点击**「保存并发布」**及**「确认」**。 2. 更新过的内容过给秒后会在登陆页显示出来。如果没有看到更新，请删除登陆页上的订阅表格**（移动鼠标到订阅表格区块，点击删除按钮）**，重复步骤再次添加。 **注意：**您可以随时在下拉式选单中选择新的订阅表格。 ##### [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) --- ##### ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/ecommerce-block.png?resize=115%2C129&ssl=1)   ##### 电子商务区块   您可以在登陆页里使用电子商务区块，推广和销售您的产品。 电子商务区块包含以下内容： 1. 图片占位符 2. 产品描述 3. 产品价格 4. 按钮 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/e-commerce-block-BME.png?resize=480%2C383&ssl=1) 要使用产品区块，点击区块并拖曳到登陆页区段里面。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/ecommerce-block.gif?resize=634%2C420&ssl=1) 要自定义您的电子商务区块，请按照以下步骤。 1. 先添加一张产品图片。 2. 添加产品描述；内容应该简短且带有描述文字。 3. 更新您的产品价格。 4. 然后，自定义产品按钮： - 按钮文字 - 按钮链接，新增一组链接，让联络人能够进到网站完成购买。 - 最后，设置搭配您品牌特性的按钮样式。要省去重复操作，您可以设定样式套用到登陆页里所有按钮。要了解更多关于按钮样式，[点击此处](https://kb.benchmarkemail.com/cn/emails-sections-and-blocks/#button-block)。 如果不想要使用任何区块元素，在「内容」标签下关闭即可。   1. 完成后，点击**「保存」**，然后点击**「保存及下一步」**，或者只点击邮件外边即可保存操作。 以下是使用电子商务区块和设置样式的范例。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-ecommerce-03.png?resize=640%2C606&ssl=1) ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-ecommerce-02-1.png?resize=640%2C557&ssl=1) ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/example-ecommerce-01.png?resize=640%2C527&ssl=1) ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/4-columns-e-commerce-block-example.png?resize=1437%2C892&ssl=1) [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) ---   ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-block-icon.png?resize=115%2C127&ssl=1) ##### Shopify 产品区块   要开始，点击区块并拖曳到电子邮件区段里面。 要使用 Shopify 产品区块，您应该有一组已启用的付费 Shopify 账户。首次使用这个区块，您需整合Shopify 到 Benchmark 账户。要了解如何整合 Shopify 商店到 Benchmark，[点击此处](https://kb.benchmarkemail.com/cn/integrate-benchmark-shopify/)。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/02/adding-shopify-to-lp.gif?resize=688%2C450&ssl=1) 成功整合 Shopify 账户到 Benchmark，您可以看到可选择的 Shopify 产品列表。 选择可用的产品。区块会自动填入 Shopify 产品详细资讯。 **Shopify 产品区块包含以下资讯：** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-product-block-container.png?resize=400%2C408&ssl=1) 1. **产品图片** 1. 产品图片是从 Shopify 产品 URL 获取的。图片不会保存在 Benchmark 图库。但是，如果使用过 Benchmark 图片编辑器修改，修改过的图片会另存在 Benchmark 图库。 2. **产品描述** 1. 产品描述从 Shopify 中获取产品名称。 3. **产品价格** 1. 产品价格是 Shopify 商店指定的产品价格。 4. **产品按钮** 1. 产品按钮会自动连到您 Shopify 商店的产品 URL。 **重要** - 如果您的 Shopify 账户不是后台账户，需要产品权限。要了解更多关于 Shopify 用户权限，[点击此处](https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts#manage-staff)。 - 一次只能连接到一个 Shopify 商店。使用「更改商店」选项移除先前的商店产品。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-change-store.png?resize=450%2C262&ssl=1) - Shopify 提供的资讯会自动填入 Shopify 产品详细资讯。因此，在 Benchmark 内任何更改的详细资讯不会更新到 Shopify。 - 如果电子邮件或登陆页已经选择了一项产品，之后该产品在 Shopify 有更新，产品详细资讯不会自动更新到 Benchmark。 - 封存的产品不会出现在可选择的产品列表里。 - 使用电子邮件的分析报告来追踪电子邮件里面 Shopify 产品 URL 的点击数。 - 复制区块可以保留先前添加到原本区块的格式。但是，如果您选择一款不同的产品，且先前的格式已经移除，您需要重新设定格式。 **下面是一些 Shopify 产品区块使用和样式示例：** ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/shopify-4columns-example.png?resize=1514%2C1059&ssl=1) ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-example-01.png?resize=818%2C710&ssl=1) ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-example-002.png?resize=917%2C1046&ssl=1) ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/shopify-example-03.png?resize=983%2C1052&ssl=1) [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) --- ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/saved-block-icon.png?resize=115%2C129&ssl=1) #### #### 已保存的区块 使用已保存的区块，节省设计时间。您可以保存设计好的区块，以便后续设计重新使用。保存区块时，区块的样式、文字以及图片会保留下来。添加保存的区块到您的设计后，您就可以修改内容，原本保存的区块则不会改变。 **要保存区块，**移动鼠标到区块上方，点击「保存区块」选项。命名区块，点击**「保存并关闭」**。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/saving-a-block.gif?resize=1226%2C786&ssl=1) ****要使用「已保存的区块」**** 1. 拖曳已保存区块到设计中，放置到想要放置的区段。 2. 选择要使用的区块，继续编辑区块或保存并关闭。 - 将鼠标放置在已保存的区块上，会显示并预览区块的内容。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/adding-a-saved-a-block.gif?resize=1226%2C786&ssl=1) **删除「已保存的区块」** 1. 拖曳已保存的区块到任何区段。您会在左边看到先前已保存的区块清单。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/saved-block-list.png?resize=1024%2C464&ssl=1) 1. 点击垃圾桶图标，选择「删除」选项确认操作。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2010/09/delete-saved-blocks.png?resize=1024%2C397&ssl=1) 如果没有保存的区块，您可以从设计中删除「已保存的区块」。 [返回区块选单](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#blockmenu) --- ##### ##### 字体 在登陆页使用 Google 字体，可以增加个性设计。 按照以下步骤使用 Google 字体： 1. 前往登陆页设计步骤。 2. 点击**「全局样式」**标签 3. 找到**「字体」**选项，并点击它。 4. 现在，您可以选择标题和内文使用的字体。 ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/typography-ex.png?resize=300%2C583&ssl=1) ##### [返回页首](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#top) --- ##### 区块动画 在登陆页使用区块动图吸引用户，让您的登陆页看起来更加生动有趣。 按照以下步骤使用区块动图字体： 1. 前往登陆页设计步骤。 2. 拖动任何区块到登陆页。所有区块都可以使用区块动图功能。 3. 区块放置排版中，您可以看到左侧有所选区块的设定选项。 4. 在底部找到区块动图，并勾选。 动画设定会显示出来。选择要使用的动画效果类型，以及**时间**。您也可以新增**延迟**，这是动画效果出现前的延迟时间，增加**偏移，**这是指动画出现之前，动画对象与浏览器之间的距离。   ![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2020/01/animated-block-option.png?resize=300%2C208&ssl=1) [返回页首](https://kb.benchmarkemail.com/cn/how-to-create-a-landing-page/#top) --- 如果您有关于登陆页的任何问题，请随时透过电子邮件、[在线客服](https://secure.livechatinc.com/licence/1067033/open_chat.cgi?groups=12)或[电话](https://kb.benchmarkemail.com/tw/what-are-benchmark-emails-business-hours/)与我们的支持团队联络。