在 WordPress 中创建具有单页导航的单页网站（有奖励）

您是否正在为您的企业建立一个网站，但没有时间创建一个大型网站？ 或者还没有准备好长期进行网站维护？

然后，您应该选择带有单页导航的单页网站。 单页网站以有吸引力的方式提供所有信息，并为您的网站提供令人惊叹的外观，以便您的用户可以参与更多。

在本博客中，您不仅将学习如何在 WordPress 中创建具有单页导航的单页网站，还将学习如何在弹出窗口中添加联系表单作为奖励。

大多数人如果找不到与所有者联系的适当方式，就会离开网站，因此这个额外提示将真正为您的网站增加非凡的价值。

让我们不再浪费时间，开始使用Elementor 单页导航创建一个外观精美的网站。 您可以通过下面的按钮查看网站的最终外观：

什么是一页导航？

顾名思义，单页导航是专门设计用于导航到单页网站的不同部分的导航菜单。 具有平滑滚动效果的单页导航使导航到不同部分成为一种简单且用户友好的体验。

“简单是终极的复杂性。” ——列奥纳多·达·芬奇

这种简单性使单页网站比其他网站更具优势。 单页网站非常适合小型企业，例如婚礼策划师、摄影、小型沙龙、餐厅等。

但是，如果您的电子商务企业销售过多产品或提供多种服务并且需要迎合更多受众，那么单页网站不适合您。

带有单页导航的单页网站有什么好处？

您不应该仅仅因为您的企业很小就考虑为您的企业建立一个单页网站。 拥有一页网站特别是一页 WordPress 网站还有很多其他好处。 让我们来看看其中的一些优点：

• 首先，它适合移动设备。 在网站 SEO（搜索引擎优化）方面，这是需要考虑的关键因素。 截至 2021 年，70% 的美国公民使用移动设备在互联网上搜索。 此类数据是 Google 优先考虑适合移动设备的网站的原因。 通过单页设计，您的网站从一开始就被 Google 的好书收录。

• 大多数人更喜欢一个简单、漂亮、中肯的网站，而不是不必要的冗长网站。
• 谷歌将域和页面级链接权限计为 40%。 这是您的单页网站将具有优势的另一个领域。
• 单页网站比拥有大量页面的网站加载速度更快。 考虑到当今人们拥有无限选择的事实，拥有一个快速加载的网站确实是不容商量的。
• 一页网站易于维护。
• 由于单页网站将所有信息都放在一个页面上，滚动导航使导航更容易，流畅的滚动效果使用户体验舒缓。

我可以再讲一些时间，但我认为上述信息确实传达了这样一个信息，即如果您的企业很小，那么使用带有一页导航的小型网站实际上可以获得很大的好处。 所以，让我们跳到主流程，不要浪费时间。

如何在 WordPress 中使用一页导航创建单个网站

在本博客中，我将向您展示的不仅是如何构建网站，而且是在 WordPress 中打造现代外观的单页导航，这将给您的潜在客户留下深刻印象。 对于本教程，我将使用流行的网站构建器 WordPress（我知道它在标题中说！）

那么，让我们开始吧……

第 1 步：安装所需的 WordPress 插件

在系统上安装 WordPress 后。 您需要安装以下 WordPress 插件：

• Elementor （免费版）
• ElementsKit （免费版和专业版）
• MetForm （免费版）

完成安装和激活所需的 WordPress 插件后，就可以构建站点了。

第 2 步：使用 ElementsKit 预制页面创建网站

ElementsKit 提供了许多预制的页面、模板和部分，因此人们可以构建具有他们想要的任何设计、布局和样式的网站，而无需编码。 对于这个博客，我将使用 ElementsKit 的婚礼策划登陆页面。

要创建您的网站，从 WordPress 仪表板，转到页面 ⇒ 添加新

• 给出一个标题，例如 Home，从 Template 选项中选择Elementor Full Width
• 单击以发布，发布后单击使用 Elementor 编辑

• Elementor Builder 窗口打开后，单击 ElementsKit 按钮 (EK)

• 转到页面选项卡，搜索婚礼页面并单击插入

现在点击更新保存

步骤#3：如何使用 ElementsKit 添加 Elementor 一页导航

现在我们有了我们的网站，是时候添加一页滚动导航的有趣部分了。ElementsKit 单页滚动导航更易于使用，并为您的网站提供令人惊叹的外观。 您不太可能找到另一个与 ElementsKit 一样好的单页导航 Elementor 插件。

现在，让我们看一下将一页滚动导航链接添加到您的 WordPress 网站的分步过程：

3.1 打开页面滚动模块

要将滚动导航添加到您的 WordPress 站点，首先，我们需要打开单页滚动模块。

• 转到： WordPress 仪表板⇒ ElementsKit ⇒ 模块
• 打开单页滚动
• 单击保存更改以更新

3.2 从页面设置启用一页滚动

• 单击 Elementor 面板左下角的设置图标
• 打开 ElementsKit 设置选项卡
• 启用单页滚动选项

注意：如果您找不到 Onepage Scroll Setting 选项，那么您可能尚未激活 ElementsKit Pro

3.3 选择导航风格

现在，是时候选择导航样式了。 ElementsKit 为您提供多种导航选项。 例如，在圆圈下，您可以获得放大、填充、填充等。对于方形图案，您将拥有放大等选项，作为线条的一部分，您将获得线条增长、线条填充等选项，线收缩等。

你可以选择任何你喜欢的风格，对于这个博客，我将选择自定义图标。 选择自定义图标后，您将获得一个选项来为单页滚动导航样式选项选择图标。 您可以从图标库中选择图标或上传自定义SVG 图标。

