如何在 WordPress 上使用 Elementor 创建单页网站

网站是客户了解您业务的窗口。大公司的网站通常规模庞大、结构复杂,内容(帖子和页面)繁多。用户必须访问多个页面才能找到所需的准确信息。

根据 Marketing Dive 的调查, 如果页面加载时间超过三到四秒,53% 的访客会离开网站。如果访客发现很难在最短的时间内找到所需的准确信息,他们的不满情绪就会加剧。

但是,有了单页网站,您可以将业务的所有主要信息集中在一个页面上,并提高加载速度。这可以同时提升用户体验和转化率。本文将为您提供创建单页网站的分步教程。

我们还会讨论一些其他主题,例如它的重要性、应该包含的元素、最佳单页主题等等。所以,喝杯茶,继续阅读本文。

什么是单页网站?

顾名思义,单页网站就是只包含一个页面的网站。它没有“关于”、“服务”、“产品”、“价格”、“条款和条件”等其他页面。相反,所有这些部分都以简洁明了的方式包含在一个页面上。

单页网站的唯一目的是服务特定的受众群体,突出产品价值,推广促销活动,并提高转化率。单页网站在手机用户中的受欢迎程度已达到最高水平。

由于屏幕尺寸较小,手机对于很多人来说并非浏览多页网站的便捷设备。单页网站能让他们更轻松地找到准确的产品信息,并决定是否购买。

为什么您应该考虑创建单页网站?

为什么您应该考虑创建单页网站?

单页网站也被称为单页网站。目前的趋势表明,它的受欢迎程度将随着时间的推移持续增长。以下是一些主要原因。

a. 简化用户体验

用户访问您的网站时,希望能够快速轻松地找到信息。单页网站可以将所有主要信息集中在一个页面上,从而简化用户体验。

b. 允许更多地关注内容

在单页网站上,您无需过多操心映射、优化、链接等问题。因此,您可以专注于以更具创意的方式呈现重要信息,从而吸引读者。

提高转化率

创建单页网站可以帮助您提高转化率。它避免客户点击其他网站,并减少他们探索不必要内容的时间。

d. 方便移动设备使用

单页网站在移动设备上易于浏览。我们上面已经稍微解释了原因。如果您能够巧妙地呈现折扣优惠和行动号召 (CTA),就能进一步提升转化率。

e. 非常适合小型项目

如果您要构建作品集、产品落地页、活动网站或小型企业网站,通常一个页面就足够了。如果您的内容简短直接,则无需创建太多页面。

f. 更好的故事叙述流程

使用单页布局,您可以控制用户查看内容的方式。您可以按特定顺序排列各个部分,并逐步引导用户理解您的信息。这有助于创建流畅且引人入胜的故事。

单页网站必须具备哪些元素?

由于单页网站空间有限,您可能会考虑省略许多在多页网站上自然会保留的元素。但有些元素在单页网站上是无法避免的。来看看吧。

页眉:页眉包含一些品牌标识的基本元素,例如徽标、标语、企业吉祥物、企业颜色等。页眉还包含导航菜单。点击其中任何一个菜单,即可立即跳转到网站的特定版块。

页脚:页脚包含重要的法律免责声明、作者信息和社交媒体图标。

有意义的图片和视频: 如果没有图片,长篇文章就会变得枯燥乏味。你必须尽可能地添加一些有意义的图片和视频。

服务/产品:无论是投资组合网站还是公司网站,都不要忘记突出您想要销售的关键产品或服务。

顾客评价:如今,超过 80% 的顾客会在网上购买产品前阅读评论。在您的网站上添加积极的顾客评价,在潜在客户中传播良好的氛围。

行动号召按钮:转化率是任何单页网站的关键目标。合适的行动号召按钮可以帮助您立即实现客户转化。

联系信息:如果访客对您的产品、服务和优惠感兴趣,他们可能会想要联系您。请添加您的联系信息(电子邮件、电话号码、社交媒体渠道),以便他们随时联系您。

