WordPress入门, WordPress建站教程

嘿，朋友们，今天咱们一起动手用WordPress来搭建一个网站，这是全球公认最牛、最火的建站方式。连好多大公司、艺术家都爱用它来做自己的网站，而且操作起来超级简单，咱们一步一步慢慢来，保证不会漏掉任何一个细节。

嗨，我是有风。其实，做一个网站就三步的事儿，第一步，咱们得把网站的基础框架搭起来；第二步呢，整理整理网站里的东西；最后一步，就是给网站穿上漂亮的衣服——设计它啦。

首先，咱们得搞定网站的基础设置。开场白咱已经说完了，现在正式进入主题。你得给自己的网站起个名字，这个名字就是你的网站地址，比如“AIyoufeng”。 https://aiyoufeng.com/ 然后还得找个放网站文件的地方，这个咱们叫主机空间。接下来，咱们要安装WordPress，这可是全球公认最好用、最受欢迎的建站平台，安装起来也超简单。

本期用到的工具：
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

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

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

►阿里云.中国网站服务器租用
➜https://bit.ly/3V1GiGY

►logomakr logo在线制作
➜https://logomakr.com/

► photopea 在线PS
➜https://www.photopea.com/

► 去图片背景
➜https://www.remove.bg/

用到的插件：
All-in-One WP Migration and Backup
Starter Templates
主题 ：Astra

素材站：
https://www.pexels.com/
https://pixabay.com/
https://unsplash.com/

AI生成图片：
►midjourney
➜https://www.midjourney.com/

► leonardo AI生成图片
➜https://bit.ly/3yTr0LO

► midjourney+ChatGPT 账号合租平台、账号购买
➜https://nf.video/C1dxn

► 办一张国外银行卡
➜https://bewildcard.com/i/19YC7OIQ

► 视频中用的GPT Prompt提示词及文字脚本
➜ https://aiyoufeng.com/wordpress

►chatGPT
➜https://chatgpt.com/
➜升级到GPT4会员教程：https://www.youtube.com/watch?v=64SkKkPTAg4

底部版权信息：获取当年年份代码：[current_year]

装好了之后，咱们就能登录到网站里了，登录也挺方便的。这样一来，咱们网站的基础设置就算完成了。

接下来是整理阶段，咱们得把网站里的东西整理整理，为设计做准备。首先，咱们把不需要的那些小工具（插件）删掉，这些小工具就像是网站上的小程序一样。然后，把那些示例页面和文章删掉，别忘了备份一下网站，这样你就不用担心会不小心把网站搞坏了。接下来，咱们再设置一下网站的标题和描述，这样你在搜索引擎上就能排得更靠前了。整理阶段到这儿就算结束了。

最后，咱们进入设计阶段啦。首先，得挑个设计模板，这里有很多不同的设计可以选，这只是个开始哦。你可以把不同的设计元素混搭起来，创造出你想要的风格。

然后，咱们再挑个主题样式，主题样式决定了整个网站的默认颜色和字体。接下来，咱们要编辑首页，我会教你一些实用的小技巧，比如怎么修改文字、按钮、背景、颜色，怎么加背景叠加效果、插新图片、删部分内容、移动版块、加新版块、调间距、做多列布局，还有怎么更新网站。

这些都搞定之后，我还会教你怎么让网站在手机上也能显示得美美的。其实网站已经几乎完全适配手机了，所以在手机、平板上看都没问题。接着，咱们再编辑“关于我们”页面，我会教你用模块来快速搭建页面，不用从头开始那么费劲，这些模块能帮你省下不少时间呢。

然后，咱们再编辑“服务”页面，当然啦，这个页面你可以改成任何你想要的页面，可以删也可以改。我会演示怎么从别的模板里导入整个页面，这个功能非常实用的，因为你可以把不同的模板混搭起来，做出自己的页面。

接下来，咱们编辑“联系我们”页面，包括怎么修改联系表单。访客填好表单就能联系你啦，表单会把信息发到你的邮箱，你就可以和他们聊天了。

之后，我还会教你怎么添加新页面，比如“项目”页面，你想加什么页面都行。我还会教你怎么自己做Logo，或者把你已有的Logo加进去。

