Divi 插件亮点:Table Maker
已发表: 2020-09-11虽然Divi有很多模块,但它没有一个模块来建表。 幸运的是,有一个解决方案。 Table Maker 是一个第三方插件,允许您使用 Divi Builder 构建完全可定制的表格。 为了帮助您确定这是否适合您的 Divi 网站插件,在本文中,我们将看看 Table Maker,看看它可以做什么。
安装 Table Maker

安装简单明了。
- 导航到插件>添加新>上传插件
- 单击选择文件
- 在您的计算机上找到插件的 zip 文件并选择它
- 点击立即安装
- 点击激活
表格制作模块

Divi Builder 中添加了一个名为 Table Maker 的新模块。 让我们来看看主要功能。
Table Maker 内容选项卡

内容选项卡包括子模块区域。 这些用于创建表的列。 对于列,您可以调整页眉和页脚计数以及列和行的大小,调整每种设备类型的响应断点,启用滚动,并选择图标、按钮和图像。 图标、按钮和图像对大小、颜色、位置等进行了自定义。
列子模块

子模块定义列并包含一个字段以向行添加内容。 它的工作方式很像代码编辑器,其中每一行都有编号。 您还可以调整宽度、图标、按钮和图像。
默认情况下,第一行是列的标题,但如果您不想有标题,则可以更改此项。 您可以包含 HTML,这意味着您需要避免某些用于标记的字符。 您还可以添加 CSS、简码、iFrame、图标、图像、按钮等。

这些列包括每个元素的设计自定义,包括文本、背景、单元格、页眉和页脚单元格等。

根据需要创建任意数量的列。 您可以单独设置它们的样式,将样式从一种扩展到另一种,等等。我添加了 4 列并分别调整了每列的颜色和宽度。
页眉和页脚

您可以设置页眉和页脚的列数。 默认情况下,它有 1 个页眉,没有页脚。 在本例中,我将前 2 个设置为页眉,将最后一个设置为页脚。 颜色是独立的样式。

您可以对行执行相同的操作。 在此示例中,我将 2 行设置为页眉(左侧的两行),将一行设置为页脚(右侧的行)。
表格滚动

表格滚动提供水平和垂直滚动。 如果需要,您可以使列标题和行标题具有粘性。 这使它们保持原位,因此它们不会滚动到视野之外。 在这个例子中,我启用了滚动并使标题具有粘性。 我添加了很多列,所以它可以垂直滚动。 行标题保持原位。
表格图标

您可以为每个单元格添加任意数量的图标。 设置默认图标并分别为每个单元格选择图标。 选择默认图标并从内容选项卡调整大小和颜色。

通过使用子模块内容区域中的图标标签,图标被添加到您希望它们显示的特定单元格中。 您可以覆盖默认图标并通过从子模块的图标选项卡中选择此列来设置默认图标,并且您可以输入您希望它显示的任何特定图标的名称。 Elegant Themes Marketplace 中的销售页面提供了指向图标及其名称列表的链接。
表格按钮

表格按钮也是使用标签添加的。 在“内容”选项卡中添加一个默认按钮。 您还可以从这些设置中设置按钮样式。 在每个列子模块中使用这些相同的设置覆盖默认按钮。

将按钮添加到每个带有子模块内容区域中的按钮标记的单元格中。 通过将其添加到标签中来更改按钮上的文本。 在此示例中,我为默认按钮添加了几个单元格并更改了第二个按钮的文本。
表格图片

您可以向单元格添加图像、图标和其他类型的内容。 设置图像质量、比例、比例以及水平和垂直对齐方式。 它有很多图像选项。

即使图像已添加到图库中,它们也不会显示,直到您告诉它们要在哪个单元格中显示。这是使用标签完成的。 通过键入开始图像标签,将自动添加结束标签,并且图像显示在该单元格中。 您可以将其与单元格中的其他内容一起包含在内。 在标签之间添加一个数字以指定要显示的特定图像。

表制造商设计选项卡
设计选项卡包括表格框架、条纹、单元格、文本、页眉、页脚、大小、间距、边框等的设置。以下是主要设置。
表框

设计选项卡包括对表格框架、单元格、文本、页眉、行、页脚、大小、间距、边框等的自定义。这是表格框架。 默认框架类型使用间隙,在单元格之间放置一点空间。 这是 None,它删除了单元格之间的边界。

对于间隙,您可以独立调整列间隙和行间隙。 我已将列间距增加到 8px,将行间距增加到 4px。

线条在每个单元格周围放置一个边框。 您可以控制线条的样式、颜色和粗细。 这是默认设置。

在这个例子中,我将样式设置为虚线,更改了颜色,并将线宽调整为 3px。
表条纹

Table Stripes 可以像标准电子表格一样创建条纹效果。 您可以选择它适用的位置,选择顺序,并调整色调、饱和度和亮度。 这些是默认设置。

在本例中,我将条纹色调调整为 86 度,饱和度调整为 172%,亮度调整为 82%。 所有三个调整共同作用以创建有趣的颜色选项。

在本例中,我调整了表格单元格、标题单元格和列标题单元格的颜色。

对于此示例,我已将 #1 框阴影添加到标题单元格,并将 #3 框阴影添加到行标题单元格。 我已分别为每种单元格类型将文本的水平和垂直对齐居中。 我还为间隙添加了更多空间。
页眉和页脚样式

您可以单独设置页眉和页脚文本以及单元格的颜色样式。 在此示例中,我添加了一个页脚,将文本设为白色并全部大写,将单元格颜色设置为深蓝色,并为单元格添加了框阴影。

在本例中,我独立调整了单元格、页眉单元格和页脚单元格的边框。
表格制作示例

我创建了一个包含 5 列、一个列标题和一个行标题的表格。 行标题有一个购物按钮,可将您带到每个产品的产品页面,以及一个产品图片。 两个标题都使用黑色背景、圆角和布局中的字体。
单元格使用条纹、布局中较大的字体和圆角。 最后一列显示图标以显示产品是否有库存。 我为每个标题和单元格添加了一个框阴影。 表格框架使用列间距为 4 个像素,行间距为 7 个像素的间距。

这是相同的设计,行标题中没有图像。

这是在移动设备上显示的带有产品图片的布局。 它将表格减少到 2 列,其中一列是行标题。 这一个按列打破它。

您也可以让它按行中断。 此示例删除图像并显示按行拆分的表格。

这把行显示为手风琴。 单击一个打开它以显示其内容。
哪里可以买到桌子制造商
您可以在 Divi 市场购买 Table Maker。 无限网站的费用为 35 美元,包括 30 天退款保证和一年的支持和更新。 文档以视频演练和文本形式提供。
结束的想法
这就是我们对 Divi 的 Table Maker 的看法。 它有很多功能可以为 Divi 构建和自定义表格,其中包括一些我没有在这里介绍的功能。 我只需要文档来了解如何使用图像、图标和按钮。
起初,使用标签将按钮、图标和图像添加到表格中似乎有点尴尬,但它很容易做到,而且由于单元格的内容是使用代码编辑器添加的,它为您提供了比您更多的控制权。 d 通常有。
Table Maker 是一个用 Divi 创建表格的优秀插件。 能够添加 HTML、简码、iFrame、CSS 等内容,极大地增强了您可以创建的表格类型。 如果您有兴趣使用 Divi 构建自己的自定义表格,Table Maker 值得一看。
我们希望听到您的意见。 您是否尝试过 Divi 的 Table Maker? 请在评论中告诉我们您对此的看法。
精选图片来自 PCH.Vector/shutterstock.com
