漳州高端网站建设:divi插件突出显示-映射扩展模块

2019.04.29 |
标签

DiviBuilder有一个Map模块,允许您在Divi设计中显示Google地图。这是一个很好的选择,如果你想要一个标准的谷歌地图,但它没有任何调整样式。如果你想要你的谷歌地图样式,你将需要类似DiviMap扩展。

diviMap扩展添加了一个新模块到DiviBuilder,它可以与任何基于divi Builder的网站一起工作。它添加了许多地图样式,允许您选择地图类型,上传您自己的引脚图标,设置地图高度,并创建您自己的信息框内容。

扩展的divi Map可从以下站点获得:DiviWebDesign.com.

在我们漳州高端网站建设看MapExtended模块之前,让我们先看看标准的DiviMap模块来进行比较。

标准Divi映射模块

漳州高端网站建设

标准的Divi模块可以与标准部分和特殊部分一起使用。要使用它,您需要一个GoogleAPI密钥。单击“常规设置”中提供的链接,了解如何创建自己的密钥。

一般设置

漳州高端网站建设

漳州高端网站建设在“常规设置”中,您可以放置多个引脚,选择要显示的确切地址,使用鼠标轮启用缩放,在移动上启用拖动,在电话、平板或桌面上禁用,并更改管理标签。

创建一个Pin

添加映射中心地址以显示所需的地图。您可以在此地图中添加多个引脚,每个引脚具有不同的位置和信息。若要为您的地图创建一个引脚,请选择“在地图模块中添加新针”。

在这里,你给别针一个标题,并选择它的地址。当访问者鼠标越过引脚时,标题就会出现。您可以通过输入地址或在地图上想要的位置拖放引脚来放置引脚。引脚将自动显示位置和地址的名称。

漳州高端网站建设也可以定义引脚的信息框的内容。这允许您创建自定义内容,而不是使用默认的GoogleMap信息。将信息框的内容添加到WYSIWYG编辑器中。就像用WYSIWYG编辑器为页面和帖子创建内容一样,您可以放置媒体、文本或其他内容。在本例中,我添加了要显示的文本和图像。

下面是地图在Divi库的“联系人”页面上的外观。在本例中,我放置了一个引脚,并定义了信息框的内容。

高级设计设置

高级设计设置给您一个灰度过滤器。您可以选择筛选金额,以获得您想要的灰度外观。

灰阶是有用的,使你的颜色流行或调色的颜色。如果该颜色不适合您的网站的样式,或者如果您希望地图融合在一起,而不是突出的话,这也是很有帮助的。在上面的例子中,我放置了两个引脚,并将灰度设置为70%左右。

标准Map模块为您提供工具,定义一个映射并放置多个引脚。您甚至可以为信息框创建自己的内容。如果您想要对您的地图做更多的工作,比如自定义映射、引脚或内容呢?让我们看看MapExtended模块,看看它能做些什么。

地图扩展模块

MapExtended模块构建在标准Map模块的基础上,为您提供进一步定制地图的工具。

安装

漳州高端网站建设在安装插件之前,您必须先解压缩下载文件。在里面你会找到文档和压缩插件文件。这是你要上传的文件。上传并正常安装此文件。

divi Builder模块

MapExtended模块被添加到DiviBuilder中,并以与任何模块相同的方式使用。这是很容易发现,因为模块是亮黄色。它可以与标准和专业部分一起使用。

一般设置

“常规设置”与标准DiviMap模块的工作方式相同,但要显示控件的添加部分除外。这使您可以禁用默认控件,如缩放、映射类型和行走路线。

除非禁用控件,否则映射的工作方式相同,至少在查看“高级设计设置”之前是如此。

高级设计设置

高级设计设置是两个模块的区别所在。这个选项包括地图选项、地图类型、默认显示选项、动画、地图高度和大量字体样式。

地图选项

这个模块不只是一个灰度选项,而是使用时髦的地图数据为GoogleMaps提供不同的样式。在我们最初只有一个选择的地方,我们现在有70多个。大多数都是重新着色的,但也有一些是去掉标签的,等等。他们都给了地图一个新的外观。有些比另一些更极端,有些更适合某些地图类型。让我们看几个例子。

午夜指挥官

这个叫午夜指挥官。所有的土地和水都是深蓝色的。较大的道路突出显示。标签是一种浅棕色,很好地脱颖而出。尽管看上去很暗,但它很干净,而且相对容易导航。

蒙德里安

这个叫蒙德里安。水是浅蓝色,道路是黑色的,蓝色、红色、黄色和奶油是陆地元素。这个不显示标签。

克拉德梅

Cladme只使用几种颜色来显示水、土地、道路和标签。即使只有几种颜色,我也发现它很容易阅读和跟踪。

桔黄色的

橙色主要集中在颜色橙色的水和主要道路。谭是土地,而较小的道路是浅棕色。

鲜亮的泡沫

明亮和泡沫使用大量的蓝色,红色,褐色,棕色和绿色。黑色用于小路名,而区域则用白色标出红色。

地图类型

