2025年Wix建站教程 – 新手做网站入门指南

在这个视频里，我会一步步教你如何用Wix搭建网站。如果你之前从来没做过这个，可能会觉得有点难。但别担心，其实比你想的要简单得多，特别是有了这个教程。我会手把手带你实操。

看完这个教程后，你就能做出一个即漂亮又专业的网站啦！

►WIX建站
➜https://bit.ly/48FUHhc

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

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

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

►SEMRus网站关键词分析：
➜https://bit.ly/4azZtNQ

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

►办张国外银行卡(用于升级Chat GPT会员)
➜https://bewildcard.com/i/19YC7OIQ

►本期视频文字信息
➜https://aiyoufeng.com/wix-website-tutorials ‎

►chatGPT
➜https://chatgpt.com/

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

好了，废话不多说，直接进入教程吧！我们先从注册页面开始。可以点击下面视频描述里的链接注册）。接下来就进入了初始设置流程。

在这里，我们选择是为自己、公司还是朋友创建网站，然后点击“Continue”（继续）。这一步会进入Wix的AI聊天界面，可以根据你的需求个性化网站设置。不过，这个视频里我们会选择手动设置，跳过AI引导，这样可以对后台有更全面的掌控。

technology company 科技公司

Ecommerce Clothing Store

点击“Set Up Without Chat”（不使用聊天设置）。接着，我们要告诉Wix我们要创建哪种类型的网站。

在这个视频里，我要做一个提供在线AI服务的公司网站，所以我在这里输入“technology company”，然后点击“Continue”。

接下来我们可以选择网站的功能需求。根据前面输入的信息，系统会默认选中一些功能。

最后一步，我勾选“在手机上运行网站”，因为我希望网站在手机上看起来也很棒。然后点击“Finish”完成设置。

2、后台基本设置

好的，现在我们进入了WIX的后台，也就是你网站的管理界面。

在左上角，我们可以看到刚刚创建的网站名称。如果想创建新的网站，可以随时点击“Create new website”（创建新网站）。左侧是网站后台的导航菜单，提供了各种功能和设置。

默认情况下，你会在首页看到一些网站流量和销售的具体数据。如果你在网站上卖东西，这里还能管理发票、订单等。如果是服装网站，还可以管理你的订单信息等。此外，你还能管理收件箱、联系人、使用各种营销功能、查看分析报告以及自动化选项。

不过现在先不用管这些设置，我们先把网站设置好，再回头来看这些功能。所以我们点击页面顶部的“Design site”（设计网站）开始设计。在这里我们有两种选择：

第一，可以使用WIX的AI来根据我们提供的品牌信息自动生成设计；

第二，可以选择一个专业设计的模板，然后根据自己的需求进行个性化修改。我测试过这两种方式，说实话，我更喜欢直接选模板，再根据需求进行个性化定制。每次使用AI生成的网站，感觉效果没有专业模板那么精致。我们都来测试给大家看看。

首先我们用AI来生成看看：

GPT提示1：

服装大牌有哪些

GPT提示2：

https://www.gucci.com/hk 我准备用AI做一个和这个网站相似的站，请你帮我写一段提示词prompt，我用在AI网站生成器里面进行生成网站用。中英文对照

我相信以后AI生成的设计可能会更好，但目前来说，选择模板再进行自定义会让网站看起来更专业。

看完了AI生成的效果，接下来我们来试试手动选模板。需要新建一个站点来测试。

WIX有很多模板可供选择，所以大概率可以找到自己喜欢的。我们点击“Pick a Template”（选择模板）继续。

现在到了选择模板的步骤，这会为网站提供基本的结构和设计，帮助我们更轻松地创建出专业的网站。你可以花点时间浏览模板，找到自己喜欢的，因为一旦选择模板，后面就不能更换了。

最简单的方式是浏览左侧的分类，或者直接在上方的搜索框输入想要的模板类型。在我的例子中，我会输入服装网站“Ecommerce Clothing Store”并按回车。这样，系统会显示适合服装类的网站模板，比如XXX类模板。

我比较喜欢第一个模板。要查看模板详情，只需点击“View”（查看）按钮，然后浏览整个模板，看它是否符合自己理想中的网站样子。所有颜色、图片、文字和字体都可以更改，但我建议尽量选择结构上已经比较符合需求的模板，这样定制时会节省很多时间。我们也可以点击顶部的手机图标，查看该模板在手机端的显示效果。

