WordPress divi主题

如何使用 Divi 的变换设置创建家谱

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

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

曾经尝试为您的网站创建家谱,但不知道如何处理它? 好吧,在今天的 Divi 教程中,我们将向您展示如何做到这一点。 除了创建家谱之外,我们还确保它在所有屏幕尺寸上都保持响应。 创建完家谱后,您将始终能够根据自己的喜好修改图像、文本和设计,并准备好上线! 想立即开始使用这个家谱设计吗? 您将能够免费下载 JSON 文件并将其添加到您正在创建的任何网站!

google广告开户

让我们开始吧。

预览

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

桌面

家谱

移动的

家谱

免费下载家谱布局

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

订阅我们的 Youtube 频道

定位家庭成员

添加新部分

间距

让我们开始创作吧! 我们需要做的第一件事是在我们正在处理的页面上添加一个新的常规部分。 打开部分设置并使用视口宽度添加一些自定义顶部和底部填充。

  • 顶部填充:8vw
  • 底部填充:8vw

WordPress divi主题

添加第 1 行

立柱结构

继续使用以下列结构将第一行添加到您的部分:

浆纱

在不添加任何模块的情况下,打开行设置并允许行占据部分和屏幕的整个宽度。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

间距

要在桌面上的行的左侧和右侧添加空白,我们将使用视口宽度单位添加一些自定义的左右填充。

  • 顶部填充:0px
  • 底部填充:0px
  • 左填充:15vw(桌面),0vw(平板电脑和手机)
  • 右填充:15vw(桌面)、0vw(平板电脑和手机)

将图像模块添加到列

上传图片

是时候开始添加模块了! 我们需要的第一个是图像模块。 上传宽度和高度为“180px”的图像。

结盟

然后,转到设计选项卡并更改图像对齐方式。

fiverr建站WordPress程序员

浆纱

接下来修改大小设置。

  • 宽度: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

盒子阴影

与框阴影一起在页面上创建深度。

JasperAI 10000字免费额度试用
  • 盒子阴影垂直位置:10px
  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.17)

Z 指数

为了确保文本模块保持在图像模块的顶部,我们将在文本模块的可见性设置中增加 Z 索引。

克隆行 3 次

完成创建第一行并修改其中的所有模块后,您可以继续克隆该行 3 次。 这将帮助我们在接下来的教程步骤中节省时间。 这些行中的每一行都将用于在族谱中创建不同的级别。

WordPress备份工具updrafplus

自定义第 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 次

返回第一行并克隆模块 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 文件并立即开始使用。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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