最后，咱们再调整一下网站的头部和底部，就是网站最上面和最下面的部分，一般放Logo和菜单链接。我还会教你怎么在网站顶部加个酷炫的按钮，还有怎么编辑底部内容。

好啦，到这里咱们的网站就建好了！如果请人做这些可能得花你几千块呢，现在你自己动手就搞定了，现在咱们已经完成了整体介绍，接下来咱们就聊聊唯一需要花钱的部分。

1、解释域名和空间

想要建个网站啊，那你得先搞定两样东西，。

首先啊，你得有个网站名称，就像是你的网址，别人想找你网站，直接输入这个网址就行。就像谷歌的网站地址是google.com，苹果的是apple.com一样。

然后啊，你还得有个主机空间，这个是什么呢？就是你网站所有东西放的地方。就像你有个家，你得有个地方放你的东西吧。如果你只有网站名称，没有主机服务，那别人输入你的网址，就只能看到个空白的页面，因为没有地方放你的文字、图片这些文件。

主机，就是一台24小时不关机的电脑，专门放你网站的东西，然后通过网络展示给大家看。比如说，有人在浏览器里输入谷歌的网址，那么这个请求就会跑到主机服务器那里，服务器把谷歌网站的所有文字和图片都传回给这个人的电脑，他就能在屏幕上看到谷歌的网站了。

那这两个东西要花多少钱呢？一般来说，网站域名每年大概要120元左右（还没打折的时候），主机服务每个月大概要20-30元左右。

除了这个费用，就没有其他什么要花钱的地方了。

那我们怎么获取这两个东西呢？其实啊，你可以在同一个地方搞定：

你打开hostinger，就可以了。

2、购买主机域名及安装wordpress

3、后台常规操作

现在我们已经有了自己的网站，接下来我们可以把刚才的页面关闭。目前我们看到的页面就是访客访问你网站时看到的样子。

如果你想对网站进行修改，需要先登录。你只要在浏览器地址栏中输入

“yourwebsite.com/wp-admin”，然后按下回车键。

接下来，你需要输入刚刚创建的用户名和密码。输入完之后，点击登录按钮。

现在你已经登录到你的网站了，这就是后台管理界面，叫做“仪表盘”。如果你想回到前台，也就是访客看到的页面，你只需要点击上方你的网站名称就能跳转回去。

如果你想再回到后台，有时需要点击刷新按钮，这样页面上方的黑色工具栏就会显示出来。这个工具栏只有你登录后才能看到，访客是看不到的。点击网站名称，就能回到仪表盘。

前后台切换就是这样操作的。

你可能会注意到，如果我们往下滚动页面，会看到很多跳出来的信息。这是因为很多主机服务商会预装很多插件，就像你买了新手机或电脑时，里面会有很多你不需要的应用或程序。其实，很多这些插件都是没必要的，它们只是让网站显得杂乱。

不过插件确实很重要，它们是一些小程序，可以帮你实现某些功能。比如说，WordPress 默认没有联系表单功能，但你可以下载一个免费的插件，这样你的网站就能有联系表单了。再比如，你的网站默认不能自动备份，但你可以下载一个插件来实现备份功能。

然而大部分预装的插件我们并不需要，所以我们第一步就是删除这些不必要的插件。

点击“插件”菜单，然后往下滚动，你会看到所有已经安装的插件。接着我们可以点击顶部的复选框，全选所有插件。然后选择“停用”，再点击“应用”。插件停用之后，再次点击下拉菜单，选择“删除”，然后再次点击“应用”。系统会提示你确认，点击“确定”后，所有插件就被删除了。

现在你回到仪表盘页面，看到界面变得干净整洁多了。

4、删除文章和页面

为了彻底清理我们的网站，我们还需要删除页面和文章。首先，点击你网站的名称，进入前台页面。你会看到一个示例页面，我们没有创建这个示例页面，所以我们需要把它删除。除此之外，我们还会看到一个叫“Hello World”的文章，这是一个博客文章，但我们也没有创建它，所以我们也要删除它。

要删除页面和文章，先回到网站后台，点击“页面”。你会看到这两个页面，选中它们，然后选择“移至回收站”，点击“应用”。接着点击“回收站”，再选中它们，选择“永久删除”，然后点击“应用”。现在页面已经全部删除了。