一旦确定使用这个模板，只需点击右上角的“Edit this site”（编辑这个网站），就会进入WIX的编辑器，可以开始设计网站了。

3、更改模板

好的，首先我喜欢点击右上角的“缩小”按钮，这样可以更好地查看网站的整体布局。目前我们在首页，如果想切换到网站的其他页面，可以点击顶部的页面选项，比如“我们的故事”页面。

我们还可以通过顶部的手机图标查看页面在手机上的布局。不过现在我们先回到桌面视图，然后再切回首页。在左侧的编辑器面板里，有所有定制网站设计的工具，这个视频会讲解大部分工具的用法。

你的网站每个页面都由一个或多个部分组成，比如顶部的第一个部分、关于部分、相册部分、和联系我们部分等。你可以很方便地移动这些部分，例如，如果想把“XX”部分移到底部，只需把鼠标悬停在该部分上，点击向下箭头即可。想撤销某项更改时，只需点击顶部的“撤销”图标，就可以回退到上一步的操作。

在这些部分中有许多元素组成页面内容。要更改这些元素，我们可以放大回到最初的视图，点击相关元素看到蓝色的边框，这代表当前选择的元素。比如要编辑文本，点击元素，然后点击顶部的“编辑文本”，就可以直接输入你想要的内容。我会在这里输入品牌的名称，右侧还有一个菜单，可以更改文本样式、字体、字号等。你可以加粗、倾斜、下划线文本，完成后点击页面空白处即可退出文本编辑。

如果想调整文本位置，只需点击并拖动文本，但要确保文本和其他元素对齐，可以利用网格线对齐。对页面上的任何文本元素操作方法都是类似的：点击文本元素，选择“编辑文本”即可。因为使用的是模板，有些段落是占位文字，所以需要替换为自己的内容。

如果觉得自己写内容有难度，可以试试AI工具。点击AI工具图标，选择“生成新文本”。比如我们可以创建一个关于我们品牌的介绍内容，只需输入“请生成一段关于我们XXX”，然后点击图标生成文本。如果满意内容，可以点击“使用文本”，模板里的占位文字会自动替换为新生成的文本。

网站里还有一个很重要的元素就是按钮，例如这里的按钮。按钮引导用户点击进入其他页面或页面的其他位置。要编辑按钮，只需点击按钮，然后更改文本或设置跳转链接。目前这个按钮跳转到“我们的故事”页面，可以更改跳转目标或链接到网站其他部分，还可以设置其他选项。

更换图片的操作也很简单，点击图片元素，然后选择“更换图片”。你可以上传自己的图片，也可以使用WIX的图片库。比如我想找一张美女的图片，在搜索框输入关键词Beautiful girl.，就会显示各种免费图片，选择合适的图片替换即可。

如果想删除页面中的某个元素，只需将鼠标悬停在元素上，右键点击“删除”。要删除整块部分，右键点击该部分，然后选择“删除”。

现在你已经知道如何定制页面上的现有元素，接下来我们会学习如何向网站添加新的内容。

4、增加区块模板

首先，我们来添加一个全新的版块。要添加版块，先在左侧工具栏中点击“添加版块”。然后滚动到页面中想要添加的位置，我要将新版块添加在“最底部。

在左侧，你会看到很多不同的模板可以选择。如果不想用模板，也可以选择“空白版块”，从头开始设计。不过，我想节省一些时间，因此我会用一个模板。我想在首页添加一个团队介绍的版块，所以选择“团队”，浏览模板。我喜欢第一个模板，点击它，它就会自动添加到我的首页上。我们可以像之前一样编辑这个版块中的元素。

接下来，如果想在这个版块中添加新的元素，可以点击左侧的“添加元素”图标。这里可以看到各种元素，比如我想在这些图片下方添加一个按钮，选择“按钮”，然后选择一个与当前主题一致的按钮样式，将其添加到页面上。

为了给按钮留出空间，我需要先扩大这个版块的高度。拖动下方的边界来增加高度，这样就有了空间可以放置新按钮。然后，点击并拖动按钮将其移动到合适的位置。接着，点击“设置”，修改按钮的文字，并添加链接。在这里，我把按钮链接到“我们的故事”页面，设置完成后点击“完成”。

