WordPress和Elementor搭建公司官网企业网站教程（适合新手！）

为啥偏爱WordPress来搭建商业网站？
说到“商业公司网站”，听起来挺高大上，但其实它涵盖的可广了。咱们来聊聊，用WordPress这个神器，你能捣鼓出哪些炫酷的商业网站！

想给自己整个高大上的官网，没问题！WordPress轻松搞定。在这个教程里，我们拒绝千篇一律，拒绝模板套用。我要教你的是如何用WordPress这个强大的工具，根据自己的兴趣和需求，从零开始设计并搭建出任何类型的商业网站。无论你是想要为自己打造一个展示才华的平台，还是为客户定制一个符合他们品牌形象的网站，WordPress都能满足你的需求。

看完之后，你就能像玩积木一样，随心所欲地搭建自己的商业网站，无论是自用还是为客户打造，都能得心应手，轻松驾驭！

►hostinger 购买网站主机域名 下方链接优惠20%
➜https://bit.ly/47UlunQ

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

有风用到的工具
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
►hostinger 购买网站主机域名 下方链接优惠20%
➜https://bit.ly/47UlunQ

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

► 本期视频文字脚本及建站步骤
➜ https://aiyoufeng.com/design-agency-website

►elementor 注册
➜https://bit.ly/3wzeqQH

► 视频中用到的素材下载
➜ https://drive.google.com/drive/folders/1GLl2R7qSn7WHjh4YrUfAwZrYl4WkQe-6?usp=sharing

►Midjourney
➜https://www.midjourney.com

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

► AI绘画Midjourney手把手教程
➜https://www.youtube.com/watch?v=EfokrVH0Ni8

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

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

► pexels 免费素材下载
➜https://www.pexels.com/

► flaticon图标下载
➜https://flaticon.com/

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

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

►邮件营销及落地页制作
➜getresponse https://bit.ly/3RmFRoG
➜getresponse 邮件营销新手教程
https://www.youtube.com/watch?v=qg4LyrACeAo&t=1667s

本期安装的插件：
elementor，ElementsKit Elementor addons，Jeg Elementor Kit，MetForm – Contact Form

本期视频建站步骤

嘿，大家好！欢迎踏入2024年的WordPress设计课堂，这次咱们来点实在的——打造专业又好看的网站！别担心，零编码、零设计基础也能搞定。

咱们全程用免费主题、Elementor页面构建器，还有一堆实用的免费插件。看完这视频，你不仅能拥有自己的网站，说不定还能开个网页设计公司呢！步骤简单到，我会分享专业设计师的技巧，他们怎么做的，咱们就怎么来。

别担心没素材，我备好了图片和模板，跟着视频一步步来，轻松搞定。最酷的是，咱们做的网站，手机平板都能完美适配，无障碍浏览。来，先看看网站长什么样。

从Logo设计到现代感的首页，手把手教你从零开始。不是那种套模板的哦，咱们要的是独一无二。关于页面、服务页面、作品集，一个不落，连联系表单都配好Google地图，专业范儿十足。

写博客也不在话下，分类、美图、详情，一应俱全。读者还能留言互动！

今天，我把压箱底的技巧都掏出来，保证你学有所成。

好啦，咱们分四步走，先搞定域名和主机。域名就是网址，比如我的,你的也得有，比如https://aiyoufeng.com/。主机呢，就是网站的家，存照片、文字全靠它。

怎么搞定？视频下方链接走起，为啥选它？便宜又快速，口碑杠杠的，多语言支持？

页面可能会变，别怕，正常操作。选计划时，新手我推荐高级或商业版，百个网站随便造，SSD或NVMe存储任选，还有免费SSL、邮箱、域名，一键装WordPress，迁移也免费。安全方面，Hostinger也是杠杠的，Cloudflare、恶意软件扫描器全都有，省心又放心。

2、购买主机及wordpress安装

3、后台设置

A、后台清理干净

B 、删除插件

C、用户里面改密码

D、网站后台和前台

E、首页顶部条只有登录才会看到

F、设置-常规 G、设置-固定链接

H、切换主题，安装hello elementor

I、介绍 注册elementor专业 版价格

J、安装插件elementor，ElementsKit Elementor addons，Jeg Elementor Kit，MetForm – Contact Form

K、启用所有插件

4、首页 简单功能练习

A、删除所有页面 B、新建 首页页面，并设为主页，到首页看看 C、首页使用elementor编辑，左边的工具简单介绍下，专业版也介绍下 D、基础操作：窗口，标题、段落、按纽、边距，最后删除 E、ctrl+Z撤消，ctrl+Y重做 F、增加一个容器，方向栏（下），里面再加一个子容器，