接着，点击“文章”，找到“Hello World”这篇文章，将鼠标悬停在上面，点击“移至回收站”，然后进入回收站。为了确保网站完全干净，将鼠标悬停在文章上，点击“永久删除”。

现在，如果我们回到网站，你会看到网站变得空白了。虽然现在看起来不是很漂亮，但很快就会好看起来。

我特别喜欢做的一件事是，当我清理完网站后，我会创建一个备份。这样我就可以随时恢复到一个干净的起点，不用担心后续的修改会破坏网站。而且这让我可以自由地进行各种大胆的更改，因为我随时都可以回到之前的状态。

接下来，我们需要下载一个插件来创建备份。首先，点击你网站的名称，回到仪表盘。然后点击“插件”，选择“安装插件”，并搜索你需要的插件。

5、备份插件

A、All-in-One WP Migration and Backup

接下来，我们要安装一个非常厉害的插件。它的名字有点长，但相信我，这是最好的备份插件，叫做“All in One WP Migration”。你会看到它有400多万次的活跃安装，差不多7000个评价，评分是4.5颗星，非常靠谱。

我们只需要点击“立即安装”，它就会被安装到我们的网站上了。安装完成后，点击“激活”，插件就会被激活。现在，在左边菜单栏里，你会发现多了一个“All in One WP Migration”的菜单项，点击它，然后选择“导出到文件”。插件会自动打包所有的内容，然后让我们下载备份。

下载完成后，我会把它拖到桌面上保存。这样，我们就有了一个干净的备份。如果之后我们不小心弄坏了网站，只需要点击“导入”，把桌面上的备份文件拖到这里，网站就能恢复到干净的状态。

备份就像游戏中的存档点，确保你的网站不会丢失进度。

好了，现在我们回到仪表盘。接下来我们要学的是如何更改网站的标题和副标题。在WordPress中，标题和副标题非常重要，因为它们会出现在搜索引擎中，帮助吸引人们点击你的网站。

6、改网站标题

首先，我们点击网站名称进入后台，然后找到“设置”-“常规”。在这里你可以修改你的网站标题和副标题。一般来说，标题应该是你的公司名称，副标题则需要简洁明了地描述你的业务。修改完后，确保电子邮件地址也是正确的，然后点击“保存更改”。

7、安装主题Astra

接下来我们要安装主题。主题决定了你网站的设计样式。我们先看看当前的网站，它使用的是默认主题，看起来非常普通，几乎没有什么设计感。

过去，不同的行业会有不同的主题，比如设计师用设计师主题，营销人员用营销主题，但这种方法已经过时了。现在更流行的是使用一个可以变成任何类型网站的万能主题。我们要安装的就是这种万能主题。

要更改主题，进入仪表盘，点击“外观”-“主题”，然后选择“添加新主题”。在搜索栏输入“Astra”，点击搜索。你会看到Astra这个主题，5星好评非常多。虽然看起来很空，但它是一个基础框架，后面我们可以让它变得非常漂亮。

点击“安装”，然后点击“激活”。现在主题已经激活了，如果你查看网站，虽然它还是空白的，但这个主题可以让我们后续做任何设计，是一个非常灵活的框架。很快，我们就会把它打造成你想要的网站。

8、安装插件 Starter Templates

接下来我们要安装一个可以帮你节省大量时间并让你的网站看起来更专业的插件。

这个插件可以让你导入几乎任何设计作为你网站的起点，然后你可以随意编辑。要做到这一点，只需要把鼠标移到你网站的名字上，点击它，然后往下滚动，点击插件。之后点击“添加新插件”，这就是你给网站添加插件的方式。

接下来在搜索栏里输入“Starter Templates”（初始模板）。你会看到这个插件，已经有超过一百万次的安装和3400多个五星评价。然后点击“立即安装”，安装好之后点击“激活”。

现在，进入“外观”-“Starter Templates”（初始模板），你会看到一个新菜单项，点击它。接着往下滚动，点击“立即构建网站”。这时它会让你选择一个页面构建器，毫无疑问，Elementor是最好的选择，所以我们选择它。

现在你可以看到所有可用的模板了，有些是付费的，但很多是免费的。如果模板上写着“高级版”，那就是付费的。不过我觉得免费的模板已经非常棒了。

