WordPress divi主题

如何使用 Divi 创建优雅的拆分图像产品信息部分

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

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

使用图片获得创意绝对有助于吸引人们对您的 CTA 的关注。 在这篇文章中,我们将向您展示如何使用 Divi 重新创建漂亮的拆分图像产品信息部分。 我们正在重新创建的设计美观、引人注目,并且可以根据您的需求进行定制。 您还可以免费下载设计的 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

移动的

免费下载免费的拆分图像布局

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

订阅我们的 Youtube 频道

使用 Photoshop 和 Illustrator 创建分割图像效果

在开始使用 Divi 之前,您需要准备好一组图片来上传。 由于这是一种分割图像效果,因此您需要两张能够很好地融合在一起的图像。 您将需要两种不同的图像尺寸:台式机为 960 像素宽 x 1200 像素高,平板电脑和移动设备为 600 像素宽 x 1200 像素高。

第 1 步:选择图像

选择您产品的两张高清图像。

WordPress divi主题

第 2 步:擦除背景

擦除背景以创建切口。 您可以使用任何您想要的程序。 但这是 Photoshop 的分步指南。

第 3 步:在 Illustrator 上打开一个新项目

在 Illustrator 中打开一个新项目,宽 1920 像素,高 1200 像素。

第 4 步:添加垂直指南。

通过空画布的中心添加垂直参考线。 确保它在中心。

第 5 步:导入或放置剪切图像

将两个剪切图像放在画布上。

fiverr建站WordPress程序员

第 6 步:开始可视化拆分

为每个图像制作两个副本。 使用裁剪功能在不同的位置将它们分成两半。 首先通过中心,然后是重复的少一点和多一点。 现在您将拥有每个图像的三个拆分版本。

第 7 步:完成效果

使用不同的分割切口,为您的图像找到最佳构图。 确保每个图像的直边正好位于画布上的中央导轨上。 尝试更改图像的大小以使其更适合。 请记住,画布具有全宽屏幕的大小,因此请相应地调整图像的大小。

第 8 步:裁剪一半并保存

设计完成后,去掉多余的切口。 仔细检查每个图像的直边是否与中心导轨接触。 创建两个新的画板并调整它们的大小以适合每一侧,确保它们在中心指南处分开。 导出为网络,一次一个画板并保存为 .png。 现在,您有两个不同的图像。 960px 宽和 1200px 高。

独立站选品工具

第 9 步:调整平板电脑和移动设备的大小

将两个图像的大小调整为 960 像素宽 x 1200 像素高。 确保只裁剪透明背景,不要触摸图像。 我在 Photoshop 上通过使用图像侧面的锚点更改画布大小来做到这一点。

让我们开始重建吧!

添加新部分

背景

现在我们已经完成了教程的第一部分,是时候开始使用 Divi 了! 创建新页面或将新部分添加到现有页面。 向该部分添加渐变背景。

高质量外链购买
  • 背景:渐变
  • 颜色一:灰白色#f7f7f7
  • 颜色二:鲜绿色#b7e778
  • 渐变方向:90度
  • 开始和结束位置:50%

间距

接下来更改部分的间距设置。

  • 顶部填充:5vw
  • 底部填充:12vw

能见度

最后,调整可见度。

  • 垂直和水平溢出:隐藏

JasperAI 10000字免费额度试用

添加第一行

立柱结构

继续使用以下列结构添加新行:

浆纱

调整行的大小设置。

  • 天沟宽度:2
  • 宽度:100%
  • 最大宽度:100%

间距

也添加一些自定义填充值。

WordPress备份工具updrafplus
  • 顶部和底部填充:2vw

第 1 列设置

转换

接下来转到第 1 列设置,然后更改转换转换值。

  • 变换平移:-2vw y 轴

第 2 列设置

转换

对第 2 列执行相同操作。

  • 变换平移:2vw x 轴

将文本模块添加到第 1 列

添加内容

是时候开始添加模块了! 将文本模块添加到第 1 列,其中包含您选择的一些 H2 内容。

标题文字

在设计选项卡中,更改标题文本设置。

  • 标题文本级别:H2
  • H2字体:Corben
  • H2对齐:
    • 桌面:左
    • 平板电脑+手机:中心
  • H2 文字颜色:深灰色 #3a3a3a
  • H2 文字大小:
    • 台式机:7vw
    • 平板电脑+手机:16vw

间距

然后,调整间距。

  • 右边距:
    • 桌面:-1vw
    • 平板电脑+手机:0vw
  • 右填充:

将文本模块添加到第 2 列

添加内容

现在,将文本模块添加到第二列。 插入您选择的一些 H2 内容。

标题文字

然后,按如下方式设置标题文本的样式。

  • 标题文本级别:H2
  • H2字体:Corben
  • H2对齐:
    • 桌面:左
    • 平板电脑+手机:对
  • H2 文字颜色:深灰色 #3a3a3a
  • H2 文字大小:
    • 台式机:7vw
    • 平板电脑+手机:14vw

间距

最后,调整间距。

  • 最高边距:
    • 平板电脑:-12vw
    • 电话:-14vw
  • 左边距:
  • 右填充:

添加第二行

立柱结构

继续使用以下列结构向您的部分添加新行:

浆纱

打开行设置并调整大小设置。

  • 天沟宽度: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
  • 按钮边框宽度:
  • 按钮边框颜色:
    • 桌面版:深灰色 #333333
  • 按钮边框半径:1vw

间距

并添加一些自定义间距值。

  • 最高边距:
    • 台式机 + 平板电脑:-2vw
    • 电话:3vw
  • 左右填充:
    • 桌面:0vw
    • 平板电脑+手机:4vw

边界

最后但并非最不重要的一点是,在不同的屏幕尺寸上设置边框样式。

  • 圆角:1vw 所有角
  • 边框样式:
    • 平板电脑 + 手机:所有四个方面
  • 边框宽度:
  • 边框颜色:
    • 平板电脑 + 手机:深灰色 #333333

复制号召性用语模块并拖动到第 2 列

复制号召性用语模块并将其拖到第 2 列。

更改内容

要完成设计,请更改重复的号召性用语模块中的内容,然后您就完成了!

预览

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

桌面

移动的

结论

在这篇文章中,我们向您展示了如何使用 Divi 创建拆分图像产品信息部分。 我们已经解释了如何使用图像编辑软件创建分割图像,并继续在我们的 Divi 设计中使用这些文件。 我们希望这个设计能够激发您对自己的产品图片的创意。 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题