如何在 WordPress 中轻松添加 Google 评论小部件

已发表: 2022-06-16

在您的网站上发表评论始终是您品牌参与度的好举措。 评论不仅可以帮助建立客户信任,还可以帮助您在工作中保持一些急需的信誉。 此外,当潜在客户在您的网站上获得正面评价时,他们会更倾向于继续购买您提供的产品或服务。

现在,无论您是打算使用 Yelp 之类的服务,还是选择一个不错的旧 Google 评论,您都可以使用许多不同的工具将业务评论添加到您的 WordPress 网站。 不过,如果您确实决定使用 Google 评论来完成此任务,那么最有效的方法之一就是使用专门的 Google 评论小部件的帮助。 因此,这一次,我们将向您展示如何使用 Qi Addons for Elementor 插件及其实用的商业评论 Google 小部件在 WordPress 中轻松插入和自定义 Google 评论。 请继续关注我们的报道:

  • 为什么 Elementor 的 Qi 插件是在您的网站上添加 Google 评论的最佳选择
  • 如何添加和自定义商业评论谷歌小部件
  • 设计小部件的外观

为什么 Elementor 的 Qi 插件是在您的网站上添加 Google 评论的最佳选择

带有一百多个免费和高级插件, Qi Addons for Elementor是最好的基于小部件的插件之一,您可以使用它在您的网站上构建几乎任何类型的元素。 这包括从创意和商业插件一直到信息图表插件甚至 WooCommerce 元素的任何内容。

在这个小部件列表中,您还可以找到一个名为Business Reviews Google 小部件的高级小部件。 顾名思义,此小部件用于以多种不同的时尚方式在您的网站上显示 Google 评论。 您可以通过多种方式自定义评论列表的外观——设置布局和列数、设置颜色和排版样式、调整填充等等。 此外,集成 Google 评论非常简单——您只需输入您的 Google API 密钥,一切就绪。 因此,事不宜迟,让我们看看如何做到这一切。

如何添加和自定义商业评论谷歌小部件

在您的网站上安装 Qi Addons for Elementor 插件后,您可以通过在 Elementor 侧边栏中搜索来添加 Business Reviews Google 小部件。 然后,将小部件拖到屏幕右侧

Business Reviews Google Widget

现在,一旦您将 Google 评论小部件插入您的页面,您将看到它最初是空的。 您还将看到关于必须在 Qi Addons for Elementor 的集成页面中插入 Google Places API 的通知。

我们已经在此处插入了 Google Places API 密钥:

Google Places API key

要在您的小部件中激活此密钥,您需要插入 Place ID,可以使用Google Developers place ID page找到它。

到达那里后,您应该在地图搜索栏中输入您的营业地点,然后复制屏幕上显示的地点 ID。

Copy the place ID

然后,将您复制的密钥粘贴到Place ID字段中

当我们插入 Place ID 时,我们的小部件如下所示:

Paste the key into the Place ID field

从这里开始,您还可以选择您的列表外观是画廊还是砌体(我们将使用画廊作为示例)。 我们还将列数设置为一。

List appearance

还有一个Columns Responsive选项,允许您为不同的屏幕设置单独的列数,以及一个Space Between Items选项,其名称非常不言自明。 我们将此选项设置为 75px 以在我们的评论之间创建一些额外的空间。

此外,您可以选择是否希望在项目之间设置边框并调整页面上显示的评论数量(我们选择了 2)。

Borders between items and number of reviews

接下来,布局部分允许您选择代表评级的图标的外观- 这包括标记和未标记的图标。

我们为标记和未标记图标选择了相同的 SVG 图标。 完成选择自己的媒体后,请确保点击插入媒体按钮

Insert Media button
Chose the same SVG icon

接下来,您可以选择启用项目之间的阴影(默认设置为Yes )并选择 Item Layout 。 根据您为评论项目选择的布局,可以在屏幕上显示不同的选项。

例如,如果您选择 Boxed Centered 或 Boxed 布局,您还将获得设置项目的填充、边框半径和背景颜色的选项。

话虽如此,我们决定使用名为Side With Image的 Item 布局作为示例。

Side With Image

设计小部件的外观

转到样式选项卡——图标样式部分,您可以在其中设置标记和未标记图标的大小,以及更改标记和未标记的颜色。 随意更改此部分以适合您自己的喜好。

Google reviews widget icon style

接下来是标题样式部分,它允许您完全自定义标题的外观——这将是我们示例中审阅者的姓名。

您可以在此处更改标题标签标题颜色标题排版。 对于我们的示例,我们将标题标签设置为 H4,并将字体更改为 Playfair Display。

我们还将字体大小设置为 30 像素。 你可以看到这些改变了我们标题的外观。

Changed the look the title

间距样式部分将允许您在调整项目间距时进行深入研究。 其中包括标题页边距、文本页边距和评级页边距等的顶部和底部间距。

对于我们的示例,我们将Title Margin Bottom设置为 2px,为Title Margin Top选择 -11px,为Rating Margin Top选择 -9px。

Spacing Style section

文本样式部分包含文本长度选项,允许您输入文本的字符数,并且每个项目的长度相同。

还有设置Text ColorText Typography的选项。 我们为小部件选择了 160 个字符的文本长度。

Text Color and Text Typography

最后但并非最不重要的一点是,时间样式部分可让您调整指示评论已发布多久的文本外观。 在这里,您还可以更改时间颜色时间排版

对于我们的示例,我们为时间颜色添加了十六进制代码#c4c4c4,并决定不更改任何其他内容。

Time Style section

最后,确保在完成小部件外观调整后点击“发布/更新”按钮以使更改生效。

Publish

这是我们的商业评论 Google 小部件的最终外观:

Google reviews widget

收拾东西

这完成了我们关于如何使用 Qi Addons for Elementor 插件及其简洁的商业评论 Google 小部件在您的 WordPress 网站上轻松添加、自定义和样式化 Google 评论的指南。 正如您从我们上面显示的选项中看到的那样,在调整小部件的外观时,您可以做很多事情。 您将能够更改标记和未标记的图标,从不同的可用项目布局中进行选择,设置图标和标题的样式,设置各个元素的间距,等等。 随意使用小部件的选项,直到找到最适合您的设计。

我们希望这篇文章对您有所帮助。 如果您喜欢它,请随时查看其中的一些文章!

  • 如何创建 WordPress 帖子滑块
  • 如何轻松地将 WooCommerce 产品比较元素添加到您的网站
  • 如何在 WordPress 中轻松添加图像热点