您想在 Divi 中创建组织结构图吗？
了解如何创建流程图布局 Divi 开辟了许多交流过程和想法的机会 网站Web. 在某些情况下，流程图可用于解释涉及大量元素的极其复杂的想法。
在一个 网站Web，但是，这些更复杂的流程图可能难以实现，特别是如果您希望它具有响应性。
在本教程中，我们将向您展示如何创建一个方便的流程图布局，您可以在您的 网站Web，简单，有效，反应灵敏。
另外，我们只会使用 Divi 的内置选项来创建它，因此您不必担心添加自定义代码或插件。
让我们开始吧！
概观
下面是我们将在本教程中创建的流程图设计的快速浏览。
使用 Divi Builder 创建新页面
要开始，您需要执行以下操作：
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi Builder
然后点击 开始建设 (从头开始)
之后，您将有一块空白画布可以开始在Divi中进行设计。
如何在 Divi 中创建流程图布局
第 1 步：创建一个居中简介的行
要开始在 Divi 中创建流程图布局，我们将首先创建一个包含居中简介的行。 这将是流程图的第一个元素。
部分填充
首先，打开默认部分的部分设置，将底部填充设置为 0px。
- 填充（底部）：0px
线
在该部分内，将一行添加到一列。
打开线设置并更新以下设计设置：
- 天沟宽度：1
- 内边距（顶部和底部）：0px
模糊模组设计
为了创建我们的第一个流程图元素，我们将使用 Blurb 模块。
内联插入一个 Blurb 模块。
模块设定
打开 Blurb 模块设置。 在选项卡下 内容，您可以保留默认的标题和正文。
然后使用小图标图像更新图像或使用内置 Divi 图标之一。 在本教程中，我们使用来自 众筹布局包 .
然后给模块一个背景颜色：
- 背景：#f8f8f8
在标签下 设计，更新以下内容：
- 文本对齐方式：居中
- 最大宽度：400 像素（台式机和平板电脑），90%（手机）
- 对齐模块：中心
- 填充：6%（顶部和底部），3%（左侧和右侧）
接下来，给 Blurb Module 一个边框，如下所示：
- 边框宽度：2px
第 2 步：使用垂直线和箭头创建连接线
对于流程图布局的下一部分，我们将创建一行具有居中垂直线和箭头的连接器。 这条线将用于连接线 内容 组织结构图应继续延伸至页面底部。
在这种情况下，我们希望通过在上一行下方添加一条线和一个箭头来开始流程图，并使 Blurbn 模块居中。
创建一个新行并复制/粘贴上一行的样式
为此，请在前一行下方的列中添加新行。
使用 ” 其他模块设置 （或右键单击选项），从上面的上一行复制样式并将它们粘贴到新行中。
创建垂直行分隔符
要创建垂直线分隔符，请在该行中添加一个新的 Divider 模块。
在分隔线设置下，更新设计设置如下：
- 线条颜色：#333333
- 线位置：底部
- 分隔线重量：150px
- 宽度：2px
- 对齐模块：中心
- 边距：-1px（底部）
在标签下 高级，隐藏溢出如下：
- 水平溢出：隐藏
- 垂直溢出：隐藏
使用 Blurb 模块创建箭头
接下来，我们将使用演示模块创建一个位于分界线上方的箭头图标。
要创建箭头，请在分隔线下方添加一个新的 Blurb 模块。
模糊模组设置
在模块设置下，删除默认标题和正文，然后单击 使用图标， 然后选择箭头图标（见截图）。
在标签下 设计，更新以下内容：
- 图标颜色：#bbbbbb
- 图像/图标对齐：居中
- 使用图标字体大小：是
- 图标字体大小：50px（桌面），40px（平板电脑和手机）
- 最大宽度：50%
- 对齐模块：中心
- 高度：50 像素（桌面）、40 像素（平板电脑和手机）
在标签下 高级, 将以下 CSS 添加到 模糊图像 :
margin-bottom: 0px;
background: #ffffff;
要将箭头定位在线上方，请更新以下内容：
- 职位：绝对
- 地点：中心
- Z指数：10
步骤 3：为流程图的相邻部分创建一条线
一旦连接器行完成，我们将添加另一行几个相邻的 Blurb 模块以继续流程图设计。
要添加该行，只需复制并粘贴连接线下方的第一行（我们在布局顶部创建的带有居中简介的行）。
打开线路设置并更新以下内容：
- 最大宽度：50%
- 边框宽度：2px
流程图左侧
现在我们的边框已添加到线条中，我们将 Blurb 模块放置在左边框线的上方。
为此，请更新以下设计设置：
- 对齐模块：左
- 边距：70px（顶部和底部）
- 变换平移 X 轴：-50%
这是使 Blurb 模块在边界线上方水平居中的关键。
流程图右侧
要在右边界线上添加另一个 Blurb 模块，请复制现有的 Blurb。
要将简介定位在右边界线上，请转到选项卡 高级 并给它一个绝对位置：
- 职位：绝对
- 位置：中右
接下来，更新以下选项：
- 边距：无
- 变换平移 Y 轴：-50%
- 变换平移 X 轴：50%
在每个边界线的角落添加箭头
为了使流程图更清楚地了解行的前进方向，我们将在行边界行上添加额外的箭头图标。
箭头左上角
要将箭头添加到左上边框行，请复制我们在连接器行中创建的箭头 Blurb 模块，并将其拖到包含相邻 Blurb 模块的行中。
打开 Duplicate Arrow Blurb 模块并将图标更改为左箭头。
接下来，更新模块位置的位置：
- 地点：左上角
最后，更新 transform translate 选项，如下所示：
- 变换平移 Y 轴：-50%
箭头右上角
要创建位于右上边界线上的箭头，请复制箭头“ 在左上角 我们刚刚创建的。 然后打开设置，更改定位位置：
- 位置：右上角
还要用右向箭头更新箭头图标。
左下箭头
要创建位于左下边界线上的箭头，请复制箭头“ 右上 我们刚刚创建的。
然后打开设置，更改定位位置：
- 地点：左下角
接下来，更新 Transform Translate 选项：
- 变换平移 Y 轴：50%
右下箭头
要创建位于右下边界线上的箭头，请复制箭头“ 在左下角 我们刚刚创建的。
然后打开设置，更改定位位置：
- 地点：右下角
还使用左箭头更新箭头图标。
放置所有箭头后，您可以使用 图层视图 .
第 4 步：添加另一条连接线
一旦我们完成了流程图的两个相邻部分和所有箭头的线，我们可以通过添加另一条连接线来继续流程图。
为此，复制我们在上面创建的连接线并将其粘贴到包含流程图相邻部分的 Blurb 模块的行下方。
第 5 步：使用直边线连接器自定义流程
在现有的流程图设计中，流程从最上面的元素开始，然后分支到左右相邻的元素，然后回到中间，再到下一个中间元素。
要自定义流程，我们将复制该部分，以便我们可以自定义流程图以在左侧的相邻演示元素处停止并从右侧的演示元素继续。
重复部分
为此，首先复制包含流程图的整个部分。
添加另一个左模糊模块
在重复部分（底部）中，找到包含两个相邻模块的行中的左侧 Blurb 模块。 然后，复制左边的简介，在下面直接创建一个新的。
删除底部箭头和边框
接下来，删除左下箭头和右下箭头。
打开包含多个简介的行的行设置并删除底部边框：
- 底部边框宽度：0px
使用直线边界线连接器创建一条线
现在我们要使用右边界线连接器自定义流程图设计，该连接器将线的右边界线与下面的连接器线连接起来。
为此，我们将创建另一条线并在右侧添加自定义分隔线和轮廓箭头。
在具有三种布局的现有行下方添加新行一列。
如下更新行设置，在选项卡下 设计 :
- 天沟宽度：1
- 最大宽度：50%
- 填充：0px（顶部和底部）
接下来，为线条添加直线边框。
- 右边框宽度：2px
然后在该行中添加一个 Divider 模块。
更新分隔线设置如下：
- 线条颜色：#333333
- 线位置：底部
- 分隔线重量：2px
- 宽度：50%
- 边距：-2px（底部）
在高级选项卡下，更新分隔符的位置：
- 职位：绝对
- 地点：右下角
使用分隔线，从第一部分第三行的右下箭头复制 Blurb 模块，并将其粘贴到具有右侧分隔线的行中。
打开刚刚复制和移动的箭头的 Blurb 模块设置并更新以下内容：
- 位置：默认
- 对齐模块：右
左边界线流停止
目前，部分左边框暴露在左下角的简介下方。 要隐藏它，只需删除此底部简介的底部边距即可。
第 6 步：使用左边缘线连接器更新线
您的流程图可能还需要一个左边界线连接器。 要创建它，我们可以使用右边界线连接器更新线，如下所示：
- 左边框宽度：2px
- 右边框宽度：0
使用新位置更新行内的分隔符：
- 地点：左下角
接下来，更新箭头对齐方式：
- 对齐模块：左
并将图标更改为右箭头。
最终结果
查看最终结果。
立即下载DIVI！！！
结论
在本教程中，我们创建了一个有用的流程图布局，任何人都可以使用它来交流流程和想法 游客 具有令人惊叹的响应式设计。
用它来展示服务或设计过程、创建信息图表或指导客户完成 内容 以一种新的方式。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
