如何使用Divi Builder Flip模块

平价 布莱尔Jersyer | Divi

在将 Toggle 模块添加到页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的 网站Web，你会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 启用Visual Builder 当您浏览您的 网站Web 如果您登录到 WordPress 仪表板，则在前台。

访问视觉构建器

进入Visual Builder后，可以单击灰色加号按钮将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住首先在页面中添加一行。

触发器divi module.png

在模块列表中找到切换模块，然后单击它以将其添加到页面中。 模块列表是可搜索的，这意味着您也可以键入“ toggle”，然后按Enter以自动搜索并添加切换模块！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：常见问题页面

FAQ页面是使用Toggle模块整合信息的最佳位置之一。 它使用户可以快速识别他们要查找的问题，而不必阅读大量文本。 对于此示例，我将向您展示如何在几分钟内使用Toggle模块为FAQ页面设计现代FAQ部分。
示例页面FAQ.jpg

使用Visual Builder，添加一个具有全角行（1列）的新部分。 然后将Divider模块添加到该行。 在Divider模块设置的“内容”选项卡下，选择“显示Divider”选项。

触发器按钮divi.png的示例

在“设计”选项卡上，输入以下选项：

颜色：＃000000（黑色）
分隔线样式：实心
分离器位置：
垂直居中分隔线权重：4px
身高：1

配置选项切换divi.png

然后在刚刚在同一行中创建的分隔线下添加一个切换模块。 在“切换”模块设置中，更新以下内容：

内容选项卡

标题：[输入您的标题]
内容：[输入您的内容]
状态：关闭
打开背景颜色：#ffffff
关闭切换背景颜色：#ffffff
背景颜色：#ffffff

设计选项卡

图标颜色：＃000000
打开切换文本颜色：＃000000
关闭切换文本颜色：＃000000
标题字体：Open Sans，Bold
字体大小：24px
标题文字颜色：＃000000
正文字体：Open Sans
正文字体大小：18px
正文文本颜色：＃666666
身体线的高度：1.6em
使用边框：是
边框的宽度：0px
自定义填充：顶部2px，底部2px

新的内容与divi.png摇杆

保存切换模块的设置后，复制您创建的除法器模块并将其放置在切换模块下。 这将用上下分割线框住跷跷板。 之后，复制您的切换模块，并将其放在底部分隔线之后。 由于这是一个重复的Toggle模块，因此所有设计参数都已转移到新的Toggle模块，您所需要做的就是更新新Toggle模块的内容。 然后继续复制“除法”和“秤模块”模块的过程，并更新秤的内容，直到完成整个“常见问题解答”部分。

就这样。 现在，您可以使用Toggle模块使用现代的FAQ部分来合并您的问题和答案。

模块切换divi.gif

既然您已经看到了切换模块的运行情况，请在下面的部分中深入了解其所有设置。 我们已详细介绍了您在模块设置的每个选项卡中会找到的内容，并解释了每个功能的用途。

切换模块的内容参数

参数flip-flops divi.png

切换模块的内容选项卡按以下参数组组织（也可以交替！）。

文本

您可以在此处添加标题和切换内容。

政变

您可以使用此设置选择默认情况下是否希望按钮显示为打开或关闭状态。

背景

在这里，您可以在切换开关打开时更改背景颜色，在关闭开关时更改背景颜色。 您还可以通过设置背景颜色选项轻松地使它们相同。 还可以选择设置或上传背景图像。

管理员标签

默认情况下，您的切换模块将在生成器中显示为带有“切换”的标签。 Admin标签允许您更改此标签，以便于识别。

翘板模块的设计参数

选项设计toggle wordpress.png

切换模块的设计参数已在“设计”选项卡下的以下下拉切换框中分组在一起。

图标

您可以在此处更改切换图标的颜色。

文本

在这里，您可以设置打开和关闭切换文本的颜色。

标题文字

在这里，您可以调整标题文本的字体，粗细，大小，颜色，间距，行高等。

正文文本

在这里，您可以调整字体，粗细，大小，颜色，间距，行高等。

边界

在这里您可以选择使用边框。 如果选择使用边框，则还可以选择其颜色，更改其宽度并选择其样式。

间距

在间隔区域中，您可以在切换的顶部，右侧，底部或左侧添加自定义填充。 您还可以为台式机，平板电脑或移动设备更改这些值。

模块的高级设置切换

触发器参数divi.png

在切换模块的“高级”选项卡中，可以添加唯一的ID和CSS类。 您还可以在自定义CSS下拉视频滑块模块中，将自定义CSS添加到各种预定义（和预选）的CSS选择器中。 最后，在可见性下拉列表中，您可以调整模块在手机，平板电脑和台式机上的可见性。

这就是本教程的全部内容，希望它可以使您更好地使用Divi Toggle模块。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

发表评论

您的电子邮件地址将不会被发表。 必填字段标 *

这个网站使用Akismet来减少不需要的。 详细了解如何使用您的评论数据.