朝阳网站开发:divi模块生成器怎么安装

2019.05.25 朝阳网站开发

194

DiviBuilder包含了许多模块来帮助您在布局中添加几乎所有的设计元素,但是如果您想创建自己的模块呢?一个名为DiviModuleBuilder的第三方插件给了你这个能力。

在朝阳网站开发这篇文章中,我将看一下这个插件,看看它能做什么,使用起来有多容易。它要求Divi3.0.50或更高,并与Divi和EXTER一起工作。它可以在开发者的网站上找到:DiviPlugins.com.

安装Divi模块生成器

 

激活插件后,单击DMB激活页。或者,您可以通过以下方式看到这个屏幕:自定义模块在仪表板中单击许可证.

朝阳网站开发 

输入您的许可证密钥并单击激活许可证。将一个新菜单添加到仪表板上,名为自定义模块。在此菜单中,您将找到构建模块所需的一切。

添加模块

 

模块在仪表板菜单中创建自定义模块, 添加模块。您将使用两个区域来创建模块。左边的区域是您创建字段的地方。右边的区域是您将添加字段将使用的代码的地方。您可以使模块成为标准或全宽度。您可以在准备好时保存草稿或发布。一旦模块发布,它将出现在DiviBuilder中。

您的模块可以有任意多的字段。每个字段中都有字段属性。下面仔细研究一下该字段的每个属性:

字段标签-将在模块的内容选项卡中显示为字段标题的标签。

字段标识符-一个独特的值,您将使用它来引用HTML中的字段。字段标识符仅使用小写字母、数字和下划线。

字段描述-添加您自己的描述,以解释该领域的用途。这将显示在模块的内容选项卡的输入下面。此字段是可选的,但我建议添加信息或示例以帮助用户。

字段类型-确定用户看到的输入类型。从下拉框中选择几种字段类型,包括文本、文本区域、颜色、图像、“是”/“否”按钮和图标。

设计标签-在模块的设计中添加此字段的字体控件。如果您选择文本或文本区域,您将看到此选项。您必须通过在HTML中添加类来识别应用字体控件的元素。

隐藏场-让用户控制HTML输出中元素的字体,而不让用户控制该元素的内容。只有在选定文本或文本区域字段类型时,此选项才可用。

添加字段标签、标识符、描述、选择字段类型、启用设计选项卡或选择隐藏字段。通过单击每个字段上的上/下箭头重新排列字段。每个部分和字段都提供了描述和示例。

电码

添加自定义HTML、PHP、CSS和JavaScript来控制输出。HTML字段可以接受自定义查询和PHP。在PHP识别代码之前,您需要启用它。否则它将在屏幕上打印代码。HTML和PHP都使用字段标识符来引用字段。

代码快捷方式作为代码字段下的按钮提供。这包括标记和字段标识符。添加您的字段标识符,然后它在代码区域底部可用,您可以单击此处将它们添加到代码中。HTML标识符被视为橙色按钮,PHP被视为绿色。您可以使用比可用的快捷方式更多的东西,但这些都是为了帮助加快开发时间。

创建模块

 

下面是一个创建模块的快速示例。标题将是显示在DiviBuilder中的模块上的名称。我添加了字段标签、描述、选择了文本作为字段类型,并创建了字段标识符。

 

我将其保存为草稿,这样标识符就会出现在HTML快捷方式中。接下来,我从快捷键中选择H1标签,将光标放在标签之间,从HTML快捷键中选择标签。一旦我完成,我就点击发布。结果应该是一个带有字段的模块,用户可以在其中输入文本。输出将文本显示为标题1。

 

模块现在出现在DiviBuilder中。我可以添加到页面中,就像任何Divi模块一样。

 

Content选项卡包括我在标签中添加的字段。

模块显示我输入到字段中的文本。由于我添加了HTML以显示为H1,文本自动具有H1属性。我可以添加“设计”选项卡,以包含更多的自定义功能。这需要一些代码才能正确地锁定字段。

