如何使用独家网络星期一面包店布局包为您的企业创建位置页面

今年，让自己获得网络星期一特惠也意味着获得大量免费物品！ 除了享受 25% 的折扣外，购买新 Elegant Themes 会员资格或升级其现有帐户（或已经拥有终身会员资格）的每个人还将获得 6 个免费的独家布局包，仅可在我们的网络星期一特卖期间下载。

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

看看独家网络星期一面包店布局包

作为终身会员和网络星期一的新客户，我们为您提供的独家布局包之一是用于 Bakeries 的布局包。 它由 5 个美味的页面组成，这将使任何面包店网站都无法抗拒。

登陆页面设计

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

食谱页面设计

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

菜单页面设计

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

关于页面设计

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

联系页面设计

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

获取独家网络星期一面包店布局包

在进入此用例之前，您需要先了解独家网络星期一面包店布局包，您可以通过成为新的优雅主题会员、升级您现有的帐户或已经成为我们的终身会员来获得。 如果您确实已经是终身会员，您可以登录我们的会员区并在此处下载我们所有的独家版式包。 其他所有人都需要使用下面的按钮购买或升级，然后才能学习我们教程的其余部分。

在它消失之前下载独家布局！

已经是终身会员？ 您可以立即下载该包，无需参与我们的网络星期一特卖！

如何使用独家网络星期一面包店布局包为您的企业创建位置页面

对于本文的其余部分，我们将假设您已经利用了我们的网络星期一优惠，或者您已经是终身会员并且可以访问 Bakery Layout Pack。

从我们的会员区下载新的 Bakery Layout Pack 后，您可以观看下面的视频，了解设置的简单程度。 我们还鼓励您按照本教程进行操作，以使您的网站为进一步定制做好准备。

现在让我们进入用例本身。

在为拥有多个地点的公司建立网站时，重要的是要考虑向访问者传达该信息的最佳方式。 他们需要知道哪个位置离他们最近，以及任何特定于该位置的重要信息。 而且，为网站构建位置页面是一个很好的开始。

在这个用例中，我将向您展示使用 Bakery Layout Pack 为您的企业构建专业位置页面是多么容易。

使用 Bakery Contact Page Layout 的框架，我将向您展示如何向地图模块添加额外的图钉以反映您的业务的所有位置，以及用于显示每个位置的重要信息的组织良好且设计良好的部分。 因为我们可以使用布局已经提供的设计元素，这个过程是清爽有趣的（至少对我来说是这样）。

让我们开始吧。

首先使用联系人布局来构建您的位置页面

Bakery Contact 页面布局非常适合用作我们新 Locations 页面的基础。 它在顶部有一个地图模块，我们将用它来展示我们公司的每个位置。 此外，它还有一些其他元素，例如已经设计好的文本模块，我们可以根据需要重新排列和修改。

创建新页面

首先，您需要创建一个新页面并为其命名（类似于“我们的位置”），然后单击以使用 divi Builder，然后单击可视化构建器。

加载面包店联系页面布局

此时，您应该已经将页面布局上传到您的 Divi 库。 单击以打开页面底部的紫色菜单，然后选择带有加号图标的“从库中添加”按钮。 选择从库选项卡加载，然后从列表中选择 Bakery Contact 布局。 布局将立即加载到页面上。

发布。

为您的特定位置信息添加部分

我们在联系页面上确实没有太多内容可用于为我们的特定位置构建附加内容。 因此，让我们转到 Bakery Landing 页面并从页面的第二部分中选择行并将其保存到库中。

现在返回位置页面。 复制页面底部包含联系表格的部分（不要删除它，我们稍后会用到它）。 在地图正下方的部分中，从该部分删除整行并添加您从库中保存的行。

接下来将行的列布局更改为三分之二三分之一布局。

在底部的右栏中找到带有地址内容的文本模块。 将其拖到其上方部分行右列中的图像模块下方。

然后更新左列文本模块中的内容以表示您的特定公司位置。 对于我的示例，我将添加以下内容：

总部
纽约市

现在更新右栏中的图像模块以包含您公司位置的图像。

这将作为您每个特定位置简介的一个很好的部分。

现在您需要做的就是复制此部分以添加其他位置。

将此部分复制两次，以便您总共有 3 个位置部分。 然后将中间位置部分的背景颜色更改为白色以帮助更好地划分部分。

然后使用特定于位置的内容更新重复的部分。 对于此示例，除了我的纽约位置之外，我还将为旧金山和休斯顿创建一个分区。

设计联系表格页脚部分

请记住我们保存在底部的包含联系表格的部分。 这将作为我们位置页面的一个很好的页脚部分。 我们需要做的就是稍微调整一下。

首先让我们删除右列中的剩余模块。 然后将行列布局更新为一列布局。 现在您应该看到的只是一列行中的联系表。

接下来单击以编辑行设置并更新以下内容：

在内容选项卡下...

背景颜色：#ffffff

在设计选项卡下...

自定义填充：顶部 5%，右侧 5%，底部 5%，左侧 5%

框阴影：[选择框阴影]

现在让我们为我们的部分添加背景图像。 转到部分设置并选择布局中包含的背景图像之一。

伟大的！ 现在进入地图模块。

添加您的 Google API 密钥

此时，您需要确保创建您的 Google API 密钥，然后将其添加到主题选项中。

使用新的位置图钉更新地图模块

至此，我们的大部分页面已经完成。 剩下的就是对页面顶部地图模块的更新。 我们需要为我们在页面部分（纽约市、旧金山和休斯顿）中创建的三个部分添加新的图钉位置。

单击以编辑地图模块并更新设置如下：

擦除模块中显示的一个引脚，以便重新开始。 然后添加一个新引脚并更新设置，如下所示：

名称：纽约市面包店
内容：更多信息
地图别针地址：纽约市

单击查找按钮。

然后添加一个新引脚并更新设置，如下所示：

标题：旧金山面包店
内容：更多信息
地图别针地址：旧金山

单击查找按钮。

然后添加一个新引脚并更新设置，如下所示：

标题：休斯顿面包店
内容：更多信息
地图别针地址：德克萨斯州休斯顿

单击查找按钮。

您可以将地图中心地址保留为纽约市。 但是调整地图显示以缩小到足够远，以便在访问者第一次查看地图时能够看到所有位置。

将锚链接添加到 Pin 内容框

作为附加功能，您可以通过在点击大头针时显示的大头针内容中添加锚链接来提升用户体验。 此锚链接会将用户带到页面上显示该位置信息的特定部分。

打开地图模块设置，然后编辑第一个引脚设置。 突出显示内容框中显示“更多信息”的文本，然后单击链接图标使其成为链接。 对于 URL，输入“#newyork”并单击“确定”。

对旧金山图钉（使用网址“#sanfran”）和休斯顿图钉（使用网址“#houston”）做同样的事情。

现在您需要做的就是为每个部分添加一个自定义 CSS ID，这些 ID 将对应于您刚刚在 pin 中创建的链接 url。

对于“纽约市”部分，使用 CSS ID“newyork”更新“高级”选项卡中的部分设置并保存您的设置。

现在，当用户单击纽约图钉中的“更多信息”链接（使用 url #newyork）时，页面将跳到该部分。

对 San Francisco 部分（使用 CSS ID“sanfran”）和 Houston 部分（使用 CSS ID“houston”）执行相同操作

就是这样。 你都完成了！