2025 Elementor 新手教程：轻松搭建 WordPress 网站

你知道吗？WordPress 支持了全球 43% 的网站，是全球最受欢迎的网站搭建程序。不过如果你是第一次接触 WordPress，可能会有点迷糊，刚开始我也一样。但别担心，今天我会手把手教你。

在这个视频里，我会给你讲解 WordPress 的基本知识，带你一步步搭建你的网站。

你听说过 Elementor 吗？https://bit.ly/3EOg450 应该有吧。

目前，Elementor 已经成为 WordPress 上最受欢迎的拖拽式页面构建工具。它的拖拽功能让即使是新手也能轻松制作出专业的网站。你只需要点击一个元素，拖到页面上，就能按照自己的需求搭建网站。

►Hostinger 注册网站主机域名
➜https://bit.ly/3BysRqP

►Elementor Pro专业版插件购买(WordPress最好的页面构建器)
➜https://bit.ly/3CcHsbW

►向有风咨询，加入我的知识星球圈子：
➜https://t.zsxq.com/16QP9JP8b

本期用到的工具：
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►阿里云.中国网站服务器租用
➜https://bit.ly/3V1GiGY

►本期视频所有文字信息
➜https://aiyoufeng.com/elementor

►Fiverr 新手可以从这个广告联盟开始赚钱
➜https://bit.ly/3XaZIL1

►DIVI：wordpress主题（非常专业的网站模板）
➜https://bit.ly/3DVoEP9

►Shopify 搭建跨境电商网站（独立站）
➜https://bit.ly/3Xq89AJ

►Semrush 网站数据分析
➜https://bit.ly/4azZtNQ

操作简单得就像在屏幕上移动元素一样。在这期视频里，我会带你一起了解 WordPress，同时也会介绍如何使用这个最受欢迎的拖拽式页面构建工具。

现在，我们就开始用五个简单的步骤来搭建你的网站。第一步，我们需要获取域名和主机。域名就是你网站的名字，比如https://aiyoufeng.com/，主机就是让你的网站 24 小时在线的地方。

第二步，我们会导入一个起始模板。你可以选择不同领域的免费模板，我会一步步带你导入一个适合你网站的新模板。

第三步，我们将用 Elementor 来设计你的网站。我会讲解如何使用 Elementor 页面构建器，逐个介绍它的功能，教你怎么用。

另外，每个 WordPress 主题都有一个主题自定义工具，我也会教你如何用它来调整网站的各个部分。

在第五步，我们就差不多完成了。我会向你展示如何使用 Hostinger 的一些功能，并教你如何为你的网站创建一个免费的企业邮箱。怎么样，听起来不错吧？那就开始吧。

视频描述里有一个链接，点击它你就能进入第一部分，那就是帮助你获取新的域名和网站主机的部分。

我们这次使用的是 Hostinger，它是业内速度最快、价格最实惠的主机商之一。

在我们看套餐之前，你会看到页面上有一个英语语言选项。如果英语不是你的母语，其实可以直接切换到你喜欢的语言。比如你说泰语、葡萄牙语、意大利语或日语，都可以选择你母语，整个网站就会自动调整为你熟悉的语言。

当你进入这个页面后，点击“Claim Deal”，你会看到四个不同的套餐：Premium、Business、Cloud、Startup 和 Cloud Professional。

我建议你选择 Business 计划，它能支持更多的访问量，还包括一个免费的 CDN，加速你的网站，让它比 Premium 计划快 40%。如果以后流量增大，你还可以升级到 Cloud Startup 或 Cloud Professional 计划，它们会支持更多的访问量。

不过刚开始的话，选择 Business 计划就足够了。点击“Choose Plan”开始。

接下来是购物车页面，在这你可以选择网站主机的使用周期。点击下拉箭头，我推荐你选择 12 个月，这样你就能免费获得一个域名，还能享受大幅的主机折扣，且提供 30 天的退款保证，无论任何原因。

在页面右侧，你会看到一个优惠码选项。点击这个链接，现在 Hostinger 正在做黑五促销活动，但我们给你提供的折扣比黑五还要大！。

填写好这些信息后，点击继续，然后进入下一步，填写账单信息。包括你的名字、姓氏、所在国家和所有账单信息，填好后点击继续。

接下来，你将选择支付方式，可以用信用卡、PayPal、Google Pay 或 Apple Pay。我选择信用卡，然后填写我的信用卡信息。

输入完信用卡信息，看到优惠码折扣已经应用，点击“Submit Payment”完成支付。

支付完成后，页面会自动跳转到下一个设置页面。接下来，我们会走一遍 Hostinger 的安装向导。

在这里你需要选择网站是属于自己还是公司。我选择“为自己或我的公司”，然后点击“Next”。

接下来，系统会问你是想创建一个新网站，还是迁移一个现有网站。我选择“创建一个新网站”，然后点击“Next”。

然后，你将创建你的 WordPress 登录凭证。这些是你以后登录 WordPress 时用的账号和密码，记得把它们写下来。输入好邮箱地址和密码后，就可以继续了。

然后点击“Next”。接下来，系统会问我们想要搭建什么样的网站。我们可以直接点击“Create a Blank Site”跳过这部分。

点击“Create a Blank Site”后，下一步你需要输入你新网站的域名。

例如，我可以输入XXX，输入之后你会看到这个域名已经是免费的，并且当前可以注册。选好域名后，点击“Next”。

接下来，我们将注册这个域名，这一步很重要，因为它是确认你对这个域名的所有权。系统会问你这是个人网站还是公司网站，我选择“个人”（Personal）。

然后，你需要选择你注册域名时的国家，假设我选择“美国（United States）”，然后点击“Next Step”。

接下来，输入你的联系方式。这部分很重要，因为它能告诉别人谁是这个域名的真正所有者。如果你将来想卖掉这个域名，别人会通过你的联系方式联系你。

填好你的名字、姓氏和联系信息后，点击“Finish registration”完成注册。

接下来，你需要选择一个离目标受众最近的服务器。如果你在美洲，选择“美国”，如果在欧洲，选择“德国”，如果在南美，就选择“巴西”。其实这一步并不那么重要，因为 Hostinger 提供免费的 CDN 服务，它会把你的网站复制到全球各地的服务器上，确保你的网站访问速度不会受位置影响。

接下来，Hostinger 会在我们新的域名上安装 WordPress。

这一步大概需要一到两分钟，恭喜你，你现在已经拥有了一个新的 WordPress 网站！这是 Hostinger 的欢迎向导，它会帮助你开始网站的搭建并提供一些教程等有用信息。

在我们继续之前，先去检查一下你的邮箱。

登录你的 Gmail 后，你会收到 Hostinger 发来的重要邮件。首先，你需要验证你的邮箱地址，这样能确保你是一个真实的人，并且验证你的邮箱与 Hostinger 的账户绑定。

点击“Verify Email”进行邮箱验证。

接下来，你就会进入 Hostinger 的后台面板，这里你可以管理你的网站、创建免费的企业邮箱等等。我们稍后会详细讲解 Hostinger 面板，但现在我们先回到邮箱里。

还有一封邮件，你也需要点击，它也是来自 Hostinger。在邮箱中点击这封邮件，验证你的域名。

点击链接验证域名之后，你就完成了域名的验证，Hostinger 已经确认了你的域名信息。

现在我们回到 WordPress 的后台。在 WordPress 后台的顶部，你会看到你的预览域名。如果你想退出预览模式并访问你的网站，只需要在浏览器地址栏中输入你的域名。

如果你想登录 WordPress 网站，有两种方式。你可以通过 Hostinger 后台直接登录，我个人经常这么做，因为我有点懒，密码总是忘记。你只需要去 Hostinger 后台，点击网站标签，然后你会看到你的域名，点击“WordPress Admin”就能直接进入 WordPress 后台。

这样，你就成功登录到 WordPress 后台，你会看到自己的网站已经上线。如果点击“Visit Site”，你就能看到你网站的首页。

接下来，我教你如何通过浏览器登录 WordPress。

在浏览器里输入你的域名，然后在后面加上“/wp-admin”，这会带你到 WordPress 的登录页面。按下回车键。

在登录页面，你输入你的邮箱和密码，这些登录信息就是你安装 WordPress 时设置的。记得勾选“Remember Me”选项，方便下次自动登录。然后点击“Login”。

这样，你就可以轻松地登录和退出 WordPress，随时随地都可以管理你的网站。

接下来，我们来讲讲 WordPress 后台管理界面。在这里，你会看到网站页面的列表。如果我点击“所有页面”，你就会看到你所有页面的列表。

这些其实是一些演示页面，你可以直接删除它们，不需要保留。

