如何使用 Elementor 创建一页网站(免费方法)

One page 网站做好一项具体的工作:他们把访问者需要的每一条信息都放在一个单一的卷轴上,不点来点去,不做第二页,只是英雄,关于,服务,联系,做完。

Elementor使用免费插件创建一个单页网站的方法,这个指南将介绍一个轻量级的主题,以及来自Master Addons的少数小部件,其中免费Elementor集运行到最后,您将拥有一个从上到下干净滚动的网站,导航链接可以跳转到每个部分,而不是加载一个新页面。

急跳到靠近底部的模板套件快捷方式,如果想真正了解自己在构建什么,就从顶部开始。

什么是一页网站,以及它何时真正有效

一个一页的网站将您的所有内容放在一个 URL 上。而不是导航到 /about 或 /services中,菜单跳转到同一页面的锚定部分。

它适用于:

• 自由职业者展示了一个小投资组合
• 活动登陆页面(婚礼、会议、产品发布)
• 小型服务企业(顾问、理发师、设计师)
• 即将发布的页面或 MVP 公告
• 个人简历和作品集

它的作用不太好:

• 博客,需要单独的帖子 URL 进行 SEO
• 网上商店有多种产品
• 针对多个长尾关键字的网站

如果您的内容可以容纳大约 7-12 个部分而不会感到拥挤,那么单寻呼机可能是正确的格式。

开始之前您需要什么

三种成分:

1. WordPress 安装(自行托管或在您最喜欢的主机上)。
2. 免费的 元素 和免费 你好元素主题。你好船没有任何造型,这正是你在Elementor绘制一切时想要的。
3. 的免费 主插件插件 对于小部件,elementor 不包括(可过滤画廊、定价表、信息框、团队轮播、联系表 7 造型)。

您可以单独使用免费的 Elementor 构建大部分内容,但如果没有额外的小部件,一些部分会变得尴尬。我会在我们进行时标记它们。

选择正确的主题和页面模板

安装 Hello Elementor 外观 > 主题 > 添加新内容。白板:无侧边栏,无默认样式,无意见,Elementor绘制整个页面。

一旦它活跃:

1. 创建新页面 (页面 > 添加新内容).
2. 在元素器中打开它。
3. 单击左下角的设置档位,转到 页面布局并且选择 元素画布.

Canvas 剥离了 WordPress 标头和页脚。您的一个寻呼机成为整个页面。

如果您想比较主题选项, elementor 的最佳轻量级 WordPress 主题 roundup 涵盖了替代方案,但 Hello 是默认的,原因是有原因的。

一页元素布局的 11 个部分

最体面的一页寻呼机遵循相同的节奏,以下是我使用的堆栈:

1. 导航菜单(粘性)
2. 英雄部分
3. 关于
4. 服务或功能
5. 团队
6. 作品集或案例研究
7. 定价
8. 感言
9. 联系表
10. 社会图标
11. 脚踏车

并非每个网站都需要全部 11 个。一个单独的自由职业者可能会跳过 Team。B2B 顾问可能会跳过定价。选择那些真正让您的访问者更接近与您联系的网站,然后放弃其余的。

建导航菜单

首先,在 WordPress 中创建菜单: 外观 > 菜单 > 创建新菜单.

