--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/product-page' title: '构建产品页面 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:25:28+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 这里为一个产品构建页面。照片在名称、价格和旁边 Buy now 按钮，随后三个功能、规格列表和销售行动号召。适用于您销售的任何产品。要比较多个方案，请添加 价格表 到它。 本视频构建名为 Insight Hub 的硬件产品页面。 tags: - 'Volg een tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 构建产品页面 description: |- 这里为一个产品构建页面。照片在名称、价格和旁边 Buy now 按钮，随后三个功能、规格列表和销售行动号召。适用于您销售的任何产品。要比较多个方案，请添加 价格表 到它。 本视频构建名为 Insight Hub 的硬件产品页面。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:25:28+0000' dateModified: '2026-10-24T09:09:48+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/product-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/product-page' description: |- 这里为一个产品构建页面。照片在名称、价格和旁边 Buy now 按钮，随后三个功能、规格列表和销售行动号召。适用于您销售的任何产品。要比较多个方案，请添加 价格表 到它。 本视频构建名为 Insight Hub 的硬件产品页面。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 构建产品页面. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [构建价格表](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) - [添加图标](/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon) - [构建营销落地页](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 这里为一个产品构建页面。照片在名称、价格和旁边 **Buy now** 按钮，随后三个功能、规格列表和销售行动号召。适用于您销售的任何产品。要比较多个方案，请添加 [价格表](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) 到它。 本视频构建名为 Insight Hub 的硬件产品页面。 ## 开始之前 - 您的角色有 **Edit with DXPR Builder** 权限。 - 媒体库保存产品照片。 - 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**. - 新元素落在列顶部。因此右列从按钮开始向上构建。 ## 第 1 步：添加产品 1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。 2. 点击 **+** 在版块上并选择 **Row**；它带有两个等宽列。 3. 点击 **+** 在左列中并选择 **Image**。点击 **Select Image**，勾选产品照片并点击 **Insert selected**。输入 **Alt attribute**：**SEO** 面板并点击 **Save**. 4. 点击 **+** 在右列中并选择 **Button**。设置 **Title** 为 "Buy now"，**Link** 到您的商店，**Type** 为 **Primary** 和 **Size** 为 **Large**，然后点击 **Save**. 5. 点击 **+** 在右列中再次并选择 **Text**；它落在按钮上方。输入价格为 **Heading 2** 并点击 **Save**。 6. 点击 **+** 再次并选择 **Text**；它落在顶部。输入产品名称为 **Heading 2**，添加一行描述并点击 **Save**。主题将页面标题打印为页面的 Heading 1。要使此标题成为 Heading 1，请参见 [构建 SEO 友好页面](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2)。 ## 第 2 步：添加功能 1. 悬停版块并点击 **Add Section Below**。给新版块 **Align text center** 类。 2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**. 3. 点击 **+** 在第一列中并选择 **Text**。输入功能名称作为 **Heading 3**，添加一行并点击 **Save**. 4. 点击 **+** 在同一列中并选择 **Icon**；它落在文本上方。选择 **Font Awesome Free Solid** 设置，搜索 `plug` 并点击图标。设置 **Size** 为 **Very Large (3x)**，打开 **Icon utilities**，设置 **Style** 为 **Circle** 并点击 **Save**. 5. 对第二列重复，带 `cloud` 和第三个 `battery-full`. ## 第 3 步：添加规格 1. 添加第三个版块，其中包含 **Add Section Below**。打开其 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**. 2. 点击 **+** 在版块上并选择 **Text**。输入 "Specifications" 为 **Heading 2**，然后逐行添加一项规格，并点击 **Save**. ## 第 4 步：添加行动号召 1. 添加第四个版块并打开其 **More** > **Settings**。选择 **Align text center** 在 **HTML classes**，然后紫色 **Background** 和白色 **Font color**：**Style** 面板。点击 **Save**. 2. 点击 **+** 在版块上并选择 **Button**。设置 **Title** 为 "Talk to sales"， **Link** 为 `/contact`, **Type** 为 **Light** 和 **Size** 为 **Large**，然后点击 **Save**. 3. 点击 **+** 再次选择 **Text**；它落在按钮上方。输入 "Insight Hub from 249 euro" 为 **Heading 2** 并添加一行。设置 **Font color** 为白色并点击 **Save**. ## 第 5 步：保存并预览 1. 点击 **Save** 在页面构建器工具栏上。 2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**. ## 进一步了解 视频中未展示： - **规格表**：通过以下方式插入表格 **Table** 文本工具栏上的按钮，而非每个规格一行。 - **图库**：将单张照片替换为 **Image carousel** 产品照片。 - **方案**：将价格链接到 [价格表](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/pricing-table)。 ## 您会看到的内容 产品照片填满左半，含名称、价格和 **Buy now** 右侧的按钮。随后三个居中功能，每个是名称和文字上方的圆圈图标。规格立于灰色横幅，紫色横幅以下列内容收尾 **Talk to sales**. ## 如果您看不到如图所示的页面 - **名称、价格和按钮顺序错误。** 它们从上到下放入，新元素落在列顶部。用其控制栏上的拖动手柄拖到位置。 - **图标没有圆圈。** **Style** 位于 **Icon utilities** 面板，而非 **General**。打开图标的设置，打开 **Icon utilities** 并设置 **Style** 为 **Circle**. - **标题在紫色上保持深色。** Text 元素没有 **Font color** 自己的。打开其 **Style** 面板并设置 **Font color** 为白色。 - **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。 ## 接下来做什么？ - [价格表](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) 用于多层级价格版块 - [图标元素](/hc/documentation/learn-dxpr-builder/elements/icon) 用于图标尺寸和样式 - [Marketing landing page](/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 用于围绕产品的营销页面