如何在令人惊叹的 Divi 拆分部分设计中在图像之间切换
已发表: 2019-10-31交互式设计可以让任何网站大放异彩。 在本教程中，我们将向您展示如何在令人惊叹的分割部分设计中在图像之间切换。 悬停图像时，它会出现在前面，同时覆盖另一个。 按照以下步骤重新创建设计或通过注册链接下载 JSON 文件。 确保使用具有透明背景的图像，以便您可以控制每列的背景颜色。
让我们开始吧！
预览
让我们来看看不同屏幕尺寸的设计。
桌面
移动的
免费下载 Toggle Image Design
要了解免费的切换图像设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
让我们开始重建
添加新部分
间距
创建一个新页面或打开一个现有页面。 添加常规部分，打开部分设置并删除所有默认的顶部和底部填充。
- 顶部 + 底部填充：0vw
能见度
然后，将该部分的溢出设置为隐藏。
- 水平+垂直溢出：隐藏
添加新行
列结构
继续使用以下列结构添加新行：
浆纱
在添加任何模块之前，调整行的大小。
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
删除行的默认顶部和底部填充。
- 顶部和底部填充：0vw
第 1 列设置
背景
接下来打开第 1 列设置并添加背景颜色。
- 颜色: 淡玫瑰色#E7BAC6
边界
然后，跨不同屏幕尺寸调整列的边框设置。
- 圆角：右上+右下
- 台式机：10vw
- 平板电脑和手机：0vw
能见度
转到高级选项卡并按如下方式调整可见性设置：
- 水平+垂直溢出
- 桌面：默认
- 悬停：可见
- Z-指数：
- 桌面：10
- 悬停：11
第 2 列设置
背景
现在，将颜色背景添加到第 2 列。
- 颜色：淡绿色#bfd5a5
边界
更改第二列的边框设置如下：
- 圆角：左上角 + 左下角
- 台式机：10vw
- 平板电脑和手机：0vw
能见度
最后但并非最不重要的是，相应地更改可见性设置：
- 水平+垂直溢出
- 桌面：默认
- 悬停：可见
- Z-指数：
- 桌面：9
- 悬停：11
将图像模块添加到第 1 列
添加图片
是时候开始添加模块了！ 将图像模块添加到第 1 列并上传您选择的半透明图像。
背景
使用列的背景颜色作为图像背景颜色。
- 颜色: 淡玫瑰色#E7BAC6
浆纱
然后，在设计选项卡中，调整大小设置。
- 强制全角：是
间距
添加一些自定义填充。
- 右填充：
- 平板电脑：18vw
- 电话：20vw
转变
最后但并非最不重要的是，调整模块的转换转换设置。
- Transform Translate: x 轴 19vw
将文本模块添加到第 1 列
添加内容
进入下一个模块，这是一个文本模块。 添加一些您选择的 H2 和段落内容。
文本
移至设计选项卡并按如下方式更改文本设置。
- 字体: Verdana
- 颜色：白色#ffffff
- 尺寸：
- 台式机：2vw
- 平板电脑：3vw
- 电话：3.5vw
- 字母间距：1px
- 对齐方式：居中
标题文字
接下来设置标题文本的样式。
- 标题级别：H2
- 字体: Verdana
- 重量：粗体
- 对齐方式：居中
- 颜色：洋红色 #9d3056
- 尺寸：
- 台式机：6vw
- 平板+手机：8vw
浆纱
然后，调整模块的大小。
- 宽度：
- 台式机：56%
- 平板电脑 + 手机：43%
间距
通过修改不同屏幕尺寸的间距设置来完成模块的设置。
- 最高保证金：
- 台式机：-55vw
- 平板电脑：-70vw
- 电话：-90vw
- 底部填充：
- 台式机 + 平板电脑：0vw
- 左填充：2vw
将条形计数器模块添加到第 1 列
吧台设置 1-4
标题
我们在第 1 列中需要的下一个也是最后一个模块是条形计数器模块。 为酒吧柜台添加标题。
- 草莓
- 蓝莓
- 黑莓
- 山莓
百分比
随着百分比。
- 20
- 40
- 10
- 20
浆纱
单击第一个栏并设置高度。 对所有四个条重复此步骤。
- 高度：1.5vw
一般酒吧柜台设置
元素
在一般酒吧柜台设置中，打开元素设置。 将百分比切换为“否”。
- 显示百分比：否
背景
现在，添加半透明背景。
- 颜色：带透明 rgba 的淡玫瑰色 (157,48,86,0.18)
酒吧
在设计选项卡中，为条形设置品红色条形颜色。
- 背景颜色：洋红色 #9d3056
标题文字
接下来设置标题文本设置的样式。
- 字体: Verdana
- 颜色：白色#ffffff
- 尺寸：
- 台式机：1vw
- 平板电脑：2vw
- 电话：3vw
浆纱
继续调整模块的大小设置。
- 宽度：
- 台式机：49%
- 平板电脑 + 手机：33%
间距
也修改间距设置。
- 最高保证金：
- 平板电脑 + 手机：-3vw
- 底部边距：
- 台式机：21vw
- 平板电脑 + 手机：28vw
- 左边距：
- 台式机：3vw
- 平板+手机：6vw
- 底部 + 左侧填充：0vw
边界
接下来修改边框设置。
- 圆角：1vw 所有四个角
能见度
最后，在可见性选项卡中调整 z 索引和溢出。
- 水平溢出：可见
- 垂直溢出：隐藏
- Z 指数：11
将图像模块添加到第 2 列
添加图片
进入第二列！ 添加新的图像模块并上传您选择的半透明图像。
背景
接下来使用第 2 列的背景色作为图像的背景色。
- 颜色：淡绿色#bfd5a5
浆纱
在设计选项卡中，调整模块的大小。
- 强制全角：是
间距
在较小的屏幕尺寸上也添加一些自定义左填充。
- 左填充：
- 平板电脑：16vw
- 电话：18vw
转变
最后但并非最不重要的是，更改转换转换设置。
- Transform 平移：x 轴 -19.6vw
将文本模块添加到第 2 列
添加内容
继续向第 2 列添加一个文本模块，其中包含一些 H2 和段落内容。
文本
然后，在设计选项卡中，设置文本样式。
- 字体: Verdana
- 颜色：白色#ffffff
- 尺寸：
- 台式机：2vw
- 平板电脑：3vw
- 电话：3.5vw
- 字母间距：1px
- 对齐方式：居中
标题文字
也更改标题文本设置。
- 标题级别：H2
- 字体: Verdana
- 重量：粗体
- 对齐方式：居中
- 颜色：绿色#2c5b00
- 尺寸：
- 台式机：6vw
- 平板+手机：8vw
浆纱
并调整模块的大小设置。
- 宽度：60%
- 对齐方式：右
间距
最后但并非最不重要的一点是，在不同的屏幕尺寸上使用一些自定义间距值。
- 最高保证金：
- 台式机：-55vw
- 平板电脑：-63vw
- 电话：-90vw
- 底部填充：
- 台式机 + 平板电脑：37vw
- 左填充：
- 桌面：0vw
- 平板+手机：16vw
- 右填充：
- 平板电脑 + 手机：2vw
将条形计数器模块添加到第 2 列
吧台设置 1-4
标题
我们在第 2 列中需要的最后一个模块是条形计数器模块。 添加四个吧台。
- 西兰花
- 芹菜
- 黄瓜
- 羽衣甘蓝
百分比
为每个条形计数器分配一个百分比。
- 20
- 40
- 20
- 30
浆纱
打开第一个栏的单独设置并在大小设置中修改高度。 对所有四个条重复此步骤。
- 高度：1.5vw
一般酒吧柜台设置
元素
在一般条形计数器设置中，将百分比切换更改为“否”。
- 显示百分比：否
背景
接下来，添加半透明背景色。
- 颜色：浅绿色透明 rgba(17,119,3,0.18)
酒吧
然后，在设计选项卡中，为计数器栏添加颜色。
- 条形颜色：绿色 #9d3056
标题文字
继续设置文本样式。
- 字体: Verdana
- 颜色：白色#ffffff
- 尺寸：
- 台式机：1vw
- 平板电脑：2vw
- 电话：3vw
浆纱
也可以修改不同屏幕尺寸的宽度。
- 宽度：
- 台式机：49%
- 平板电脑 + 手机：33%
间距
转到间距设置并在不同的屏幕尺寸中添加一些自定义间距值。
- 最高保证金：
- 桌面：-37vw
- 平板电脑 + 手机：-40vw
- 底部边距：
- 台式机：21vw
- 平板电脑 + 手机：28vw
- 左边距：
- 台式机：23vw
- 平板+手机：60vw
- 底部 + 左侧填充：0vw
边界
我们也添加了一些圆角。
- 圆角：1vw 所有四个角
能见度
通过调整可见性选项卡中的溢出和 z 索引来完成模块的设置。
- 水平溢出：可见
- 垂直溢出：隐藏
- Z 指数：11
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
这是一个包裹！
在这篇文章中，我们向您展示了如何在漂亮的设计中在图像之间切换。 这是创建交互式设计并使用 Divi 的内置 z 索引来确定显示哪个图像的好方法。 如果您有任何问题或建议，请务必在下方评论区留言！