作为终身会员和今年黑色星期五的新客户，我们为您提供的独家登陆页面之一是令人惊叹的 UI Kit 登陆页面。 这种布局包含一些 Divi 最好的内置设计组合和高质量的模型，将您的网站提升到一个新的水平。 在这篇文章中，我们将向您展示如何掌握它并有效地使用它。

如果您是当前的终身客户，或者如果您在我们的黑色星期五促销期间购买了新帐户或升级了，您可以立即下载此布局。

获取独家黑色星期五 UI 套件登陆页面

在进入此用例之前，您需要了解独家的黑色星期五 UI 套件登陆页面，您可以通过成为新的优雅主题会员、升级您现有的帐户或已经成为我们的终身会员来获得该页面。 如果您确实已经是终身会员，您可以登录我们的会员区并在此处下载我们所有的专属登陆页面。 其他所有人都需要使用下面的按钮购买或升级，然后才能学习我们教程的其余部分。

在它消失之前声明交易！

使用 Divi 的列结构精美地列出产品和功能

对于本文的其余部分，我们假设您已经利用了我们的黑色星期五优惠，或者您已经是终身会员并且可以访问黑色星期五 UI 套件登陆页面。

从我们的会员区下载新的 UI Kit Landing Page 后，您可以观看下面的视频，看看它的设置有多简单。 我们还鼓励您按照本教程进行操作，以使您的网站为进一步定制做好准备。

在这个用例帖子中，我们将向您展示如何使用 Divi 的新列结构惊人地列出您的功能和/或产品。 我们将处理的设计与 UI Kit Landing Page 一起看起来很棒，并允许您以有效和美观的方式使用页面上的空间。

预览

让我们来看看不同屏幕尺寸的结果。

悬停和动画

我们还将为各种设计元素添加一些微妙的悬停和动画设置。 这将提供以下交互：

让我们开始吧！

使用 UI Kit 登陆页面添加新页面

您需要做的第一件事是使用您下载并上传的 UI Kit Landing Page 创建一个新页面。 如果您不确定如何操作，请务必查看本文前一部分中的视频，该视频将逐步指导您完成此操作。

在页面上找到功能部分

上传布局后，向下滚动，直到看到页面上的功能部分。

删除现有行

删除您可以在本节中找到的最后两行。 我们将用我们的功能/产品列表替换这些行的内容。

在包含行的行下方添加新行

列结构

使用以下列结构向该部分添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并在设计选项卡中修改大小设置。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：是
• 均衡柱高：是

间距

为了确保这个设计在所有屏幕尺寸上看起来都很棒，我们将使用不同的自定义边距和填充值：

• 上边距：100px
• 下边距：100px
• 顶部填充：87px
• 第 1 列顶部填充：100 像素（桌面）、0 像素（平板电脑和手机）
• 第 2 列顶部填充：100 像素（桌面）、0 像素（平板电脑和手机）
• 第 3 列顶部填充：100 像素（桌面）。 0px（平板电脑和手机）
• 第 3 列底部填充：50 像素（平板电脑和手机）
• 第 4 列左填充：10px（仅限手机）
• 第 4 列右填充：10px
• 第 5 列左填充：5px（桌面和平板电脑），10px（手机）
• 第 5 列右内边距：5px（桌面和平板电脑），10px（手机）
• 第 6 列左填充：10px
• 第 6 列左填充：10px（仅限手机）

将文本模块添加到第 1 列

添加内容

是时候开始添加模块了！ 将文本模块添加到带有数字的第一列。

默认背景颜色

为该模块添加背景颜色。

• 背景颜色：#0f0f0f

悬停背景颜色

并在悬停时更改背景颜色。

• 背景颜色：#ff5400

背景图片

您还可以将可以在媒体库中找到的图标图像之一添加到背景中：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中心
• 背景图像重复：不重复

默认文本设置

继续修改文本设置。

• 文字字体：Muli
• 文字字体粗细：轻
• 文字颜色：#ffffff
• 文字大小：80px（桌面和手机），40px（手机）
• 文本行高：1em

• 文字阴影颜色：##ffffff
• 文本方向：左

默认间距

添加一些自定义填充来创建一个正方形。

• 顶部填充：200px
• 左填充：50px（仅限手机）
• 右填充：50px（仅限手机）

悬停间距

修改悬停时的间距设置。

• 左填充：100px

边界

为了与 UI Kit Landing Page 相匹配，我们还添加了一些微妙的圆角。 在每个角上添加“20px”。

盒子阴影

使用以下框阴影也为模块添加一些颜色：

• 框阴影水平位置：20px
• 框阴影垂直位置：-50px
• 框阴影传播强度：17px
• 阴影颜色：#593aff

动画片

最后但并非最不重要的一点是，向文本模块添加一个非常微妙的幻灯片动画。

• 动画风格：幻灯片
• 动画方向：右
• 动画强度：3%

将分隔模块添加到第 2 列

能见度

我们需要的下一个模块是分频器模块。 继续并在第二列中添加一个。 确保启用了“显示分隔线”选项。

• 显示分隔线：是

颜色

接下来更改分隔线颜色。

• 颜色：#ffffff

间距

为了重叠第一列中的文本模块，我们将使用一些自定义边距值，我们将根据不同的屏幕尺寸进行调整。