主容器背景颜色浅蓝：#F1F6FF，

子容器背景深点蓝：#8CE9FF

G、子容器—布局—内容宽度-全宽度，宽度300PX ,最小高度150PX H、复制两个子容器，一共有三个，主容器6点-布局：方向右，主轴与副轴对齐：居中，间距改成列和行都是30，方向再改成：向下，中间的子容器再加一个按纽演示 I、删除所有，学习完所有基础知识

5、首页 全局设定

A、顶部中间：设置-页面布局选全宽 B、全局颜色设定：左上角-站点设置，

主要：白 次要：黑 文本：a9adb9 摘要：c4ef17

C、排版：左上角-站点设置， 内容区块

文本颜色：a9adb9

排版：字体大小18 字体粗细：400 行高：28

链接区块 颜色：c4ef17

H1区块 颜色：白色 排版：字体大小50 粗细：700 行高：1.1em

H2区块 颜色：白色 排版：字体大小40 粗细：700 行高：1.1em

H3区块 颜色：白色 排版：字体大小28 粗细：600 行高：1.1em

H4区块 颜色：白色 排版：字体大小24 粗细：600 行高：33PX

H5区块 颜色：白色 粗细：400 大小写转换：大写字母

H6区块 颜色：白色

D、按纽：左上角-站点设置，

排版

标准：字号16，字体粗细600，行高1.2em，颜色c4ef17，圆角全10，内距20 30 20 30

悬停：文本颜色黑，背景色白

F、站点标识：左上角-站点设置，

改下名字为：windy有风

G、背景：左上角-站点设置，

设为黑色

H、布局：左上角-站点设置，

内容宽度：1320 断点：激活断点 加一个笔记本电脑，断点设为1510，保存更新预览下

I、附加设置：禁用默认颜色和字体

6、用户道选项：左上角 三杠

A、画布：显示快捷编辑选项：是

7、顶上中间设置：页面布局：选ele画布

8、首页设计

A、增加一个容器命名为：banner，左边最小高度为100VH，主轴对齐为居中

B、样式：背景类型为幻灯片 https://www.pexels.com/ 下载图片，搜team，先插入两张，时效3000MS，过渡为slide left，过度时间为1000，背景尺寸为覆盖，位置中心居中

C、背景覆盖颜色为黑，不透明度0.8 D、高级设置：内距50 10 10 10

9、点在上角加号，拖标题进容器

A、GPT提示

你现在扮演一名专业的wordpress网站设计专家，我准备做一个关于设计公司的网站，顶部banner区域帮我想一个口号。

设计灵感，赋予每个像素生命，H1，颜色为白，居中，字号80，粗700，行高1.1em，外距0 70 20 70，

B、增加 文本编辑框

GPT提示词： 针对这个口号，再写一份简短的叙述文本 高级 内距：左右各5% 样式：居中，白色，18号，行高28PX，500粗

C、增加容器到文本框下 内容宽度：盒式布局,宽度1320，方向：右箭头，主与副轴为居中。 拖入按纽进去，再复制一个，分别为关于我们、联系我们，在第二个联系我们按纽上，点样式更改悬停，标准为白，悬停为绿#C4EF17，第一个关于我们按纽悬停改为白吧

D、更改移动端 主要是手机端，点第一个按纽，样式 底部内距15，排版 字体大小16，复制样式到第二个按纽，再设下悬停颜色。

10、新增容器：命名为 服务

A、拖入 JKit – Heading，标题Before Focused Title：我们是谁，H5,

Separator:Show Separator关掉