找到一个你喜欢的模板后，点击它，你可以预览所有页面，看看它们长什么样。要记住，你可以混合使用不同模板的页面。如果你喜欢一个模板的某个页面，另一个模板的其他页面，我会教你如何混合使用。

如果你不喜欢当前的模板，可以退出继续搜索模板。你也可以在上方的搜索栏搜索模板，叫“Earth”的模板。你可以选择其他模板，但要知道本教程中的操作可能会有点不同，不过你还是能跟着完成。

选好模板后，你可以检查它的主页，向上滚动查看关于页面，服务页面，确保你喜欢这些设计。你还可以查看联系页面，让访客可以通过电子邮件或电话联系你。当然，所有页面你都可以随意更改。

返回主页后，接下来我会教你如何添加或更换你的logo。暂时我们可以点击“跳过并继续”。你还可以根据自己的喜好更改模板中的颜色，整个模板都会随之变化，稍后我会详细教你如何操作。

你也可以更改字体，不过我会先保持默认，稍后我们也可以再改。然后点击“继续”，向下滚动点击“提交并构建我的网站”。

安装模板的时间从20秒到2分钟不等。如果以后你想要更改或者重新安装模板，只需要再次按照这些步骤操作就行。不过要注意，这会覆盖你网站的现有设计。

现在模板正在安装所有设计、需要的插件，比如联系表单，还会调整颜色并优化移动端显示。安装完成后，点击“查看你的网站”。这样你就不用自己从头创建每个页面了，模板提供了一个很好的起点，你可以根据需求随意修改。

接下来，我们要更改网站的主题样式。这样做是为了确保你的网站有一致的字体和颜色风格。我们在之前的部分已经调整了一些内容，不过了解如何以后再次访问这个功能还是很重要的。

9、自定义 改改颜色和字体

这真的非常简单。我们只需要点击页面上方的“自定义”按钮，然后点击“全局设置”（global）。接着，点击“排版”（typography），也就是字体设置。

如果我们往下滚动一点，就可以看到标题字体（heading font），比如这里大大的文字，还有正文字体（body font），也就是像这段话的文字。如果我们想修改标题字体，只需要点击它。

这里有成百上千种字体可以选择。我们只要选中一款，就可以看到标题字体已经改变了。再换一款字体，同样能看到变化效果。

所有标题都会随之更改。正文字体的更改方式也是一样的，只需点击它，然后选择一款新字体，你会看到文字变化了，甚至上面的部分也会改变。但我喜欢“Roboto”字体，所以我会切换回去。

至于颜色设置，只需要点击返回，然后选择“颜色”（colors）。在这里，我们可以调整网站整体的颜色，比如按钮颜色、文本颜色等。你可以尝试调整这些颜色，看看变化效果。如果想恢复默认颜色，只需要点击“重置”（reset）按钮。

另外，你还可以在每个页面上单独调整颜色。如果你希望某个按钮的颜色与整个网站的通用颜色不同，可以为这个页面单独设置颜色。调整好你喜欢的颜色后，点击“发布”（publish），然后点击右上角的“x”退出。

这样，你就完成了整个网站的字体和颜色设置，非常简单！

10、elementor编辑首页

接下来就是你最期待的部分——编辑页面，来让你的网站看起来完全按照你的想法进行设计。

要编辑网站内容，你只需点击“使用Elementor编辑”按钮。Elementor是一个可视化页面编辑器，让你轻松编辑网站。

只要点击页面上的任何元素，然后在左侧输入你自己的内容就行了。比如，点击某个按钮，然后在左边输入你想要的文字内容。你还可以修改按钮的链接，让它跳转到你的“联系”页面。只要点击按钮，然后输入“contact”，它会自动找到联系页面，点击确认后，按钮就会链接到这个页面，访问者点击按钮时就能跳转到联系页面了。

如果你想更换背景图片，也非常简单。点击页面左上角的六个小点，选择“样式”选项，然后点击背景图片进行更换。你可以上传自己喜欢的图片，或者使用一些版权免费的图片网站，比如Pexels、Pixabay或Unsplash。

素材站：

https://www.pexels.com/

https://pixabay.com/

https://unsplash.com/

