如何使用 Divi 的转换设置创建家谱
已发表: 2019-05-03曾经尝试为您的网站创建家谱，但不知道如何处理它？ 好吧，在今天的 Divi 教程中，我们将向您展示如何做到这一点。 除了创建家谱之外，我们还确保它在所有屏幕尺寸上都保持响应。 完成创建家谱后，您始终可以根据自己的喜好修改图像、文本和设计，并准备好上线！ 想立即开始这个家谱设计吗？ 您将能够免费下载 JSON 文件并将其添加到您正在创建的任何网站！
让我们开始吧。
预览
在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载家谱布局
要了解免费的家谱布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
订阅我们的 YouTube 频道
定位家庭成员
添加新部分
间距
让我们开始创作吧！ 我们需要做的第一件事是向我们正在处理的页面添加一个新的常规部分。 打开部分设置并使用视口宽度添加一些自定义顶部和底部填充。
- 顶部填充：8vw
- 底部填充：8vw
添加第 1 行
列结构
继续使用以下列结构将第一行添加到您的部分：
浆纱
在不添加任何模块的情况下，打开行设置并允许行占据部分和屏幕的整个宽度。
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：100%
- 最大宽度：100%
间距
要在桌面行的左侧和右侧添加空白，我们将使用视口宽度单位添加一些自定义的左右填充。
- 顶部填充：0px
- 底部填充：0px
- 左填充：15vw（台式机），0vw（平板电脑和手机）
- 右填充：15vw（台式机），0vw（平板电脑和手机）
将图像模块添加到列
上传图片
是时候开始添加模块了！ 我们需要的第一个是图像模块。 上传宽度和高度为“180px”的图片。
结盟
然后，转到设计选项卡并更改图像对齐方式。
- 图像对齐：居中
浆纱
接下来修改大小设置。
- 宽度：49%
- 模块对齐：居中
边界
并通过为边框设置中的每个角添加高值将图像变成圆形。 我们使用的是“20vw”，但您可以使用任意大的数字。
将文本模块添加到列
添加内容
进入下一个模块，即文本模块。 在此处添加家庭成员的姓名。
背景颜色
然后，转到背景设置并将背景颜色更改为白色。
- 背景颜色：#ffffff
文字设置
接下来修改文本设置。 如果您想为家谱创建另一种外观和感觉，请随意使用这些设置。
- 文字字体：Open Sans
- 文字颜色：#000000
- 文字大小：0.8vw（桌面）、1.2vw（平板电脑）、1.9vw（手机）
- 文本行高：0.4em
- 文字方向：居中
间距
转到间距设置并添加一些自定义边距和填充值。 这些值将帮助我们塑造文本模块并使其与图像模块略微重叠。
- 最高利润率：-0.5vw
- 左边距：1vw
- 右边距：1vw
- 顶部填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）
- 底部填充：2vw（桌面）、4vw（平板电脑）、5vw（手机）
边界
移至边框设置并添加顶部边框。
- 顶部边框宽度：5px
- 顶部边框颜色：#000000
盒子阴影
与框阴影一起在页面上创建深度。
- 框阴影垂直位置：10px
- 框阴影模糊强度：50px
- 阴影颜色：rgba(0,0,0,0.17)
Z索引
为了确保文本模块保持在图像模块的顶部，我们将在文本模块的可见性设置中增加 Z 索引。
- Z指数：2
克隆行 3 次
创建完第一行并修改其中的所有模块后，您可以继续克隆该行 3 次。 这将帮助我们在本教程的后续步骤中节省时间。 这些行中的每一行都将用于在族谱中创建不同的级别。
自定义第 1 行
克隆两个模块 7 次
让我们开始定制家谱的第一层吧！ 切换到线框模式并克隆您行中的两个模块 7 次。 完成后，行的后端应如下所示：
列主要元素 CSS
我们正在将整个列变成一个网格。 您的列中总共应该有 16 个模块。 我们将把这 16 个模块放入 8 个网格列中。 这意味着 8 个网格列中的每一列都将包含 2 个模块； 一个图像模块和一个文本模块。 打开第一行的行设置，在列主元素中添加以下几行CSS代码：
display: grid; grid-template-columns: repeat(8, 12.5%);
自定义第 2 行
克隆两个模块 3 次
到第二排！ 在这里，我们将克隆这两个模块 3 次。
列主要元素
通过将以下 CSS 代码行添加到行的列主要元素，我们将列变成具有 4 个网格列的网格：
display: grid; grid-template-columns: repeat(4, 25%);
我们之所以使用这种方法，而不是仅仅选择具有 4 列的现有行列结构，是因为我们希望所有内容在较小的屏幕尺寸上保持 100% 响应。
自定义第 3 行
克隆两个模块
到第三排！ 克隆每个模块一次。
列主要元素
然后，将以下 CSS 代码行添加到列主元素：
display: grid; grid-template-columns: repeat(2, 50%);
自定义第 4 行
行间距
进入下一行和最后一行！ 在这里，我们唯一需要做的就是修改行填充值。
- 顶部填充：0px
- 底部填充：0px
- 左填充：31vw
- 右填充：31vw
使用图像模块连接家庭成员
添加第 1 行
列结构
现在我们已经把所有的家庭成员都排好，我们可以开始连接他们了！ 为此，请在第一行和第二行之间添加一个新行。
浆纱
在不添加任何模块的情况下，打开行设置并更改大小值。
- 宽度：100%
- 最大宽度：100%
间距
接下来转到间距设置并添加一些自定义填充值。
- 顶部填充：0px
- 底部填充：0px
- 左填充：15vw（台式机），0vw（平板电脑和手机）
- 右填充：15vw（台式机），0vw（平板电脑和手机）
将图像模块添加到列
上传插图
然后，添加一个图像模块并上传您可以在本文开头下载的文件夹中找到的插图。
浆纱
转到图像模块的大小设置并启用“强制全宽”选项。
- 强制全角：是
间距
确保在间距设置中禁用“在图像下方显示空间”选项。
- 在图像下方显示空间：否
克隆行两次并改变他们的位置
完成修改行和其中的图像模块后，继续克隆两次。 相应地放置重复项：
自定义第 1 行
克隆图像模块三次
返回第一行并克隆模块 3 次。
列主要元素
通过将以下 CSS 代码行添加到行的列主要元素，将这些图像模块放置在具有 4 个网格列的网格中：
display: grid; grid-template-columns: repeat(4, 25%);
自定义第 2 行
克隆图像模块
移至第二行并克隆图像模块一次。
列主要元素
通过将以下 CSS 代码行添加到行的列主要元素，将两个模块放在具有两个网格列的网格中：
display: grid; grid-template-columns: repeat(2, 50%);
自定义第 3 行
更改间距
转到下一个也是最后一个副本。 在这里，您唯一需要做的就是更改自定义填充值，您就大功告成了！
- 顶部填充：0px
- 底部填充：0px
- 左填充：27vw
- 右填充：27vw
预览
现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 创建现代家谱！ 我们重新创建的家谱在所有屏幕尺寸上看起来都很棒。 在本教程开始时，您还可以免费下载 JSON 文件并立即开始使用。 如果您有任何问题或建议，请务必在下方评论区留言！