URL 位置持有者添加自定义链接, 目前使用哈希 (#) 后跟部分名称: #about, #services, #pricing。你会在最后正确地将它们连接起来,一旦每个部分都有一个匹配的ID。

保存菜单。

现在,在 Elementor 内部,在顶部放一个部分,其中有两列。将您的徽标放在左列中。对于右列,您有两个选项:

• 自由元素: 使用 WP 菜单小部件。
• 主插件: 使用 导航菜单小部件。支持巨型菜单,悬停效果,移动切换造型,无需额外配置即可拾取刚建的菜单。

使该部分粘性 部分设置 > 高级 > 运动效果 > 粘性:顶部。如果你想要完整的演练, elementor 指南中的粘性标头 把它分解。

设计英雄部分

Hero定调, 保持简短:一个承诺, 一条支撑线, 一个按钮。

"菜单"正下方添加新部分打开"部分设置"并设置:

• 内容宽度: 全宽
• 高度: 适合屏幕
• 垂直对齐: 中间

Drop in 大标题,一行描述性文字,还有一个按钮,在Section Style中使用背景图片或纯色,深色叠加有助于背景照片忙碌时的文字可读性。

如果您想要抢先体验,Master Addons 将英雄部分模板发送到 模板库.导入一个,将副本和图像交换,几分钟后就完成了。

加关于部分

这里没什么花哨的。带有两列的标准部分:

• 左栏:照片(您的、您的团队的或您的工作区)
• 右栏:标题+文本编辑器+按钮

下(“看我做什么”)的服务部分指向按钮的锚链接,这样滚动过去的访客仍然有清晰的前进路径。

建服务科

Infobox 小部件在这里赢得自己的位置,免费元素器有一个图标框,但有限。主插件 信息框小部件 为您提供整个框上的多种布局、图标定位、悬停状态和 URL 字段,以便整张卡片都是可点击的。

创建一个部分,添加一个标题(“服务”或“我做什么”),然后将内部部分分成三列或四列。每列丢弃一个信息框。

每个框应该回答一个问题:服务是什么、服务对象是谁以及它提供什么结果。不要在此处转储功能列表。这就是专用服务页面的用途,并且一个寻呼机上没有一个。

添加团队部分

如果您是独奏,请跳过此部分。

1-4人:使用Team Member小部件,每位成员获得一张卡片,上面有照片、姓名、角色、简短的简介和社交图标。

对于较大的团队:使用团队成员旋转木马。它一次显示三到四名成员并水平滚动,从而保持该部分在视觉上受到控制。

Keep所有团队照片相同的裁剪和纵横比, 在网格中不匹配的头部尺寸看起来比你预期的更马虎文档: 团队成员小部件 並 团队成员轮播。有关独立指南,请参阅 如何创建团队成员部分.

添加可过滤产品组合

Free Elementor的图像库对于静态网格来说很好,但它不会按类别进行过滤。

如果您希望访问者单击“品牌”或“Web”并进行网格重新洗牌,则需要一个可过滤的图库。主插件有一个。它支持类别选项卡、弹出灯箱、色带(如“NEW”或“FEATURED”徽章),以及悬停上的元数据覆盖。

设置:掉入 可过滤图库小部件、上传图片、每个标签都有一个类别和样式。更多上下文在。 Elementor 可过滤图库插件综述 如果您想了解它如何与替代方案形成对比。

添加定价表

如果您销售产品化服务或订阅,定价部分的转换效果比模糊的 “报价联系方式”更好

Free Elementor 没有定价小部件,所以这是 Master Addons 领土。 定价表小部件 免费版本中为您提供标题、价格、带有支票或交叉图标的功能列表、推荐计划的徽章以及 CTA 按钮。

3列是一页页机的最佳点,游客从左到右进行眼球扫描,中间一列是您放置实际希望他们挑选的计划的地方,用丝带标记它“最受欢迎”, 样式略有不同(粗体边框, 填充按钮)。更多图案提示在 Elementor 定价表小部件 帖。

添加客户推荐

两三个真实的感言打败了一堵看起来很假的墙。

Free Elementor的感言转盘处理基本布局,如果您想要更干净的单列版本(一个旋转的大报价),Master Addons中的团队成员转盘,奇怪的是,在这里也很好地工作:将客户照片放入成员插槽中,并将报价放在生物领域。

求(“第一个月得到3个客户”)而不是通用赞扬(“很好用”)的证词, 具体令人信服。模糊的形容词是填充。

添加联系表

安装免费 联系表 7 插件 从插件目录。创建表单,抓取短代码。

Elementor中,掉落一个文本编辑器小部件,粘贴短代码,表单会渲染,但看起来很普通。

Master Addons 联系表 7 小部件接手的地方,它不是粘贴短代码,而是让你从 Elementor 面板中对标签、字段、边框、错误消息和提交按钮进行样式设置,没有自定义 CSS。

全面演练 联系表 7 定制文档。如果您想要提交按钮内的字体真棒图标,则有一个单独的帖子 将字体"棒极了"图标应用于 CF7 按钮.

添加社交图标

Free Elementor 包含一个社交图标小部件。它涵盖 Facebook、X(以前称为 Twitter)、LinkedIn、 InstagramYouTube,还有一小撮其他。你控制颜色(品牌或自定义),大小,形状(圆形正方形或圆形),和间距。

些放在你的脚踏车上方或里面,把计数保持在你实际活跃的三四个平台上,十二个图标,其中一半是死账户,看起来比三个健康的更糟糕。

安排脚踏车

在一个寻呼机上,页脚可以是单行。

Contact form下方添加一段,单列,居中,一短版权行(© 2026 您的姓名 版权所有。)做工作,如果您需要隐私政策或条款链接,也请将其丢弃在这里。其他任何内容都不属于一个寻呼机页脚。

将菜单链接到每个部分(大多数人都会出错的部分)

这是引导初学者的步骤。您在开始时设置的菜单项(#about, #services的,(依此类推)还不做任何事情,因为这些部分没有匹配的ID。

这是修复,每个部分完成一次:

1. Hover 在一个部分上,点击中间的六点句柄选择它。
2. 去 高级 左侧面板中的选项卡。
3. 滚动到 CSS ID.
4. ID 键入,而无需散列。所以 about不是 #about.

Save。repeat 对于你想要菜单跳转到的每个部分,如果你宁愿不用手电线锚—在长篇博文中说而不是登陆页面— a 目录插件 自动为您构建这些跳转链接。

然后回去 外观 > 菜单 并确认每个菜单项的链接是哈希版本(#about, #services, #pricing)。保存菜单。

Reload 前端, 点击菜单项, 页面应平滑滚动到匹配部分, 如果是突然跳转而不是滚动, 主题缺少平滑滚动 CSS 规则, 将其添加到 自定义 > 附加 CSS:

html { scroll-behavior: smooth; }

完成。

跳过手动工作:从模板套件开始

如果您不想从头开始构建十一个部分,Master Addons 即可满 30 多个 模板套件其中许多是针对特定行业(代理、餐厅、投资组合、SaaS、顾问)的寻呼机。

导入套件,交换图像并复制,调整颜色以匹配您的品牌,您将生活在一个下午而不是一周。 如何导入 Elementor 模板 post 涵盖了导入步骤,如果你从未这样做过。

I推荐初学者也是这样开始的,从一个工作模板构建,学习每个部分是如何构造的,然后从那里进行调整。

一页网站的速度和性能提示

由于整个网站都生活在一个 URL 上,因此该 URL 必须为每个访问者加载每个图像、字体和脚本。一个臃肿的寻呼机是一个转换杀手。

快速获胜:

• 上传前压缩每个图像(TinyPNG、Squoosh 或 Imagify 等插件)。
• 尽可能使用 WebP 格式。 最佳 WordPress 图像优化器插件 综述涵盖选项。
• 懒惰加载折叠以下的图像(现代版本中默认由 Elementor 处理)。
• 将网络字体限制为两个系列,最多。
• 使用缓存插件(LiteSpeed Cache、WP Rocket 或自动优化)最小化 CSS 和 JS。

更多内容 如何加快 Elementor 网站的速度。Master Addons v3 比 v2 快三倍,并且仅加载实际使用中的小部件的小部件 CSS 和 JS,这在单个 URL 站点上比在多页站点上更重要。

常见问题解答

包裹起来

Elementor的一页网站并不难,选择你好元素器,将页面设置为画布,构建十一个部分(或更少),分配CSS ID,并将菜单接线到哈希链接中,完成。

Master Addons 加速了速度:

• 导航菜单小部件,带有巨型菜单和移动切换
• 服务信息框小部件
• 投资组合的可过滤图库
• 定价表(免费),带内置功能带和功能列表
• 联系表 7 造型,无需编写 CSS
• 团队成员和团队成员轮播
• 30多个完整的模板套件,当您想跳过手动构建

下载 免费主插件插件 从你最不自信的哪一部分开始从头开始。从那里向外工作。

相关阅读: 100 个最佳元素添加剂 · 如何导入 Elementor 模板 · 小部件和扩展 · 主插件定价