AI生成图片：
►midjourney
➜https://www.midjourney.com/

► leonardo AI生成图片
➜https://bit.ly/3yTr0LO

► midjourney+ChatGPT 账号合租平台、账号购买
➜https://nf.video/C1dxn

► 办一张国外银行卡
➜https://bewildcard.com/i/19YC7OIQ

提示词： nature (the natural world)

我准备用AI生成大自然的照片，给请5段不同的提示词prompt用于生成AI照片

选好图片后，下载到电脑上，再上传到你的网站。之后，点击“插入媒体”，图片就会替换成功。如果图片上的文字看不清楚，你可以点击文字，进入“样式”选项，修改文字颜色，让它更清晰。

同样地，你也可以为按钮修改颜色，设置鼠标悬停时按钮的颜色变化效果。还可以调整按钮的圆角度数，让它看起来更圆滑，操作非常简单。

如果不喜欢你做的任何修改，按下Ctrl+Z（PC）或Command+Z（Mac），可以快速撤销这些操作。

11、增加内容

还有一个非常酷的功能就是我们可以点击、按住并拖动页面中的任何部分来重新排列它们的位置。

例如，我们可以点击页面左上角的六个小点，按住然后拖动到你想要放置的位置。当看到蓝色线条出现时，松开鼠标，那个部分就被移动到新的位置了。

如果想删除某个部分，只需点击部分旁边的“X”按钮，它就会被删除。此外，每个部分里面可能有不同的列，你也可以点击、按住并拖动这些列，把它们重新安排到想要的位置。如果不想要某个列，可以右键点击列，然后选择“删除”。

当然，你也可以通过按Ctrl+Z（Windows）或Command+Z（Mac）来撤销这些操作，恢复之前的状态。

接下来，我们要学习如何让你的网站看起来更加专业，那就是控制页面的间距。页面间距非常重要，这里有三种方法可以控制它。

第一种方法是点击一个部分，然后在“布局”选项下找到“高度”设置，那里有一个“最小高度”的选项。你可以调整这个部分的高度值，让它变得更大或更小。

第二种方法是通过“高级”选项来控制间距。在这个部分的外部有“边距”，也就是部分外部的空白间距。例如，如果边距设置为80像素，那上下各有80像素的间距。如果设为0，那么页面的内容看起来会很紧凑，而如果设为190，那就会显得过于松散。我们可以将它保持在80像素，让它看起来更好。

第三种方法是通过“内边距”来控制内部的间距。边距是部分外部的空间，而内边距是部分内部的空白间距。例如，如果你将内边距设为0，内部的内容就会挤得很紧，看起来不够舒适。调整内边距可以让内容有更多的呼吸空间。

最后一种方法是使用“空白元素”来控制间距。你可以从工具栏中找到“空白元素”，将它拖动到页面中任意位置，并通过滑动条来调整空白的高度。如果你想删除这个空白元素，只需右键点击并选择“删除”，或者按Ctrl+Z或Command+Z来撤销。

完成编辑后，点击“更新”按钮保存所有更改，接着点击眼睛图标预览你所做的修改效果。这样，你就可以轻松调整页面的布局和间距，让你的网站看起来更加专业！

12、开始设计

现在我们已经完成了所有这些修改，并且知道如何使用间距功能以及更新我们的网站。如果你想创建一个新的部分，只需要向下滚动，鼠标悬停在任意部分上，然后按下这个加号按钮，或者一直滚动到页面底部，按下底部的加号按钮。

接下来，我通常会去其他网站获取一些灵感。举个例子，我喜欢Pixar的网站，所以我会打开一个新标签，进入Pixar的官网，然后点击“短片”或者其他你喜欢的部分。我们可以模仿他们的设计，比如我们复制这里的部分，并从中汲取灵感。你可以对任何网站使用这种方法，从中获取灵感，然后在你自己的网站上进行类似的设计。https://www.pixar.com/

皮克斯动画工作室（Pixar Animation Studios），包括《玩具总动员》、《海底总动员》、《超人总动员》、《飞屋环游记》、《寻梦环游记》和《头脑特工队》

A、新建区块，更换背景图，AI生成图片提示词：pixar

B、上下内内距250，样式显示尺寸为：覆盖。

