下面按 `www.el-expert.com` 的风格做一个 Astra 网站：工业服务型官网、白底、黑色文字、黄色强调色、大图轮播、客户 Logo 墙、底部多国家地址。
参考站点首页可见结构包括：语言切换、菜单 `Home / Offers / Realizations / References / Career / Contact`，首屏文案 `Trust our experience`，按钮 `Our offer`，中部有 `OUR EXPERIENCE WITH INSTALLATION`、`REALIZATIONS`、`References` 和客户 Logo 墙。
**一、先准备素材**
你先准备这些文件，后面直接上传：
– `logo.png`：公司 Logo，建议透明背景。
– `hero-1.jpg`、`hero-2.jpg`、`hero-3.jpg`：工业、电气、机械安装、工厂、设备类大图。
– `realizations.jpg`：项目案例背景图。
– 客户 Logo：建议 8 到 12 个，统一做成黑白或灰色。
– 公司地址、电话、邮箱、WhatsApp、LinkedIn。
– 首页文案：一句主标题、一段介绍、几个服务项目。
如果你没有图片，可以先用工厂、电气柜、设备安装、自动化产线这类图片替代。
**二、安装主题和插件**
1. 登录 WordPress 后台。
2. 点 `外观 > 主题 > 添加新主题`。
3. 搜索 `Astra`。
4. 点 `安装`。
5. 点 `启用`。
6. 点 `插件 > 安装插件`。
7. 搜索并安装这些插件：
– `Spectra`
– `Starter Templates`
– `Smart Slider 3`
– `WPForms`
– `Rank Math SEO`
8. 安装后全部点 `启用`。
如果你更习惯拖拽页面，也可以把 `Spectra` 换成 `Elementor`。傻瓜式操作我更建议用 `Spectra + Gutenberg`，后台更轻。
**三、设置 Astra 全局样式**
进入 `外观 > 自定义`。
1. 点 `Global > Colors`。
2. 设置颜色：
– 主色：`#f5b400`
– 文字深色：`#111111`
– 正文灰色：`#666666`
– 背景白色：`#ffffff`
– 页脚黑色：`#101010`
3. 点 `Global > Typography`。
4. 设置字体：
– Body 字体：`Arial` 或 `Inter`
– Heading 字体：`Arial` 或 `Montserrat`
– 正文字号：`16px`
– H1：桌面 `58px`，手机 `36px`
– H2：桌面 `36px`，手机 `28px`
5. 点 `Global > Buttons`。
6. 设置按钮：
– 背景色：`#f5b400`
– 文字色：`#111111`
– 圆角：`0px` 或 `3px`
– Padding：上下一般 `14px`，左右 `32px`
这个站的感觉不是圆润可爱型，而是工业商务型，所以圆角不要太大。
**四、设置网站宽度**
进入 `外观 > 自定义 > Global > Container`。
1. Container Layout 选 `Full Width / Contained`。
2. Site Layout 选 `Full Width`。
3. Container Width 设置 `1200px`。
4. 页面内容尽量用全宽区块，内部容器控制在 `1140px` 到 `1200px`。
**五、制作顶部 Header**
进入 `外观 > 自定义 > Header Builder`。
1. 第一行 Header：
– 左边放语言：`EN | DK | SE`
– 右边可以放邮箱或 LinkedIn。
– 背景色：`#ffffff`
– 高度：`36px`
– 字号：`13px`
2. 主 Header：
– 左边放 Logo。
– 右边放菜单。
– 背景色：白色。
– 高度：`82px`
3. 菜单文字设置：
– 颜色：`#111111`
– Hover 颜色：`#f5b400`
– 字号：`15px`
– 字重：`600`
4. 菜单内容设置为：
– Home
– Offers
– Realizations
– References
– Career
– Contact
如果你做中文站，可以改成：
– 首页
– 服务范围
– 项目案例
– 合作客户
– 招聘
– 联系我们
**六、创建菜单**
1. 点 `外观 > 菜单`。
2. 创建菜单，名字写 `Main Menu`。
3. 添加这些页面：
– 首页
– 服务范围
– 项目案例
– 合作客户
– 招聘
– 联系我们
4. 勾选 `Primary Menu`。
5. 点 `保存菜单`。
**七、创建首页**
1. 点 `页面 > 新建页面`。
2. 标题写 `首页`。
3. 右侧模板选择：
– `Full Width`
– 关闭 Sidebar
– 关闭 Page Title
4. 点 `发布`。
5. 进入 `设置 > 阅读`。
6. 首页显示选择 `一个静态页面`。
7. 主页选择 `首页`。
8. 保存。
**八、做首页首屏轮播**
用 `Smart Slider 3`。
1. 点 `Smart Slider > New Project`。
2. 选择 `Create a New Project`。
3. 类型选 `Slider`。
4. 尺寸设置：
– Width：`1920`
– Height：`780`
5. 新建 3 个 Slide。
6. 每个 Slide 上传一张工业大图。
7. 每个 Slide 添加文字：
– 小字：`Full 1` 或改成你的业务标签
– 大标题：`Trust our experience`
– 描述：`We specialize in electrical installations and mechanical assembly for automation equipment.`
– 按钮：`Our offer`
8. 按钮链接到 `/offers/` 或 `/services/`。
9. 文字位置放左侧偏中。
10. 给图片加暗色遮罩，透明度 `35%` 到 `45%`。
11. 保存后复制 Shortcode。
12. 回到首页编辑，把 Shortcode 放到最上方。
中文文案可以这样写：
– 小字：`Industrial Installation`
– 大标题：`Trust our experience`
– 副标题：`专注工业电气安装、自动化设备装配与现场调试服务`
– 按钮：`查看服务`
**九、做“经验介绍”区块**
在首页轮播下面添加一个区块。
1. 添加 `Container`。
2. 背景色选白色。
3. 上下 Padding 设置 `80px`。
4. 添加两列：
– 左列放标题。
– 右列放介绍文字。
5. 左侧标题写：
– `OUR EXPERIENCE WITH INSTALLATION`
6. 右侧文字写：
– `We provide professional electrical installation and mechanical assembly services for industrial automation projects.`
7. 标题颜色用黑色。
8. 在标题下面加一条黄色短线：
– 宽度 `70px`
– 高度 `4px`
– 颜色 `#f5b400`
中文版本：
标题：`我们的工业安装经验`
正文：`我们为自动化设备、电气系统和机械装配项目提供专业的现场安装、调试和项目支持服务。`
**十、做服务项目区块**
1. 添加新 `Container`。
2. 背景色：`#f7f7f7`。
3. Padding：上下 `80px`。
4. 添加标题：`OFFERS` 或 `服务范围`。
5. 添加 3 列卡片。
6. 每张卡片包含：
– 图片
– 标题
– 简短说明
– `Read more` 按钮
7. 三个服务建议：
– Electrical Installation
– Mechanical Assembly
– Automation Support
中文可写：
– 电气安装：电柜接线、现场布线、设备电气连接。
– 机械装配：自动化设备组装、输送线安装、结构件装配。
– 项目支持：现场调试、安装管理、技术人员派遣。
卡片样式：
– 背景白色
– 边框 `#e5e5e5`
– 圆角 `0px`
– 图片比例统一
– 按钮用黄色
**十一、做 Realizations 案例区**
这个部分要模仿目标站的项目展示感觉。
1. 添加 `Cover` 或 `Container`。
2. 背景图选择 `realizations.jpg`。
3. 设置高度 `420px` 到 `520px`。
4. 加黑色遮罩，透明度 `45%`。
5. 文字居中。
6. 标题写：`REALIZATIONS`。
7. 正文写：
– `For us the most important is the satisfaction of our customers.`
8. 按钮写：`See our realizations`。
9. 按钮链接到项目案例页面。
10. 标题白色，按钮黄色。
中文版本：
– 标题：`项目案例`
– 正文：`客户满意度是我们最重要的目标，我们以灵活服务和专业执行交付每一个项目。`
– 按钮：`查看案例`
**十二、做 References 客户 Logo 墙**
1. 添加新 `Container`。
2. 背景白色。
3. Padding：上下 `80px`。
4. 添加标题：`References`。
5. 添加副标题：
– `We provide professional assistance to industry all over the world`
6. 添加 Logo 网格。
7. 桌面设置 6 列。
8. 平板设置 3 列。
9. 手机设置 2 列。
10. Logo 图片统一宽度 `120px` 到 `160px`。
11. 建议全部处理成灰色或黑白。
12. 最下面加按钮：`See all references`。
中文版本：
– 标题：`合作客户`
– 副标题：`我们为全球工业客户提供专业的项目支持`
– 按钮：`查看全部客户`
**十三、做 Footer 页脚**
进入 `外观 > 自定义 > Footer Builder`。
1. Footer 背景色设置 `#101010`。
2. 文字色设置 `#cccccc`。
3. 链接 Hover 设置黄色 `#f5b400`。
4. 分成 4 列：
– 第 1 列：Logo + 简介
– 第 2 列：菜单
– 第 3 列：中国地址
– 第 4 列：海外地址/联系方式
5. 底部版权写：
– `© 2026 Company Name. All rights reserved.`
参考站页脚有 Poland、Norway、Denmark 多个地址，你可以改成：
– China
– Europe Office
– Sales Contact
– LinkedIn
**十四、创建其他页面**
你至少需要这些页面：
1. `Offers / 服务范围`
– 页面顶部大图 Banner。
– 下方放 3 到 6 个服务项目。
– 每个服务：图片、标题、说明、应用行业。
2. `Realizations / 项目案例`
– 案例列表。
– 每个案例放图片、国家、项目类型、服务内容。
3. `References / 合作客户`
– 客户 Logo 墙。
– 可加行业分类。
4. `Career / 招聘`
– 招聘岗位。
– 联系邮箱。
5. `Contact / 联系我们`
– 联系表单。
– 地址。
– 邮箱。
– 电话。
– Google Map 或百度地图。
**十五、联系表单**
1. 点 `WPForms > Add New`。
2. 选择 `Simple Contact Form`。
3. 字段保留：
– Name
– Email
– Company
– Message
4. 按钮文字改成：
– `Send message`
– 中文：`提交询盘`
5. 保存表单。
6. 复制 Shortcode。
7. 放到 Contact 页面。
**十六、移动端检查**
进入首页编辑器右上角预览模式。
1. 桌面端检查：
– 首屏高度是否大气。
– 菜单是否一行显示。
– Logo 是否清楚。
2. 平板端检查：
– 服务卡片是否变成 2 列。
3. 手机端检查：
– 首屏标题不要超过 3 行。
– 按钮不能太宽。
– Logo 墙改成 2 列。
– 菜单变成汉堡按钮。
**十七、额外 CSS**
进入 `外观 > 自定义 > 额外 CSS`，粘贴：
“`css
:root {
–brand-yellow: #f5b400;
–brand-black: #111111;
–brand-gray: #666666;
–brand-light: #f7f7f7;
}
body {
letter-spacing: 0;
}
.main-header-menu .menu-link {
font-weight: 600;
text-transform: none;
}
.main-header-menu .menu-link:hover {
color: var(–brand-yellow);
}
.wp-block-button__link,
.elementor-button,
.uagb-buttons-repeater {
border-radius: 0;
font-weight: 700;
text-transform: uppercase;
}
.industry-card {
border: 1px solid #e5e5e5;
background: #ffffff;
transition: transform .2s ease, box-shadow .2s ease;
}
.industry-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(0,0,0,.08);
}
.reference-logo img {
max-height: 70px;
width: auto;
filter: grayscale(100%);
opacity: .75;
transition: opacity .2s ease, filter .2s ease;
}
.reference-logo img:hover {
filter: grayscale(0%);
opacity: 1;
}
.site-footer {
font-size: 14px;
}
“`
**十八、上线前必做**
1. 所有图片压缩成 WebP。
2. 首页大图不要超过 `300KB` 到 `500KB`。
3. 设置固定链接：`设置 > 固定链接 > 文章名`。
4. 每个页面设置 SEO 标题和描述。
5. 测试联系表单能不能收到邮件。
6. 手机端完整看一遍。
7. 安装缓存插件。
8. 备份网站。
**最简单的页面顺序**
你按这个顺序做，最不容易乱：
1. 安装 Astra。
2. 安装插件。
3. 设置颜色和字体。
4. 设置 Header。
5. 设置 Footer。
6. 新建首页。
7. 做首屏轮播。
8. 做服务区块。
9. 做案例区块。
10. 做客户 Logo 墙。
11. 做联系页面。
12. 检查手机端。
13. 上线。
你要模仿的是它的“结构和感觉”，不要一比一复制图片、Logo、客户商标和文字。最关键是保留：白底、黑字、黄色按钮、大工业图、简洁导航、案例背景图、客户 Logo 墙。
下面按“从零开始”的方式写。你照着后台一步步点，就能做出类似 [EL-Expert](https://www.el-expert.com/) 的 Astra 工业风官网：白底、黑字、黄色强调、大图轮播、服务区、案例区、客户 Logo 墙、深色页脚。
**最终效果结构**
– 顶部：Logo + 菜单 + 语言切换
– 首页首屏：工业大图轮播 + 大标题 + 黄色按钮
– 中部：公司经验介绍
– 服务区：3 个服务卡片
– 案例区：深色图片背景 + 按钮
– 客户区：客户 Logo 墙
– 底部：公司信息 + 地址 + 联系方式
**第 1 步：安装 Astra 主题**
1. 登录 WordPress 后台。
2. 点击左侧 `外观`。
3. 点击 `主题`。
4. 点击顶部 `添加新主题`。
5. 搜索 `Astra`。
6. 点击 `安装`。
7. 安装完成后点击 `启用`。
**第 2 步：安装需要的插件**
1. 点击左侧 `插件`。
2. 点击 `安装插件`。
3. 分别搜索并安装这些插件：
– `Spectra`
– `Smart Slider 3`
– `WPForms`
– `Rank Math SEO`
4. 每安装一个，都点击 `启用`。
用途说明：
– `Spectra`：做页面区块。
– `Smart Slider 3`：做首页大图轮播。
– `WPForms`：做联系表单。
– `Rank Math SEO`：做搜索优化。
**第 3 步：设置网站基础信息**
1. 点击 `设置`。
2. 点击 `常规`。
3. 网站标题填写你的公司名，例如：`XXX Industrial Installation`。
4. 副标题填写业务说明，例如：`Electrical Installation and Mechanical Assembly`。
5. 点击 `保存更改`。
然后设置链接：
1. 点击 `设置`。
2. 点击 `固定链接`。
3. 选择 `文章名`。
4. 点击 `保存更改`。
**第 4 步：设置 Astra 全局颜色**
1. 点击 `外观`。
2. 点击 `自定义`。
3. 点击 `Global`。
4. 点击 `Colors`。
5. 设置颜色：
– 主色：`#f5b400`
– 标题颜色：`#111111`
– 正文颜色：`#666666`
– 背景色：`#ffffff`
– 浅灰背景：`#f7f7f7`
6. 点击 `发布`。
这个黄色就是模仿目标网站的重点色，用在按钮、短线、菜单 hover 上。
**第 5 步：设置字体**
1. 仍然在 `外观 > 自定义`。
2. 点击 `Global`。
3. 点击 `Typography`。
4. Body 字体选择：
– 英文站：`Arial`、`Inter` 或 `Roboto`
– 中文站：`Microsoft YaHei` 或 `Noto Sans SC`
5. Body 字号设置 `16px`。
6. Heading 字体选择 `Arial`、`Montserrat` 或 `Inter`。
7. H1 设置：
– 桌面：`56px`
– 平板：`42px`
– 手机：`34px`
8. H2 设置：
– 桌面：`36px`
– 手机：`28px`
9. 点击 `发布`。
**第 6 步：设置按钮样式**
1. 进入 `外观 > 自定义`。
2. 点击 `Global`。
3. 点击 `Buttons`。
4. Button Background 设置 `#f5b400`。
5. Button Text 设置 `#111111`。
6. Border Radius 设置 `0px` 或 `3px`。
7. Padding 设置：
– 上下：`14px`
– 左右：`32px`
8. 字体粗细设置 `700`。
9. 点击 `发布`。
工业风网站按钮不要太圆，方一点更接近目标站。
**第 7 步：创建页面**
1. 点击左侧 `页面`。
2. 点击 `新建页面`。
3. 依次创建这些页面：
– `Home`
– `Offers`
– `Realizations`
– `References`
– `Career`
– `Contact`
4. 如果做中文站，就创建：
– `首页`
– `服务范围`
– `项目案例`
– `合作客户`
– `招聘`
– `联系我们`
每个页面创建后先直接点击 `发布`。
**第 8 步：设置首页**
1. 点击 `设置`。
2. 点击 `阅读`。
3. 找到 `您的主页显示`。
4. 选择 `一个静态页面`。
5. 主页选择 `Home` 或 `首页`。
6. 点击 `保存更改`。
**第 9 步：创建顶部菜单**
1. 点击 `外观`。
2. 点击 `菜单`。
3. 菜单名称填写 `Main Menu`。
4. 点击 `创建菜单`。
5. 左侧勾选这些页面：
– Home
– Offers
– Realizations
– References
– Career
– Contact
6. 点击 `添加到菜单`。
7. 菜单位置勾选 `Primary Menu`。
8. 点击 `保存菜单`。
中文站菜单：
– 首页
– 服务范围
– 项目案例
– 合作客户
– 招聘
– 联系我们
**第 10 步：设置 Header 顶部**
1. 点击 `外观 > 自定义`。
2. 点击 `Header Builder`。
3. 左侧放 `Site Identity`。
4. 上传你的 Logo。
5. Logo 宽度设置 `150px` 到 `190px`。
6. 中间或右侧放 `Primary Menu`。
7. 菜单字体颜色设置 `#111111`。
8. 菜单 hover 颜色设置 `#f5b400`。
9. Header 背景设置 `#ffffff`。
10. Header 高度设置大约 `80px`。
11. 点击 `发布`。
如果想加语言切换：
1. 在 Header Builder 的上面一行添加 `HTML 1`。
2. 内容写：`EN | CN | DE`。
3. 字号设置 `13px`。
4. 放在右上角。
**第 11 步：制作首页大图轮播**
1. 点击左侧 `Smart Slider`。
2. 点击 `New Project`。
3. 选择 `Create a New Project`。
4. 类型选 `Slider`。
5. 宽度填 `1920`。
6. 高度填 `780`。
7. 点击 `Create`。
8. 点击 `Add Slide`。
9. 上传第一张工业大图。
10. 在图片上添加文字：
– 小标题：`Industrial Installation`
– 大标题：`Trust our experience`
– 描述：`Professional electrical installation and mechanical assembly services.`
– 按钮：`Our offer`
11. 按钮链接填写 `/offers/`。
12. 给背景图添加黑色遮罩，透明度设置 `35%` 到 `45%`。
13. 再添加第 2 张、第 3 张轮播图。
14. 保存。
15. 复制 Smart Slider 的 shortcode，例如 `[smartslider3 slider=”2″]`。
**第 12 步：把轮播放到首页**
1. 点击 `页面`。
2. 找到 `Home` 或 `首页`。
3. 点击 `编辑`。
4. 删除默认内容。
5. 添加一个 `Shortcode` 区块。
6. 粘贴 Smart Slider shortcode。
7. 点击 `更新`。
现在首页顶部就有类似目标网站的大图轮播。
**第 13 步：做“经验介绍”区**
1. 继续编辑首页。
2. 在轮播下面点击 `+`。
3. 添加 `Spectra Container`。
4. 宽度选择 `Contained`。
5. Padding 设置：
– 上：`80px`
– 下：`80px`
6. 添加两列布局。
7. 左列添加标题：
– 英文：`OUR EXPERIENCE WITH INSTALLATION`
– 中文：`我们的工业安装经验`
8. 标题下面添加一条黄色短线：
– 宽度：`70px`
– 高度：`4px`
– 颜色：`#f5b400`
9. 右列添加正文：
– `We provide professional electrical installation, mechanical assembly and automation support for industrial projects.`
10. 中文可以写：
– `我们为工业自动化项目提供电气安装、机械装配、现场调试和项目支持服务。`
11. 点击 `更新`。
**第 14 步：做服务区 Offers**
1. 在经验介绍下面添加新的 `Container`。
2. 背景色设置 `#f7f7f7`。
3. Padding 设置上下 `80px`。
4. 添加标题：
– `OFFERS`
– 中文：`服务范围`
5. 标题居中。
6. 添加 3 列布局。
7. 每一列添加图片、标题、文字、按钮。
三张卡片内容建议：
第一张：
– 标题：`Electrical Installation`
– 中文：`电气安装`
– 说明：`Control cabinet wiring, field cabling and machine electrical connection.`
第二张：
– 标题：`Mechanical Assembly`
– 中文：`机械装配`
– 说明：`Assembly of automation equipment, production lines and industrial systems.`
第三张：
– 标题：`Automation Support`
– 中文：`自动化项目支持`
– 说明：`On-site commissioning, installation supervision and technical support.`
卡片样式：
– 背景：白色
– 边框：`#e5e5e5`
– 圆角：`0px`
– 图片比例统一
– 按钮颜色：黄色
**第 15 步：做 Realizations 案例大图区**
1. 在服务区下面添加 `Cover` 或 `Container`。
2. 背景图片上传一张工厂/设备/项目现场图。
3. 高度设置 `460px`。
4. 添加黑色遮罩，透明度 `45%`。
5. 文字居中。
6. 标题写：
– `REALIZATIONS`
– 中文：`项目案例`
7. 正文写：
– `For us the most important is the satisfaction of our customers.`
8. 中文可以写：
– `客户满意度是我们最重要的目标，我们用专业执行交付每一个项目。`
9. 添加黄色按钮：
– `See our realizations`
– 中文：`查看案例`
10. 链接到 `/realizations/` 或 `/项目案例/`。
11. 点击 `更新`。
**第 16 步：做 References 客户 Logo 墙**
1. 在案例区下面添加 `Container`。
2. 背景色设置白色。
3. Padding 设置上下 `80px`。
4. 添加标题：
– `References`
– 中文：`合作客户`
5. 添加副标题：
– `We provide professional assistance to industry all over the world.`
6. 中文：
– `我们为全球工业客户提供专业的项目支持。`
7. 添加图片网格。
8. 上传客户 Logo。
9. 桌面设置 `6列`。
10. 平板设置 `3列`。
11. 手机设置 `2列`。
12. Logo 图片宽度控制在 `120px` 到 `160px`。
13. 点击 `更新`。
注意：不要直接使用目标网站的客户 Logo，除非你确实有合作授权。
**第 17 步：设置 Footer 页脚**
1. 点击 `外观 > 自定义`。
2. 点击 `Footer Builder`。
3. Footer 背景色设置 `#101010`。
4. 文字颜色设置 `#cccccc`。
5. 链接 hover 颜色设置 `#f5b400`。
6. 添加 4 列内容。
第 1 列：
– 公司 Logo
– 简介：`Professional industrial installation and automation support services.`
第 2 列：
– 标题：`Menu`
– Home
– Offers
– Realizations
– References
– Contact
第 3 列：
– 标题：`Contact`
– Email
– Phone
– WhatsApp
第 4 列：
– 标题：`Address`
– China Office
– Europe Office
– LinkedIn
7. 底部版权写：
– `© 2026 Your Company Name. All rights reserved.`
8. 点击 `发布`。
**第 18 步：做 Contact 联系页面**
1. 点击 `WPForms`。
2. 点击 `Add New`。
3. 选择 `Simple Contact Form`。
4. 表单字段保留：
– Name
– Email
– Company
– Message
5. 按钮文字改成：
– `Send message`
– 中文：`提交询盘`
6. 保存表单。
7. 复制 shortcode。
8. 打开 `Contact` 页面。
9. 添加两列布局：
– 左边放联系信息
– 右边放表单 shortcode
10. 点击 `更新`。
**第 19 步：做 Offers 服务页面**
1. 打开 `Offers` 页面。
2. 顶部添加大图 Banner。
3. 标题写 `OFFERS` 或 `服务范围`。
4. 添加 3 到 6 个服务模块。
5. 每个服务模块包含：
– 图片
– 标题
– 服务说明
– 应用场景
6. 最底部添加 CTA：
– `Need installation support? Contact us.`
– 中文：`需要工业安装支持？联系我们获取方案。`
**第 20 步：做 Realizations 案例页面**
1. 打开 `Realizations` 页面。
2. 顶部添加 Banner。
3. 添加案例网格，建议 3 列。
4. 每个案例包含：
– 项目图片
– 国家/地区
– 项目类型
– 服务内容
5. 示例：
– `Automated Production Line Installation`
– `Electrical Cabinet Wiring`
– `Mechanical Assembly for Industrial Equipment`
**第 21 步：做 References 页面**
1. 打开 `References` 页面。
2. 顶部添加标题 `References`。
3. 添加客户 Logo 网格。
4. 可以按行业分组：
– Automation
– Manufacturing
– Energy
– Machinery
5. 保持页面简洁，不要放太多文字。
**第 22 步：做 Career 招聘页面**
1. 打开 `Career` 页面。
2. 标题写 `Career` 或 `招聘`。
3. 添加岗位：
– Electrical Installer
– Mechanical Fitter
– Project Coordinator
4. 每个岗位写：
– 工作地点
– 工作内容
– 基本要求
– 联系邮箱
5. 添加按钮：`Apply Now`。
**第 23 步：添加额外 CSS**
1. 点击 `外观 > 自定义`。
2. 点击 `额外 CSS`。
3. 粘贴下面代码：
“`css
:root {
–brand-yellow: #f5b400;
–brand-black: #111111;
–brand-gray: #666666;
–brand-light: #f7f7f7;
}
body {
letter-spacing: 0;
}
.main-header-menu .menu-link {
font-weight: 600;
}
.main-header-menu .menu-link:hover {
color: var(–brand-yellow);
}
.wp-block-button__link,
.elementor-button,
.uagb-buttons-repeater {
border-radius: 0;
font-weight: 700;
text-transform: uppercase;
}
.industry-card {
border: 1px solid #e5e5e5;
background: #ffffff;
transition: transform .2s ease, box-shadow .2s ease;
}
.industry-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(0,0,0,.08);
}
.reference-logo img {
max-height: 70px;
width: auto;
filter: grayscale(100%);
opacity: .75;
transition: opacity .2s ease, filter .2s ease;
}
.reference-logo img:hover {
filter: grayscale(0%);
opacity: 1;
}
.site-footer {
font-size: 14px;
}
“`
4. 点击 `发布`。
**第 24 步：检查手机端**
1. 打开首页编辑页面。
2. 点击预览。
3. 分别查看桌面、平板、手机。
4. 手机端重点检查：
– Logo 是否太大
– 菜单是否变成汉堡菜单
– 首页大标题是否超过 3 行
– 服务卡片是否一列显示
– Logo 墙是否两列显示
– 按钮文字是否换行难看
如果手机首屏标题太大，把 H1 手机字号改成 `32px`。
**第 25 步：上线前检查**
1. 所有图片压缩成 WebP。
2. 首页大图单张最好小于 `500KB`。
3. 检查所有按钮链接是否正确。
4. 测试联系表单能否收到邮件。
5. 设置 SEO 标题和描述。
6. 安装缓存插件，例如 `LiteSpeed Cache`。
7. 清理不用的插件。
8. 备份网站。
**你照着做的最短顺序**
1. 装 Astra。
2. 装 Spectra、Smart Slider 3、WPForms。
3. 建 6 个页面。
4. 设置首页。
5. 设置菜单。
6. 设置 Header。
7. 设置 Footer。
8. 用 Smart Slider 做首屏。
9. 首页添加经验区、服务区、案例区、客户 Logo 墙。
10. 做联系页面。
11. 检查手机端。
12. 上线。
核心记住这几个值：主色 `#f5b400`，黑色 `#111111`，浅灰背景 `#f7f7f7`，按钮方角，大图首屏，客户 Logo 墙。这样做出来就会接近 EL-Expert 的工业官网风格。