Divi 插件亮点：用于 Divi 和 Extra 的 Caldera Forms 样式定制器

已发表: 2017-10-29

Caldera Forms 在融入您网站的样式方面做得很好。如果您想使用熟悉的 Divi 和 Extra Theme Customizer 样式工具对其进行样式设置怎么办？您可以使用名为 Caldera Forms Style Customizer for Divi 和 Extra 的第三方插件来执行此操作。

Caldera Forms 可以使用标准的 Theme Customizer 选项来设置样式，但是，这些选项会设置主题的样式。这意味着如果您更改表单文本的样式，您也会更改网站正文的样式。如果您想将表单与内容分开设置样式，通常必须使用 CSS 手动设置样式。 Caldera Forms Style Customizer for Divi and Extra 通过向主题定制器添加样式功能解决了这个问题。

在这个插件亮点中，我们将看看 Divi 和 Extra 插件的 Caldera Forms Style Customizer，看看它是多么容易使用。这个第三方插件可以通过 Caldera Forms 购买。顾名思义，它适用于 Divi 和 Extra。

安装和激活

正常上传并激活插件。没有要调整的设置。这些功能已准备好使用。

自定义表单

我已将默认联系表单插入到具有所有默认样式的页面中。我将一次对这个表格进行所有调整。然后我们会看到一两个例子。

新的样式功能已添加到主题定制器中。打开主题定制器（或模块定制器——它们都可以工作）并点击Caldera Forms Style Customizer 。

这增加了 20 个新的自定义选项卡来自定义表单的各个方面，包括文本、按钮、字段、切换开关、日期选择器、面包屑等。下面是每个设置的介绍。

文本字段

文本字段更改文本、占位符和边框的颜色，以及字段的边框宽度、边框半径和单行高度。

文本字段悬停

文本字段悬停会更改文本、字段和边框颜色。

文本字段焦点

文本字段焦点更改具有焦点的字段的文本、背景和边框的颜色。在此示例中，中心的字段具有悬停功能，但具有深色背景的字段具有焦点。

下拉选择

下拉选择自定义背景、文本、箭头和边框颜色。您还可以调整边框宽度和半径。

下拉选择悬停

下拉选择悬停控制悬停时背景、文本、箭头和边框的颜色。

复选框和单选按钮

复选框和单选按钮调整复选框和单选按钮的所选项目的颜色。

拨动开关

Toggle Switches 分别调整未选定和选定开关的背景、字体和边框的颜色。您还可以同时调整两个开关的边框宽度和半径。

切换开关悬停

Toggle Switches Hover 独立调整选中和未选中开关的背景、字体和边框的颜色。这是未选择的开关。

蓝色的是选定的开关。

提交按钮

提交按钮控制背景、字体和边框颜色，以及边框半径、按钮宽度及其位置。您还可以调整字体大小和字母间距。文本转换功能会更改文本的大小写。选择小写、大写、大写、首字母或继承。

提交按钮悬停

提交按钮悬停控制背景、字体和边框的悬停颜色。

复位按钮

重置按钮控制背景、字体和边框颜色。您还可以调整字体大小和字母间距、按钮宽度、按钮位置、边框宽度和边框半径。这个也有文本转换。

重置按钮悬停

重置按钮悬停调整背景、文本和边框的按钮颜色。

其他按钮

Caldera 有几种其他类型的按钮。其他按钮控制除提交和重置之外的所有内容。调整字体、边框和背景的颜色，并调整边框宽度和半径。在本例中，我创建了“上一个”和“下一个”按钮。

其他按钮悬停

其他按钮悬停控制字体、边框和背景的悬停颜色。

日期选择器

日期选择器在同一选项卡中包含常规颜色和悬停颜色。调整字体和背景的颜色。在本例中，我将鼠标悬停在 10 上，然后选择了 12。

上传文件列表

上传文件列表控制上传文件列表中背景和文本的颜色。

分节符

分节符控制分节符的颜色、边框宽度以及上下边距。

面包屑

Breadcrumbs 允许您为活动页面和其他链接、分隔符、背景和边框的字体选择颜色。调整边框宽度和半径。

成功提醒

成功警报调整字体、背景和边框颜色，以及边框半径和宽度。它还可以调整框的高度。

各种各样的

杂项使您可以控制所需图标的颜色、错误字段、描述文本、信用卡颜色和信用卡图标位置。描述文本包括字体大小、字母间距和文本转换选项。我选择了大写。

例子

我创建了一个简历上传表单（实际上这是内置在 Caldera Forms 中的，但我确实单击了按钮将其选中），并将其设置为模态。首先，我想使用 Divi Builder 设置页面样式。

我添加了一个背景图像并选择了对比而不是与背景混合的颜色。

这个使用具有不同背景的相同设置。这次我没有在模态中使用表单。表单域不是白色背景，而是直接放置在图像上。

进出口

导入或导出您在定制器中创建的 Caldera Forms 样式很容易。在仪表板中，转到Caldera Forms ， Styles – Import / Export 。这会将样式导入和导出为 JSON 文件，使您可以在使用此插件的任何网站上轻松使用 Caldera 表单样式。您的所有样式都将被导入文件的样式覆盖。

许可和支持

该插件可以作为一年许可证（每年重复）购买。该许可证允许插件在一个、五个或十五个网站上使用（取决于您选择的层级），并包括一年的支持和更新。

最后的想法

它发现这个插件易于使用。定制器设置很直观。它们被很好地标记并以有意义的方式排列。我可以轻松找到我想要的任何设置。我想看看有什么简单的方法可以一次性恢复默认设置或进行全局调整（例如增加或减少所有颜色的整体暗度）。这可能不太现实，但听起来很有趣。

无法使用自定义程序设置来设置单个表单的样式。所有表单都使用与全局设置相同的样式，并且必须使用 Caldera 的样式功能单独设置样式。这是主题定制器的本质。如果您有兴趣在全球范围内为您的 Caldera Forms 设置样式，那么没有比使用 Caldera Forms Style Customizer for Divi 和 Extra 更简单的方法了。

我们希望听到您的意见。 您是否尝试过用于 Divi 和 Extra 插件的 Caldera Forms Style Customizer？ 请在评论中告诉我们您对此的看法。

精选图片来自 Irina Strelnikova / shutterstock.com