Elementor 基础教程 9 - 谷歌地图小工具的设置使用方法

2023-11-26
Elementor 基础教程
喜欢(1)
Elementor basic 9 gugeditu.webp

Elementor 的 Google 地图小工具是一个非常实用的工具,它能够快速且方便地将交互式地图添加到网站页面中。

使用这个小工具,你可以通过更改地图类型、缩放级别、标记位置等来自定义地图的外观,还可以添加自定义样式以匹配网站的设计。

本文将说明 Google 地图小工具的设置和使用方法。

Google 地图小工具

首先,将 Google 地图小工具拖放到编辑栏内,如下图所示:

拖放后,你会看到如下画面。

1. Google 地图小工具的内容标签

Google 地图小工具的内容标签主要有三个设置项:

  1. 位置
  2. 缩放
  3. 高度

1-1. 位置

位置是输入希望在地图中显示的地点位置。为了方便理解,以东京塔的位置为例进行说明。

你需要首先在 Google 地图上搜索东京塔的位置,如下图所示:

将东京塔的信息复制后,回到编辑页面将地址粘贴到 Google 地图小工具的位置输入栏中,如下图所示:

但是,这表示的范围有点大,所以无法清楚看到东京塔的具体位置。这时,你就需要使用缩放功能。

1-2. 缩放

缩放是用于拉近和拉远距离的设置项。换句话说,就是调整目标地点的距离。

缩放的最低数值是 0,最高数值是 20, 默认数值是 10。数值越大,离目标地点的距离也越近。

如上图所示,设置的数值是 4,可以看到整个日本的地图。

如上图所示,设置的数值是 16,可以看到具体的目标位置。因此,你可以根据设计需要以及地理位置来设置具体的缩放数值。

1-3. 高度

高度是用于指定 Google 地图显示高度的设置项。

Google 地图小工具的高度可以根据设计需要进行自定义设置。

2. Google 地图小工具的样式标签

Google 地图小工具的样式标签只有 CSS 过滤器设置项。你可以在标准和悬停两种状态下的 Google 地图显示效果进行设置。

首先,在标准状态下,设置一个黑白,稍微模糊的 Google 地图,如下图所示:

然后,在悬停状态下,设置一个彩色,亮度较高的 Google 地图,如下图所示:

最后,将标准状态到悬停状态的过渡时间设置为 3 秒,如下图所示:

设置完成后,我们可以看到以下的变化效果。

3. Google 小工具的高级设置

高级设置是所有小工具通用的设置项,具体的功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是 Google 小工具的功能和使用方法的说明。希望本篇内容能对你使用 Elementor 有所帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

快速搜索
站长推荐
相关文章
Elementor basic 22 qiehuan.webp
Elementor 基础教程 22 - 切换小工具的设置和使用方法
Elementor General 80 yangshibiaoqian.webp
Elementor 通用教程 3 - 小工具样式标签的通用设置和使用方法
Elementor pro call to action widget
Elementor 专业教程 14 – Call To Action小工具的设置和使用方法
Elementor basic 16 tubiaoliebiao.webp
Elementor 基础教程 16 - 图标列表小工具的设置和使用方法
Elementor basic 6 anniu.webp
Elementor 基础教程 6 - 按钮小工具的设置和使用方法
Jeteing jiaocheng lables advance settings tumnail
JetEngine 通用教程 - Labels和Advance Setting的设置方法
Elementor basic 4 tuxiang.webp
Elementor 基础教程 4 - 图像小工具的设置和使用方法
Elementor pro Code Highlight widget
Elementor 专业教程 28 – Code Highlight小工具的设置和使用方法
Elementor pro Nav Menu widget
Elementor 专业教程 8 – Nav Menu小工具的设置和使用方法
Elementor pro Facebook Button widget .webp
Elementor 专业教程 22 – Facebook Button小工具的设置和使用方法