当您想要推送一件产品时,一张引人注目的卡片会击败完整的商店网格。 特色产品 小部件在 Elementor 的主插件 构建该卡:图像、标题、带有可选执行原价的价格、评级、角丝带和号召性用语按钮,所有这些都从 Elementor 面板设置。
您在自己中键入详细信息,因此它可以在任何有或没有 WooCommerce 的页面上运行。这使得它对于促销块、联盟选择、发布公告或您想要的正面和中心的交易都很方便。本指南涵盖了从三种布局设计到功能区和评级控制的每种设置。
喜欢先看?本简短教程从头到尾浏览特色产品小部件:
特色产品小部件的作用 #
Widget输出一个自成一体的产品卡,你给它一个图像、一个名称、一个描述或功能列表、一个价格、一个按钮,它把它们以三种现成的设计之一的形式排列出来,上面放着一条丝带和一个星级来吸引注意力。
WooCommerce目录中,这里没有任何东西可以提取。您手动输入内容,这意味着您可以展示产品、服务、捆绑包或外部优惠,而无需先设置商店。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- 产品图像和您想要显示的详细信息(名称、价格、按钮链接)。
如何添加特色产品小部件 #
在 Elementor 编辑器中,打开 元素 面板和搜索 特色产品的,或者滚动到主插件部分。将其拖到您的页面上,并且立即显示出示例卡,因此您从工作起点而不是空白处进行编辑。
填写产品详细信息 #
打开 内容 选项卡和 一般的 section 持有主要字段,这是卡片获取其内容的地方。
- 布局: 选择设计 1、设计 2 或设计 3。更多关于这些内容。
- 图片: 从媒体库中选择产品图像。
- 标题: 产品名称。如果您想从字段中拉取动态标签,它支持动态标签。
- 内容类型: 在普通之间切换 描述 和一个 列表 的特征。
- 价格和原价: 当前价格加上可选的原始价格,显示已完成,即折扣。
- 按钮文本和链接: 的号召性用语标签及其发送人的位置,设计2使用按钮图标而不是文本。
描述或功能列表 #
套 内容类型 到 列表 and description box 变成中继器,你挑选一个列表图标(默认是一个复选标记),随心所欲地添加任意多的功能行,每个都有一个重复和删除控件,它是一种快速的方法,可以将卡片变成一个迷你销售宣传,具有子弹头的好处。
选择布局设计 #
小部件提供三种布局,并在它们之间切换重新排列相同的内容,而无需重做任何内容。
设计2 stacks 图像在上面, 然后在标题和描述旁边放一个图标徽章, 评级和价格在一行上, 按钮显示为图标在这里。
设计3 leads with image,然后将标题、描述、评分、价格和下面的全宽按钮居中,简单宣传片是三者中最干净的一个。
Design 1(默认)将评级和标题放在顶部,其下的价格,然后将图像、描述和全宽按钮放在底部。
添加丝带和评级 #
滚动经过链接字段即可到达 丝带 並 评级 controls。ribbon是角落横幅,呼唤“new”或“hot,”评级是星星行。
- 丝带(显示): 打开或关闭角横幅。
- 丝带类型: 择丝带样式,样式改变形状和位置,从斜角变成旗帜或报价标签。
- 丝带文本和丝带图标: 标(如新或热)和一个可选图标,如奖杯。
- 评级: 设置星形值,例如 4.5,卡片显示要匹配的部分星形。
为卡片设计样式 #
的 风格 tab 分成与卡片各部分相匹配的部分: 盒, 标题, 内容, 价格, 按钮, 评级, 丝带、和 图案 (一个专业选项)。
- 盒子: 整张卡的背景、边框、半径和阴影。
- 标题、内容、价格: 每个文本块的颜色、排版、对齐和间距。
- 按钮: 颜色、排版、填充和悬停状态以进行号召性用语。
- 评级和丝带: 星星颜色和丝带的颜色和文字造型。
页面上的结果 #
Publish或preview和卡渲染与所有在位:在角落的丝带,评级,价格与它的敲穿原件,你的图像,和按钮链接的地方你设置它下面是同一个小部件在其两个设计。
常见用例 #
- 促销块 在登陆页面上突出显示一种产品。
- 附属机构选择 具有评级、价格和出境购买链接。
- 启动或发出呼叫 使用新丝带或热丝带。
- 服务包 列表内容类型显示包含的内容。
- 特色项目 与a并列 定价表 或号召性用语部分。
使用特色产品小部件的技巧 #
- 设置原始价格以显示折扣。 当前价格旁边的实穿数字一目了然。
- 用列表内容类型来获取好处。 短功能行的转换效果比促销卡上的段落更好。
- 将丝带文本保留为一个单词。 新的、热的或销售的适合角落横幅,无需包装。
- 将设计与其周围的布局相匹配。 设计3适合干净的网格;设计 1 很好地填充了侧边栏或窄柱。
- 将按钮指向真实的地方。 在发布之前将链接设置为结账、产品页面或联盟 URL。
常见问题 #
Master Addons 中的特色产品小部件是什么?
Elementor小部件,它构建了一个带有图像、标题、价格、评级、色带和号召性用语按钮的单一产品卡,您用手输入详细信息,并从三种布局设计中选择一种,它可以在任何页面上工作,有或没有WooCommerce。
特色产品小部件需要 WooCommerce 吗?
No。widget 不会从 WooCommerce 目录中提取。您自己输入产品名称、价格、图像和按钮链接,因此您可以在任何页面上显示产品、服务或外部优惠,而无需运行商店。
功能产品小部件有多少种布局?
三、设计1在图像上方以评级和标题领先,设计2在标题旁边放置一个图标徽章,并带有图标按钮,设计3将内容居中在顶部图像下方,切换设计会自动重新排列相同的内容。
如何在卡上显示折扣价格?
General版块中既填写价格,也填写原价字段,当前价格以重音色显示,原价以走读方式出现在旁边,这标志着对访客的折扣。
我可以显示功能列表而不是描述吗?
是。在常规部分设置内容类型到列表。描述框变成一个中继器,您可以在其中添加功能行,每个功能行都有一个列表图标。使用它将卡片变成一个简短的、可扫描的福利列表。
包裹起来 #
Featured Product 小部件将一把细节变成抛光的 Elementor 产品卡:选择设计、添加图像和价格、打开色带和评级以及链接按钮 由于没有什么取决于 WooCommerce,因此它会作为促销或联盟块掉落到任何页面上,并将其与 定价表小部件 或一个 呼吁采取行动 节, 浏览完整内容 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
