WordPress divi主题

如何使用 Divi 和我们的独家精品销售登陆页面设计独特的特色产品部分

by | May 16, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

在它消失之前获得交易!

google广告开户

此精品促销登陆页面是我们作为终身会员和网络星期一新客户为您提供的独家页面布局之一。 登陆页面布局和设计非常出色,以全新的方式轻松推广折扣和特色产品。 标题具有强烈的号召性用语,以教育用户获得有价值的折扣。 页面的不同部分根据“新品”和“热门”等不同的类别来推广产品。 该页面在页脚中以强烈的号召性用语结束,其中还包括倒数计时器。

在本文中,我将向您展示如何在您自己的网站上使用精品销售登陆页面,还将引导您了解如何使用 Divi 设计一个独特的特色产品部分。 为此,我将以创造性的方式使用 Divi 的商店模块来为您的 WooCommerce 产品提供特定类别的功能。

已经是终身会员? 您可以立即下载该包,无需参加我们的网络星期一特卖!

精品销售登陆页面设计

获取独家网络星期一精品促销登陆页面

在进入使用案例教程之前,您需要先体验独家网络星期一精品促销登陆页面,您可以通过成为新的优雅主题会员、升级现有帐户或已经成为我们的终身会员来获得该页面. 如果您确实已经是终身会员,您可以登录我们的会员区并在此处下载我们所有的独家布局包。 其他所有人都需要使用下面的按钮购买或升级,然后才能按照下面的教程进行操作。

在交易消失之前索取交易!

已经是终身会员? 您可以立即下载该包,无需参加我们的网络星期一特卖!

将精品销售登陆页面布局添加到您的网站

对于本文的其余部分,我们将假设您已经利用了我们的网络星期一(或黑色星期五)优惠,或者您已经是终身会员并且可以访问应用启动登陆页面布局。

从我们的会员区下载新的精品促销登陆页面布局后,您可以观看下面的视频,了解设置的简单程度。 我们还鼓励您按照本教程进行操作,以使您的网站为进一步定制做好准备。

WordPress divi主题

成功下载布局、将其导入 Divi 库并将其添加到新页面后,您就可以开始下面的用例教程了。

用例教程:如何使用 Divi 和我们的独家精品销售登陆页面设计独特的特色产品部分

如果您在您的电子商务网站上使用 WooCommerce,您可能已经利用了 Divi 的商店模块,该模块使您可以轻松地在您网站的任何位置显示您的产品。 在本教程中,我将向您展示如何设计一个独特的商店模块系列,每个模块都来自不同的产品类别。 这允许您单独设计每个产品/商店模块。 此外,每当将新的 WooCommerce 产品添加到商店模块中的特定类别时,您将拥有使用新产品更新模块的自动化功能。

这是我们将共同构建的内容的预览。

设置您的 WooCommerce 产品

对于本教程,您需要在您的网站上安装并激活 WooCommerce 插件。 启动并运行 WooCommerce 后,转到 WordPress 仪表板并导航到产品 > 添加新的。 然后更新以下内容:

给你的新产品一个标题和描述。
设置产品的价格和销售价格。
添加一个名为“精选”的新类别并选择它。
为产品添加特色图片。

然后发布产品。

注意:当您的产品特色图片尺寸相同时,此设计效果最佳。 我在本教程中使用的是 981 像素 x 800 像素。 如果图像尺寸不同,则页面上的特色产品框的高度会有所不同。

fiverr建站WordPress程序员

接下来,继续相同的步骤以添加另外四个产品。 对于您添加的每个新产品,请确保为每个新产品分配不同的类别。 这很重要,这样商店模块将能够显示该类别中的最新产品。 对于本教程,我只是将我的产品分为以下类别:精选、精选 1、精选 2、精选 3、精选 4、精选 5。

完成后,您就可以开始在精品销售登陆页面上创建特色产品部分了。

转到您已导入精品销售登陆页面的页面并部署可视化构建器。

在布局的第二部分下,创建一个具有 5 列 Row 的新常规部分。

独立站选品工具

将商店模块配置为从某个类别中提取

现在是时候开始将我们的商店模块添加到我们的列中了。 然后我们可以将每个配置为从不同的类别中提取。 在第一列中添加一个 shop 模块并更新以下内容:

类型:产品类别
产品数量:1
包括类别:精选
排序方式:排序方式日期:最新到最旧

接下来,将商店模块复制并粘贴到第 2 列中,并更新商店设置以仅包含“精选 2”类别。

高质量外链购买

然后对其余列继续此过程,如下所示:

将商店模块复制并粘贴到第 3 列,并更新商店设置以仅包含“精选 3”类别。

将商店模块复制并粘贴到第 4 列中,并更新商店设置以仅包含“精选 4”类别。

将商店模块复制并粘贴到第 5 列,并更新商店设置以仅包含“精选 5”类别。

JasperAI 10000字免费额度试用

有了这个功能,每次您在应用的任何类别中添加新产品时,商店模块都会自动在您的特色部分中显示该产品。 因此,这是在一个地方展示 5 个不同类别的最新产品的好方法。

设计商店模块

在我们开始设计我们的商店模块之前,请继续打开行设置并更新以下内容:

天沟宽度:1
自定义填充(平板电脑):左侧 10%,右侧 0%
自定义填充(智能手机):左侧 20%,右侧 0%

由于我们想一次对所有商店模块应用相同的设计,我们可以使用 Divi 的多选功能来选择所有商店模块。 为此,请按住 cmd(或 ctrl)并单击每个模块,直到全部选中。 然后单击所选模块之一上的设置图标以打开元素设置模式。 您在此处所做的任何设计更改都将应用于所有模块。

WordPress备份工具updrafplus

更新以下内容:

背景颜色:#241f32
背景颜色(悬停):#ff6363
图标悬停颜色:rgba(0,0,0,0)
悬停覆盖颜色:rgba(0,0,0,0)
销售徽章颜色(默认):#ff6363
销售徽章颜色(悬停):#241f32
文本方向:中心
标题文字颜色:#ffffff
价格文本颜色:#ffffff

宽度:120%(台式机)、100%(平板电脑)、100%(智能手机)

自定义边距(桌面):-20% 正确
自定义边距(悬停):左侧 -20%,右侧 0%
自定义边距(平板电脑):左侧 -20%,右侧 0%

自定义填充:5px 底部

通过将宽度(技术上的最大宽度)设置为 120%,在悬停时,您可以使用 -20% 的负左边距将模块扩展到其父列之外。

由于第 5 列中的商店模块不需要向左移动的悬停效果,请继续并禁用该模块上的自定义边距悬停效果。

这是最终结果。

由于我们设置自定义边距的方式,移动模块向左移动的悬停效果在移动设备上被禁用。 设计确实很好地响应。

当然,您可以随意尝试针对不同设计和悬停效果的更多设置。 此外,如果您喜欢该设计但不想使用 shop 模块,您可以随时使用 blurb 模块创建类似的设计。 然后,您可以将每个简介链接到产品类别页面或其他内容。

最后的想法

此用例是我们网络星期一交易的一部分,我们与黑色星期五客户和终身会员共享 6 个免费的限量版登录页面。 通过在这些日子里加入我们强大的社区并成为会员,您将获得:

  • 25% 折扣一切
  • 所有 6 个着陆页都是免费的
  • 访问我们很棒的主题和插件
  • 奖金奖品

抓住机会,今天就成为会员吧!