代码模块是一块空白的画布，可让您向页面添加代码，例如插件简码或静态HTML代码。 如果要使用第三方插件，例如第三方滑块插件，则只需将插件的简码放在标准或全角代码模块中即可显示不受限制的元素。
如何在页面上添加代码模块
在您可以将代码模块添加到您的页面之前，您必须首先访问 Divi Builder。 一旦 Divi主题 安装在您的 网站Web，你会注意到一个按钮 使用Divi Builder 每次创建新页面时，位于发布商上方。
通过单击此按钮，可以激活Divi Builder，这使您可以访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。
您也可以点击按钮 使用Visual Builder 当您浏览您的 网站Web 如果您已登录 WordPress 仪表板，请在上游。
一旦输入Visual Builder，您可以单击灰色加号按钮以将新模块添加到页面。 新模块只能添加到行内。 如果要开始新页面，请记住首先在页面中添加一行。
在模块列表中找到代码模块，然后单击它以将其添加到页面中。 模块列表是可搜索的，这意味着您还可以输入单词“ code”，然后按Enter键以自动查找并添加代码模块！ 添加模块后，将为您提供模块选项列表。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .
通过添加沉闷的样式表来为单个页面上的内容设置动画的用例
在此示例中，我将添加一个链接脚本以导入Animate.css，以将动画效果添加到页面上的元素。 由于Animate.css文件包含许多代码，因此仅将其加载到我需要的页面上是有意义的。
只需添加一个常规部分和一个全角行（1列），然后添加代码模块即可。
在文本框中 内容，添加代码片段。
您要做的就是添加一些CSS类，以在页面上为CSS类页面的任何元素设置动画。 在此示例中，我将在页面加载时弹跳按钮。
在“按钮”模块设置的“高级”选项卡上，在CSS类文本框中输入“动画”和“反弹”两个类。
现在，当页面加载时按钮会弹回。
提示：有时添加带有换行符的代码将导致代码停止工作。 最好在文本编辑器中创建代码并将其粘贴到代码模块中。
代码内容选项
在选项卡中 内容，您将找到该模块的所有内容元素，例如文本、图像和图标。 控制的一切 什么 出现在模块中的内容将始终位于此选项卡中。
包装内容
在这里，您可以将要在页面上显示的任何 HTML、CSS 或 JavaScript 代码放置在当前位置。 只有编辑和管理员可以发布未经过滤的 HTML，这意味着如果作者或贡献者使用代码，可能会从课程中删除。 您还可以在模块中放置简码。 这些课程代码（简码）将显示在父列内，无需任何额外的 Divi 模块包装器。
行政标签
这将更改发生器中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将显示在Divi Builder界面的模块块中。
代码设计选项
在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 此选项卡允许您修改模块的外观。 每个Divi模块都有一长串的设计设置，您可以用来调整几乎所有内容。
最大宽度
在此输入的任何值都将代码模块中呈现的任何内容的宽度限制为设置值。 例如，在输入字段中输入50％会将代码模块的内容减少到包含它的列的50％。
代码高级选项代码
在“高级”选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。
CSS ID
输入此模块的易于使用的CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。
CSS类
输入用于此模块的可选 CSS 类。 CSS 类可用于创建自定义 CSS 样式。 您可以添加多个类，以空格分隔。 这些类可以在您的 Divi主题 子级或在您添加到页面或您的自定义 CSS 中 网站Web 使用 Divi 主题选项或 Divi Builder 页面设置。
自定义CSS
自定义CSS也可以应用于模块和模块的任何内部元素。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将CSS添加到每个元素。 这些设置中的CSS条目已嵌入样式标签。 因此，您只需要输入用分号分隔的CSS规则即可。
能见度
此选项使您可以控制模块所在的设备。 您可以选择分别在平板电脑，智能手机或台式机上停用模块。 如果要在不同设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。
本教程就是这样。