如何使用 Elementor 创建单页网站:分步指南

现在,准备好构建你的单页网站吧!Elementor是一款知名的 WordPress 网页构建器插件。HappyAddons是Elementor的强大扩展插件。借助这两个工具,你无需任何代码即可创建一个功能齐全的单页网站。

此外,您还可以在他们的库部分找到众多精美的现成模板。您可以使用它们来摆脱从头开始创建单页网站的麻烦。在这里,我们将使用此插件和扩展程序向您展示整个过程。让我们做好准备。

先决条件

  1. Elementor
  2. HappyAddons免费
  3. HappyAddons(专业版)

最后,像任何其他传统网站一样,您也需要一个域名和主机。网站和这些插件准备就绪后,请进入您的控制面板并按照以下教程操作。

步骤 01:安装并激活主题

您需要先安装并激活一个主题。导航至“外观”>“主题”。您可以选择任何您想要的主题。这里我们选择了 Hello Elementor 主题。

在 WordPress 中安装并激活主题

步骤 02:使用 Elementor 打开新页面

要打开新页面,请从仪表板前往“页面”>“添加新页面” 。点击上方的“使用 Elementor 编辑”按钮。它将打开 Elementor 的默认页面布局。

步骤 03:启用 Elementor Canvas

默认布局中可能会出现一些不必要的文本和元素。请勿将它们发布在最终页面上。

从 Elementor 画布中排除不必要的元素

您需要启用Elementor Canvas来排除它们。具体操作如下:

  • 单击  左下角的“设置”图标。
  • 然后,从“页面布局”部分选择 Elementor Canvas。

步骤04:选择现成的页面模板

点击 HappyAddons 图标。它将打开 HappyAddons 库,您可以在其中选择现成的页面模板。

打开 HappyAddons 库部分

“区块”“页面”部分,您都可以找到丰富的现成模板。由于我们正在创建一个单页网站,因此我们会从“页面”部分选择一个模板。我们也从这个集合中选择一个作品集模板。您可以选择任何您喜欢的模板。

HappyAddons Ready Mage 页面库

您可以在 Elementor Canvas 上看到导入的页面模板。接下来,您可以通过添加导航菜单、文本、图片和其他内容来自定义页面。

导航菜单 HappyAddons

步骤05:添加导航菜单

在添加导航菜单之前,您必须确定网站上要包含哪些部分。我们想在此网站上添加以下部分。

  • 关于我
  • 我的服务
  • 特殊技能
  • 我的客户
  • 联系我

要创建这些菜单,请再次转到您的 WordPress 仪表板。

  • 然后导航至外观 > 菜单
  • 为您的菜单命名。
  • 单击最后的“创建菜单”按钮。

之后您将获得一个“快乐菜单”选项。将其启用。然后为每个菜单项添加一个自定义链接,如视频所示。请按照以下公式创建自定义链接:

(复制粘贴您的目标网页网址)/#(页面部分)
http://local/?page_id=163&preview=true/#关于我

您可以将上面链接中的“关于我”替换成您喜欢的文字。但请务必复制该文字,因为我们需要它来将其添加到您的实时页面。

以同样的方式,为其他菜单项创建自定义链接。最后,点击右下角的“保存菜单”按钮。

回到 Elementor 画布。在英雄版块上方添加一个新版块。选择合适的布局。然后 按照下方视频操作,将“快乐菜单”拖放 到新版块上。它会将所有菜单项显示在你刚刚创建的此页面上方。

在“样式”部分,您可以进一步自定义菜单项。您可以更改其字体大小、字体类型、字体颜色和背景颜色。此外,您还可以添加下拉指示器、子菜单项、子菜单面板、徽标等。

菜单项风格化

步骤 06:创建 Web 部分

在这里我们将向您展示添加和构建上述该网站的所有部分的过程。

# 关于我部分

向下滚动到此页面的第二部分。您可以将第二部分转换为“关于我”。此视频演示了该过程。如果需要,您可以在旁边添加一张说明性照片。