现在，我们看一下这个部分，它是一整列的，并没有被分成两列或四列。那么，我们可以在自己的网站上添加一个列。只需点击一个列，像这样添加。Pixar网站的这一部分有背景图，我们可以点击六个点，进入样式选项，然后添加一个背景。在背景类型中点击“经典”，然后点击加号添加图片。

你可以去pexels.com、pixabay.com或unsplash.com这些网站，搜索无版权的图片。比如，我们搜索“自然风光”，找到喜欢的图片后，不要选择大文件尺寸，因为大尺寸会让你的网站变慢。选择中等或大尺寸，然后下载并拖动到你的网站，上传并插入媒体文件。

现在，因为这个部分太小，我们还看不到完整的背景图片，所以我们需要去高级设置中，取消内边距的锁定，将顶部和底部的空间分别设置为250像素。这样图片看起来就好多了。但我们仍然看不到全部图片，所以回到样式选项，将图片尺寸设为“覆盖”，这会确保整个图片显示在页面上，没有白边。

接下来我们需要添加一些文字。点击元素图标，拖动标题到中间的列中。把文字居中，然后输入你想要的文字。接着可以调整样式，把文字颜色改为白色，并调整字体大小到50，增加字母间距到6。

如果文字仍然不够清晰，你可以添加背景叠加，点击整个部分，进入样式，选择“背景叠加”，添加一个黑色的叠加，并把透明度设为0.2。这样就能看到文字了。

最后，如果你想让图片在滚动时固定位置（像Pixar网站那样），可以选择背景选项中的“固定”，但我个人更喜欢默认的滚动效果。

通过这些步骤，我们已经从Pixar网站中汲取了灵感，并应用到我们自己的网站上。如果想重新排列部分，只需点击并拖动任何部分到新的位置，看到蓝色线条后松开即可。

接下来，如果你想添加一些简单的文字，比如像Pixar网站上的这些，你可以添加一个新的部分，然后拖动文本编辑器到新列中，输入或粘贴你的内容。为了让文本更易读，你还可以调整页面宽度，增加上下间距。

最后增加间隔线。

13、四列排版

AI生成照片：pixar，比例2：3

https://www.pexels.com/search/nature/?orientation=portrait 选竖比例

接下来，我们要做的就是在你的网站上加入类似的图片展示部分，就像你在Pixar网站上看到的那样，展示不同项目或图片，真的非常简单。

首先，我们可以看到这个部分有一个特点：它是一栏一栏的展示图片。但是，下面的部分有四个小栏目，分别放置四张图片。那么，我们该如何实现这个效果呢？

首先，回到我们自己的网站，选择新增一个部分。你可以点击加号按钮，之后再点击加号。不同于之前选择的单栏，这次我们要选择四栏。这样我们就能在四个不同的栏目中添加内容。

接下来，我们可以把图片部件拖拽到每个栏目里。点击页面左边的“元素”按钮，找到“图片”部件，点击并拖到第一个栏目里。然后，我们回到Pexels.com或者其他版权图片网站，挑选几张你喜欢的图片。我建议选择垂直方向的图片，这样看起来更整齐。下载后，将它们上传到你的网站。

将图片上传到每个栏目后，我们可以调整图片的大小。点击图片，选择“样式”，在高度选项中输入365像素，同时选择“覆盖”模式，这样图片就不会变形。设定好第一个图片后，我们可以右键点击复制，然后粘贴到其他三个栏目中。接着，我们只需更换每个图片即可。

接下来，如果你想在图片下方添加文字，比如在Pixar网站上看到的那种风格，也很简单。点击图片下方，添加一个标题部件，输入文字，比如“丛林”、“河流”等。调整文字的大小、对齐方式以及颜色，让它看起来更专业。

如果你希望复制多个类似的部分，也很简单，右键点击整个部分，选择“复制”，这样你就能快速生成类似的图片展示部分。

完成这些调整后，别忘了在底部留出一些空白空间，以免内容看起来过于紧凑。你可以点击该部分，进入“高级”选项，在底部增加125像素的空间，这样页面就有了更多的呼吸感。

最后，点击更新按钮，保存所有修改，并预览一下你的网站。这样，你就完成了这个非常酷的图片展示部分，利用了Pixar的灵感，却创造出了完全属于你自己的网站风格。

