当购物者权衡两到三个选项时,并排的表格比在单独的页面之间滚动更快地回答他们的问题。 比较表 小部件在 Elementor 的主插件 builds that 表:一列特征在旁边,一列每个产品在顶部,以及一个价格加购买按钮在每个。你从 Elementor 面板中填写它,不需要 HTML 表。
每个单元格可以容纳文本、勾号或十字,因此一目了然。四种布局样式、可调节的产品列数和全彩控制意味着表格可以匹配任何页面。本指南涵盖了从特征行到斑马条纹的每个设置。
喜欢先看?本简短教程从头到尾浏览比较表小部件:
"比较表"小部件的作用 #
Widget 列出一个网格:特征名称在第一列中运行,每个产品都有自己的列,其中包含标题、价格、每个特征值以及一个号召性用语按钮。更改产品计数,列调整以匹配。
您用手输入所有内容,因此它不依赖于 WooCommerce。这使得它对于比较插件、服务层或硬件与商店产品一样有用。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 您想要比较的产品和功能列表。
如何添加比较表小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 比较表的,(或)滚动到主插件部分。将其拖到您的页面上,就会出现一个示例表,其中已经充满了占位符产品和功能,因此您可以从工作布局而不是空白网格进行编辑。
一般设置:布局和产品数量 #
打开 内容 选项卡和 一般的 section 保存了塑造整个表格的两个设置。
- 布局: pick Style 1、2、3 或 4。每个都将标题、价格和列重新排列成不同的外观。
- 产品: set 表格显示多少个产品列,提高数字,每个新列下面会出现一个匹配的产品部分。
设置功能行 #
的 特点盒 section定义了左列,你正在比较的东西列表。the 标题 是顶部的标签(如 “Features” 或 “Product”),并且 特点 中继器每行保存一项。
每个功能项都是一个行标签,例如尺寸、保修或可用性。使用 添加项目 要添加行,请将复制图标复制一个,然后将 X 删除。还有一个 按钮标题 保留购买按钮的行的字段。
填写每个产品列 #
每个产品都有自己的部分(产品 1, 产品2(,依此类推),在里面,你设置了列的标题、价格、图像、按钮文本和链接,然后是每个特征行的值。
方便的部分是每行 内容 control。an 每个功能, 你选择一个勾, 一个十字, 一个信息图标, 或纯文本。一个勾和交叉的网格读取瞬间, 而文本字段适合规格, 如“1年”或“所有大小”安 覆盖样式 toggle 让单个列脱颖而出,这对于突出显示您推荐的 pick 很有用。
选择布局风格 #
4种布局改变表格的外观,而不会触及你的内容,在它们之间切换是一键找到适合页面的样式。
风格 4 将列变成带有弯曲的彩色标头的单独卡片,以更大胆的方式进行特色比较。
风格2 1个圆形的价格徽章浮动在每列上方,下方有一个彩色标题栏,这里表格设置为4个商品,显示列是如何缩放的。
为桌子设计样式 #
的 风格 选项卡控制颜色和间距。 一般的 部分设置了桌面宽度的外观,其余部分分为 特色盒子, 产品, 按钮、和 图案 (一个专业选项)。
- 奇数行颜色和偶数行颜色: 斑马条纹使长桌更容易阅读。
- 边框类型、宽度和颜色: 细胞之间的线。
- 盒子半径和柱间距: 圆角和产品柱之间的间隙。
- 特色盒、产品、按钮: 表格每个部分的排版、颜色、对齐方式和填充。
页面上的结果 #
发布或预览表渲染您的功能、产品、价格和按钮、斑马行等。下面是包含三个产品的 Style 2 表。
常见用例 #
- 产品比较 将两个或三个模型并排放置。
- 计划或定价层 当您想要网格而不是堆叠时 定价表.
- 插件或软件功能矩阵 有勾划划线。
- 服务包 比较每个层包含的内容。
- 我们与他们的表格 使用 Override Style 切换来突出显示您的产品。
使用比较表小部件的技巧 #
- 使用勾号和叉号表示是/否功能。 他们扫描的速度比"“是”"和"“诺”"这两个词还要快,并保持桌子整洁。
- 保持特征标签短。 每行一两个单词会阻止第一列变宽。
- 使用 Override 样式突出显示一列。 不同的颜色引导眼睛找到您推荐的选择。
- 设置斑马颜色以足够的对比度。 交替的行色使长桌子具有可读性。
- 将产品计数与屏幕匹配。 三列适合大多数布局;四个或更多可以在较小的屏幕上显得局促。
常见问题 #
Master Addons 中的比较表小部件是什么?
Elementor小部件,搭建并排比较网格,特征名称在第一列运行下来,每个产品都有自己的列,标题,价格,每个特征值,还有一个按钮,所有内容都是用手输入的,所以不需要WooCommerce。
表中我可以比较多少种产品?
General 下的产品字段中设置了数字, 将其升高, 您添加的每一列都会出现一个新的产品部分, 三列适合大多数页面宽度, 而四列或更多列最适合更宽的布局。
我可以显示勾号和十字标记而不是文本吗?
是在每个产品部分,每个功能行都有一个内容控件,您可以在其中选择勾号、十字、信息图标或纯文本勾号和十字标记使是/否功能可扫描,而文本适合保修长度等规格。
比较表有多少种布局样式?
Four。style 1是经典表,Style 2增加了圆形价格徽章,Style 4将列变成带有弧形标头的卡片,切换布局重新排列相同的内容,因此您可以尝试每个,而无需重做数据。
我可以突出显示一个产品列吗?
是。每个产品部分都有一个覆盖样式切换,可以让您给一列自己的颜色。使用它可以使您推荐的选项从表中的其他选项中脱颖而出。
包裹起来 #
"比较表"小部件将产品和功能列表变成一个清晰的并排网格:选择布局, 设置列数, 添加您的功能行, 并在每一列中填充值、价格和按钮, 由于不依赖 WooCommerce, 因此它会掉到任何页面上, 并与 定价表小部件 对于计划页面,请浏览完整内容 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
