Divi教程：如何使用Divi全屏卡模块

平价 布莱尔Jersyer | Divi

Divi上的全屏地图模块有助于在页面上的任何地方集成个性化的Google地图。 您甚至可以在地图上添加无限的图钉，并设置自定义起始位置。 模块图也采用“标准宽度”格式，因此请确保也将其检查！

全角-MAP-overview.png

Google Maps API密钥

API密钥是 要求 使用地图模块。 要获取API密钥，请登录到 Google Developers Console，它将引导您完成整个过程，并自动激活Google Maps JavaScript API和所有相关服务。 您将被要求做的第一件事是创建一个新项目。

创建一个Google.jpg API密钥

接下来，您将被要求为您的项目命名。 您可以随意命名项目。 在此示例中，我将其简单地称为“地图”。 您还可以输入 域名 您的网站（如果您允许从 www.domain.com 和 domain.com 访问，请在其前面添加一个 *）以确保您的 API 密钥已获得授权。

将API密钥添加到project.jpg

创建命名项目后，您将看到可以使用的API密钥。

图像文档

获取API密钥后，您必须通过以下步骤将其复制/粘贴到主题选项面板中： Divi >>主题选项>>常规设置>> Google Maps API密钥

如何添加Divi全屏显示卡模块

在将全屏地图模块添加到页面之前，您必须先跳转到 Divi Builder。 一旦 Divi主题 安装在您的网站上，您会注意到一个按钮 使用Divi Builder 创建新页面时，在帖子编辑器上方。 单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。 然后点击按钮 使用Visual Builder 以可视模式启动发电机。 您也可以点击按钮 启用Visual Builder 如果您已连接到WordPress仪表板，则在前台浏览网站时。

使用divi builder

进入Visual Builder之后，可以单击灰色加号按钮将新模块添加到页面。 新的全角模块只能添加到全角部分中。

full section divi builder.png

如果要开始新页面，请记住首先在页面上添加全角部分。

full map screen.png

在模块列表中找到全宽度卡模块，然后单击它以将其添加到页面中。 Mod列表是可搜索的，这意味着您还可以输入单词“全屏地图”，然后单击Enter以自动查找并添加全宽地图模块！ 添加模块后，模块选项列表将为您打招呼。 这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：将全角地图模块添加到联系页面

全角地图模块是在您的联系页面上展示您的业务位置的好方法。 并且能够在地图上添加多个图钉以突出显示不同的位置和商业信息是一项有用且有吸引力的功能。

对于此示例，我将添加一个全角地图模块，通过向地图添加自定义图钉来展示位置和业务信息。

添加一个全宽的地图divi builder.jpg

重要 ：确保在选项面板中输入了有效的 Google API 密钥 Divi主题. 没有它，地图模块将无法工作。

使用Visual Builder，在联系页面底部添加“全角”部分。 然后将“全角映射”模块插入新部分。 在全角卡设置的“内容”选项卡中，在“卡中心地址”选项下输入您的公司地址。 地图中心地址是地图的中心点。

添加地图divi example.jpg

然后点击 +添加新项目 创建您的第一个图钉。 更新以下内容：

标题：[输入您的位置标题]内容：[输入您的图钉内容（地址和电话号码）]地图地址：[输入此特定位置的地址]

添加细节全宽图divi.jpg

保存设置

就这样。 现在，联系页面底部有一个全角动态地图模块，带有可单击的图钉来显示公司信息。

结果全图map divi.jpg

全宽地图模块内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。 所有控制 什么 出现在模块中的内容将始终在此标签中找到。

选项内容divi builder full width map module.png

Google API金钥

地图模块使用 Google 地图 API，需要有效的 Google API 密钥才能工作。 在使用地图模块之前，请确保您已在选项面板中添加了 API 密钥 Divi主题.

地图中心地址

输入地图中心的地址，该地址将被地理编码并显示在下面的地图上。 如果您有多个图钉，并且希望在特定且更精确的位置放大地图，这将很有用。 您可以简单地以标准格式键入地址，例如“州立某市某市1235，Sunny Road 88343”。

行政标签

这将更改构造函数中的模块标签，以便于识别。 在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

全宽地图设计选项

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。 这是用于更改模块外观的选项卡。 每个Divi模块都有一长串的设计设置，可用于更改任何内容。

选项设计模块full width map.png

鼠标滚轮缩放

在这里，您可以选择是否通过鼠标滚轮控制缩放级别。 通常，最好关闭此选项，以使访问者在向下滚动页面并将鼠标滚轮卡在地图iframe中时不会受到干扰。 对于全宽卡模块尤其如此。

可拖动缩放

如果可以在移动设备上移动卡，则可以在此处选择。

使用灰度过滤器

启用此选项会将您的地图变成灰度图像。

先进的全角地图选项

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。 在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。 您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

部分提前模块全宽卡divi.png

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。 您可以添加多个类，以空格分隔。 这些类可用于Divi子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。 在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。 这些设置中的CSS条目已经包装在样式标签中。 因此，只需输入用分号分隔的CSS规则即可。

能见度

此选项使您可以控制模块所在的设备。 您可以选择在平板电脑，智能手机或台式机上分别停用模块。 如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

单个全宽地图内容选项

引脚参数模块卡full wide.png

标题

创建新图钉时，您可以分配标题。 将标题悬停在地图上的图钉上时，该标题将显示在框中。

包装内容

创建新的图钉时，可以分配内容文本块。 悬停在地图上的图钉上时，此文本将显示在框中。

地图地址

这是您的新图钉将出现在地图上的确切位置。 您可以以标准格式输入地址。

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

发表评论

您的电子邮件地址将不会被发表。 必填字段标 *

这个网站使用Akismet来减少不需要的。 详细了解如何使用您的评论数据.