在添加新元素后，我喜欢点击顶部的“缩小”按钮，查看页面整体效果。我觉得这个新版块融入得不错，只是想微调一下按钮的样式。返回初始视图，点击按钮，选择“设计”，更改按钮的样式。挑选一个我更喜欢的样式，再次缩小查看，现在效果看起来好多了。

接下来，我们来管理网站的不同页面。滚动到顶部导航菜单，这是用户浏览你的网站时用来切换页面的地方。点击“页面和菜单”选项，就可以管理页面了。发现一些页面在我的网站上不需要，比如“在线下单”页面。点击页面旁的三个点，选择“删除”并确认。对不需要的页面重复操作，这样导航菜单中只保留必需的页面。

“我们的故事”和“菜单”都是独立页面，而在“预订”和“联系我们”旁边有一个锚点图标，说明这是首页的特定版块。当用户点击导航菜单中的这些链接时，会自动滚动到首页的相应部分。

要编辑网站的其他页面，只需在“页面和菜单”工具中点击页面名称，比如“我们的故事”页面。进入该页面后，可以点击页面中的元素编辑文本或替换图片，进行任何需要的更改。

如果需要新增一个页面，回到“页面和菜单”工具，点击顶部的“添加页面”。可以选择“空白页面”开始设计，也可以使用模板。我这里举例为网站添加一个展示活动的页面，找到“项目”类的模板，选择合适的模板并点击“添加页面”。

新页面将自动添加到网站，并在导航菜单中出现。我们可以重命名页面为“活动”，然后拖动它在导航菜单中调整顺序，比如把它移到菜单的最后。进入页面后可以自定义内容。

5、联系表单

A、增加一页联系我们页面

B、增加地图：增加元素》联系表单》full width maps

6、顶部

接下来，我们来看如何自定义网站的顶部导航栏，这部分会固定显示在每个页面的最上方。这里我们有一个导航菜单，用户可以用它来浏览你的网站。我们之前已经看过如何在“页面和菜单”中管理这个导航菜单，比如调整菜单的顺序、添加或删除页面等。

现在，我们还可以对导航栏布局进行一些调整，比如添加一个 logo，把导航链接居中，甚至可以添加一些社交媒体的图标。

首先，点击导航栏，再次点击选择含有两个栏的区块，接着点击“管理列”。这里可以看到目前有两列，一左一右。我想再增加一列，所以点击“添加列”。这样一来，就有了三个不同的列：一个宽的在左侧，两个窄的在右侧。我想把宽的列放在中间，因此选择它，然后点击箭头将它移到中间。

关闭设置，然后点击“布局”图标。这里可以调整列的宽度比例。如果你想改变列的宽度，可以在这里进行。我暂时不需要调整，所以关闭设置窗口。不过我注意到导航菜单在右侧有点被遮住了。为了解决这个问题，点击菜单元素，然后将它拖到右边一点，确保整个菜单都能完整显示。

接着，我想在导航栏左侧添加我的 logo。首先点击登录栏，右键点击选择“删除”，因为网站上不需要登录功能。然后点击左上角的“加号”图标，选择“添加元素”，接着选择“图片”并点击“上传图片”。接着把 logo 文件拖到这里并添加到页面。把 logo 调整小一点，然后把它拖动到左侧的列里。

我觉得 logo 可以再小一点。调整好大小后，确保它在中间对齐。

最后，如果需要，可以在导航栏右侧添加社交媒体图标。再次点击“加号”图标，选择“社交”，添加社交媒体链接。我选一个合适的设计，然后把它拖到右侧的列中，再点击“布局”调整图标大小，让它们稍微小一点。确保这些图标也对齐到中间，然后点击“设置社交链接”。

我没有 LinkedIn，所以点击删除，然后删除不需要的 TikTok 和 YouTube 图标。对于剩下的图标，点击每个图标，在这里添加你自己的 Instagram、Facebook、Twitter 等的链接。最后，确保所有元素都在导航栏中对齐整齐。

7、整个网站全局设置

现在，如果你想更改网站的颜色或字体，可以点击“网站设计”。在“颜色主题”下，你可以单独更改每种颜色。只需点击你想修改的颜色，然后直接在这里修改，网站上的变化会实时显示。你也可以返回一步，点击“网站主题”，试试不同的主题，这些主题会在整个网站上统一应用。

