在实际价格旁边显示一个划掉的价格，能让折扣一目了然。本教程将改造年度产品卡片，在年度计划的月均价格旁边显示月度计划的月费价格（带删除线），并在顶部添加折扣标识。 删除线格式会应用于整个文本元素——你无法只对较大文本中的某个变量添加删除线。因此，带删除线的原价需要放在独立的文本元素中，与折扣价并排放置在一个水平容器里。

开始之前

• 搭建一个包含产品的付费墙页面——例如，参考创建基础付费墙页面。本文以提供年度和月度产品的付费墙为例进行说明。

1. 叠加价格行

年度卡片目前只有一行价格——年度产品的 prod_price 变量后跟 /year，显示效果例如 $29.99/year。在它上方再添加一行月度价格。

1. 在 Layers 面板中，选择年度产品卡片内的价格文本。由于它已处于卡片的垂直容器中，复制的副本将堆叠在其下方。
2. 点击图层上的三点菜单 ，选择 Duplicate。副本出现在原件下方。下一步中，上方文本将成为月度价格行，下方文本保留年度价格。

2. 将月度行拆分为两个价格

月度行包含两个文本元素：划线的月度方案价格和年度方案的每月均摊价格。

1. 选中顶部文本元素，点击其三点菜单，选择 Wrap > Wrap in Horizontal Container。

2. 点击新容器内文本层的三点菜单，选择 Duplicate。

   

3. 选中第一个文本元素，清空其 Content 字段。点击变量图标 ，选择月付产品，然后选择其 prod_price_per_month 属性。在变量后面输入 /month。

4. 在 Design 标签页的 Typography 下，将 Decoration 设置为 Strikethrough （参见元素样式——Decoration）。

5. 选中第二个文本元素，按相同方式替换其内容，但选择年付产品的 prod_price_per_month 属性。在变量后面输入 /month。

3. 弱化年付价格

复制的月付价格继承了原有的价格样式，因此三个价格目前大小和字重完全相同。让年付价格更低调一些，使月付行更加突出。

1. 在画布上，选中最下方的文本元素——即年付价格。
2. 在元素上方的工具栏中，打开文本样式下拉菜单，选择一种更低调的样式——例如 Caption。或者，在 Design 标签页的 Typography 下选择其他样式。

4. 添加折扣徽章

徽章用于在价格旁边突出显示节省金额。

1. 点击 + > Badge。
2. 在 Layers 面板中，将徽章拖入年度产品内部，放在包含价格的垂直容器与单选按钮之间。
3. 选中徽章的文本图层，编辑 Content 字段——例如填入 Save 75%。

折扣百分比没有对应的变量——请根据你的实际价格计算后，以静态文本方式输入。

现在，年度卡片以月度套餐为参照价格：划线的月价、年度套餐折算的月均价，以及折扣徽章并排显示在同一行，完整年价显示在下方。

后续步骤

• 保存并发布您的流程。
• 将流程添加到版位，开始向用户展示。