如果一切都满意，别忘了更新保存，这样你所有的修改都将保留下来，完成后可以关闭不必要的标签页。

14、改上面的图片为动画照片

15、历史记录及移动端更改

16、关于我们

A、客户反馈

接下来，我们继续编辑其他页面，比如“关于我们”页面。我们可以像之前一样使用Elementor编辑页面，但其实我们可以利用一个更省时的方法，那就是使用“Blocks”功能。通过它，我们可以快速添加例如“客户评价”或“常见问题解答”等模块，并轻松地进行个性化修改，节省大量时间。

例如，如果你想在页面中加入客户评价，只需点击添加一个区块，然后选择一个合适的客户评价模块，导入后拖动到页面中你想要的位置，之后可以随意编辑内容。

B、常见问题 类似的，你也可以添加常见问题区块，选择模板，轻松调整，让网站更加完整、专业。

这些预设模块不仅操作简单，还会自动适配移动设备，省去你再次调整的麻烦。通过这种方式，你可以快速构建出很多不同风格的网站，极大地提升了工作效率。

17、服务页面

现在我要向你展示另一个节省大量时间的技巧。我们仍然像往常一样点击“Edit with Elementor”进行编辑，当然，你可以像编辑主页或其他页面一样编辑任何内容。

接下来，如果我们一直往下滚动，点击右边的“S”图标，除了导入区块之外，我们这次要导入整个页面模板。你可以从不同的模板中导入任何页面，并且可以自由混搭各种模板。

这真的非常方便！我建议点击页面顶部的“免费（Free）”选项，然后我们可以选择任何免费模板，并将其页面导入到我们的网站中。例如，我们点击“Lotus Spa”模板，可能我们更喜欢它的服务页面，那么我们可以直接选择并点击“导入模板（Import Template）”。

现在模板已经成功导入了。因为我们要用这个新的页面取代原来的页面，所以我们可以将旧的部分删除掉。你只需要逐一点击不需要的部分并删除，比如我们可以删除这个部分，再往上删除一些其他部分，直到只留下我们想要保留的页面内容。

假如这个页面是我们的服务页面，那么我们可以在标题部分输入“服务内容”，并调整页面的布局。我们觉得页面内容显得有点挤了，可以点击页面整体布局，进入“高级设置（Advanced）”，然后增加顶部的间距，比如添加150像素的空间，这样页面看起来就会更舒服。

完成后，点击“更新（Update）”保存修改，并通过点击眼睛图标预览页面。现在，我们的服务页面看起来和原来的模板大不相同了。当然，所有的内容你都可以按照我们在主页上学到的技巧进行替换，比如换掉图片和文本内容。

现在我们已经编辑好了关于我们页面和服务页面，接下来我们来编辑“联系我们”页面。只需点击“联系我们”，继续进入编辑模式即可。

18、联系我们

接下来我要向你展示如何轻松编辑联系页面。我们点击“Edit with Elementor”进入编辑界面，你可以像其他页面一样修改内容。比如，你可以点击邮件部分，将默认的邮箱改成你自己的邮箱，添加你的电话号码或者直接删除电话号码这一部分，同样的操作适用于地址部分。

此外，你可以点击社交媒体图标，添加你自己的社交媒体链接，整个过程非常简单。

接下来，我们可以在页面上添加一个地图。点击“+”号，选择一个一列布局（One Column）。然后点击左边的元素图标，找到“Google Maps”小工具，拖动并放入刚刚创建的列中。你可以在地址栏中输入具体位置，比如“Malibu, California”，然后调整地图的缩放比例或者高度，不过我觉得默认设置已经很不错了。

如果你希望地图能够横跨整个页面，我们可以点击整个地图的部分，设置为“全宽（Full Width）”，这会使地图大部分铺满页面。接着，点击列的设置，在“高级（Advanced）”中将默认的内边距设置为0，这样地图就能完全铺满页面，非常酷。

至于页面上方的联系表单，如何进行编辑呢？点击表单部分，再点击“编辑选定的表单（Edit Selected Form）”，表单其实是通过一个叫“WPForms”的插件生成的，它与Elementor集成在一起，但编辑方式稍有不同。