对于文章也是一样，所有的博客文章都会显示在这里。你会看到有一个叫“Hello World”的默认文章，它只是一个简单的博客介绍。不过我们也可以删除它。点击“垃圾箱”就能把它删除掉。这就是你删除页面或文章的方式。

接下来，我们进入一些重要的 WordPress 设置。

首先，点击左侧的“用户”然后选择“个人资料”。在这里，你可以改变后台界面的颜色主题。如果你喜欢蓝色、咖啡色或者午夜蓝，可以选择你喜欢的颜色。我个人比较喜欢“午夜蓝”，感觉这个颜色对眼睛比较友好。

继续往下拉，你会看到可以修改邮箱地址的地方。如果你忘记了 WordPress 的密码，它会发送到这个邮箱，所以记得保持邮箱畅通。

往下滚动，你可以设置新的密码。如果你以后想更改密码，点击“设置新密码”，输入新的密码即可。

设置完这些后，点击“更新个人资料”。

接着，我们点击“设置”再选择“常规设置”。这里你可以为网站命名，比如我设定为“Darrel Store”。接着，你可以设置一个网站的标语，就像 Nike 的“Just Do It”一样。你可以为自己的网站设置一个标语，或者也可以留空。

还可以上传一个网站图标，这个图标会显示在浏览器标签页上。继续往下，你还可以再次调整你的邮箱地址。

如果你需要使用不同语言的后台界面，WordPress 允许你切换为你母语的语言。如果你会中文、俄语、荷兰语或西班牙语，你可以在这里选择语言，整个后台就会切换成你选的语言。设置完这些后，往下滚动点击“保存更改”。

接下来，我们再检查两个选项。点击“讨论”标签。在 WordPress 早期，它主要是作为博客使用的，因此通常会有人在你的网站上留下评论。但这有时候会变得很烦人。比如很多人会在网站上发垃圾评论或者广告。

因此，我建议你取消选中“允许人们提交评论”这个选项。这样就能避免垃圾评论了。取消选中后，往下滚动点击“保存更改”。

最后一个设置是“固定链接”。点击“固定链接”后，你可以将链接结构设置为“文章名称”。这是 SEO 最优的设置，也更简洁。你会看到其他链接结构里面包含了日期等冗余信息，但“文章名称”是最清爽、最适合 SEO 的结构。

设置好后，点击“保存更改”。

好了，现在回到 WordPress 后台，恭喜你完成了新域名和主机的设置，简单吧？Hostinger 让这一切变得很容易。

接下来，我会带你了解一些常规设置，我们还会安装一个 WordPress 主题，然后导入一个起始模板，接着我们会根据你的需求调整模板，最后让你拥有一个漂亮的 WordPress 网站。

准备好了吗？我们开始吧！

现在先简单讲一下 WordPress 的主题和插件。首先，我们去“插件”点击“添加新插件”。

那什么是 WordPress 插件呢？WordPress 是全球最流行的 CMS（内容管理系统），其主要优势之一就是插件市场。WordPress 提供了超过 50,000 个插件供你使用。插件可以为你的 WordPress 网站增加额外的功能。

比如，如果你想加一个联系表单，只需要安装一个插件就能生成一个表单。还有一些插件可以帮助你添加电商功能，或者优化 SEO，提高你的网站在 Google 搜索结果中的排名。可以把 WordPress 插件想象成手机上的应用程序，任何你想要的功能，都能通过插件来实现。

所有的 WordPress 插件都是免费的，当然也有开发者提供的专业版插件。你可以随意探索插件，看看哪些功能可以为你的网站增值。

比如，如果你在插件搜索框里输入“SEO”，你就会看到一些与 SEO 优化相关的插件。例如，Yoast、Rank Math 和 All in One SEO 都是非常受欢迎的插件。

这些是一些 WordPress 上非常流行的 SEO 插件。如果你在插件搜索框里输入“Contact”，你也会看到一些可以嵌入到你网站上的联系表单插件，例如 Contact Form 7、WP Forms 和 Forminator 等。你可以在空闲时随便浏览一下 WordPress 插件库，找到最适合你网站的插件。

现在我们来聊聊什么是 WordPress 主题。首先，点击左侧的“外观”，然后选择“主题”。接着点击“添加新主题”。

在这里，你会看到可用的 WordPress 主题列表。让我解释一下 WordPress 主题是什么，它对你的网站有什么作用。WordPress 主题是每个使用 WordPress 的网站都需要的，它类似于你网站的外壳。

它决定了你网站的外观和风格。WordPress 主题控制着网站的各个部分，比如网站的头部、底部、博客页面和商店页面等。WordPress 主题并不会创建网站的实际内容，而是为页面构建器提供了一个框架，在这个框架内你可以添加所有内容。

这些 WordPress 主题都是免费的，虽然功能有限，但已经相当丰富。每个 WordPress 主题通常都有一个专业版，你可以通过主题的官网进行升级，价格根据主题不同有所差异。你可以随意探索不同的主题，看看哪个最适合你的网站。

了解了吗？很多 WordPress 主题提供各种模板，同时还设计了网站的各个部分，比如头部、底部等。接下来，在“搜索主题”框里输入“Solace”（S O L A C E），我们就可以找到一个我们在本视频中使用的 WordPress 主题。

这个主题是一个全新的主题，内置了大量精美设计的模板包，你可以直接安装到你的网站上。一旦看到这个主题，你就可以点击“安装”，然后点击“启用”。接下来，你会看到“安装起始模板”选项。

点击“安装起始模板”后，你将能访问所有功能和模板库。现在你可以看到这是 Solace 主题的仪表盘，在这里你可以访问演示模板，并且使用主题自定义器来定制你的网站。在“起始模板”下，点击“立即开始”。

这时候会有一系列模板展示给你，记住，你可以从这些模板中选择适合你网站风格的模板。我们现在有超过 100 个模板，而且每个月还会增加新的。

在左侧，你可以按类别进行筛选，看到更多可用的模板。如果你点击“加载更多”，还会有更多模板可以导入到你的网站上。

举个例子，如果你想导入一个电商网站模板，点击“电商”类别，就能看到一系列适合电商网站的模板。最棒的是，这些模板会自动安装所有你需要的插件，让你快速开始搭建任何类型的网站。

我们先取消勾选“电商”模板，选择一个我们为本视频专门制作的模板。继续往下滚动，你会看到“Web Crafters”模板。如果你喜欢其他的模板，也可以稍后再用。为了方便大家一起跟着操作，我们就选择这个模板。

如果你在列表中找不到这个模板，你可以直接在搜索框里输入“Web Crafters”，它会出现在模板列表中。点击“Web Crafters”，你就能看到它的演示网站。

正如你所见，网站设计得非常好，我们有一些纹理，左侧是图片，下面还有一些内容，你可以随意替换为自己的图片，并且更新这些内容来符合你的需求。

你还可以调整网站的配色方案。左侧有一个选项，你可以选择适合你行业的颜色方案，当然，也可以选择不同的字体，看看哪种字体最适合你。

一旦你选好配色和字体后，点击这个复选框，这是必须勾选的选项，才能安装 Elementor 页面构建器。

继续点击这个复选框后，我们可以继续点击“继续”。在这个页面，你可以选择是否订阅我们的新闻通讯，只需输入你的名字和电子邮件。如果不想订阅，可以跳过，或者稍后再做。我会点击“跳过此步骤”。

接下来，Solace 主题会将整个演示模板导入到你的 WordPress 网站上，等待大约一到两分钟。好，导入完成后，你可以点击“检查网站”来查看你的新网站，看看效果如何。

点击后，你将看到一个美丽的、完全导入的 WordPress 网站。如果我们滚动下来，你会看到所有图片和内容都已正确导入。页面上还包括一些附加销售项，比如网站设计服务和一些按钮。你当然可以随时根据自己的需求修改这些内容。页面底部还有一个页脚。

继续向上滚动，你还可以检查其他页面，比如“关于我们”页面。点击后，你会看到页面内容，里面有一些奖项和成就展示，以及客户和开发者等信息，同样，底部也有页脚。

你可以自由浏览这些页面，了解如何修改、编辑或删除它们。值得注意的是，这些页面已经自动添加到你的网站上，方便你之后编辑。接下来，我们回到主页，开始使用 Elementor 页面构建器来设计网站。

好了，现在我们有了漂亮的模板，接下来要使用 Elementor 页面构建器来设计网站。我们会使用 Elementor 的免费版本，在这里我将介绍如何使用页面构建器，包括如何添加部分（sections）、如何使用 AI 功能以及如何使用 Elementor Flexbox。

在本视频的这一部分，你将学习如何使用 Elementor 页面构建器，掌握基本操作后，你就可以像使用 Elementor Pro 一样自由设计你的网站。

