WordPress divi主题

如何在令人惊叹的 Divi 分割部分设计中切换图像

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

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

交互式设计可以让任何网站大放异彩。 在本教程中,我们将向您展示如何在令人惊叹的分割部分设计中切换图像。 悬停图像时,它会在覆盖另一个图像的同时出现在前面。 按照以下步骤重新创建设计或通过注册链接下载 JSON 文件。 确保使用具有透明背景的图像,以便控制每列的​​背景颜色。

google广告开户

让我们开始吧!

预览

让我们看一下不同屏幕尺寸的设计。

桌面

移动的

免费下载切换图像设计

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

让我们开始重新创建

添加新部分

间距

创建一个新页面或打开一个现有页面。 添加常规部分,打开部分设置并删除所有默认的顶部和底部填充。

  • 顶部 + 底部填充:0vw

能见度

然后,将该部分的溢出设置为隐藏。

  • 水平+垂直溢出:隐藏

WordPress divi主题

添加新行

立柱结构

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

浆纱

在添加任何模块之前,请调整行的大小。

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

间距

同时删除该行的默认顶部和底部填充。

  • 顶部和底部填充:0vw

第 1 列设置

背景

接下来打开第 1 列设置并添加背景颜色。

边界

然后,调整不同屏幕尺寸的列边框设置。

  • 圆角:右上角 + 右下角
    • 台式机:10vw
    • 平板电脑和手机:0vw

fiverr建站WordPress程序员

能见度

转到高级选项卡并调整可见性设置,如下所示:

  • 水平+垂直溢出
    • 桌面:默认
    • 悬停:可见
  • Z指数:

第 2 列设置

背景

现在,将颜色背景添加到第 2 列。

  • 颜色:淡绿色#bfd5a5

边界

更改第二列的边框设置如下:

独立站选品工具
  • 圆角:左上角 + 左下角
    • 台式机:10vw
    • 平板电脑和手机:0vw

能见度

最后但同样重要的是,相应地更改可见性设置:

  • 水平+垂直溢出
    • 桌面:默认
    • 悬停:可见
  • Z指数:

将图像模块添加到第 1 列

添加图片

是时候开始添加模块了! 将图像模块添加到第 1 列并上传您选择的半透明图像。

高质量外链购买

背景

使用列的背景颜色作为图像背景颜色。

浆纱

然后,在设计选项卡中,调整尺寸设置。

间距

添加一些自定义填充。

JasperAI 10000字免费额度试用

转换

最后但同样重要的是,调整模块的转换转换设置。

  • 变换平移:x 轴 19vw

将文本模块添加到第 1 列

添加内容

进入下一个模块,这是一个文本模块。 添加一些您选择的H2和段落内容。

WordPress备份工具updrafplus

文本

转到设计选项卡并更改文本设置,如下所示。

  • 字体:Verdana
  • 颜色:白色#ffffff
  • 尺寸:
    • 台式机:2vw
    • 平板电脑:3vw
    • 电话:3.5vw
  • 字母间距:1px
  • 对齐方式:居中

标题文字

接下来为标题文本设置样式。

  • 标题级别:H2
  • 字体:Verdana
  • 重量:粗体
  • 对齐方式:中心
  • 颜色:洋红色 #9d3056
  • 尺寸:
    • 台式机:6vw
    • 平板电脑+手机:8vw

浆纱

然后,调整模块的大小。

  • 宽度:
    • 桌面:56%
    • 平板电脑 + 手机:43%

间距

通过修改不同屏幕尺寸的间距设置来完成模块的设置。

  • 最高边距:
    • 台式机:-55vw
    • 平板电脑:-70vw
    • 电话:-90vw
  • 底部填充:
  • 左填充:2vw

将条形计数器模块添加到第 1 列

吧台设置 1-4

标题

我们在第 1 列中需要的下一个也是最后一个模块是酒吧柜台模块。 为吧台添加标题。

  1. 草莓
  2. 蓝莓
  3. 黑莓
  4. 山莓

百分比

连同百分比。

  1. 20
  2. 40
  3. 10
  4. 20

浆纱

单击第一个栏并设置高度。 对所有四个条重复此步骤。

一般吧台设置

元素

在一般吧台设置中,打开元素设置。 将百分比切换为“否”。

背景

现在,添加半透明背景。

  • 颜色:浅玫瑰色,透明 rgba(157,48,86,0.18)

酒吧

在设计选项卡中,为条形图赋予洋红色条形颜色。

  • 背景颜色:洋红色 #9d3056

标题文字