通过样式选项,您可以将照片完美地定位在 Elementor Canvas 的布局上。

在 Elementor 画布上正确放置照片

# 我的服务部分

按照与上述部分完全相同的流程,您可以创建和编辑“我的服务”部分。

如何在 elementor 网站上展示我的服务

# 特殊技能部分

要创建特殊技能部分,您可以使用小部件技能栏。

如何在 Elementor 网站上显示技能栏

您可以进一步自定义,使此部分更加醒目。此外,您还可以在技能栏旁边添加说明文字。

在 Elementor 画布上风格化技能栏

# 我的客户部分

“我的客户”版块,您必须尝试添加客户对您的评价。这将起到社交证明的作用,并在潜在客户中建立信任。您可以使用“客户评价轮播”小部件。将其拖放到您网站的新版块即可。

如何向 Elementor 网站添加推荐

从内容和样式选项中,您可以上传客户的照片并将他们的评论作为推荐添加到您的网站。

在 Elementor 网站上添加推荐

# 联系我

您可以使用现成的联系表单和页面模板,或使用 HappyAddons 联系表单小部件来创建表单。HappyAddons 提供众多联系表单模板,您可以从中选择,让此版块更加醒目。

点击 HappyAddons 图标,再次进入库部分。然后,选择您想要的联系表单结构。

使用 Elementor 的现成联系表单模板

HappyAddons 与所有主流的联系表单生成器插件集成。如果您已经创建了表单,可以轻松将其导入到您的联系表单部分。

假设您已安装Contact Form 7插件。请将 Contact Form 7 小部件拖放到您的表单部分。然后从已保存列表中选择要发布的表单。

# 添加页脚

最后,为您的单页网站添加页脚。同样,您可以使用 Happyaddons 库选择页脚模板,或使用小部件来构建页脚。

将页脚添加到 Elementor 网站

现在,您需要将所有这些部分分别链接到导航菜单。这样,读者就可以通过点击菜单项跳转到不同的网页部分。

还记得你复制的“关于我”文本吗?你需要将其粘贴到 CSS ID 部分,如下所示。

因此,您可以在 Elementor 和 HappyAddons 的帮助下创建单页网站,而无需一行代码。

步骤08:预览单页网站

让我们看看我们创建的单页网站的最终预览。

用图片和短片来完整展示单页网站创建过程的每个环节确实非常困难。我们尽力让它变得高效且富有教育意义。希望你喜欢本教程。

如果您对本教程的任何部分有任何疑问,请在评论部分给我们留言。我们会回复您。

奖励:构建单页网站时需要记住的事情

大多数用户在构建单页网站时都会犯一些常见错误。请查看以下这些错误,以便在设计网站时避免这些错误。

保持逻辑结构

它指的是您将在网站上涵盖的各个部分的时间顺序。大多数成功的网站通常遵循以下顺序:关于 > 产品/服务 > 销售优惠/价格 > 客户评价 > 联系信息。如果您有不同的想法,也没有问题。但请确保结构合理。

使其适应移动设备

如果您忘记让您的单页网站支持移动设备响应,它就永远无法实现您的目标。这将导致您错失良机,错失大量潜在客户。您必须让您的网站支持移动设备响应,以便所有用户都能轻松访问。

确保较短的加载时间

加载速度慢是大多数网站每天流失大量访客的一个关键原因。使用像 Hello 这样的轻量级主题,并压缩媒体文件,可以缩短加载时间。

选择合适的调色板和字体类型

使用合适的配色方案和字体类型,才能真正体现你的品牌价值。最好选择与你的内容风格相匹配的主题。这样你就无需手动更新配色方案和字体类型了。

0

评论0

请先
GB/T 43564-2023 中小学合成材料面层田径场地.pdf
GB/T 43564-2023 中小学合成材料面层田径场地.pdf
9分钟前 有人购买 去瞅瞅看
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
扫码关注后会自动登录网站