接下来，我们先来给大家做一个 10 到 15 分钟的 Elementor 页面构建器快速入门教程。首先，我们来创建一个新页面。在 WordPress 后台，点击“新增”，然后选择“页面”。为页面命名，我暂时取个名字叫“Practice”，作为我们的练习页面，然后点击“发布”。发布后，我会关闭这个面板。

接下来，我想隐藏标题，因为我不希望在这个页面上显示标题。只需勾选“隐藏标题”选项，然后点击保存。

现在，来开启 Elementor 页面构建器，在页面编辑器中，点击“编辑与 Elementor”按钮，这样就会打开 Elementor 页面构建器。

一旦进入，你会看到 Elementor 页面构建器的界面。在进一步操作之前，我想快速向你展示如何修改元素的样式。点击 Elementor 左上角的“Elementor logo”，然后选择“用户偏好设置”。如果你喜欢浅色模式，可以选择“浅色模式”，让界面看起来更加明亮。

如果你想开启暗黑模式的话，可以选择暗黑模式。我觉得这个模式对眼睛比较友好，大家看起来会更舒服，对吧？这样看起来也更清晰。反正我就保持暗黑模式，然后点击“添加元素”。

首先我们要做的就是先加几行（row），这样我们才可以开始操作，对吧？点击加号图标。接下来我们有两种不同的布局方式。

我会给大家讲解一下，但我们现在先选择“Flexbox”布局。接下来就可以看到这些列（column），有些列旁边有向下箭头和向右箭头。我稍后会解释这个是什么意思。

但现在我们先选择一个“两列”的布局。好了，现在我们有了两个列。接着我会点击“加元素”，然后可以把这些元素拖到页面上。

比如说，我拖一个“标题”元素过来，大家就会看到文字出现在页面上。每个元素都有三个标签页。第一个是“内容”标签。

这个标签控制的是元素的实际内容。然后是“样式”标签。这里可以控制字体、字体大小、颜色等一些设置。

还可以加一些炫酷的效果，比如文字描边或其他动画效果。接下来是“高级”标签。这个标签控制的是边距和内边距。

比如说，如果你想加一些空隙，可以在这里调整。也可以加一些很酷的效果，比如动态效果。往下滑一点，这里就有“动态效果”，你可以为这个模块添加动画。

比如说，可以选择“放大”、“下滑”或“旋转进来”。不过这些动画效果有点太花哨，别玩得太过火哦。

好啦，接下来还有更多的选项，我们稍后再讲。先点击“内容”标签。这里就可以修改内容了。

比如说你想把文字改成“学习建站”，然后点击“添加元素”。

这时我们就回到了元素的选择页面，可以继续拖入更多元素。接下来我拖一个“图片”元素。看到那个粉色的虚线了吗？把图片拖到那里，它就会出现在那个位置。

我选一张图片，点击“媒体库”。你知道吗，我们提供了很多免费的示范图片，大家可以随便用。

我选一张图片，点击“选择”，然后往下滑，点击“添加元素”。继续添加更多元素，比如“文本编辑器”。

我们可以调整这个文本，稍等一会就会显示出来。好了，最后如果你想加一个按钮来收尾，可以加一个按钮。

然后可以修改按钮上的文字，比如“立即购买”什么的。再来就是链接，特别方便的是，Elementor可以让你直接输入页面名称，它会自动跳转到那个页面。

比如我输入“联系我们”，Elementor会自动找到“联系我们”页面的链接并插入。接下来，你会看到可以调整按钮的样式，像是文字颜色、背景颜色等。

比如说你想把背景换成别的颜色，随便调整一下，按钮的颜色就会变了。挺酷吧？

就是这样，你可以通过这种方式调整按钮的颜色。如果你想再加点其他的东西，比如说YouTube视频什么的，继续点击“添加元素”。

顺便给大家解释一下左侧的这些元素。我们有一些基础的元素，可以在免费版的Elementor中使用。

如果往下滑一点，你会看到有一些“Pro”元素，这些只有在Elementor Pro版本里才能用。老实说，如果你只是做一个基础网站，完全不需要用这些Pro元素。

这些元素确实很有用，但大多数网站其实不一定需要它们。如果我们继续往下看，你会看到一些通用元素。你也可以把这些通用元素用到自己的网站上。

如果你不确定某个元素的作用，可以直接拖到页面上试试。比如我们有这个带标题和描述的图标元素，你可以在这里修改标题和描述。

至于样式部分，你可以调整元素的颜色和大小。每个元素你也可以右键点击进行复制，或者右键点击删除。

你也可以用相同的方式操作行（row）和列（column）。比如，像我们复制了这个元素，你也可以复制整行（row）。

比如我右键点击这个容器，选择“复制”。它就会复制一个新的，我就不需要原来的这一部分了，所以我右键点击，选择删除这一列。挺简单的吧？

接下来，如果你想设置某个容器的背景样式，可以点击“编辑容器”。这里你可以调整容器的宽度和高度。我们稍后再详细讲这些选项。但在“样式”标签下，你会看到有一个可以设置背景类型的选项。点击“经典”，比如说，我想加一个背景颜色。

现在你会看到，这个列的背景就变成了你设置的颜色。就像我们为这个列添加了颜色一样，你也可以为整个区域设置背景颜色，点击页面上方这六个小点，就能控制整个区域的元素。

所以在“样式”标签里，选择“经典”，然后调整颜色，你会发现它只应用在其他的框里，因为我们已经为中间的框设置了颜色。是不是很简单？

另一个很酷的功能是你可以加“形状分隔符”，我很喜欢这个功能。

点击“形状分隔符”，比如说，我想要一个山脉形状。你会看到出现了一个很有趣的设计，接着你可以调整它的宽度和高度，选择不同的样式。比如说有水滴形状、云朵形状，甚至可以调整得更大，发挥创造力。

现在，你还可以复制整个版块。就像我们复制了列一样，你可以右键点击复制整块内容。滚动下去，你会看到整个版块被复制了。

好了，完成网站的更改后，点击“发布”就可以保存你做的所有修改了。

如果你做错了什么，没关系。你可以随时回到“历史记录”找回之前的版本。比如点击Elementor的图标，选择“历史记录”，就可以回溯到你做出更改的任何时刻。

再比如，假设你想让页面的宽度充满整个屏幕，你就可以通过页面设置里的齿轮图标来调整。在页面设置的“页面布局”里，选择“Elementor全宽”。

这样你就能看到，所有列会拉伸到整个页面，变成全宽布局。现在再打开它，你就能看到所有列都填满了页面。

在你的空闲时间，随时可以继续添加元素。如果你想插入视频，举个例子，你可以把视频拖进页面，放在合适的位置。每个元素都有独特的设置，比如设置链接、自动播放、静音等。

至于“样式”标签，你可以调整视频的显示比例，还可以加一些CSS滤镜，比如调亮、调整饱和度等。其实这些CSS滤镜也适用于图片，就像内置的Photoshop一样。你可以直接对图片进行调色、调整饱和度等操作，简直就是在编辑器里做自己的Photoshop。

好了，删掉这些，接下来我们说说Flexbox。Flexbox是个比较难理解的功能。

我点击Flexbox，但这次选择下箭头。接下来我要在这里插入一个新的容器。然后，我拖入一些元素，比如说一个“文本编辑器”，再放一个“按钮”。

假设你想把按钮放在文本的右侧，但你会发现这些元素其实是水平排列的。

这就是你可以使用Flexbox来调整这些元素排列的位置。比如，我点击“编辑容器”，然后在方向设置里，你会看到有“水平”和“垂直”两种选择。如果我想让这些元素水平排列，就可以选择“水平”，这样它们就会并排显示。

如果你想反转排列的顺序，可以选择反转排列，这样元素的位置就会反过来。默认情况下是垂直排列，或者你也可以选择“反向列”，这会把元素放在顶部。其实，这比用边距（margin）和内边距（padding）要好，因为这种方式可以让你的网站更加响应式，适应各种设备。

这是一个非常常见的网页设计方式，目的是给用户提供两个选项，去网站的不同部分。用Flexbox就可以实现这种布局。比如，如果我在按钮下再加一个元素，你会看到它们是垂直堆叠在一起的。

但如果我想让它们并排显示，就得把它们设置为“水平”。但是问题是，如果我选择“水平”排列，所有元素都会水平排列。所以，解决办法是，再加一个Flexbox容器。

比如，我在这里再加一个容器，然后把这些元素拖到里面。这样，我就能控制这些元素的排列了。我可以把它们设置为水平排列，然后用“justify content”来调整按钮的位置。比如说，按钮可以居中、均匀分布、间隔等。

你也可以对齐这些项目，但因为在一个很小的盒子里，可能不太明显，稍后我会给你另一个更好的例子。

