如何在 Divi Builder 中编辑产品页面模板

已发表: 2022-10-25

如果您使用 WordPress 的 Divi 主题并想要编辑您的产品页面,您需要了解一些事项。 首先,您需要创建一个子主题。 这将允许您在不影响原始主题文件的情况下更改代码。 设置子主题后,您可以在 Divi Builder 中编辑产品页面模板。 要编辑产品页面模板,首先转到 WordPress 管理面板中的 Divi Builder 选项卡。 然后,单击“模板”选项卡并从下拉菜单中选择“产品页面”。 进入 Divi Builder 后,您将看到构成产品页面模板的所有元素的列表。 您可以通过单击这些元素中的任何一个,然后在右侧的边栏中进行更改来编辑它们。 例如,如果您想更改产品图片,请单击“图片”元素,然后从 WordPress 媒体库中选择一个新图片。 完成更改后,单击 Divi Builder 侧边栏中的“保存”按钮。 您的更改现在将应用于您网站上的所有产品。

Divi Builder 是一款出色的工具,可让您直观地自定义 WooCommerce 网站,而无需编写任何代码。 在您商店的产品页面上,您将能够展示您的产品是如何展示的。 为产品页面着色并添加相关元素是个好主意,但还有很多其他内容。 Divi 主题包括一个 Divi Builder 页面构建器,可用于创建自定义页面。 您将能够快速轻松地个性化 WooCommerce 产品页面和您网站的任何其他部分,而无需任何编码经验。 WooCommerce 平台支持广泛的模块,可以轻松修改以满足您的特定要求。 使用 Divi Builder,您可以快速关闭客户评论计数并显示星级,或者您可以隐藏该功能。

您可以通过将产品库添加到产品页面来提高转化率。 我们建议您在订单中至少包含每件商品的 3-4 张照片。 如果您销售在线课程,您可能希望禁用数量选项以保持产品页面清晰。 切换使您更容易查看信息,同时保持您的产品页面干净。 我们将向您展示如何从下面的产品页面在产品描述下方安装切换模块。 在我们的产品/存档部分,标题将是产品/存档标题,但您可以选择最适合您作为作者的需要的材料。 通过从菜单中选择产品描述,您可以访问您的数据库。 完成更改后,您将在完成后立即收到自动更新。 此模块使您能够以简单的方式创建部分并个性化您的页面和帖子。

Divi Woocommerce 自定义产品页面

信用:diviextended.com

有很多方法可以自定义Divi WooCommerce 产品页面。 您可以更改布局、颜色、字体等等。 您还可以添加自定义 CSS 和 HTML 以进一步自定义产品页面的外观。

Divi Woocommerce 产品页面模板

信用:nielspicard.nl

divi woocommerce 产品页面模板是在您的网站上展示您的产品的好方法。 这种类型的模板允许您以干净和有条理的方式展示您的产品,使访问者可以轻松浏览和找到他们正在寻找的内容。 此外,divi woocommerce 产品页面模板可以通过让搜索引擎更轻松地查找和索引您的产品来帮助提升您网站的搜索引擎优化 (SEO)。

您可以使用 WooCommerce 在您的网站上创建电子商务商店,因为它包含所有必要的花里胡哨。 WooCommerce 的默认页面布局,尤其是产品页面,极其简单,缺乏创意。 在本教程中,我们将学习如何使用 Divi 从头开始​​创建 WooCommerce 产品页面模板。 这个分步视频向您展示了如何使用 Divi 创建 WooCommerce 产品页面模板。 然后,您可以根据此时定义的标准设计和布局您的产品。 可以将单个产品页面或产品存档页面创建为单独的模板。 在这两列中,都会有很多模块。

我们为每个模块创建了一个专门的部分,以帮助您添加和修改它们。 首先,我们必须首先为模板定义产品图像模块。 在接下来的步骤中,我们将向产品页面添加购物车通知。 产品名称和评级应显示在产品页面上。 通过详细说明产品的来源,用户将能够弄清楚他们在页面上的位置。 您可以通过选择添加新模块按钮,然后选择 Woo Breadcrumbs 添加面包屑。 还需要购物车通知和分隔线。

我们希望包含产品定价,以便向我们的用户展示添加产品评级后产品的成本。 然后,在价格文本部分,包括 Woo Price 模块。 下一步是从“设计”选项卡中选择“为按钮使用自定义样式”。 要保持设计一致,请选择紫色作为按钮文本颜色。 现在是时候添加产品描述了。 如果您按占位符 URL,它将显示产品页面的占位符文本,但它会动态更新以反映页面的内容。 在第 3 步中,您需要添加 Woo 相关产品模块。

此步骤需要制作面板的第三排,用于放置产品托盘。 通过测试您的产品页面模板来检查一切是否正常。 首先,我们必须先保存我们的模板。 如果一切顺利,您将能够使用 Divi 创建自定义 WooCommerce 产品页面模板。 Divi 强大的模块和直观的用户界面使您可以轻松地立即创建具有专业外观的设计。 为了使其尽可能短,我们在教程中只查看了一个设置。 因为每个模块都有自己的一组设计设置和选项,所以可能性是无限的。

Divi产品页面布局

Divi 产品页面布局是一种旨在在在线商店中展示产品的布局。 这种类型的布局通常包括产品的大图像,以及描述和价格。 大多数Divi 产品页面布局还包括一种让客户将产品添加到购物车的方法。

您可以使用 WooCommerce Layouts for Divi 创建在线商店。 Divi 商店附带大量模板,可让您自定义电子商务网站的各个方面,而不仅仅是 Divi 商店布局。 产品页面、商店页面、购物车页面和结帐页面均可用。 这些布局将通过创建用户友好的 Divi 购物车页面来帮助客户,如果他们当前的购物车过时,他们可以在中间留下购买。 当您使用这些 Divi 结帐页面模板时,您将可以完全控制从商店页面到结帐页面的整个网站。 通过使用此页面上的按钮,您可以连接到具有任何尺寸的屏幕分辨率的任何设备上的任何页面。

Divi主题店布局

如果您想使用 WordPress 建立在线商店,那么您需要选择一个包含电子商务功能的主题。 Divi 主题是许多在线商店的热门选择,因为它包括专门针对电子商务网站的预构建布局。 此布局包括产品网格、产品页面、购物车等。 您可以轻松自定义 Divi 主题以匹配您商店的品牌和风格。

以下页面包含可用于 Divi 的电子商务布局的完整列表。 Divi 的布局是市场上任何平台中最实用的,其设计来自世界各地的设计师和开发人员。 Divi Builder 允许您将电子商务布局直接导入您的 Divi 库,让您立即开始处理您的下一个 Divi 项目。 由于 Divi 主题与 WordPress 兼容,因此您可以在您的网站中使用上面显示的电子商务布局。 可以在侧边栏中使用搜索功能来查找和浏览此布局目录。 我们鼓励您将DivieCommerce 布局提交到 Divilayouts.com 目录。

为什么 Divi 是您电子商务网站的完美主题

Divi 是一个很好的电子商务主题。 Divi 是电子商务网站的绝佳平台。 有了它,您可以创建一个与 WooCommerce 集成的功能良好且多功能的网站。 无论您是想重新开始还是更新现有网站,Divi 都是一个绝佳的选择。