如何使用 Divi 的转换选项添加图像标记

图像标记是展示产品特殊功能的好方法。 在这篇文章中，我们将向您展示如何使用文本模块和垂直分隔线创建图像标记。 由于列内的转换设置，图像标记可以放置在您需要的任何位置。 为了向您展示这种技术的通用性，我们将向您展示两个不同的设计示例。 您也可以免费下载 JSON 文件！

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

示例#1

桌面

移动的

示例#2

桌面

移动的

免费下载图像标记布局

要使用免费的图像标记布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

重新创建示例 #1

让我们开始重新创建第一个设计示例！

添加新部分

向您正在处理的页面添加一个新部分。 在添加行之前，请先调整部分设置。

背景

添加渐变，然后添加具有屏幕混合模式的图像。

• 背景：渐变+图像
• 渐变色 1：白色 #ffffff
• 渐变色 2：中灰色 #666666
• 渐变起始位置：22%
• 背景图像混合：屏幕

间距

删除下一个部分的默认顶部和底部填充。

• 顶部和底部填充：0vw

能见度

通过隐藏部分的溢出来完成部分设置。

• 垂直和水平溢出：隐藏

添加第 1 行

现在，添加一个包含三列的新行。

在添加任何模块之前调整行设置。

浆纱

首先，调整行的大小。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

自定义 CSS

接下来，向该行的主要元素添加一行 CSS 代码。 这也将允许列在较小的屏幕尺寸上彼此相邻显示。

• 主要元素 CSS: display: flex;

display: flex;

第 1 栏

转换 翻译

将自定义变换转换效果应用于第一列以重新定位该列。 一旦您稍后在帖子中添加图像标记模块，此步骤将有意义。 如果您在另一个设计中使用此技术，则需要相应地更改这些值。

• Transform Translate：x轴2vw，y轴16vw

Z索引

向可见性选项卡添加更高的 z 索引值。

• Z指数：10

第 2 栏

转换 翻译

将变换平移效果应用于第二列。

• Transform Translate：x轴-11vw，y轴6vw

Z索引

增加 z 索引值。

• Z指数：10

第 3 栏

转换 翻译

修改第三列的转换转换值。

• Transform Translate：x轴-11vw，y轴8vw

Z索引

并更改 z 索引值。

• Z指数：10

添加第 2 行

在向第一行添加任何模块之前，添加一个新的单列行。 在添加图像标记之前执行此操作，以便您可以在设计时查看屏幕上发生的情况。

浆纱

更改行的大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

添加图像模块

接下来添加一个图像模块。

浆纱

在图像模块上强制全宽，以确保设计在所有屏幕尺寸上都保持响应。

• 强制全角：是

间距

然后，添加一些左右填充以使图像更小。

• 左右填充：10vw

添加 3 个文本模块

现在，返回第一个 3 列行并添加 3 个文本模块。

使用线框视图更容易访问。

将文本模块添加到第一列，将其克隆两次并将重复项拖到其他列。

开始修改第 1 列中的文本模块。输入您选择的一些内容并更改设置如下。

背景

添加黑色背景。

• 背景颜色：黑色#000000

文本

为文本设置样式。

• 文字字体：奥尔德里奇
• 文字颜色：白色#ffffff
• 文本对齐：居中
• 字体大小：
  • 台式机：1.2vw
  • 平板电脑：2vw
  • 电话：2.4vw
• 标题字体粗细：粗体

浆纱

调整文本模块的大小。

• 宽度：
  • 台式机：17vw
  • 平板电脑：23vw
  • 电话：30vw
• 模块对齐：居中

间距

添加顶部和底部填充。

• 顶部和底部填充：0.9vw

边界

更改边框设置。

• 圆角：所有角均为 14px
• 底部样式：底部边框
• 底部边框宽度：4px
• 底部边框颜色：红色#E02B20

盒子阴影

应用框阴影。

• 框阴影：第三个选项

扩展文本样式

为了节省时间，请使用扩展样式选项为该部分中的其他文本模块设置样式。

• 首先，单击文本模块右边缘的三个点，然后选择“扩展文本样式”。
• 然后，在弹出框中，单击“Throughout”并在菜单下拉时选择“This Section”。
• 更改每个文本模块中的内容。

添加 3 个分频器模块

在第 1 列中的文本模块下方添加一个分隔符。然后将其克隆两次并将重复项拖到其他列。

打开第 1 列中的分隔器模块并进行一些更改。

线

使分隔线变黑。

• 线条颜色：黑色#000000

浆纱

调整隔板的厚度。

• 分隔线重量：3px
• 宽度：20vw
• 模块对齐：居中

间距

调整上边距。

• 最高利润率：7vw

转变

添加变换旋转效果，使分隔线垂直。

• 变换旋转：90 度时的第一个选项

展开分隔线设置

节省时间并使用扩展样式选项。

• 首先，单击分隔模块右侧的三个点，然后选择“扩展分隔样式”。
• 然后，在弹出框中，单击“Throughout”并在下拉菜单中选择“This Section”。

设计现在应该是这样的：

添加第 3 行

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

现在，在添加任何模块之前，相应地调整行设置。

浆纱

更改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

第 1 栏

转变

将变换平移效果应用于第一列。

• 变换平移：y轴-8vw

Z索引

也调整 z 索引值。

• Z指数：10

第 2 栏

转变

使用一些自定义转换转换设置重新定位第二列。

• Transform 平移：x 轴 -17vw，y 轴 -14vw

Z索引

调整 z 索引值。

• Z指数：10

添加 2 个分隔线

添加两个分隔线，每列一个。