如果你想增加元素之间的间隙，可以调整间距设置，或者手动加一些内边距。比如，把它设置到中心位置，间距就会保持在那个地方。

这样，你就能更方便地控制元素的排列了。我们再来重做一下我的首页。比如说，我有文本、按钮这些元素。

现在我们从头开始吧。点击“加号”，选择Flexbox，然后选一个水平排列的盒子。接下来，我再添加一个容器。为什么这么做，等我解释给你听。这样我可以更好地控制网页布局。

第一个我想加的是“文本编辑器”，可以写“创建一个酷炫的网站”。然后点击“添加元素”，再加一个标题文本：“今天就来建你的网站”。

注意，这时候标题已经延伸到了整个页面，我并不喜欢这个效果。我们加Flexbox的原因就是，这样我就能控制容器内部的宽度了。

你可以看到，内容宽度默认是全宽的，但我并不想要这么宽。你可以把它调整得更紧凑一点，比如设置成55%。这就是为什么要使用Flexbox，这样可以让你在一个容器里灵活控制元素的排列。

接着，我再添加一个文本编辑器。然后，我再加一个容器，把按钮放进去。这里我插入一个按钮，右键点击并复制它。

你应该已经理解为什么这么做了吧？现在我使用Flexbox来把这两个按钮并排显示。为了让它看起来更好，我们可能需要改变一下按钮的颜色。现在两个按钮都是橙色的，感觉有点突兀。实际上，最佳实践是使用不同颜色的按钮，因为不同颜色可以吸引不同的受众。

比如，我把“点击这里”的按钮颜色改成黑色，黑色和橙色的搭配看起来很酷。然后，我把文本改成“联系我们”，另一个按钮可以是“立即购买”或者“关于我们”。对于“关于我们”按钮，我就链接到“关于我们”页面。对于“联系我们”，链接到“联系我们”页面。

接下来，假设你想在右边加一个图片。

这个有几种方式可以做对吧？我们可以直接做一个两列的行，比如你看，我们就可以做成这样，然后放上文字，再放个图片。或者我们可以用更创意的方式来使用 Flexbox。这个稍微进阶一些，但我想展示一下，帮助大家更好地理解。

我就拿一个图片来做例子，我把它放在这个框下面，选择一张图片，然后放上去。我们选谁呢？我们就选这个人吧，看起来他挺开心的，手里拿着咖啡，心情也不错，对吧？所以我们就把这张图片放在这个区域下面。

接下来，就像我们之前在这两个按钮上用 Flexbox 一样，我们也可以用 Flexbox 来调整整个区域。就像这些小圆点，我把它设置成水平排列，你会看到，它们就整齐地并排显示了，非常干净整洁。这个就是使用 Flexbox 的一种方式。

你不一定非得这么做，但我就是想给你们展示下，Flexbox 其实有很多种用法，对吧？你可能也注意到这边有点空隙，对吧？但我不想加太多的内边距和外边距。

我们可以用 Flexbox 来调整这些元素的位置。比如我点击 Flexbox，选择对齐内容，就能把它们居中对齐。你也可以选择像是均匀分布，或者空间分散，甚至你可以设置开始对齐之类的。如果你愿意的话，还可以添加一个间距，让元素之间有点空隙。总之，你看，Flexbox 其实在很多情况下都非常有用。

虽然刚开始用可能有点不习惯，但用起来之后，Flexbox 会让你的网站布局更响应式，操作也更加简单。比如说，如果你想给这个区域添加背景色，你可以点击这六个小圆点，然后选择样式。就像我们之前给盒子加背景一样，你可以设置个颜色，或者加个渐变色。

假设你想用渐变色，我们可以选两种颜色，然后调整颜色的位置，甚至设置角度。这样，你就能看到背景颜色渐变得很漂亮，可以是线性渐变，也可以是径向渐变，虽然我个人不太喜欢径向渐变，看起来有点乱，所以我还是选线性渐变比较好。

这就是用 Flexbox 创建一个好看着陆页的示范。接下来我们再做一个小区域。

然后我们来看下这些图标。它们可以帮助你创建行布局。这个地方让你插入模板和模块。

比如说这些模块是专业版元素，所以你需要 Elementor Pro 才能使用这些。但说实话，我不太喜欢这些模块。

我觉得它们的设计不太好。有些看起来挺不错的，但有些老旧的设计就很丑，真的。不过，也有一些页面模板是很有用的。

这些模板都是 Pro 版本的，但你也可以使用自己的模板。模板就是你可以保存你网站上的某个部分，然后在其他地方重新插入。比如说，我可以右键点击这个模块，选择保存为模板。

这就是我的首页，我保存一下，然后关闭，再去模板部分。我就能看到刚刚保存的模板，然后随时可以把它们插入到任何地方。

你可以随时保存自己喜欢的部分，然后在网站的其他地方使用。我现在删除这个模块，接下来是 Elementor 的 AI。

老实说，这个功能还需要很多改进，做得不太好。所以这是我个人的看法。

不过我还是会告诉你怎么用，免得你以后用到它。看这个视频的时候，你可能会问，AI 建站适不适合？我来分享一下我对 AI 在建站方面的看法。

虽然 AI 网站构建工具看起来是个快速简单的选择，但它有很多潜在的问题，可能会让你以后非常烦恼，还会浪费钱。确实，AI 可以在几分钟内生成一个基础的网站，但它没有传统网站设计师的定制性和个性化。

这些 AI 生成器可能会选一个不符合你品牌的设计或布局，之后想改动的话可能会很麻烦。

我个人不推荐用 AI 构建网站。你花更多的钱去做一个你原本几分钟就能完成的东西，实在不值。你可以不按照我的意见来，但我还是简单说下它怎么操作。

首先我会连接到 Elementor 网站，然后点击连接。接下来，你输入一个提示。

说实话，用它做分区并不太好，但用它添加 CSS 还挺有用的。比如我让它生成一个三列的员工展示行，然后点击生成。它会给出三个不同的版本。比如，它生成了这个员工区，做得还行，但它用了 Pro 版元素，我们不能使用这些。

我让它生成三列，它给了一个四列的，嗯，好像这算是三列吧。最终，我选择这个布局，然后你可以根据自己的需要设计。

这个服务是免费的，但使用一段时间后会收费，完全看你自己是否愿意使用 Elementor 的 AI。

我个人觉得，做网站还是根据自己的需求来，不要指望 AI 给你想要的东西。接下来我们再做一个小部分，然后回到主页。

接下来我们选一个网格布局做例子。刚开始你可能不喜欢这个布局，但让我给你解释一下，它其实可以挺有意思的。我选了一个三列的行。

插入元素时，你会发现，如果想加更多元素，它会自动推到下一个位置。所以，不能在这个区域内再加元素。比如我加入这个元素，它就会跳到旁边。其实有个特别的办法能解决这个问题。你可以在这里加一个容器，然后把更多元素放进容器里。

比如说，我加一个标题，再加个按钮，插入一个图片，再加另一个图片。然后把它们放好。你看，这样用起来挺灵活的吧？

对于每个区域，你可能会发现它距离顶部太近了。你可以点击六个小圆点，进入高级设置，去掉内边距，然后调整上方的空间。

现在你应该在每个部分都加个间距，这样可以给你的网站留出一点呼吸空间，对吧？比如我可以设置个 100 像素的间距。接下来，我们点击布局。

你会看到这是一个网格布局，对吧？我们有不同的选项。比如说，点击这里可以选择不同的列数，可以增加更多的列。你还可以选择行数，增加更多的行。然后你还可以在这些部分之间添加间隙。我个人觉得这种布局更适合用来做作品集。

如果你想做一个漂亮的作品集，使用这些控制项其实非常简单。你可以在这里添加更多的图片，并根据自己的需要调整它们的位置。你还可以控制网格的宽度。你看。

其实这种布局更适合展示图片和作品集，但它也有很多创意用法，简单来说，它帮你创建了列，你可以直接在这些列里添加更多元素，然后就能像这样搭建你的网站。还有一个很酷的功能是，你可以在网格和 Flexbox 之间切换。现在你看，已经切换到 Flexbox 模式了，所有的框架都不见了。

对吧？它就像堆叠在一起一样。或者你也可以随时把它切换回网格布局。好，接下来我就关闭这个，再来一次 Flexbox 示例。

我点击加号，选择 Flexbox。让我给你做个最后的 Flexbox 示例，然后我们就可以开始主页的设计了。我会选择横向排列。

然后我要开始添加图片。比如我放一个图片，然后用这些小图标。

你不需要跟着我做，只是我想给你展示下这样做的用处。我再拖一个图片过来，另外一个图片。