编辑表单非常简单，比如我们不想询问用户的电话号码，就可以点击电话号码部分，按下删除。如果你想添加其他字段，可以点击左边的字段选项，拖动你需要的项目到表单中。比如，我可以添加一个多选框，拖动到表单的底部，然后点击修改内容，设置问题为“你是如何知道我们的？”，然后添加选项如“Google、社交媒体、朋友介绍”等等。

为了确保表单发送到正确的邮箱，我们可以点击“设置（Settings）”，选择“通知（Notifications）”，确保收件邮箱是你希望收到信息的邮箱。如果你想将信息发送到其他邮箱，可以在这里输入新的邮箱地址。

完成这些设置后，点击保存（Save），退出编辑。现在，你的表单已经更新，你可以点击预览来查看效果，表单已经按我们的设置进行了更新，比如删除了电话号码字段，添加了多选框。

接下来，你可以尝试填写表单，输入姓名、邮箱和信息，选择一个选项，然后点击发送（Send）。提交表单后，你的邮箱将收到一封邮件，显示填写的内容。当你点击回复（Reply）时，它会自动回复到用户填写的邮箱地址。

通过这样的方式，你可以轻松管理你网站上的表单，并确保访客能顺利通过它联系到你。

19、新建页面 项目

接下来我们要讨论如何添加新页面，这个过程非常简单。首先，点击网站名称回到后台管理页面，然后点击“页面（Pages）”，在这里你可以看到所有已经创建的页面。接着，点击“添加新页面（Add New）”，输入页面的名称，比如“项目（Projects）”，当然，你可以根据需要命名这个页面。

完成命名后，点击“使用Elementor编辑（Edit with Elementor）”，因为Elementor是我们的网站可视化编辑工具。进入编辑界面后，页面是空白的，我们可以通过点击页面的图标来导入任何模板或版块。但这里还有一个更高效的方式。

我们可以打开另一个浏览器标签，进入我们的网站主页，然后点击“使用Elementor编辑”。在任何部分上点击右键，选择“复制”，然后回到刚创建的项目页面，右键选择“粘贴”。这样你就可以快速复制之前的设计，节省大量时间。

如果你想复制整个页面，而不是逐个版块复制，你也可以将页面保存为模板。点击“更新”旁边的箭头，选择“保存为模板”，命名为“主页”，然后点击保存。保存完成后，可以在其他页面中导入这个模板，应用到新页面。

接下来，我们进入“我的模板”选项，点击“插入（Insert）”并应用模板，这样整个页面就会被复制过来。如果页面内容有多余的部分，你可以随时删除某些部分，比如说删除无用的版块，只保留需要的内容。

现在我们有了项目页面，但遇到一个小问题：项目页面的标题栏背景是白色的，而不是像主页那样透明。要解决这个问题，点击“编辑页面”，进入Astra主题的“高级设置”，启用透明标题栏，点击更新。刷新页面后，项目页面的标题栏就变成透明的了。

最后，我们要确保用户能够在导航菜单中看到项目页面。返回后台，点击“外观”下的“菜单”，将“项目”页面添加到菜单中，并把它拖动到你想要的位置，然后保存。这样，项目页面就会出现在菜单中。

如果你想让项目成为子菜单，可以将它拖动到其他菜单项下方，并轻微缩进，保存后它就会成为子菜单项。完成后，回到首页，你会看到“关于我们”下有一个下拉菜单，里面包含“项目”页面。

如果你不再需要项目页面，可以在菜单中将它移除，或者完全删除页面。这样，项目页面就会从你的网站中消失。

20、LOGO及图标

首页-自定义-页眉

GPT提示：

pixar风格的logo，logo结合文字windy，请根据这个主题，帮我生成5段提示词prompt，我好用AI图片生成器生成logo图片

请根据以上1-5，分别生成图片

https://logomakr.com/

21、更改导航栏颜色

首页-自定义-页眉

A、改顺序

B、增加按纽

22、改手机logo

A、隐藏控制区和隐藏builder，再显示控制区后更改logo宽度 B、更改手机导航样式，方法和上面一样

C、手机导航下加按纽

22、底部

A、©[current_year] 有风. All right reserved.

B、加logo

23、右上角退出登录

看看访客 看到的效果