扩展分隔线样式

添加分隔符后，使用以前的分隔符将样式扩展到新的样式。

• 首先，单击上方第一行分隔模块中的三个点，然后选择“扩展分隔样式”。
• 然后，在弹出窗口中，选择“整个页面”。

现在，我们将对第三行第一列中的分隔符进行一些更改。

浆纱

去除边距。

• 上边距：默认

Z索引

也更改 z 索引。

• Z指数：-2

添加 2 个文本模块

为每列添加一个文本模块。

扩展文本样式

添加新的文本模块后，从第一行的文本模块扩展文本样式。

• 首先，单击顶行第一个文本模块中的三个点，然后选择“扩展文本样式”。
• 然后，在弹出窗口中，选择“整个页面”。

现在，更改文本以匹配设计。 此外，为第三行的两个文本模块添加一些上边距。

间距

• 最高利润率：7vw

重新创建示例 #2

继续下一个例子！

添加新部分

向您正在处理的页面添加一个新部分。 在添加行之前，调整部分设置。

能见度

在可见性设置中隐藏该部分的溢出。

• 水平和垂直溢出：隐藏

添加第 1 行

现在，添加一个包含五列的行。 在添加任何模块之前，请按如下方式调整行设置。

浆纱

首先，修改大小设置。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

间距

然后调整间距。

• 左右填充：19.5vw

自定义 CSS

通过向行的主要元素添加一行 CSS 代码，允许列彼此相邻显示。

• 主要元素 CSS: display: flex;

display: flex;

所有列设置

然后，对每一列进行一些更改。

自定义 CSS

• 主要元素：宽度：20% !important;

width: 20% !important;

Z索引

也调整 z 索引值。

• Z指数：10

添加 5 个文本模块

为每列添加一个文本模块。

在内容框中添加一些相关内容，然后继续修改第 1 列中文本模块的文本模块设置。

背景

添加背景颜色。

• 背景颜色：绿色 #2f7713

文本

样式内容如下。

• 文字字体：Allerta
• 文本对齐：居中
• 文字颜色：白色#ffffff
• 字体大小：
  • 台式机：1.3vw
  • 平板电脑：2vw
  • 电话：2.4vw
• 文本行高：2.9em

浆纱

调整大小。

• 宽度：
  • 台式机：6vw
  • 平板电脑：8vw
  • 电话：9vw
• 模块对齐：居中

间距

调整间距，将模块变成正方形。

• 底部边距：-2vw
• 顶部和底部填充：1vw
• 左右填充：1vw

边界

在边框设置中将文本模块变成一个圆圈。

• 圆角：四边50vw

盒子阴影

也选择一个框阴影。

• 框阴影：第三个选项

扩展文本样式

使用扩展样式选项调整行中所有文本模块的设置。

• 首先，单击文本模块右侧的点，然后选择“扩展文本样式”。
• 然后，在弹出窗口中，单击“整个”并选择“此页面”。
• 最后，更改每个模块内容框中的文本。

设计现在应该是这样的。

文本模块 2

使第二个圆圈变黄。

• 背景颜色：黄色#f2e200

文本模块 3

使第三个圆圈变成橙色。

• 背景颜色：橙色#f2b100

文本模块 4

使第四个圆圈呈橙红色。

• 背景颜色：橙红色

文本模块 5

将第五个模块设为紫色。

• 背景颜色：紫色 #8e008c

添加 5 个分频器模块

现在，在每个文本模块下方，添加一个分隔模块。

相应地调整第一个分频器的设置。

线

给分隔线一个颜色。

• 线条颜色：绿色 #2f7713

浆纱

调整宽度。

• 分隔线宽度：4px
• 宽度：13vw

间距

添加上边距值。

• 最高保证金：
  • 台式机：7vw
  • 平板电脑 + 手机：5vw

转变

旋转分隔器使其垂直。

• 变换旋转：第一个选项中的 90 度

扩展分隔设置

使用扩展样式选项来设置其他分隔线的样式。

• 首先，单击分隔模块右侧的点，然后选择“扩展分隔样式”。
• 然后，在弹出窗口中，单击“Throughout”并选择“This Section”。

匹配颜色

分隔线 2

使第二个分隔线变黄。

• 线条颜色：黄色#f2e200

分隔线 3

使第三个分隔线变成橙色。

• 线条颜色：橙色#f2b100

分隔线 4

使第四个分隔线橙红色。

• 线条颜色：橙红色#ef4a21

分隔线 5

将第五个分隔线设为紫色。

• 线条颜色：紫色 #8e008c

添加第 2 行

添加一个新的单列行。

添加图像模块之前，请调整行设置。

浆纱

首先，调整大小。

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：100%
• 最大宽度：100%

能见度

然后，可见性。

• 水平和垂直溢出：可见

添加图像模块

添加图像模块并上传果汁图像。

浆纱

在图像上强制全角。

• 强制全角：是

行间距

是时候进行最后的接触了。 再次打开第 1 行设置并添加一些顶部和底部边距。

• 最高利润率：7vw
• 底部边距：
  • 台式机：-24vw
  • 平板电脑：-31vw
  • 电话：-35vw

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

示例#1

桌面

移动的

示例#2

桌面

移动的

这是一个包装！

在这篇文章中，我们向您展示了如何创建两种不同的图像标记设计。 我们使用列选项将文本列和分隔线保持在一起。 我们希望这些设计能激发您创建自己的图像标记设计。 请记住在列内使用变换转换选项以更好地控制每个图像标记。 如果您有任何疑问，请随时在下面的评论部分发表评论！