好了，我现在放了四张图片在这里。你可以使用 Flexbox 来控制里面所有元素的位置。

比如说，我点击这个部分，选择垂直排列。这样你就会看到，所有图片都会堆叠在一起。如果我把它设置成反转，你会看到图片的顺序被反过来了，依此类推。

我们在演示网站中其实用到了这种方法。你看到我们把图片放在一起，就是用了 Flexbox，把它设置成横向排列，把这些图片一一排开。好，接下来我们准备好开始了。

我想你们现在应该对 Elementor 和 Flexbox 有了一些了解，接下来就进入主页部分。我不打算继续使用这个页面了，因为这是一个练习页面。

所以我直接点击查看页面。现在我们对 Elementor 和 Flexbox 有了一些经验，来看看我们是如何做的吧。点击使用 Elementor 编辑。

首先你会注意到，我们有两列，右边一列，左边是两列。现在我们来谈一个更进阶的功能，叫做“边距”。

在这里，我插入了一个分隔线。你会看到有斜线，但你可能看不太清楚。

这是因为我们把它推到文本上方了。在高级设置里，你会看到“边距”。边距就是用来把元素推到某个方向的。

比如说，你会看到这个分隔线，现在它就在这里。分隔线通常是用来分开文本的，让你的网站看起来更有设计感。

比如说我们有斜线，但你可以把它换成方形的，或者做成锯齿形的，或者简单地做成一条实线。

其实，分隔线就是给你的网站加点装饰和设计。但我们这里做的是把它通过边距推到文本后面，给它增加点设计感。你看，确实给网站增添了一些亮点。

所以，边距是一个稍微进阶的功能。这个就是如何在元素中使用边距的一个例子。回到基础元素，我们有标题文本、文本编辑器和按钮，还有一张普通的图片。

在下面，你会看到我们其实用到了 Flexbox。点击这个方框，你会看到我们用了一个横向排列。但如果我切换到垂直排列，你会看到它们都堆叠在一起。

这也是我在设计主页之前想先给你们介绍 Flexbox 的原因，因为这可能会让你觉得有点复杂。但现在我想你们应该理解它是怎么运作的了。点击横向排列。然后，你可以给它添加间隙，或者增加一些样式。

接下来，往下滚动。如果你想在这些部分之间插入一个新部分，可以点击加号。然后在这里，我们可以像之前一样使用元素，建立一个新的部分。

继续滚动，你会看到我们在这里添加了样式。这里就是分隔线，它被推到了文本后面。然后你会看到那些图片。记得之前我们说到 Flexbox？这里我们选择了垂直排列，然后又变回横向排列。

所以现在你可以看到 Flexbox 真正的作用了，对吧？它真的非常有用。

再往下滚动，你会看到有文本、更多的文本，下面是一张图片。然后是图标，哦，不，是图片。

再下面，我们用了一个计数器模块。计数器模块可以在这里找到。只要你输入“计数器”，它就能让你在网站上添加一个计数器，出于任何目的。

你可以调整起始数字、前缀，或者按自己的需求调整设置。你还可以自定义这些按钮的样式。记住，你可以改变数字的字体、颜色和标题的样式。

不过我不打算做这些，所以我直接右键删除它。到这里，你应该对如何使用 Elementor 页面构建器有了一定了解。

对吧？其实并不难。而且，当你在做网站时，可能会注意到这些元素有时候会堆叠在一起。但如果我把它们关闭，你就会看到它们是并排显示的。

有时候这种情况是因为页面没有足够的空间。所以，你可以根据需要调整它们的位置。接下来，让我们再创建一个新部分。

在这个部分之间，我们来创建一个“行动召唤”区域。这种布局在网站中非常常见。行动召唤就是你想让人点击的部分。

你看到这里我有文本，文本后面跟着一个按钮。我给你展示一下我是怎么创建的。

首先我点击加号，选择 Flexbox。然后我选择下箭头，开始添加模块。现在没有固定的做法，我可以用按钮，也可以用文本，加个背景。用 Elementor 可以有很多种方法来做这个区域。

为了让你们更容易理解，我就从文本编辑器开始。

对吧？这样做就是我们网站的第一部分，最棒的主机推荐。接下来，我们要介绍的是我们推荐的 Hostinger。我就直接在这里加上“我们推荐 Hostinger”。

接下来是另一个文本编辑器。我就直接复制这段文本，然后我想用 H3 标签，H3 比 H2 小一点。

所以我把它改成 H3。好了。

然后我会在下面再加一点文本，再放一个按钮。快速修改一下文本。现在这一部分，首先我想确保它是全宽的，对吧？我想让它横跨整个页面，所有内容都居中。

在对齐项下，我把它设置为居中。有时候，有些模块，比如文本编辑器，可能会和 Flexbox 是分开的，所以你需要手动调整它的对齐方式。

在样式设置下，你会看到对齐项设置为居中。嗯，Elementor 是为什么这样设计我不太清楚，可能是有一些原因，但它确实有几个元素是独立于 Flexbox 的，应该是就只有两三个，不多。

接下来，我想加个背景。点击编辑容器，然后在样式下，我选“经典”背景。接着我就加一个背景色，可能就用黑色吧。然后我们可以把所有的文字都改成白色。

我点击文本部分，在样式中把文字颜色改成白色。然后在“我们推荐 Hostinger”这段文字上，点击样式，选择文字颜色为默认。

接下来，我们已经设置了全局字体和颜色，这样你就不必每次都去猜颜色或字体是什么。稍后我们会详细介绍这个功能。对于这段文字，我们也做了同样的文字颜色调整。

最后一段也改成白色。

现在，我想给大家介绍一个非常有用的功能，叫做“复制和粘贴”。在顶部的这个元素上，我右键点击，选择“复制”。然后，我点击这个元素，右键点击，选择“粘贴样式”。

其实我在做的就是把一个元素的样式复制到另一个元素上。这个功能对于按钮特别有用，非常方便。接下来，我也把这个按钮居中，就像我们之前做的那样，你会看到这一部分现在已经结构非常好了。

之前我们做过一个网站，那个网站我减少了间隙。所以这里我就设置了一点小间隙。

然后，我为特定的文本添加了背景。你可以在高级设置中找到这个选项。如果我往下滚动，你会看到“背景”，你可以在元素之间添加背景，这个功能挺酷的。

我就给这个文本加个背景。可能就加个橙色的背景。然后我们检查下全局设置，没错，按钮是这样子的。

你看这里有个方形的背景，如果你想让它变成圆形的，可以调整边框半径。

在“背景”设置下，我进入“边框”部分，给它添加一个边框半径，这样就变得更圆了。

这就是我们如何重新创建这个部分的方式。虽然它不完全一样，但你可以看到它在视觉效果上差不多。

好，接下来继续往下滚动。到这里，你应该明白怎么操作了吧？如果你想在这部分加个文本，可以这样做。

你可以添加文本，然后继续滚动，用 Elementor 构建你的网站。就像你看到的，这个页面构建器非常简单，不难上手。

现在，我们来发布我们的更改。点击“发布”，然后查看页面。

这是我们的着陆页，你会发现我们的按钮之间有了一些间距，滚动下去，你会看到我们加上的图片和内容。

继续滚动，你会看到我们新创建的部分，看起来和我们的网站很像。虽然我们本可以做得更小一些，但我想你应该明白重点了。

接下来是我们常见问题的部分等等。所以这就是如何使用 Elementor 页面构建器的大致流程。现在你可以去其他页面，比如“关于我们”页面，点击“使用 Elementor 编辑”。

然后，你可以用页面构建器来设计这个页面，就像我们在首页做的一样，你可以用同样的方式设计你网站的其他部分。

你会发现这是一个非常流畅的构建器，虽然有些地方需要时间去适应，但我想你们都明白如何操作了。

现在，为了退出，我再点击一次“查看页面”，然后我们可以去探索网站的其他部分。现在你应该理解了。接下来，让我来展示一下 Elementor 的一些功能。

我会开启页面构建器。你不必完全跟着我做，但我想向你们解释一些你们可能会用到或喜欢的功能。

首先，注意到这边有一个预览功能。它允许你在不关闭当前窗口的情况下打开一个新标签预览网站。接下来是帮助按钮，点击可以获取帮助，还有“查找器”。

“查找器”功能特别适合快速跳转到其他页面，比如你想跳到“联系我们”页面，点击后就会直接带你到那个页面，方便你进行设计，而不用关闭再打开。好了，现在我返回首页。

接下来是公告区，Elementor 经常会更新，新增一些功能。但最近我注意到，它们确实有点倾向于推销其他插件，这可能会有些烦人。虽然这些插件是好产品，但我个人觉得并不需要。然后是待办清单，这就像一个提醒，坦白说，我觉得用处不大。

