创意英雄版块使网站令人难忘和特别。 这款宝丽来英雄款设计唤起了一种复古的旅行癖。 通过使用列变换选项，宝丽来可以按照您想要的任何方式排列，就好像它们铺在桌子上一样。
您可以使用自己的方形图像重新创建此宝丽来英雄部分设计。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载宝丽来英雄部分设计
要获得免费的宝丽来英雄部分设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
让我们开始重新创建
添加新部分
首先向您正在处理的页面添加一个新部分。
底部分隔线
添加薄荷绿色底部分隔线。
- 分隔线放置：底部
- 分隔线样式：#12
- 分隔线颜色：薄荷绿#d2f2d0
- 分隔器高度：23vw
间距
调整部分的间距。
- 最高边距：7vw
- 下边距：0px
- 顶部和底部填充：0px
添加新行
立柱结构
继续向您的部分添加新行。 选择以下列结构：
浆纱
现在，调整行的大小。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：90vw
- 最大宽度：100%
间距
接下来，调整间距设置中的顶部和底部填充。
- 顶部和底部填充：0px
展示
在行的主要元素中添加一行 CSS 代码，以使列在较小的屏幕尺寸上彼此相邻。
- 自定义 CSS – 主元素： display: flex;
display: flex;
将图像模块添加到第 1 列
上传方形图片
将图像模块添加到第 1 列并上传方形图像。
结盟
现在，调整模块对齐方式。
浆纱
然后，使模块全宽。
将文本模块添加到第 1 列
添加内容
添加一个文本模块并插入一些内容。 我们将使用“宝丽来”这个词。
文本
设置文本字体样式。
- 文字字体：Advent Pro
- 文本对齐：居中
- 文字颜色：深灰色 #474747
- 字体大小：
- 台式机：1vw
- 平板电脑+手机：2vw
- 文字字母间距：0.1vw
- 文字行高：1.8em
浆纱
在尺寸设置中使用“100%”作为宽度。
间距
现在调整间距。
克隆模块两次并在剩余列中放置重复项
更改图像和副本的副本
更改每个重复图像模块中的图像。 如果您的设计需要它，也可以更改文本内容。
第 1 列设置
背景
继续打开该行的第 1 列设置。 将背景设置为白色以创建宝丽来效果。
- 背景颜色：白色#ffffff
间距
添加一些底部填充以创建更宽的宝丽来底部边框。
边界
添加边框以完成宝丽来视觉效果。
- 4 边边框宽度：1vw
- 顶部边框宽度：2vw
- 右边框宽度：2vw
- 底部边框宽度：1vw
- 左边框宽度：2vw
- 边框颜色：白色#ffffff
盒子阴影
通过添加一个微妙的框阴影来完成第 1 列的设置。
扩展第 1 列设置
使用扩展样式选项扩展列设置。
- 返回主行设置窗口，然后单击第一列选项卡右侧的三个点。
- 选择“扩展项目样式”并选择“在这一行中”。
第 1 列变换样式
现在，调整第一列中的变换设置。
- 变换平移：x轴-11vw，y轴-6vw
- 变换旋转：341 度，第一个选项
第 2 列变换样式
接下来，调整第二列的转换设置。
- 变换平移：x轴-22w，y轴0vw
- 变换旋转：10 度，第一个选项
第 3 列变换样式
最后，调整第三列的变换设置。
- 变换比例：两个轴均为 68%
- Transform Translate：x轴-46w，y轴12vw
- 变换旋转：31 度，第一个选项
添加新部分
背景
添加一个新部分并将薄荷绿色背景应用于该部分。
- 背景颜色：薄荷绿#d2f2d0
底部分隔线
给该部分一个底部分隔线。
- 分隔线放置：底部
- 分隔线样式：#12
- 分隔线颜色：白色#ffffff
- 分隔器高度：23vw
间距
删除默认的顶部填充。
添加新行
立柱结构
继续添加一个 3 列的新行。
复制和粘贴行样式
使用线框视图，复制并粘贴第一部分的行样式
- 首先，单击第一部分内行菜单右侧的三个点。 选择“复制行样式”。
- 然后，单击第二部分中行菜单右侧的三个点。 选择“粘贴行样式”。
复制和粘贴列设置
现在，复制第一行中的列设置并将它们粘贴到新行的第 1 列和第 2 列中。
- 首先，打开第一行的行设置。
- 其次，单击第一列选项卡右侧的三个点，然后选择“复制项目样式”。
- 然后，向下滚动到新行并打开设置选项卡。
- 最后，单击第一列右侧的三个点，然后选择“粘贴项目样式”。
第 1 列变换样式
现在，调整第 1 列中的变换样式。
- 变换比例：两个轴 75%
- 变换平移：x轴-8w，y轴-14vw
- 变换旋转：35 度第一个选项
第 2 列变换样式
然后，修改第 2 列中的变换样式。
- 变换平移：x轴-17w，y轴2vw
- 变换旋转：346 度第一个选项
添加图像模块
复制和拖动图像模块
现在，返回线框视图以复制和拖动两个图像模块。
- 首先，将第一部分中的第一个图像模块复制两次。
- 然后，将它们拖到第二部分的第一列和第二列。
- 将每个模块中的图像更改为新的方形图像。
添加文本模块
复制和拖动文本模块
在图像之后，对文本模块执行相同的操作。 从第一部分复制并拖到第二部分。
- 在线框视图中，从第一部分的第一列复制文本模块两次。
- 现在，将新的文本模块拖到第二部分的第 1 列和第 2 列。
- 如果您想更改内容，请立即执行。
将文本模块添加到第 3 列
添加内容
单击第三列中的加号并添加一个文本模块。 插入一些H2和段落内容。
文本
如下设置文本样式。
- 文字字体：Advent Pro
- 文本对齐：居中
- 文字颜色：深灰色 #848484
- 字体大小：
- 台式机：1vw
- 平板电脑+手机：1.9vw
- 文字字母间距：0.1vw
- 文本行高：
- 桌面：1.2em
- 平板电脑 + 手机：1.3em
标题文字
现在，为 H2 文本设置样式。
- 标题：H2
- H2字体：Adamina
- H2 字体粗细：粗体
- H2 字体颜色：深灰色 #444444
- H2 字体大小：
- 台式机：2vw
- 平板电脑+手机：3vw
- H2 字母间距：4px
- H2 线高：
- 台式机：1.7vw
- 平板电脑+手机：1.5vw
浆纱
然后，调整大小。
- 宽度：
- 桌面：60%
- 平板电脑：91%
- 电话：100%
- 模块对齐：中心
间距
最后，调整间距。
将按钮模块添加到第 3 列
添加副本
单击文本下方的加号并添加按钮模块。 向按钮添加一些副本。
结盟
更改按钮对齐方式。
自定义按钮样式
相应地设置按钮样式。
- 按钮文字大小：
- 台式机：1vw
- 平板电脑：2.4vw
- 电话：2.3vw
- 按钮边框宽度：0px
- 按钮文字颜色：黑色#000000
- 按钮字母间距：4px
- 按钮字体：Advent Pro
- 按钮字体粗细：粗体
间距
应用上边距值。
将分隔模块添加到第 3 列
能见度
在按钮下方，添加分隔线并设置如下样式。
线
给分隔线一个明亮的绿色。
浆纱
更改分隔线的大小设置，您就完成了！
- 分压器重量
- 桌面：7px
- 平板电脑+手机：4px
- 宽度：
- 桌面：10%
- 平板电脑 + 手机：30%
- 模块对齐：中心
预览
我们再来看看宝丽来英雄版块跨不同屏幕尺寸的成品设计图。
桌面
移动的
这是一个包装！
在这篇文章中，我们向您展示了如何使用 Divi 的变换选项重新创建宝丽来英雄部分。 这是在页面的英雄部分展示多张图片的好方法。 我们希望这个设计能激发您自己的创意英雄部分设计！ 如果您有任何疑问，请确保在下面的评论部分发表评论。