• 上边距：30px
• 左边距：-200px（桌面和平板电脑），0px（手机）
• 右边距：200px（桌面和平板电脑），0px（手机）

将文本模块 #1 添加到第 3 列

添加内容

进入下一栏！ 在这里，我们需要的第一个模块是标题文本模块。 继续并添加您的第一个功能或产品的标题。

标题文字设置

然后，转到标题文本设置并进行一些更改以匹配 UI Kit Layout Pack。

• 标题 3 字体：Muli
• 标题 3 字体粗细：轻
• 标题 3 文本颜色：#ffffff
• 标题 3 文字大小：30px（桌面和平板电脑），18px（手机）

间距

为了将此模块推向左侧，我们将使用一些自定义间距值。

• 上边距：20px
• 下边距：20px
• 左边距：-180px（桌面和平板电脑），0px（手机）
• 左填充：20px（桌面和平板电脑），50px（手机）
• 右内边距：20px（桌面和平板电脑），50px（手机）

将文本模块 #2 添加到第 3 列

添加内容

我们需要的下一个模块是描述文本模块。 继续并输入您的功能或产品的描述。

文字设置

接下来更改文本设置。

• 文字颜色：rgba(255,255,255,0.5)
• 文本行高：2.2em

间距

使用一些自定义间距值也将这个模块推到左边。

• 左边距：-180px（桌面和平板电脑），0px（手机）
• 左填充：20px（桌面和平板电脑），50px（手机）
• 右内边距：20px（桌面和平板电脑），50px（手机）

在第 3 列中克隆和放置按钮模块

我们在第 3 列中需要的最后一个模块是按钮模块。 为了节省时间，我们将克隆页面上现有的按钮，并将副本放在我们添加的其他两个模块的正下方。

更改内容

更改按钮模块的内容。

更改间距

我们也将这个模块推到左边。 如您所见，第 3 列中的所有模块都占用了两列的空间。 这种方法允许我们创建另一个与我们想要的结果相匹配的列结构。

• 上边距：50px
• 左边距：-160px（桌面和平板电脑），50px（手机）
• 右边距：50px（仅限手机）

将图像模块添加到第 4 列

上传图片

进入下一栏！ 将图像模块添加到第 4 列并上传选择的图像。 在这个例子中，我们使用了 500×500 的图像尺寸，但也可以随意使用其他图像尺寸。

盒子阴影

为这个模块添加一个微妙的框阴影。

• 阴影颜色：#ffffff

动画片

最重要的是，还要为图像添加幻灯片动画。

• 动画风格：幻灯片
• 动画方向：左
• 动画延迟：100ms
• 动画强度：3%

将文本模块 #1 添加到第 4 列

添加内容

在图像模块的正下方，继续添加带有一些选择内容的标题文本模块。

默认背景颜色

更改此模块的背景颜色。

• 背景颜色：#0f0f0f

悬停背景颜色

并在悬停时使用另一种背景颜色。

• 背景颜色：#593aff

标题文字设置

继续更改标题文本设置以匹配 UI Kit Landing Page。

• 标题 4 字体：Muli
• 标题 4 字体粗细：轻
• 标题 4 文本颜色：#ffffff
• 标题 4 文字大小：23px（桌面和平板电脑），18px（手机）

默认间距

接下来添加一些自定义间距值。

• 顶部填充：50px
• 左填充：30px
• 右填充：30px

悬停间距

并在悬停时更改这些值以创建一个很好的过渡。

• 下边距：50px
• 顶部填充：20px
• 底部填充：20px

将文本模块 #2 添加到第 4 列

添加内容

我们在第 4 列中需要的第二个也是最后一个模块是描述文本模块。 输入一些选择的内容。

背景颜色

接下来更改背景颜色。

• 背景颜色：#0f0f0f

文字设置

并修改文本设置。

• 文字颜色：rgba(255,255,255,0.5)
• 文本行高：2.2em

间距

要创建干净的外观和感觉，请向此模块添加一些自定义填充。

• 底部填充：50px
• 左填充：30px
• 右填充：30px

边界

最后但并非最不重要的是，将“20px”添加到模块的底部两个角。

克隆第 4 列中的所有模块两次并放置在剩余的列中

更改图像和内容

既然您在第 4 列中拥有所需的所有模块，您可以继续克隆所有这些模块两次，并将重复项放置在剩余的两列中。 更改内容和图像以创建多样性。

根据需要多次克隆行（根据列表项的数量）

我们完成了我们的第一个列表项！ 现在，您可以根据需要多次克隆该行，具体取决于您要展示的功能和/或产品的数量。

更改克隆内容

对于每个重复项，您都需要更改内容。

查找和替换颜色

您还可以使用 Divi 的查找和替换功能快速更改列表项的调色板。

更改悬停背景颜色

确保在更改调色板后，也会更改数字文本模块的悬停背景颜色。

• 背景颜色：#593aff

更改背景图像

最后但并非最不重要的一点是，您还可以根据您允许显示的功能和/或产品在列表中选择另一个图标。

最后的想法

此用例是我们黑色星期五交易的一部分，我们与黑色星期五客户和终身会员共享 6 个免费的限量版登录页面。 通过在这些天加入我们授权的社区并成为会员，您将获得：

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

抓住机会，今天就成为会员！