接下来是页面设置，它可以让你隐藏页面标题，还可以调整布局为全宽。通常，大部分页面都会设置为 Elementor 的全宽布局，所以你可以保留默认的页面设置。然后是主页部分，点击这里可以在网站的其他页面之间搜索。

接着是结构面板，称为“导航器”。导航器可以显示容器内的所有元素。点击下拉菜单，你会看到如果点击某个框，它会高亮显示相应的部分。如果你展开它，它会显示该部分内部的所有元素。

这个功能特别适用于你在 Pro 版本中自定义头部时，尤其当有些区域很难直接点击时，你可以使用导航器来快速定位。你还可以拖动并重新排列这些部分，比如如果我想把“客户”部分移动到“英雄”部分上面，只需要拖动就行。拖到顶部后，客户部分就会显示在最上面。如果我要再把它移到下面，也可以轻松调整。

你还可以右键点击并复制整个部分，然后使用“粘贴样式”来复制样式。比如我复制了两个行布局，你会看到有两个行出现。如果我不需要，可以直接删除它们。这个功能特别适合快速调整页面布局或跳转到不同部分。

说实话，我个人不太常用导航器，因为我习惯直接看得见自己在做的内容，但有时它确实很有用。接下来我关闭导航器，继续讲解站点设置。

站点设置就像一个小型的主题自定义器。这里有全局颜色设置，导入模板时，Elementor 会自动为你设置一些全局颜色。如果你需要修改这些颜色，可以直接调整。比如你可以把它改成蓝色，或者修改基础字体等。

你还可以添加自定义颜色，这些颜色会在样式选项中显示。比如我创建一个新的颜色，设置为红色。那么现在你就能在样式设置中找到这个红色。

此外，Solace 主题集成了更多的颜色选项，你可以通过设置来快速调整链接颜色、按钮悬停色等。Solace 的设计让你更方便地修改网站各个部分的颜色。

修改后，别忘了点击保存更改。我们刚才更改了按钮的颜色为蓝色，新加的颜色是红色。保存后，你会看到整个网站的蓝色调就变了，因为我们更新了全局颜色设置。

如果你想手动更改颜色，也可以点击文本部分，在样式中选择颜色，找到你设置的颜色。这就是如何创建全局颜色和预设颜色的方式。

接着，我们再看全局字体设置。这让你可以统一设置按钮、H1、H2、H3等标签的字体。如果你希望 H1 标签使用特定的字体，可以在这里直接修改。这样每次你使用 H1 标签时，它都会自动应用这个字体。

建议你在网站建设时，最多使用两种字体。如果用三种字体，网站看起来很容易显得杂乱不堪。你可以根据需要调整不同标签的字体，保持网站的一致性。

在这里，我们设置了 H1 标签使用的是“Oswald”字体。如果你更改了字体，在样式中也会立即显示。你也可以随时更改为其他字体。

同样的设置也适用于段落文本，调整字号、字体等设置。

接着，我们再看一下图片的设置。在这里，你可以为图片添加边框，比如双重边框。这样，所有网站上的图片都会有双重边框，这个效果其实挺酷的。

我个人觉得这个风格挺好看的，可能我还会把它更新到视频描述里。点击保存更改后，你就能看到所有图片都带上了双重边框。

最后一个设置选项，我不太建议使用那些元素。它们可能会和网站上的其他元素产生冲突，所以我通常会避免使用。设计系统倒是很有用，如果你在做网站，建议先创建样式选项，然后根据需要调整主题样式。

但这些设置往往会和其他元素发生冲突，所以我一般不怎么用。点击保存后，设置就完成了。

这是关于Elementor页面构建器的一些基本设置，接下来我们要讲的内容是：移动端优化。

说到移动端优化，这个非常重要，真的是太重要了。因为现在，到了2025年，手机用户的数量已经超过了桌面用户。

所以，你必须确保你的网站在所有设备上都能完美展示。接下来的这部分，我们会针对平板和手机来做网站优化，确保网站适配各种设备，比如PC、平板和手机。

先简单说一下为什么移动端优化这么重要。移动端优化就是让你的网站在手机、平板等设备上看起来也很棒，能适应不同大小的屏幕，方便用户浏览。网站移动优化之后，界面会自动调整，适应手机或平板的屏幕尺寸，让用户能更方便地浏览。所以一定要确保你的网站在所有设备上都能顺利运行，给用户带来良好的体验。现在大家都知道，手机用户比桌面用户多了，所以咱们的网站得确保在各种设备上都能完美显示。

现在先说一下平板优化。在Elementor中，我们做的这些模板已经考虑到了不同设备的适配，像是平板、手机等。所以，你其实不需要特别调整这些设置，因为我和我的团队已经帮你们做了这些优化。不过，如果你有兴趣自己动手调整，比如想把某个标题在平板上居中显示，但在PC上不居中，那也可以自己操作。

举个例子，如果你想把标题放到中间，但又不想在电脑端也居中显示，你可以点击小铅笔图标。然后在平板视图下，你会看到电脑、平板、手机的选项。

如果你在平板设备上，想把标题居中，就可以调整到居中。对于这个样式也是一样，可以把它放中间。

然后对于按钮，我们也可以让它在平板上居中显示。你看，我们就能在平板上把这些元素居中。

同理，也可以在标题部分进行类似操作，只针对平板做居中，格式会变得更整洁。

如果你不想在网站上显示某些元素，比如某个图片，可能在平板上就不太需要。你可以隐藏特定的部分。

以图片为例，点击图片后，进入“高级”设置，向下滚动找到“响应式”选项。响应式就是你可以根据不同的设备，隐藏一些元素。

比如，如果我不想在平板或手机上显示这张图片，我可以设置隐藏。这样，当用户在手机或平板上访问时，他们就看不到这张图片，只会看到文字和下面的内容。

另外，如果这部分的布局需要调整，可以使用Flexbox来优化排列。比如可以设置元素的排列方向为“垂直”，然后调整结束的位置。这样就可以根据平板设备的需求，重新安排这些元素的显示方式。

如果你想自己动手调整，移动这些元素也是可以的，当然，我认为这个布局已经很适合平板设备了。如果你觉得需要，也可以把元素居中显示，按照自己的需求做微调。

这样就是如何优化网站的平板设备版本。我们已经为你做了这些优化，所以你不需要再去逐个修改网站。不过，如果你真的想自己动手，假设这一部分看起来不太好看，我们可以把这一整个部分隐藏掉。

点击这六个小点，就像我们之前隐藏了图片一样，我也可以把整个部分隐藏。进入“高级”设置后，选择“响应式”，然后选择在平板和手机上隐藏。这样就好了。

接下来，我们来查看一下手机预览。点击手机竖屏预览。对于手机，最常见的调整就是修改文字的大小。你看这些文字，真的有必要全都显示出来吗？可以选择隐藏它们，或者把它们调小。

在字体设置中，你会看到在“大小”选项下，只有手机端的文字会受到影响，我们可以把它调小一点，因为我觉得这样对手机用户来说文字太大了。

继续往下看，我们可以看到这里有一大块空白。那是因为我们设置了外边距（margin），但是在手机预览下，效果不太好。点击六个小点，看看这是在手机竖屏视图下，发现外边距太大。我们可以去掉外边距，减少一些，设置大约100左右，这样看起来就合适了。

然后在这部分，分隔线应该是居中的，所以我会把它设置为居中对齐，这样看起来更整洁。继续滚动看看效果，怎么样，大家觉得怎么样？可以在评论里告诉我。

好了，这样看起来就很好了。接下来我们可以发布这个版本了。退出手机预览，点击桌面视图，就回到我们之前构建网站的方式。如果我们向下滚动，你会发现网站没有任何变化，还是之前的样子。你会看到所有内容和之前完全一致。因为我们做的修改只会影响平板和手机视图，桌面视图并不会受影响。

现在我们来进入主题定制器部分。

每个WordPress主题都有自己的主题定制器，提供了不同的功能和样式选项。接下来我会给你展示如何使用“Sauce”主题定制器，它可以帮助你调整网站的头部和底部。

在这个视频中，我会教你如何使用Sauce主题定制器，了解所有功能，大家准备好了吗？开始吧！

首先，点击顶部的“自定义”进入主题定制器。每个WordPress主题都有自己的定制器，点击“自定义”就能访问。让我先解释一下主题定制器是什么，它能为你的网站做什么。

好，接下来我们来看看Sauce主题定制器。首先是常规选项。个人来说，我觉得这些选项对大多数网站来说不太需要。不过，如果你使用的是其他页面构建器，这些功能会比较有用。让我给你讲解一下怎么用。