选择自定义图标

• 从导航样式下拉列表中选择自定义图标选项
• 将鼠标悬停在导航图标上，然后单击图标库
• 搜索并插入您喜欢的图标

3.4 设置其他导航设置

选择导航样式后，您将可以访问以下设置：

• 导航位置：您可以将导航位置设置为上、右、下或左。
• 导航位置偏移：您可以在此处选择导航位置偏移值。
• 导航间距：选择每个导航图标之间的间距。
• 导航颜色：选择导航图标的颜色。
• 工具提示排版：您可以在此处选择工具提示的系列、字体大小、粗细变换、样式、装饰和行高。

3.5 将页面部分添加到导航链接

现在所有设置都已完成，是时候添加要在导航中显示的部分了。 这样做

• 将鼠标悬停在该部分上，然后单击“编辑部分”图标
• 转到高级选项卡
• 展开ElementsKit 页面滚动选项
• 打开启用该部分以使该部分可见
• 打开启用点选项以将此部分添加为导航链接之一
• 提供工具提示文本的名称。 当有人将鼠标悬停在链接上时，将显示工具提示文本
• 最后点击更新保存

您可以重复上述相同的过程，将您想要的所有部分添加到导航中。

注意：您可以向导航添加一个部分，而不是内部部分。 因此，您不会在内部部分或任何其他小部件的高级选项卡下找到 ElementsKit Onpage Scroll 选项。

完成所有导航后，更新并单击以查看 WordPress 中一页导航的预览，并检查导航菜单链接。

步骤#4：使用 ElementsKit 预制页眉页脚部分添加页眉页脚

好吧，您现在在 WordPress 中有一个网站单页导航，但您仍然需要一个页眉页脚来完成您的网站。 网站的页眉和页脚部分对于显示您的徽标和重要信息非常重要，因此您的客户可以轻松看到它。

ElementsKit 为您提供了许多预制的页眉和页脚部分供您选择。 要使用 ElementsKit 页眉页脚：

• 转到ElementsKit ⇒ 页眉页脚 ⇒ 单击添加新

• 选择类型作为标题，条件作为整个站点，打开激活/停用选项，最后单击保存更改。

• 现在添加标题部分，单击您创建的菜单上的编辑
• 点击编辑内容
• 单击 EK 按钮并转到“部分”选项卡
• 选择您喜欢的标题设计并单击插入

您可以按照下面的视频为您的网站创建漂亮的页眉页脚。

注意：您可以按照与页眉相同的步骤使用 ElementsKit 的预制部分为您的网站创建页脚部分。

步骤#5：添加联系表格作为模式弹出窗口（奖金）

是时候向您的网站添加联系表格了，这样您的潜在客户就可以更轻松地与您沟通。 使用弹出窗口添加联系表单将使您的单页网站看起来更有吸引力以及您需要的非常必要的表单。

要添加模式弹出窗口，我将用弹出模式替换RSVP按钮并向其添加联系表单。

• 转到 ElementsKit ⇒ 小部件 ⇒ 打开弹出模式 ⇒ 单击保存更改

• 转到您的所有页面⇒主页（或任何您命名的页面），然后单击使用 Elementor 编辑

• 在编辑模式下，滚动到 RSVP 部分并删除 RSVP 按钮
• 拖放模式弹出在RSVP按钮的地方

• 要更改模式按钮文本，请转到 Content ⇒ Toggler Button ⇒ Label 并将“Open Modal”更改为 RSVP（或任何您想要的）

• 转到样式选项卡⇒ 切换按钮更改按钮背景颜色、文本颜色、边框半径和其他正常和悬停视图的设置。

• 现在转到内容并打开启用模板模式，以便我们可以添加我们的联系表格。
• 单击弹出按钮。 打开后单击正文上的编辑图标以打开 Elementor 编辑器

• 搜索 Metform，拖放小部件
• 单击编辑表格以选择联系表格
• 从列表中选择您想要的表格，然后单击保存并关闭
• 最后点击更新保存

注意：我已经使用 Metform 制作了 RSVP 表单，并且还稍微更改了颜色和样式以匹配我们使用的登录页面模板。 您可以查看有关如何使用 Metform 创建和样式化联系表单的博客。

您还可以查看下面的视频，了解如何使用 Metform 构建自定义联系表单。

第 6 步：使用一页导航更新并查看预览单个网站

好吧，一切都完成了。 现在到最后一步，最简单、最令人兴奋的一步。 完成上述所有自定义和步骤后，单击“更新”按钮保存所有内容，然后单击“预览”按钮查看您的站点。

如果您正确执行了所有步骤，您应该会在 WordPress 中获得一个带有单页导航的单页网站，如下所示：

包起来

拍拍自己的后背！ 因为您已经使用 Elementor 和 ElementsKit 成功创建了一个具有一页导航的现代美观的网站。 使用单页网站，客户可以轻松导航到您网站的不同部分以了解您的业务。 带有联系表格的一键式弹出模式使沟通真正只需单击一下！

如果您对自己构建的内容印象深刻，那么请准备好接受更多惊喜，因为 ElementsKit 为 WordPress 和 Elementor 用户提供了无限的可能性来尝试和构建一个外观精美的网站。 因此，请务必抽出时间查看 ElementsKit 的其他高级小部件和模块。

要了解有关使用 WordPress、Elementor 和神奇的 ElementsKit 构建网站的更多信息，请在我们的社交媒体帐户上关注我们。