就我个人来说，我最喜欢第一个主题，所以我会返回到原来的颜色主题。接下来要修改字体时，回到上一步，选择“文本主题”。这里你可以单独更改每种字体。例如，现在我们有一个标题字体，你可以将其更换为其他字体，整个网站的标题都会更新为新字体，段落字体也是一样的更改方式。

每次更改网站设计时，记得检查手机端的显示效果，确保在小屏幕上也看起来不错。点击右上角的手机图标进入移动视图。马上可以看到，我们的导航栏有点问题，logo 和社交图标重叠了，看起来不太好。

我会通过删除社交图标来修复这个问题，因为空间不够放下两个元素。点击社交图标，然后点击“眼睛”图标，这样就可以在手机端隐藏这个元素。然后稍微增大 logo 的大小，确保它和菜单图标（汉堡图标）对齐，再减少导航栏的高度。

现在效果看起来很好。在手机端所做的更改不会影响桌面端，点击返回桌面视图，可以看到社交图标还在桌面端显示。

建议你先在桌面端做所有更改，这些更改会自动应用到手机端，然后在手机端进行适配优化，确保对齐良好。我们已经修复了导航栏的显示效果。

现在向下滚动页面，看看是否有其他需要优化的地方。大多数元素在手机端已经优化好，因为我们用的是已经过优化的模板。我们手动添加的这个版块也看起来不错，或许可以把按钮的位置稍微调整到下面一些，把这个版块拉大一点，让它看起来更协调。

继续向下滚动到底部，其他内容看起来也不错。手机端的一个特别功能是底部的“快捷操作”按钮。用户可以点击这个按钮，然后选择发送消息、打电话、发送邮件等操作。点击“设置快捷操作”，目前只有聊天功能，这意味着你可以使用 Wix 应用和用户聊天。

你也可以添加更多操作，例如添加电话号码，点击“设置”，输入你的电话号码。这样一来，用户点击电话图标，就可以轻松拨打电话。电子邮件功能的设置方式相似，点击“更多操作”，选择“电子邮件”，然后添加你的电子邮件地址。

好了，现在我们返回到桌面视图。

8、增加APP

现在让我们来看看如何在网站上使用应用程序。

如果你想给网站添加一些特别功能，比如可以预定桌位、安排电话预约、销售商品或在线聊天，你就需要在WIX网站上安装特定的应用。有些应用是WIX自己提供的，还有一些是第三方开发的。比如在这个例子中，我希望用户可以在网站上预订餐桌。

点击这个元素，然后选择“管理预订”，这样就会跳转到后台的“餐桌预订”选项卡。现在我们点击“应用程序”并选择“管理应用程序”，可以看到已经安装的应用，比如WIX的表单和支付、会员区域、WIX提示、餐桌预订等。这些应用是因为我们选择了餐厅网站模板，所以自动安装的。要找到更多应用，我们可以点击“应用市场”。

在WIX应用市场中，你可以找到各种不同的应用程序，比如，如果你希望用户可以预定度假屋，可以搜索“预订”，然后看看有哪些应用可用。有WIX的预订应用、度假屋预订引擎等。应用分为免费和付费两种。返回“管理应用程序”页面，大部分应用需要升级为WIX的付费计划后才能使用，比如这里显示的所有商务应用。

现在关闭这个窗口，回到WIX编辑器。设计好网站后，可以点击“预览”查看实际效果，确保各项功能和链接都正常。检查无误后，点击右上角的“发布”按钮。恭喜你！现在你的网站已经上线，访问者可以浏览。如果想查看自己的网站，点击“查看网站”即可在新标签页中打开。

因为我们使用的是WIX的免费计划，所以网站会发布在一个带有Wix.com的域名上，且无法更换为自定义域名。此外，在网站顶部会一直显示WIX的广告，任何人访问你的网站时都会看到。如果想去掉广告并使用自定义域名，需要升级到付费计划。为此，返回网站编辑器，点击“连接您的域名”。

系统会自动推荐一个域名，你也可以更改并查找其他域名。选择好后，点击“继续”。选择最便宜的计划，每月$11，然后选择年付，并填写付款信息完成支付。

支付完成后，会进入连接域名的页面。建议选择“隐私注册”，这样别人搜索你的域名时不会看到你的名字和地址。点击“继续”并提交购买。现在自定义域名已成功连接到网站。