比较表小部件设置

当购物者权衡两到三个选项时,并排的表格比在单独的页面之间滚动更快地回答他们的问题。 比较表小部件、一个 Pro 小部件 Elementor 的主插件,构建那个表:一列特征在侧面,一列每个产品在顶部,以及一个价格加购买按钮在每个。你从元素器面板中填写它,不需要HTML表。

每个单元格可以容纳文本、勾号或十字,因此一目了然。四种布局样式、可调节的产品列数和全彩控制意味着表格可以匹配任何页面。本指南涵盖了从特征行到斑马条纹的每个设置。

喜欢先看?本简短教程从头到尾浏览比较表小部件:

"比较表"小部件的作用 #

Widget 列出一个网格:特征名称在第一列中运行,每个产品都有自己的列,其中包含标题、价格、每个特征值以及一个号召性用语按钮。更改产品计数,列调整以匹配。

您用手输入所有内容,因此它不依赖于 WooCommerce。这使得它对于比较插件、服务层或硬件与商店产品一样有用。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• 硕士插件专业版 使用活动许可证安装,因为比较表是 Pro 小部件。插件新建?参见 安装指南.
• 您想要比较的产品和功能列表。

如何添加比较表小部件 #

在 Elementor 编辑器中,打开 元素 面板和搜索 比较表的,(或)滚动到主插件部分。将其拖到您的页面上,就会出现一个示例表,其中已经充满了占位符产品和功能,因此您可以从工作布局而不是空白网格进行编辑。

一般设置:布局和产品数量 #

打开 内容 选项卡和 一般的 section 保存了塑造整个表格的两个设置。

• 布局: pick Style 1、2、3 或 4。每个都将标题、价格和列重新排列成不同的外观。
• 产品: 设置表中显示的产品列数,从 2 到 6。提高数字,并为每个新列在下面显示匹配的产品部分。

设置功能行 #

的 特点盒 section定义了左列,你正在比较的东西列表。the 标题 是顶部的标签(如 “Features” 或 “Product”),并且 特点 中继器每行保存一项。

每个功能项都是一个行标签,例如尺寸、保修或可用性。使用 添加项目 要添加行,请将复制图标复制一个,然后将 X 删除。还有一个 按钮标题 保留购买按钮的行的字段。

填写每个产品列 #

每个产品都有自己的部分(产品 1, 产品2(,依此类推),在里面,你设置了列的标题、价格、图像、按钮文本和链接,然后是每个特征行的值。

方便的部分是每行 内容 control。an 每个功能你选择一个检查, 一个十字, 一个图标你挑选, 或纯文本。一个勾和交叉的网格读取瞬间, 而文本字段适合规格, 如“1年”或“所有大小”安 覆盖样式 toggle 让单个列脱颖而出,这对于突出显示您推荐的 pick 很有用。

选择布局风格 #

4种布局改变表格的外观,而不会触及你的内容,在它们之间切换是一键找到适合页面的样式。

风格 4 将列变成带有弯曲的彩色标头的单独卡片,以更大胆的方式进行特色比较。

风格2 1个圆形的价格徽章浮动在每列上方,下方有一个彩色标题栏,这里表格设置为4个商品,显示列是如何缩放的。

为桌子设计样式 #

的 风格 选项卡控制颜色和间距。 一般的 部分设置了桌面宽度的外观,其余部分分为 特色盒子, 产品, 按钮、和 图案 当免费 图案 扩展已打开。

• 奇数行颜色和偶数行颜色: 斑马条纹使长桌更容易阅读。
• 边框类型、宽度和颜色: 细胞之间的线。
• 盒子半径、列间距和行间距: 圆角以及列和行之间的间隙。
• 特色盒、产品、按钮: 表格每个部分的排版、颜色、对齐方式和填充。

页面上的结果 #

发布或预览表渲染您的功能、产品、价格和按钮、斑马行等。下面是包含三个产品的 Style 2 表。

常见用例 #

• 产品比较 将两个或三个模型并排放置。
• 计划或定价层 当您想要网格而不是堆叠时 定价表.
• 插件或软件功能矩阵 有勾划划线。
• 服务包 比较每个层包含的内容。
• 我们与他们的表格 使用 Override Style 切换来突出显示您的产品。

使用比较表小部件的技巧 #

• 使用勾号和叉号表示是/否功能。 他们扫描的速度比"“是”"和"“诺”"这两个词还要快,并保持桌子整洁。
• 保持特征标签短。 每行一两个单词会阻止第一列变宽。
• 使用 Override 样式突出显示一列。 不同的颜色引导眼睛找到您推荐的选择。
• 设置斑马颜色以足够的对比度。 交替的行色使长桌子具有可读性。
• 将产品计数与屏幕匹配。 3列适合大多数布局;4列或更多可以在较小的屏幕上局促从宽度(默认767px)开始选项卡格式以下一些布局切换到产品选项卡,因此检查移动视图。

常见问题 #

包裹起来 #

"比较表"小部件将产品和功能列表变成一个清晰的并排网格:选择布局, 设置列数, 添加您的功能行, 并用值、价格和按钮填充每列 由于不依赖 WooCommerce, 因此它会掉到任何页面上, 有关布局示例以及何时选择定价表, 请参阅 元素器比较表小部件 页。与之配对 定价表小部件 对于计划页面,请浏览完整内容 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。