可以设置默认的映射类型。如果禁用控件,则读取器将无法更改它。有四种类型的地图可供选择:

  • 路线图
  • 卫星
  • 杂交
  • 地形

地图样式和地图类型的各种组合可以创建一些有趣的设计。你可能需要进行实验才能找到最有效的组合。下面查看所有四种映射类型的Vintage map选项。

复古与路标只显示道路。

这是带卫星的Vintage。卫星不受地图样式的影响,所以不管怎么看,它看起来都是一样的。

混合覆盖在卫星图像上的道路数据。这个版本在混合地图上使用了Vintage风格。

这是有地形的葡萄酒。这一条增加了道路景观的地形。

在加载时显示Info窗口

当地图加载时,信息框将自动打开。此示例使用TransportforLondon映射样式。

标记销的弹跳动画

这使得别针反弹,所以它们更加突出。此示例使用Decola地图样式。

定义地图的高度

让地图任何你想要的高度,你可以调整它不同的桌面,平板电脑和手机。在这个例子中,我制作了800像素高的地图。您甚至可以在狭窄的列中使用它来创建一个高而瘦的地图。此地图使用Flex映射样式。

造型

其余的调整允许您自定义信息框中的字体。您可以为标题和内容选择字体和字体样式、大小、颜色、字母间距和行高。

由于我一直使用圣地亚哥动物园作为我的引脚之一,我选择了颜色和字体风格,是类似于他们的网站。我还增加了字体大小、间距和线条高度。此示例使用光明甜点地图样式。

定制销

地图扩展的另一个优点是能够为您创建的每个引脚上传您自己的引脚图标。您可以设置引脚的宽度和高度,因此,如果您使用相同的图标,您可以改变他们的大小,如果你需要。

例如,如果您有一个具有多个位置的商店,您可以将最突出位置的图标设置为比其他位置更大的图标,以显示它是总部、最大位置或第一个位置。

这一个使用两个自由图标与柠檬树地图样式和地形图类型。由于顶部的图标是圆形的,所以我必须设置大小,否则就显得太窄了。我在默认情况下保留了底部图标,以显示差异。

实例

标准的地图模块只有灰度调整,所以我们在设计上没有什么可做的。地图就在现场,有时根本不合身。与地图扩展,所有的地图样式和字体样式的选择,给我们一些良好的机会,风格的地图,以适应网站。我创造了几个例子。这些例子的图片摘自Unsplash.com。

沙滩婚礼

这是一个海滩婚礼网站的例子。婚礼网站需要特定的颜色和字体,他们也受益于谷歌地图,以帮助你的客人找到合适的地方。除非你能画出地图的样式,否则它可能看上去不合适。这一个使用的光单色地图风格。字体使用与站点其他部分相同的样式。信息框被设置为在加载时打开。

外餐厅

此示例在覆盖层中使用带有文本、图像和地图的视差背景。地图样式是PixMix。我已经把信息框设置为在装载时打开。信息框显示一个白色的背景,但我想要一个更深的背景,以帮助适应与网站的样式。我使用了在线CSS风格的背景信息框。我把地图的高度设为600像素。这一个也有一个自定义图标的针(一个板与刀叉)设置为32×32像素。

全宽图

标准联系人我们的布局包括一个全宽度地图。全宽度映射可在全宽度部分中使用。MapExtended模块不适用于全宽度部分,但是有一种方法可以使其完全宽度。在上面的联系人示例中,我使用了一个标准部分。我想重新创建这一页,使之看起来像原版。

全宽度地图模块

下面是使用全宽度部分和Divi的全宽度地图模块的原始页面。

全宽映射扩展模块

这与使用标准部分和Map扩展模块的效果相同。我将行设置调整为全宽,将排水沟宽度设置为0,并将0填充用于上、右、下和左。结果看起来与全宽度映射相同。这是设置为路线图的默认映射。

额外

多加就好了。该模块的反应与标准Map模块相同,因此您可以相同的方式使用它,而不管您使用的是Divi还是EXTER。

许可证、更新、支持和文档

这个插件可以为你和你的客户在无限的网站上使用。它包括一年的更新和六个月的支持。

文档包含在下载包中。它是一个在浏览器中打开的HTML文件,它展示了如何安装和激活模块,如何加载地图样式,如何在加载时打开信息窗口,如何使用动画,如何使用自定义图标,以及如何调整字体设置。它还包括关于如何使用模块创建全宽度映射而不使用全宽度部分的详细信息。这些信息包括行设置、使行完全宽度、使用自定义沟槽宽度和使用自定义填充。

最后思想

diviMap扩展提供了许多在标准DiviMap模块中不可用的设计特性。在多种地图选项和类型之间进行选择,创建自己的信息框内容和样式,在加载时显示信息框,添加自己的引脚,动画引脚,定义地图高度,并使地图完全宽度。所有的特性和调整都是直观的。如果您能够轻松地使用Divi模块,那么您就会觉得在使用这个模块时很自在。如果您需要自定义您的Divi设计中的地图,那么DiviMap扩展模块是值得考虑的。


相关推荐

最新文章

热门推荐