这里有一个全局色板，这个色板也可以在Elementor的全局色板中找到。这个控制面板和Elementor的全局色板差不多。如果你想改变网站上所有标题文字的颜色，可以在这里选择标题颜色，点击后选定一个颜色，比如橙色，那么所有的标题文字颜色都会变成橙色。

这不会影响段落文字，因为段落文字是在另一个地方设置的。

接下来我们来说说背景。如果你想改变网站的背景颜色，也可以在这里设置。这会影响网站的多个部分。

比如现在背景是黑色的。需要注意的是，如果你在Elementor中设置了特定的颜色，主题定制器设置的颜色可能不会覆盖Elementor的设置，因为它们之间会产生冲突。

接下来我们看一下按钮。默认情况下，按钮的颜色是这样设置的。这些按钮一般适用于WooCommerce和博客的结账页面，通常不会影响你页面上的按钮。页面上的按钮基本上可以看作是链接，因为这些按钮实际上是指向网站其他部分的链接。

例如，这个按钮是蓝色的，但你会发现这里的按钮是橙色的，因为我们在Elementor页面构建器中设置了橙色。向下滚动，你可能会发现一些按钮是蓝色的，因为我们选择了这个颜色。选了颜色调色板之后，你可以在这里调整按钮的颜色。如果你在Elementor中专门设置了按钮颜色，这里做的调整就不会生效了。

我个人建议不要使用全局色板，因为Elementor本身有自己的全局色板，可能会有冲突。同样的，字体也是如此。这里有字体大小设置，你可以调整默认字体的大小，甚至更改字体。

如果你想更改基本字体，点击相应的选项就能调整。同样，H1、H2、H3标签通常更多用于归档页面（比如博客和WooCommerce页面），不太适用于主页。你当然可以用在主页，但我个人建议最好还是使用Elementor页面构建器，因为这些设置很容易产生冲突。

最后，来看看Sauce主题最酷的功能之一：头部构建器。点击头部构建器，我们为你预设了几种样式，你可以选择不同的Logo样式、菜单布局等等。这样设置既方便又简单。

如果你想改变链接颜色，也可以在这里调整颜色。

接下来我们来聊一下Solace主题的一个非常酷的功能，那就是头部构建器。点击头部构建器后，你会发现Solace主题有一些预设的样式，非常方便。我们已经为你设置了很多预设条件，你可以选择不同的样式，比如：

1. Logo在左侧：你可以选择这种带黑色条的样式，Logo显示在左侧，菜单会展开。
2. Logo居中：另一种选择是将Logo放在中间，右侧则可以有两个按钮。

这些预设样式的好处就是让用户能快速选择适合自己的网站风格，省去手动调整的麻烦。

接下来，我点击一下“元素”部分，快速调整一下这里的链接颜色。进入“常规选项”下的颜色设置，我会将链接颜色改为橙色，这样整个网站的链接颜色就会变成橙色。

好的，接下来我们继续聊一下头部构建器的使用。

在Solace主题中，头部构建器非常方便。我们有三个不同的行：上行、主行和下行。你只需要把一个元素拖放到某一行，就能看到新的行出现。而且每个元素都有自己的样式选项，你可以调整文字、字体颜色、按钮颜色，甚至还可以设置按钮的边框样式。

你还可以调整每一行的样式。点击每行的齿轮图标后，你可以修改背景色、行高、大小，甚至可以添加渐变背景。如果你想使用渐变背景，可以选择“渐变”选项，轻松为这一行设置渐变色。

比如我可以先选择一个颜色，接着选择“渐变”，这样就能在这一行设置渐变背景了。如果你需要添加更多元素，只需要拖放新元素进去，新的元素就会自动显示。

对于每个元素，你都有各种设置选项，可以添加电话、电子邮件或是网站链接，点击“添加”后输入内容和链接即可。比如，你想添加一个第三行，只需拖放一个元素进去，三行布局就完成了。然后你还可以对这一行进行样式调整。

如果想修改这一行的背景色，可以点击齿轮图标，设置为黑色，或者设置其他颜色。你也可以根据需要添加更多的元素，像是搜索框、社交图标等等。

接下来，我们会遇到一个叫做“Widgets”（小工具）的元素。它是Gutenberg页面构建器提供的默认小工具。这些小工具非常适合用在网站底部，但我个人不太推荐在头部使用它们，因为它们的尺寸调整比较麻烦。

例如，添加一个日历小工具，它会显示日期，虽然功能是有效的，但对于头部来说，它们的尺寸会显得有些大。如果你想在头部使用，我建议还是使用Solace主题的自定义元素，这样会更适合头部布局。

在底部部分，我们也有一个底部构建器，它与头部构建器很相似。唯一的不同是底部构建器使用了更多的小工具和HTML元素。

点击HTML部分，你可以看到它只是一个文本小工具。你可以在其中添加HTML代码，也可以直接输入文字内容。例如，输入“联系我们”并加上电话号码，就会显示在页面上。

和头部构建器一样，你也可以将按钮或其他元素拖放到底部。在这里，你可以调整按钮的对齐方式，比如放在文本下方或右侧。你也可以调整按钮的大小、颜色和样式，让它与网站整体风格匹配。

Solace主题还为你预先创建了一些底部布局，你可以直接选择一个简单的格式，点击即可使用。你只需要根据自己的需求编辑其中的内容，比如添加“关于我们”或“联系信息”部分，或者选择“页面”小工具来显示网站上的所有页面列表。

接下来我们来聊聊底部部分的自定义。

在Solace主题的底部构建器中，你可以像头部构建器一样，拖放元素来自定义底部内容。例如，你可以选择添加小工具，像是文本框、社交图标、联系信息等。添加小工具后，你可以随时调整它们的位置和样式。比如，你可以选择设置一个四列的布局，或者修改成三列，甚至是其他样式。点击每个元素的齿轮图标后，你可以调整背景颜色，选择自己喜欢的颜色，打造个性化的底部。

我们也为你提供了很多预设的底部样式，这些样式在网页设计中已经过验证，使用这些风格可以让你的网站看起来更加专业。当然，如果你有自己的想法，也可以根据需要自定义底部，随心所欲地设计它。

现在，我们来看看一些页面设置选项。

点击页面设置，我们可以控制单个博客文章的显示方式。例如，你可以选择“全宽”显示，或者选择“盒子”模式，这样页面内容会变成居中展示，适合做一些简单的布局。这个设置也适用于单个页面或归档页面的样式。

如果你没有使用页面构建器，比如Elementor，而是直接使用Gutenberg来编辑页面，那么这些设置会非常有用。你可以选择“全宽”或者“盒子”样式来设置页面布局。如果你希望自己手动设置页面宽度，也可以选择“自定义宽度”，将页面宽度调整到你想要的大小。这样你就可以根据自己的需求来精细调整页面的展示效果。

对于那些没有使用页面构建器的人来说，这些设置是非常有用的。但如果你在使用Elementor构建页面，那么这些设置就没什么必要，因为Elementor会控制页面的大小。

另一个功能是返回顶部按钮，它是一个非常方便的小功能。当你向下滚动页面时，这个小图标会出现在页面右下角，点击它就能快速跳回页面顶部。你可以在“功能”部分开启这个功能，并且调整图标的颜色和大小。比如，你可以选择将图标颜色设置为黑色，或者调整它的尺寸，使其适应页面风格。

最后，我们来看一下核心选项。有时候，你可能希望指定一个特定的页面作为你的首页。你可以选择将“关于我们”页面设置为首页。这样，当用户访问你的网址时，他们会直接看到这个“关于我们”页面，而不是默认的文章页面。

你还需要确保将首页设置为“静态页面”，这样“关于我们”页面才能作为首页正常显示。如果你选择了“最新文章”，则所有的文章会显示在首页，而不再是你指定的静态页面。

我也不太清楚为什么WordPress要这么做，不过没关系，我先选择“静态页面”，然后把首页设置成实际的首页。接下来，关于文章页面，所有的博客文章都会展示在这个实际的博客页面上。所以我们创建的所有博客文章都能在这个页面上看到。

接着，点击博客，你就能看到我们实际的文章页面，所有的博客文章都会在这里展示。好了，我们接着点击“发布”。

就这样，主题定制器的基本设置就完成了。如果你对主题定制器有任何问题，其实我们网站上有相关的文档，那个是Solace主题定制器的大致操作说明。接下来，在视频的这一部分，我会带你了解如何创建页面，并把它们添加到菜单里。

当你从不同的WordPress主题导入入门模板时，它会自动为你创建一些页面，同时还会为你创建一个菜单。当然，你也可以删除这些页面，然后重新创建自己想要的页面。如果你想自己从零开始创建页面，那也可以。接下来，我会演示如何创建页面，并调整菜单。