接下来为标题文本设置设置样式。

  • 字体:Verdana
  • 颜色:白色#ffffff
  • 尺寸:
    • 台式机:1vw
    • 平板电脑:2vw
    • 电话:3vw

浆纱

继续调整模块的大小设置。

  • 宽度:
    • 桌面:49%
    • 平板电脑 + 手机:33%

间距

也修改间距设置。

  • 最高边距:
  • 底边距:
    • 台式机:21vw
    • 平板电脑+手机:28vw
  • 左边距:
    • 台式机:3vw
    • 平板电脑+手机:6vw
  • 底部+左侧填充:0vw

边界

接下来修改边框设置。

  • 圆角:1vw 所有四个角

能见度

最后,在可见性选项卡中调整 z 索引和溢出。

  • 水平溢出:可见
  • 垂直溢出:隐藏
  • Z指数:11

将图像模块添加到第 2 列

添加图片

进入第二列! 添加新的图像模块并上传您选择的半透明图像。

背景

接下来使用第 2 列背景颜色作为图像的背景颜色。

  • 颜色:淡绿色#bfd5a5

浆纱

在设计选项卡中,调整模块的大小。

间距

在较小的屏幕尺寸上添加一些自定义左侧填充。

转换

最后但同样重要的是,更改转换转换设置。

  • 变换平移:x轴-19.6vw

将文本模块添加到第 2 列

添加内容

继续将文本模块添加到第 2 列,其中包含一些 H2 和段落内容。

文本

然后,在设计选项卡中,设置文本样式。

  • 字体:Verdana
  • 颜色:白色#ffffff
  • 尺寸:
    • 台式机:2vw
    • 平板电脑:3vw
    • 电话:3.5vw
  • 字母间距:1px
  • 对齐方式:中心

标题文字

更改标题文本设置。

  • 标题级别:H2
  • 字体:Verdana
  • 重量:粗体
  • 对齐方式:中心
  • 颜色:绿色#2c5b00
  • 尺寸:
    • 台式机:6vw
    • 平板电脑+手机:8vw

浆纱

并调整模块的尺寸设置。

  • 宽度:60%
  • 对齐方式:右

间距

最后但同样重要的是,在不同的屏幕尺寸上使用一些自定义间距值。

  • 最高边距:
    • 台式机:-55vw
    • 平板电脑:-63vw
    • 电话:-90vw
  • 底部填充:
  • 左填充:
    • 桌面:0vw
    • 平板电脑+手机:16vw
  • 右填充:

将条形计数器模块添加到第 2 列

吧台设置 1-4

标题

第 2 列中我们需要的最后一个模块是酒吧柜台模块。 添加四个吧台。

  1. 西兰花
  2. 芹菜
  3. 黄瓜
  4. 羽衣甘蓝

百分比

为每个酒吧柜台分配一个百分比。

  1. 20
  2. 40
  3. 20
  4. 30

浆纱

打开第一个栏的单独设置并在尺寸设置中修改高度。 对所有四个条重复此步骤。

一般吧台设置

元素

在一般酒吧计数器设置中,将百分比切换更改为“否”。

背景

接下来,添加半透明背景颜色。

  • 颜色:浅绿色,透明 rgba(17,119,3,0.18)

酒吧

然后,在设计选项卡中,为计数器栏添加颜色。

标题文字

继续设置文本样式。

  • 字体:Verdana
  • 颜色:白色#ffffff
  • 尺寸:
    • 台式机:1vw
    • 平板电脑:2vw
    • 电话:3vw

浆纱

修改不同屏幕尺寸的宽度。

  • 宽度:
    • 桌面:49%
    • 平板电脑 + 手机:33%

间距

继续进行间距设置并在不同的屏幕尺寸上添加一些自定义间距值。

  • 最高边距:
    • 台式机:-37vw
    • 平板电脑 + 手机:-40vw
  • 底边距:
    • 台式机:21vw
    • 平板电脑+手机:28vw
  • 左边距:
    • 台式机:23vw
    • 平板电脑+手机:60vw
  • 底部+左侧填充:0vw

边界

我们也添加了一些圆角。

  • 圆角:1vw 所有四个角

能见度

通过调整可见性选项卡中的溢出和 z 索引来完成模块的设置。

  • 水平溢出:可见
  • 垂直溢出:隐藏
  • Z指数:11

预览

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

桌面

移动的

这是一个包装!

在这篇文章中,我们向您展示了如何在漂亮的设计中切换图像。 这是创建交互式设计并使用 Divi 的内置 z 索引来确定显示哪个图像的好方法。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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