B、title–Concept为hightlight：内容 {{//}} 我们是谁

C、样式：居中对齐，字号16，行高1em

D、Focused Title颜色：c4ef17，字号16，高级 外距下-20

E、拖入 标题， GPT提示： 写一个关于我们是谁的口号

品牌的赋能者，居中，白色，外距下20

11、新 容器：

内容宽度为盒式布局，方向箭头向右，间距30 ，高级 内距10 10 30 10

A、拖入子容器，全宽度，背景色121212，边框圆角全8，高级 内距全40.

B、拖入标题：01，字号50，粗细700，行高50，高级内距：4 25 8 25，定位为绝对，水平方向为右，垂直方向为上，偏移为30，

C、背景：背景类型为渐变，颜色为黑，次要颜色为黑 但透明度为0，角度90. D、拖入 图像框，到01那 才可放入子容器中间，

网页设计，H4 GPT提示： 写一个关于网页设计的口号

创新设计，让您的网站在每一次点击中焕发光彩

样式：左对齐，

图像：宽度60PX

更改图片，到这去下载 https://flaticon.com/

搜 web desigh,改图标颜色为绿：c4ef17

E、里面的子容器 再复制2个

F、选中第一个01，高级-背景 位置为0%，边框圆角上左各8，复制样式到另外两个数字上

G、另外两个内容补全，选中整个容器，高级 内距 110 10 10 10.

H、更改手机端

12、新 容器 ：改名为 作品集

A、高级 内距 10 10 20 10 13、复制 我们是谁区域，改文字：我们的作品 ，每一件作品，都是创意与匠心的结晶 A、拖入新容器在下面，全宽度，高级 内距全为0 B、拖入 图像轮播

AI生成： web design

►Midjourney
➜https://www.midjourney.com

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

► AI绘画Midjourney手把手教程
➜https://www.youtube.com/watch?v=EfokrVH0Ni8

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

C、图像分辨率为原图，幻灯片显示3，滚动1，图像拉伸为是

D、样式：定位颜色为绿#C4EF17，分页里面 尺寸为10PX，颜色白，激活颜色绿#C4EF17

E、样式：图像 图像间距28，圆角10

F、更改手机端 G、复制上面 我们是谁容器的样式，粘贴下来到 作品集

13、计数器 ：新容器

右箭头： 内距 30 10 120 10

A、再拖入一个子容器到里面，再拖入 计数器，开始数字0，结束20，数字前缀1，后缀K，粗细700，行高80PX。样式 数字：文字描边1，颜色白，

B、样式：标题，字号16，粗400，颜色为白

C、点击装计数器的子容器，布局 方向 右箭头，主轴居中，再复制三个计数器 D、点击装计数器的子容器，布局 主轴第4个 E、更改手机端

14、新 容器 下箭头:客户评价

A、样式 背景图片 ，中心居中，背景不重复，显示尺寸为覆盖 B、背景覆盖为渐变，主色黑，次要绿，角度107，不透明度0.7，高级 内距：65 10 140 10，

C、拖入 textimonial GP提示： 写一些客户评价 布局选第5个，更改里面的内容，加头像 https://www.pexels.com/search/profile/ profile 设置里面把：Show Dots 打开，样式 背景类型为透明， Wrapper Content Style：居中，padding全为0.

Description：颜色白，排版 字号28，行高45PX，边距 15 0 40 0.

Quote lcon：颜色为绿，图标大小60，底部边距15，padding wg 50%. Client：字体颜色都改成白 Client image：边框类型为实线，宽度为3 高级 内距：0 10 0 10

C、修改手机端，平板和手机每次只显示一个，内容-设置 slides to show为1. D、文字改为斜体，保存预览，退出

15、关于我们

A、新建页面 关于我们，使用elementor编辑，顶部中间 设置：页面布局为elementor画布。

B、拖入 容器 ：改名为 banner，方向下，主副轴居中，高级 内距：210 10 110 10

C、背景 https://pixabay.com/images/search/team/ 搜team AI生成：team

样式：定位 中心中心，不重复，显示尺寸为覆盖

背景覆盖：黑色，不透明度为0.9.

D、增加文字：关于我们，拖入一个容器到关于我们这几个字下面，全宽度，宽度210PX，方向为右箭头，主副轴为居中，间距为8.

样式：背景色 ffffff1a，边框圆角为10，高级 内距全20.

E、拖入 图标列表 到容器中，

F、删除两个，只留一个，更改文字为首页，图标搜home，布局选三个点（行内）

G、 icon 样式：颜色为白，尺寸为16， 悬停：颜色为绿，水平对齐为左， 文本 样式：字号16，500粗，行高1.2em

文本阴影：标准颜色为白，悬停颜色为绿

H、复制一个，改为关于我们，图标搜arrow I、关于我们 改为 H1

J、导入模板 about

https://drive.google.com/drive/folders/1GLl2R7qSn7WHjh4YrUfAwZrYl4WkQe-6?usp=sharing

左上角站点设计 排版：

平板电脑端全局字体大小：H1为45，H2为38，H3为25，H4为23，

手机端 顶部文字容器 高级 内容 150 10 80 10。

L、所有内容改为中文 GPT提示： 写一个简短的 关于我们 介绍

再来一个短标题

再来几个公司业务的标题

GPT提示2：

请根据以下格式，用中文写一些关键词，不要相同： Portfolio Agency * Creative Agency * Digital Agency * Portfolio Agency * Creative Agency * Digital Agency

M、团队区块：新 容器 下箭头，再把代码拖到 新容器下面，

A、点中团队容器，高级 内距 110 10 100 10 。

B、从首页复制标题过来（我们是谁）并改下文 字内容为，我们的团队、经验丰富的设计师团队

C、拖入新容器 在标题下面，右箭头，间距30，高级 间距 10 10 30 10.再拖入一个子容器进来，高级 间距全0，拖入 图像框。更改里面的内容： GPT提示： 团队成员介绍 用H4

样式：图片位置为上，居中 盒子：图像间距为0 图像：宽度为100%，圆角10PX。 内容-描述：字号16，行高0.1 EM

D 、复制两个，改内容 E、更改手机端 F、回到首页 页面，把最下面的 客户评价 保存为模板，右边三个点可以下载到本地。 再到 关于我们 页面插入客户评价区块，把刚才的自定义CSS代码移到它的下面。 G、保存，退出elementor

16、顶部和底部

A、点elementsKit-下一步 直到完成。

B、点左边 header footer，右上角add new，增加header,Activate/Deactivate打开，打开 开始编辑。把header导入进去。 C、增加菜单:外观-菜单

菜单名称：主菜单 显示位置：标题

D、新建几个页面：联系我们、成功案例、博客、服务，再把这几个加个菜单里面去。再演示增加二级菜单。把刚才的菜单加到header里面去。

E、更改顶部logo及相关文字

制作logo:856X214 https://www.canva.com/

F 、elementsKit 右上角add new，增加footer,Activate/Deactivate打开，打开 开始编辑。把footer导入进去。更改里面的内容。

17、顶部与底部应用到所有页面

A、首页—使用elementor进行编辑，顶部中间设置，布局为elementor全宽

B、更改手机端

C、把其他页面，也改成 布局为elementor全宽

18、把关于我们页面中的，

关于我们的部份，复制到首页 服务下面

19、服务 页面

A、页面布局：elementor全宽。

B、把 关于我们 页面 顶部标题信息容器复制过来

C、新容器 改名为：单个服务，右箭头，间距0，高级 内距 100 10 80 10. 拖入 子容器，全宽度 宽度25%，下箭头， 再拖入一个子子容器，样式-边框为实线，宽度右1，颜色ffffff33,

拖入标题，H4，高级 布局 边距下8， 边框宽度下1，颜色ffffff33,改文字为 服务列表

D、标题下面拖入 按纽：品牌设计，

样式：字号18，700粗，行高1em，背景颜色为透明，文字颜色为白

E、边框类型为实线，边框宽度下1，边框颜色透明，边框圆角全0，内距下2. 悬停：文字颜色为绿，边框为绿。

F、再复制3个出来，改里面的内容，再拖入一个容器在这个列表下面，右箭头，主副轴居中，高级 外距上55，内距上100下100。样式-边框圆角全15PX。 G、拖入 按纽 进去，装按纽的容器加背景图：中心居中，不重复，覆盖。

H、右边： 选中单个服务容器，布局右箭头，拖入新容器在最边，全宽度75%，下箭头，高级 外距 10 10 10 60。

拖入图片，高级 外距下25，

下面拖入 文本框： GPT提示： 服务列表 写个介绍

高级 外距下-5

再拖入：标题 H3 在下面：有问题？为您解答，高级 外距下5. I、拖入 JKit – Accordion： 常见问题模板， 样式-

wrapper下15， title：字号20，行高30PX open color为白，open背景为透明。

open border为实线，边框宽度下1.，open边框颜色：ffffff33，回到上面 open color为绿.

J、close：close颜色为白，透明背景，边框为实线，宽度为1，颜色为ffffff33 ， Description：padding上下15， title：paddding 下15. icon：open的尺寸为14，颜色为绿，close的尺寸为14 颜色为白。边距为内距全为0. 高级 外距：上5下30.

GPT提示： 写一些常见问题

K、拖入 新容器 高级 内距全0。

放入标题：我们的优势，复制有问题为你解决的样式。用H3. 高级 外距下10. 再拖车一个容器，右箭头。高级 内距下45. 放入 图标列表。删除两个，只留一个：丰富行业经验。图标样式搜： check.

样式- 列表：Space Between (首尾无内部等间距)为1. 图标：尺寸20，颜色绿。 文本：字号18，颜色为白。

高级：宽度为自定义50%

再复制两个，共三个，再把整个图标列表区域复制一个。

L、新 容器，右键头，主轴居中。 样式： 边框为实线，宽度上1，颜色为ffffff33.，高级 内距上15. 拖入 图标框，搜 up solid 换一个图标，文字信息：上一个，广告设计

样式： 盒子-图标位置为左，垂直为中间。 图标-颜色为白，悬停为绿，尺寸20px，旋转-45deg。 内容：标题字号和行高为15 颜色为绿，内容字号22 行高24 颜色为白。 复制一个，再选中外面的容器-布局 主轴对齐第4个。 选中第二个 改为 下一个，产品设计 样式-图标位置为右，图标 旋转为45.

M、更改手机端，我们优秀那 高级 自定义高度为100% N、退出elementor，标题改成 品牌设计 O、再次进入 品牌设计页面，全用elemento编辑，右上角倒三角 另存为模板，命名为 单个服务。

20、新页面 产品设计、广告设计、SEO优化

A、导入模板 更改内容即可，加链接，标题加下划线，标题文本颜色改为绿。

B、所有页面改完

C、菜单里面把这些加到服务的二级菜单中去

21、博客 A、复制其他页面的顶部标题过来

B、增加 容器，下箭头。高级 内距 110 10 80 10

C、拖入 JKit – Post Block，只要 meta和title，3列，H4，禁用分类。 Post Meta：Enable Post Meta Author选NO，删除 Meta Date Icon 图标.,，设置 文章数量为6. 样式： post item-column gap为30 thumbail–backgroud overlay渐变”颜色为透明。次要颜色为黑灰色。

thumbail-Container：高度345 Title：margin全0，字号24，行高1.2em。Normal Color为白，悬停为绿。 Post meta：字号16，行高25，颜色为绿。

22、写文章

A、GPT提示

帮我写一篇关于广告设计的标题 写6篇。 B、封面图设为高清：elementor博客页 图像分辨率 设为原图.

C、更改手机端

23、单篇 文章页

（找一个只有标题没有文章的。） A、点开文章 使用elementor编辑。页面为 elementor全宽。

B、导入 singe page模板，更改里面文章

24、联系我们

A、使用elementor编辑，elementor全宽

B、复制 关于我们 顶部进来

C、增加 容器 ，右箭头，

里面再拖入子容器，也是右箭头，背景为黑，边框圆角全25，高级 内距 150 60 60 60, 再拖一个子容器进，复制 关于我们 页面的小标题和大标题进来。

D、拖一个容器 在下面，右箭头，间距15,副轴对齐选第一个 开端。高级 内距下10.

E、拖入 图标，

样式：左对齐，白色，字号26 高级：外距上5，内距16 16 6 16，宽度为行内（auto）

边框：实线，边框宽度全1，颜色绿，圆角为50% 更改图标：搜 phone.

F、右边拖入 一个新 容器。最小高度300PX，高级 内距全0. 拖入标题 H4，高级 外距全0，.更改内容为：0755 87595685， 下面再拖入 文本框：有任何问题，欢迎来电咨询

高级 外距：上-5，下-15

G、选中 装 电话的容器，布局 宽度300PX，最小高度不填。

H、复制一个装电话图标和电话的容器。复制两个，并改里面的内容。

J、拖入 容器在 右边，拖入 metform，新建一个空白表单。 拖入 容器，右箭头，主轴对齐第4个，间距行30。 拖入一个单行文本，内容：显示标签 关闭，名字 mf-name，占位符：名字

样式： 输入-内边距下13，输入框颜色为白，背景色为透明， 边框类型为实线，边框宽度下1，颜色ffffff33 占位符：排版选全局圆球里面的文本，颜色选全局圆球里面的主要。 高级：自定议宽度为50%

K、拖入 email，把name的样式复制过来，再把email显示标签关掉 L、拖 电话，放在email后台，然后选中外面的主容器—布局 换行，显示标签关掉 M、拖入 单行文本，在电话后台，显示标签关掉。样式复制进来。名字 mf-subject，占位符：主题 。

N、在。主题后 拖入 多行文本，样式复制进来

样式： 输入-高度为100，高级 宽度为全宽度 O、插入 按纽 样式： 文字颜色为黑，背景为绿》 内边距：15 30 15 30

P、选中整个容器，高级 内距全为0，更新关闭

25、地图 新容器

右箭头，再加一个 子容器 A、高级 外距上-70，内距全0 B、加入 谷歌地图。高度500. C、选中整个 联系容器，高级 z-index为2

26、更改手机端

A、手机端 表单 高级 内距全25 B、编辑表单，只编辑手机端，选中容器-方向下， C、选中第一个文本 高级 宽度为全宽度，复制格式到下面其他内容上。更新关闭。

27、所有页面看看