如何使用 Divi 创建优雅的分割图像产品信息部分
已发表: 2019-10-06用图像发挥创意绝对有助于引起对 CTA 的关注。 在这篇文章中，我们将向您展示如何使用 Divi 重新创建一个漂亮的分割图像产品信息部分。 我们正在重新创建的设计美观、引人注目，并且可以根据您的需求进行定制。 您还可以免费下载设计的 JSON 文件！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载免费的分割图像布局
要使用免费的拆分图像布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
订阅我们的 YouTube 频道
使用 Photoshop 和 Illustrator 创建分割图像效果
在开始使用 Divi 之前，您需要准备好一组要上传的图像。 由于这是一种分割图像效果，您需要两个能够很好地融合在一起的图像。 您需要两种不同的图像尺寸：台式机为 960 像素宽 x 1200 像素高，平板电脑和移动设备为 600 像素宽 x 1200 像素高。
第 1 步：选择图像
选择您产品的两张高清图像。
第 2 步：擦除背景
擦除背景以创建剪切图。 你可以使用任何你想要的程序。 但这里有 Photoshop 的分步指南。
第 3 步：在 Illustrator 上打开一个新项目
在 Illustrator 中打开一个新项目，宽 1920 像素，高 1200 像素。
第 4 步：添加垂直参考线。
添加穿过空画布中心的垂直指南。 确保它在中心。
步骤 5：导入或放置剪切图像
将两个剪下的图像放在画布上。
第 6 步：开始可视化拆分
制作每个图像的两个副本。 使用裁剪功能将它们在不同的位置分成两半。 首先通过中心，然后再少一点，多一点重复。 现在您将拥有每个图像的三个拆分版本。
第 7 步：完成效果
使用不同的分割剪裁，为您的图像找到最佳构图。 确保每个图像的直边正好在画布上的中央指南上。 尝试更改图像的大小以使其更适合。 请记住，画布具有全角屏幕的大小，因此请相应地调整图像的大小。
第 8 步：裁剪一半并保存
设计完成后，去掉多余的切口。 仔细检查每张图像的直边是否接触中心导轨。 创建两个新画板并调整它们的大小以适合每一侧，确保它们在中心指南处分开。 一次导出一个画板并另存为 .png 格式为 Web 导出。 现在，您有两个不同的图像。 960px 宽和 1200px 高。
第 9 步：调整平板电脑和手机的大小
将两个图像的大小调整为 960 像素宽 x 1200 像素高。 确保只裁剪透明背景，不要触摸图像。 我在 Photoshop 上通过使用图像侧面的锚点更改画布大小来做到这一点。
让我们开始重建吧！
添加新部分
背景
现在我们已经完成了教程的第一部分，是时候开始使用 Divi 了！ 创建新页面或向现有页面添加新部分。 为该部分添加渐变背景。
- 背景：渐变
- 颜色一：灰白色#f7f7f7
- 颜色二：鲜绿色#b7e778
- 梯度方向：90度
- 开始和结束位置：50%
间距
接下来更改节的间距设置。
- 顶部填充：5vw
- 底部填充：12vw
能见度
最后，调整可见性。
- 垂直和水平溢出：隐藏
添加第一行
列结构
继续使用以下列结构添加新行：
浆纱
调整行的大小设置。
- 天沟宽度：2
- 宽度：100%
- 最大宽度：100%
间距
也添加一些自定义填充值。
- 顶部和底部填充：2vw
第 1 列设置
转变
接下来转到第 1 列设置，并更改转换转换值。
- 变换 平移：-2vw y 轴
第 2 列设置
转变
对第 2 列执行相同操作。
- Transform Translate: 2vw x 轴
将文本模块添加到第 1 列
添加内容
是时候开始添加模块了！ 将文本模块添加到第 1 列，其中包含您选择的一些 H2 内容。
标题文字
在设计选项卡中，更改标题文本设置。
- 标题文本级别：H2
- H2 字体：Corben
- H2对齐：
- 桌面：左
- 平板电脑 + 手机：中心
- H2 文字颜色：深灰色 #3a3a3a
- H2 文字大小：
- 台式机：7vw
- 平板+手机：16vw
间距
然后，调整间距。
- 右边距：
- 桌面：-1vw
- 平板电脑 + 手机：0vw
- 右填充：
- 平板+手机：35vw
将文本模块添加到第 2 列
添加内容
现在，将文本模块添加到第二列。 插入一些您选择的 H2 内容。
标题文字
然后，按如下方式设置标题文本的样式。
- 标题文本级别：H2
- H2 字体：Corben
- H2对齐：
- 桌面：左
- 平板电脑 + 手机：对
- H2 文字颜色：深灰色 #3a3a3a
- H2 文字大小：
- 台式机：7vw
- 平板电脑 + 手机：14vw
间距
最后，调整间距。
- 最高保证金：
- 平板电脑：-12vw
- 电话：-14vw
- 左边距：
- 台式机 + 平板电脑：-0.5vw
- 右填充：
- 平板电脑 + 手机：17vw
添加第二行
列结构
继续使用以下列结构向您的部分添加新行：
浆纱
打开行设置并调整大小设置。
- 天沟宽度：1
- 均衡柱高：是
- 宽度：100%
- 最大宽度：100%
间距
接下来修改间距设置。
- 最高保证金：
- 台式机：-15vw
- 平板电脑：-36vw
- 电话：-40vw
- 顶部和底部填充：
- 桌面：0vw
- 平板电脑：9vw
- 电话：12vw
自定义 CSS
通过向行的主要元素添加一行 CSS 代码来完成行设置。 这将有助于将图像保持在一起。
- 主要元素： display: flex;
display: flex;
将图像模块添加到第 1 列
添加图片
将左半图像添加到第 1 列。
- 图片：
- 桌面：960px 宽的图像
- 平板电脑 + 手机：600 像素宽的图像
浆纱
使图像模块全宽。
- 强制全宽：是
将图像模块添加到第 2 列
添加图片
将右半图像添加到第 2 列。
- 图片：
- 桌面：960px 宽的图像
- 平板电脑 + 手机：600 像素宽的图像
浆纱
使这个图像模块也全宽。
- 强制全宽：是
添加第三行
列结构
进入下一行！ 选择以下列结构：
浆纱
调整行的大小如下：
- 天沟宽度：4
- 宽度：100%
- 最大宽度：100%
间距
然后，调整间距。
- 最高保证金：
- 台式机：-38vw
- 平板电脑 + 手机：-14vw
第 1 列设置
间距
添加模块之前，请调整列中的间距。 从第 1 列开始。
- 左填充：
- 台式机：7vw
- 平板电脑 + 手机：12vw
- 右填充：
- 台式机：15vw
- 平板电脑 + 手机：12vw
第 2 列设置
间距
然后，调整第 2 列间距设置
- 左填充：
- 台式机：15vw
- 平板电脑 + 手机：12vw
- 右填充：
- 台式机：7vw
- 平板电脑 + 手机：12vw
将文本模块添加到第 1 列
添加内容
将文本模块添加到第 1 列并添加一些您选择的 H3 内容。
背景
更改背景颜色。
- 背景颜色
- 颜色：深灰色#333333
标题文字
然后，设置标题文本的样式。
- 标题文本级别：H3
- H3 字体：Corben
- H3 对齐：居中
- H3 字体颜色：灰白色 #f7f7f7
- H3 字体大小：
- 台式机：2.2vw
- 平板电脑：6.4vw
- 电话：7vw
- H3 字母间距：3 像素
间距
接下来添加一些自定义间距值。
- 顶部填充：
- 台式机 + 平板电脑：0.2vw
- 电话：1vw
- 底部填充：
- 台式机：0.5vw
- 平板电脑：1.2vw
- 电话：1vw
边界
通过添加一些圆角来完成模块的设置。
- 圆角：1vw 所有四个角
复制文本模块并拖动到第 2 列
现在，复制文本模块并将其拖到第 2 列。
更改内容
当然，您需要更改重复文本模块中的内容。
将号召性用语模块添加到第 1 列
添加内容
在第 1 列中的文本模块下方，添加带有您选择的某些内容的号召性用语模块。
- 标题
- 按钮
- 身体
添加链接
继续添加指向 CTA 按钮的链接。
背景
并为平板电脑和手机添加背景颜色。
- 背景颜色：
- 平板电脑 + 手机：Off White #f7f7f7
标题文字
在设计选项卡中，设置 H4 文本设置的样式。
- 标题文本级别：H4
- H4 字体：Open Sans
- H4 颜色：深灰色 #333333
- H4 文字大小：
- 台式机：1.4vw
- 平板电脑：4.5vw
- 电话：7vw
- H3 字母间距：2px
- H3 线高：1.5em
文章主体
接下来更改正文设置。
- 正文字体：Open Sans
- 正文对齐方式：居中
- 正文颜色：深灰色 #333333
- 正文字体大小：
- 台式机：0.9vw
- 平板电脑：3vw
- 电话：4vw
- 车身线高：1.8em
按钮
样式按钮。
- 按钮文字大小：
- 台式机：1vw
- 平板电脑：2.2vw
- 电话：3.8vw
- 按钮字体颜色：深灰色 #333333
- 按钮背景颜色：
- 平板电脑 + 手机：鲜绿色 #b7e778
- 按钮边框宽度：
- 桌面：1px
- 按钮边框颜色：
- 桌面：深灰色 #333333
- 按钮边框半径：1vw
间距
并添加一些自定义间距值。
- 最高保证金：
- 台式机 + 平板电脑：-2vw
- 电话：3vw
- 左右填充：
- 桌面：0vw
- 平板电脑 + 手机：4vw
边界
最后但并非最不重要的一点是，为不同屏幕尺寸的边框设置样式。
- 圆角：1vw 所有角落
- 边框样式：
- 平板电脑 + 手机：所有四个面
- 边框宽度：
- 平板电脑+手机：1px
- 边框颜色：
- 平板电脑 + 手机：深灰色 #333333
复制号召性用语模块并拖动到第 2 列
复制号召性用语模块并将其拖到第 2 列。
更改内容
要完成设计，请更改重复的号召性用语模块中的内容，您就大功告成了！
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
结论
在这篇文章中，我们向您展示了如何使用 Divi 创建拆分图像产品信息部分。 我们已经解释了如何使用图像编辑软件创建分割图像并继续使用我们的 Divi 设计中的文件。 我们希望这个设计能激发您对自己的产品图片进行创意。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！