Wordpress插件与设计 - Elementor 基础教程 9 - 谷歌地图小工具的设置使用方法 - 特色图片

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

除了精美的设计和丰富的内容外,一个优秀的网站还应具备清晰的地理位置信息,以便用户快速找到所需的服务地址或商店信息等。这时,Elementor的Google地图小工具就是你最佳的选择。

Google地图小工具可以让你在网页中轻松嵌入交互式地图,让访客直观地了解企业的位置、周边环境等重要信息。无论是餐厅、旅游景点,还是办公场所,使用Google地图小工具都能提升用户体验和网站的实用性。

本文将详细介绍如何设置和使用Elementor Google地图小工具。你将学习如何自定义地图外观、添加标记位置、调整缩放级别等,从而为网站添加一张个性化且功能强大的交互式地图。

Google 地图小工具

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

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

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

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

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

1-1. 位置

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

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

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

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

1-2. 缩放

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

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

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

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

1-3. 高度

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

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

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

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

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

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

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

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

3. Google 小工具的高级设置

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

4. 要点总结

通过本篇Elementor Google地图小工具教程,我们掌握如何在网页中快速嵌入一张交互式地图,并通过各种设置选项来自定义地图的外观和功能。无论是调整地图的缩放级别,添加标记位置,还是应用CSS过滤器,Google地图小工具都为我们提供了充足的页面灵活性和与用户的互动空间。

但是,我们也需要注意避免过度或不适当地使用Google地图小工具,否则可能会产生反效果。只有在特定的设计需求下,谨慎地选择适当的地图功能和样式,才能真正发挥出Google地图小工具的最大价值,为用户提供更优质的浏览体验。

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

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

快速 搜索
相关 文章
Wordpress插件与设计 - WP教程 29 - 掌握WP用户权限设置,轻松打造安全的多人协作平台! - 特色图片
WP教程 29 - 掌握WP用户权限设置,轻松打造安全...
Wordpress插件与设计 - WP教程 16 - 一步步教你如何创建诱人的导航菜单 - 特色图片
WP教程 17 - 轻松添加和编辑小工具,让网站与用...
Wordpress插件与设计 - Elementor 专业教程 33 - 制作MegaMenu的步骤以及使用方法 - 特色图片
Elementor 专业教程 33 - 制作MegaMenu的步骤以...
Wordpress插件与设计 - Elementor 专业教程 3 - Portfolio小工具的设置和使用方法 - 特色图片
Elementor 专业教程 3 - Portfolio小工具的设置...
Wordpress插件与设计 - Elementor 基础教程 4 - 图像小工具的设置和使用方法 - 特色图片
Elementor 基础教程 4 - 图像小工具的设置和使...
Wordpress插件与设计 - WP教程 21 - WordPress插件!打造个性化网站的必备工具 - 特色图片
WP教程 21 - WordPress插件!打造个性化网站的...
Wordpress插件与设计 - Elementor 基础教程 21 - 手风琴小工具的设置和使用方法 - 特色图片
Elementor 基础教程 21 - 手风琴小工具的设置和...
Wordpress插件与设计 - Elementor 基础教程 12 - 图标框小工具的设置和使用方法 - 特色图片
Elementor 基础教程 12 - 图标框小工具的设置和...
Wordpress插件与设计 - Elementor 基础教程 27 - HTML小工具的设置和使用方法 - 特色图片
Elementor 基础教程 27 - HTML小工具的设置和使...
Wordpress插件与设计 - WP教程 30 - 安全与效率并重!如何优化你的WordPress个人资料设置? - 特色图片
WP教程 30 - 安全与效率并重!如何优化你的Word...
已阅读 文章一览
没有找到更多文章
站长 推荐
副业项目 与技能
from-keywords-to-content-optimization-seo-strategy tumnail

从关键词到内容优化,提升博客流量的SE...

WP教程 与设计
Wordpress插件与设计 - WP教程 24 - 掌握WordPress的排版艺术,让你的内容展示方式更具吸引力! - 特色图片

WP教程 24 - 掌握WordPress的排版艺术...

Wordpress插件与设计 - Elementor 基础教程 18 - 进度条小工具的设置和使用方法 - 特色图片

Elementor 基础教程 18 - 进度条小工具...

Wordpress插件与设计 - WP教程 22 - 再也不将就!用Text Blocks打造精美的文字布局 - 特色图片

WP教程 22 - 再也不将就!用Text Block...

Wordpress插件与设计 - WP教程 5 - 古腾堡编辑器使用指南!逐步成为WordPress编辑专家 - 特色图片

WP教程 5 - 古腾堡编辑器使用指南!逐...

Wordpress插件与设计 - Elementor 基础教程 1 - 文本编辑器 小工具的设置和使用方法 - 特色图片

Elementor 基础教程 1 - 文本编辑器 小...

Wordpress插件与设计 - Elementor 通用教程 2 - 编辑段,编辑栏,内部区段是什么? - 特色图片

Elementor 通用教程 2 - 编辑段,编辑...

AI工具 与服务
AI工具与服务推荐 - ValidatorAI - AI创业辅助平台 - 特色图片

ValidatorAI - AI创业导师,从想法到MV...

AI工具与服务推荐 - QAnything - 企业级知识库问答平台 - 特色图片

QAnything - 让企业知识库焕发活力,为...

YYP-2024-07-01-13-53-51

Parsio - AI驱动的文档解析神器,让数...

AI工具与服务推荐 - Copilot Hub - AI学习工具箱 - 特色图片

Copilot Hub - 学习者的AI工具箱,即时...

AI工具与服务推荐 - 小绿鲸英文文献阅读器 - 智能阅读工具 - 特色图片

XiaoLvJing - “小绿鲸”助力SCI文献阅读...

AI工具与服务推荐 - Sider - AI浏览器助手 - 特色图片

Sider - 多模型AI聊天写作工具,网页实...

Canva教程 与技巧
Canva使用教程 - Canva 新手指南 2 - 告别PS!全面解析Canva 图像编辑功能及其使用方法 - 特色图片

Canva新手指南2 – 告别PS!全面解析Can...

Canva使用教程 - Canva 新手指南 8 - 提升设计效率!使用调整功能,轻松管理素材样式和层级 - 特色图片

Canva新手指南8 - 提升设计效率!使用...

Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片

Canva 相关教程 2 - Canva免费版与付费...

Canva使用教程 - Canva 新手指南 3 - 无需编程!用Canva创建专业一页式网站的指南 - 特色图片

Canva新手指南3 - 无需编程!用Canva创...

Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片

Canva新手指南5 - 掌握Docs的功能和技...

Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片

Canva新手指南6 - 无需专业软件!用Can...

社媒运营 与营销
社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片

YouTube运营全攻略:从零到一打造你的油...

社媒运营推广 - Youtube - YouTube频道交易的大揭秘:机遇还是陷阱?你需要知道的一切都在这里! - 特色图片

YouTube频道交易的大揭秘:机遇还是陷...

社媒运营推广 - Youtube - 从零到一!创建YouTube频道并上传视频的全流程 - 特色图片

从零到一!创建YouTube频道并上传视频...

社媒运营推广 - Youtube - 如何正确选择一款适合自己的视频编辑软件? - 特色图片

如何正确选择一款适合自己的视频编辑软...

社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片

YouTube Shorts!解析短视频创作和收益...

社媒运营推广 - Youtube - 将爱好转为事业!通过YouTube频道赚钱的秘诀 - 特色图片

将爱好转为事业!通过YouTube频道赚钱...

AI工具 分类筛选
AI Main Category checkbox