比如说，如果你想创建一个新页面，我们可以在仪表盘里操作。进入“页面”栏目，点击“所有页面”。

这里会列出所有页面。如果你想删除某个页面，只需要点击“移到回收站”，这样页面就会被删除。但它其实没有被完全删除，只是进入了回收站。如果你想彻底删除，可以进入回收站，点击“清空回收站”，或者你也可以恢复被删除的页面。

我删除了那个页面，现在这就是我们网站上所有页面的列表。如果你想添加新页面，可以点击“添加新页面”，这时就会生成一个新页面。我点击“发布”，然后发布。你当然可以使用Elementor来设计这个页面。

我快速加点内容，使用AI选一个页面布局，然后点击“发布”。接下来，我要把这个页面加到菜单里。

返回仪表盘，现在我们有了一个新页面。接下来，我们需要把它加到菜单里。

做法是，去“外观”菜单下点击“菜单”。首先选择一个菜单，这里有主菜单。我点击“选择”。然后，页面列表会出现。你只需要勾选你想添加的页面，再点击“添加到菜单”就行了。

然后，你可以拖动调整顺序。你也可以将博客文章添加到菜单里，假如你想在菜单上放一个博客文章链接也是可以的。

另外，你还可以添加自定义链接。自定义链接就是你可以把它指向像Pinterest、Twitter，或者任何你想链接到的网址。举个例子，我就可以把自己的网站链接放进去，然后在链接文本里写上“Darrel的网站”，点击“添加到菜单”，你就能看到这个自定义链接出现在菜单里。接着把它放到你想要的位置，然后点击“保存菜单”。

好，保存完之后，我们来看一下网站。你可以看到新页面已经创建好了，点击这个新页面，就会跳转到我们刚才用AI生成的那个页面。

如果我点击这个“的网站”，记住，这个是一个自定义链接，它会把我带到我的个人网站。

看，成功了，直接跳转到我的漂亮的WordPress网站了。好了，这就是Elementor教程的主要内容。如果你对Elementor有任何问题，可以在下面的评论里告诉我。

点击邮件，看看，邮件就在这里了。老实说，有时候这个邮件并不会送到大家的收件箱里。

好了，接下来，在视频的这一部分，我会带你了解Hostinger的仪表盘。你可以在这里做很多事情。比如进行速度测试，检查是否有恶意软件，最重要的是，你可以为你的新WordPress网站创建免费的商务邮箱。我会带你一步步看Hostinger仪表盘的所有选项，并帮你创建免费的商务邮箱。大家准备好了吗？我们开始吧！

接下来，我们来聊聊Hostinger面板。这里有很多功能可以使用。首先，点击“网站”部分。

在这里，你可以看到你网站的表现，也可以登录，还能点击仪表盘部分，查看更多关于你当前域名的信息。

你会看到我们的页面速度得了100分，网站没有受到恶意软件的攻击。这就是关于你网站的一个概览。然后我点击“WordPress概览”。

在这里你还有更多的选项。你可以把网站设置成维护模式。如果你不想让别人看到你的网站，只要点击这个选项，它就会让你的网站显示成“建设中”页面。

不过我现在暂时不启用这个。还有一个大家有时会用的功能就是清除缓存。有时候在你做网站修改时，可能看不到变动的效果，那是因为缓存没有刷新。

如果你想手动清除缓存，只需点击“清除缓存”，它就会把网站的缓存清除掉。左侧这里还可以看到“暂存环境”。

如果你想在暂存环境中工作，Hostinger提供了一个非常简单的暂存环境。你只需要点击“创建暂存”，它就会为你创建一个测试环境。

然后我点击“创建”，接着点击“关闭”。现在它正在为我们创建暂存环境。

创建完成后，我会回来看一下。暂存环境现在已经可以用了，暂存环境的作用是让你在不影响主站页面的情况下对网站进行更新。

比如说，我点击“管理暂存环境”，然后进入管理面板。现在你会看到顶部写着“测试中”，这实际上让你在网站上自由地进行各种操作。

假设我想更改着陆页，比如你想完全自由地设计网站。我在这里更改了着陆页，可能还会修改标题，你可以完全改变你的网站，而这些更改只会应用到测试环境中。

一旦你决定，嘿，我喜欢这个网站，想要把它推送到主域名上，你可以通过Hostinger来完成这个操作。我就点击发布。

好了，发布完之后，我会回到我们的暂存仪表盘，然后我们可以把这个版本推送到实际的主网站。

点击返回，在这里我有三个点的选项，点击这三个点，然后选择发布。这个操作会将我们暂存环境中的整个网站推送到我们的实际网站上。之所以使用这个操作，是因为你不想在有实际访客的时候编辑网站，对吧？这挺尴尬的。所以我点击这三个点，然后选择发布。

这个操作会替换掉你整个网站，所以它会提醒你确认网站是否已经是你想要的样子。

点击发布后，大约15分钟内，它会把当前网站替换掉。点击关闭。接下来，我们来看一下分析功能。

这个功能会告诉你谁在访问你的网站，访客的IP地址是什么。你可以看到IP地址，所在国家，访问记录，IP和带宽等信息。接下来，我们来说一下商务邮箱的设置。

点击邮箱，然后点击“邮箱账户”。你可以通过Hostinger创建免费的商务邮箱。点击设置，然后选择我们的域名，点击确认。

然后我们选择Hostinger的免费选项，点击选择，就可以创建免费的商务邮箱，并设置邮箱名称。比如说，我的邮箱是。

设置好密码后，点击创建。好了，邮箱创建好了，点击跳过。

接着邮箱账户就创建好了。要访问邮箱，点击邮箱账户，这里可以看到你创建的邮箱账户。每个域名可以创建最多100个免费的商务邮箱。如果你还想创建一个，只需点击加号，创建另一个。要访问你的webmail，只需要点击webmail。

登录时输入密码，然后点击登录。这就是你的新商务邮箱。你现在可以用这个邮箱发送和接收邮件了。

如果你想学会如何把它和Gmail连接起来，我有另外一个教程，视频描述里有链接，你可以查看，看看如何把它和Gmail账户链接。好了，返回主选项，点击主菜单，选择“网站”，然后我们回到域名的仪表盘。

最后一个重要的选项是域名管理。

点击“域名”，然后选择子域名，你可以为你的网站创建子域名。子域名通常用于像“支持”这样的功能。如果你有支持表单之类的东西，可以创建子域名。

如果你想在这个新的子域名上安装WordPress，你可以返回这里，点击WordPress概览。如果你想在这个子域名上安装WordPress，只需点击网站部分，你会看到你有一个新的子域名，它是和你的主域名关联的。

在这里，点击“仪表盘”，然后点击“WordPress概览”，接着我们向下滚动，你会看到“安装另一个WordPress”。如果我点击“安装”，就会进入设置新子域名的凭证，但你需要选择它。我现在快速填写一些内容。

在高级设置部分，你会看到你可以在新的子域名下安装一个新的WordPress。实际上，这会是一个全新的网站，只不过它是你当前网站的子域名。所以我点击“下一步”，然后会在这个新子域名上安装一个全新的WordPress。

安装完成后，我们就可以选择我们的子域名，然后登录网站。就这样，我们在子域名上创建了一个全新的网站。你会看到这是一个空白的WordPress安装，但你会发现，这就是我们的新子域名。

这就是如何使用Hostinger仪表盘创建子域名。最后，回到暂存环境，你会看到它已经完成了。如果我们刷新网站页面，它就会把暂存环境的内容导入到正式网站。

我刷新页面后，你会看到之前在暂存环境中创建的灰色屏幕。就这样，你也可以创建暂存环境并把它推送到正式网站上。

然后，你只需要点击“删除之前导入的网站”，接着点击“继续”。这个操作会用新的演示替换掉你当前的网站。一旦你选择了演示模板，就点击“跳过此步骤”。

好了，系统开始导入我们的网站。导入完成后，我点击“检查网站”。

就这样，我们的网站现在就有了漂亮的Credo布局。然后，我想告诉你们的是，看看所有页面。它并不会完全删除你的旧网站，它只是把它们从菜单中移除，然后放到“页面”部分。

如果你想删除这些页面，你只需要点击页面，然后删除它们。但它并不会完全删除你的旧内容，只是把它们从菜单里移除了。所以，祝贺你拥有了你新的WordPress网站。

如果你有任何关于WordPress或Elementor的问题，欢迎在下方评论告诉我。

►Hostinger 注册网站主机域名
➜https://bit.ly/3BysRqP

►Elementor Pro专业版插件购买(WordPress最好的页面构建器)
➜https://bit.ly/3CcHsbW

►向有风咨询，加入我的知识星球圈子：
➜https://t.zsxq.com/16QP9JP8b