模块

 

您可以在仪表板菜单中看到模块列表。去自定义模块, 模块。在这里,您可以编辑或删除模块。它显示每个模块是否打开或关闭PHP。如果你想克隆一个模块,你必须在设置.

自定义模块设置

 

朝阳网站开发这个设置菜单提供了一个可以管理模块的位置。您可以查看已发布的模块和草稿模块。

您可以克隆它们,这为您提供了一个很好的起点,您可以从一个需要大量代码的模块开始,而您已经在另一个模块中使用了这些代码。您还可以编辑、禁用或启用PHP(如果您因为代码错误而被锁在编辑器之外-我这样做并使用此特性编辑模块),并导入和导出模块是很有帮助的。

添加依赖项

 

在这里,您可以添加第三方CSS和Javascript依赖项。将它们添加为外部或内部URL。从下拉框中选择CSS或Javascript,添加名称并添加URL。然后,它们可以在任何页面上使用。给出了一个使用字体的示例。这是一种很好的方法,可以在一个位置创建依赖关系,然后在任何地方使用它。

DVI模块生成器示例-自定义博客网格

我不是以创建一个“OK”模块为例,而是展示了开发人员创建的令人敬畏的示例-自定义博客网格(可用于下载在开发商的网站免费)。它包括3个字段,HTML、PHP和CSS。下面看看每一个。

自定义博客网格模块

 

字段1被标记为类别,使用类别作为标识符,字段类型被设置为文本。

 

字段2标记为B&W图像效应。标识符是Filter,字段类型是Yes/No Toggle。过滤器是用CSS创建的。

 

字段3被标记为POST标题,并使用POST_title作为标识符。字段类型设置为Text,并启用了“设计”选项卡。我们将在模块中看到该字段的自定义。该字段在HTML中被赋予一个H2类。

 

PHP被选中,因此它可以在HTML输出代码框中使用。

 

自定义CSS被添加到CSS输出框中。

 

这是Javascript。您需要对HTML、PHP、CSS和Javascript有一个很好的理解,才能从这个插件中得到最大的好处。换句话说,这是一个为开发人员提供的插件。

Divi Builder中的自定义博客网格模块

 

一旦模块发布,您将在DiviBuilder中找到它。

 

在模块中显示的设置及其标签将根据所做的选择而有所不同。此模块允许您添加类别,启用黑白效果,并在“内容”选项卡中添加帖子标题。它还包括后台设置(模块默认设置)。

 

此模块启用“设计”选项卡。它包括文本设置、标题文本设置、边框设置、间距设置和动画设置。

自定义博客网格结果

 

结果是一个带有悬停动画的博客网格。我启用了黑白模式,所以图像显示为黑白,除非我悬停在它们上面。我更喜欢这种形式的悬停-显示悬停的图像,而不是模糊它。

 

在这个版本中,我禁用了黑白模式,更改了标题字体,并添加了背景渐变。可以在代码中添加更多的调整,以更改按钮、添加覆盖等。如果你能对它进行编码,你就可以让它做任何你能想象到的事情。

许可证和文件

有三种许可证可供选择:单一、无限和寿命。无限许可证涵盖无限的网站,包括一年的更新和支持。终身无限站点许可证包括终身更新和支持。

文献资料在开发商的网站上提供。示例代码包括一步的说明.

最后思想

divi模块生成器是一个功能强大的插件,有很多的潜力在右边。因为它确实需要很好的代码知识,所以并不适合每个人。这为开发人员提供了一个创建和共享模块的优秀工具。我喜欢你可以从一个网站进出口到另一个网站。每个使用该模块的站点都需要安装插件。如果您对代码有很好的了解,并且对创建您自己的Divi模块感兴趣,那么DiviModuleBuilder值得一看。

我们想听听你的消息。你试过Divi模块生成器吗?让我们知道你在朝阳网站开发评论中是怎么想的。

 


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP