网站常见版块与元素的名称
为确保网站设计和开发顺畅，请了解常见页面及元素的名称，以提高沟通效率，避免误解。需要协助修改时，请告知具体的页面 – 版块（一个版块类似一页PPT） – 内容。
常见页面
- Home 首页：通常包含Hero, About, Contact, Products, Posts, Form等版块。
- About us关于我们页面、Contact us联系我们页面
- Single Post 文章详情页：包含一篇文章的完整内容。
- Post Archive 文章列表页：由多篇文章的图片、标题聚合而成的页面。
- 如果安装商城插件Woocommerce，还会有产品详情页和产品列表页。
固定元素（跨页面）
- 顶部导航栏。最基础的元素是网站LOGO和主菜单，也可以包含按钮、联系方式、社媒图标等。如果有多行，请说明要修改第几行的什么内容。
- 底部导航栏。最基础的元素是版权信息Copyrights。可以包含多行多列，可以放网站LOGO、简单介绍、多组链接，联系方式、二维码图片、联系表单、订阅表单等等。修改时请说明要修改第几行第几列的什么内容。
- 悬浮图标。常用来放联系方式，内容、位置、颜色均可调整。
品牌元素
LOGO
格式：最好是去除了背景的PNG图片，在线去背景网站：https://www.remove.bg/。
颜色：最好能够与背景颜色形成鲜明对比——深色背景配浅色LOGO，浅色背景配深色LOGO。
比例：正方形或者长方形均可，比例不限。
大小：为保证清晰度，短边应大于100px。
结构：如果LOGO是图片+文字组合，请优先使用左右结构而非上下结构。在导航栏高度固定的情况下，左右结构的图片位置更充裕。
ICON
显示在浏览器标签栏、书签栏的小图标，方便用户在多个标签/书签中快速识别出您的网站。
比例统一为1:1（正方形），推荐使用去除了背景的PNG图片。可以是图文结构中的图片部份。
导航栏
顶部导航栏菜单
- 常见的顶部导航栏菜单：Home, Products, About, Contact
- 每个菜单项都可以包含多级菜单。技术上菜单层级可以是无限的，实际应用中不建议超过三层——层级越多，用户想找到目标内容的难度越大，搜索引擎爬取难度也越大。
- 产品分类可以直接放在顶部导航栏中，直接放或者增加一行均可。如果想方便访客联系自己，也可以在上方增加一栏，放联系方式，明文或者暗文均可。
顶部导航栏按钮
顶部导航栏按钮由文本和链接组成，常见应用：
- 点击跳转到另外一个页面，可以是多语言站点的另外一种语言。
- 明文显示联系/电话等联系方式，点击启动邮件发送程序或打电话程序。
- 文字显示Send Inquiry/Call us Now，点击启动邮件发送程序或打电话程序。
底部导航栏菜单
通常包含以下内容：
- 品牌LOGO：注意LOGO颜色要与底部导航栏的背景色对比鲜明。
- 公司简介：1~2句话简单说明自己提供的服务或产品。
- 1~3组链接：通常放一组顶部导航栏的一级菜单，放一组产品分类，也可以放别的。
- 联系方式：邮箱、电话、Whatsapp、Skype、WX等，可以贴二维码。
- 版权声明：通常是Copyright © + 年份 + 公司名 + All Rights Reserved，公司名可以换成当前网站的域名，如【Copyright © 2025 wmabby.cn All Rights Reserved】
公司介绍
传统中国工厂只有一篇很长的文字介绍，网站上的公司介绍要转化成多种形式：
- Slogan：通常作为网站副标题或LOGO小字出现，简短易记，如Nike的“Just Do It”。
- 首页首屏：一句话说明自己提供的服务或产品，最好覆盖网站核心关键词。
- 底部导航栏：品牌LOGO下的简介，1~2句话介绍自己的服务或产品。
- 首页About us：3~5句话介绍自己的服务或产品，通常配有图片或者视频。
- About us页面：详细介绍公司的服务或产品，通常将长篇文字中的特点提炼出来，转化为计数器、图标框等形式，以增强可读性和视觉效果。此外，可以结合团队照片、核心成员介绍和公司发展历程的时间线等元素，使页面内容更生动和全面。
首页首屏Hero
用户在访问网站时，通常希望迅速确认（几秒钟）该网站是否包含所需内容。首页首屏的Hero要满足用户的这一需求，否则，用户很可能会选择离开并寻找其他解决方案。
经典搭配：吸睛大标题 + 一句话阐述核心产品/服务的优势 + CTA按钮。
- 业务相关图片/视频可以作为背景，也可以与文字形成左右结构
- 如果做成Slider模式，需控制幻灯片数量和出场顺序，越晚出现的幻灯片展示机会越少。
- 如果网站要做SEO优化或者多语言（要翻译成其它语言），文字要从图片/视频中分离出来。可在屏幕上选中的文字才能被搜索引擎和翻译插件识别。
联系方式
常见类型
显示在独立站上的联系方式有五种类型：
- 邮箱：外贸业务中，涉及合同、付款等关键信息时，通过电子邮件沟通，具有法律效力。
- 即时通讯：外贸企业应提供尽可能全面的选项，以迎合客户的使用习惯，如电话、传真、微信、QQ、Whatsapp、Skype、Messenger、Telegram等等。
- 在线聊天窗口：不需要用户登录任何账号，可以直接在网页上发起会话，通常借助插件实现：常用的有LiveChat、Tidio、Tawk、Zoho SalesIQ等等。
- 社交媒体：Facebook、Twitter、LinkedIn、Instagram等等。
- 留言表单：可绑定SMTP发信插件，把留言表单的信息发送到自己的邮箱。
- 每一种联系方式既可以明文显示（直接显示在屏幕上），也可以暗文显示（只显示按钮/图标，划过时出现账号信息，或者点击时直接跳转）
社交媒体
模板通常自带社媒按钮，建议只保留运营成熟的社交媒体入口。链接获取方法：打开公司/个人主页，从浏览器的地址栏复制，示例样式：https://www.facebook.com/DonaldTrump/。
注意：独立站是私域流量，社媒平台是公域流量，正确的引流方向是从社交媒体向独立站引流，而不是反过来，把自己私有的客户流量拿到平台上去跟同行分享。以Facebook为例：
- 如果访客进入您的Facebook主页后，看到的内容让他关注您并在Facebook上与您互动，进而促进成交转化。这种情况下，值得在独立站留下Facebook的主页链接地址。
- 如果您的Facebook主页空白或无人运营，用户跳转后可能直接流失了，还可能被引导至竞品页面，这种情况下，不应在独立站留下Facebook主页链接。
谷歌地图
在外贸独立站上添加谷歌地图，标示企业自身位置有两种方式：
| 企业地理位置在谷歌地图 | 嵌入方法 |
| 已登记 | 在Elementor Pro的Google Map部件直接输入公司名称 |
| 未登记（现已无法新增） | 自行标记后通过代码嵌入独立站 |
自行标记操作方法如下：
- 打开网址并登录谷歌账号：https://www.google.com/maps/d/
- 点击【Create a new map】按钮新建地图
- 在地图上标记自己的地点 – 点击菜单按钮 – 获取嵌入代码 – 复制代码到自己的网站上
图片尺寸
常规台式电脑屏幕尺寸宽1920px，高1080px。独立站的图片大小参考这一尺寸准备。
| 图片宽度/屏幕宽度 | 全宽 | 1/2 | 1/3 | 1/4 | 1/5 | 1/6 | |
| 图片宽度 | 1920px | 960px | 640px | 480px | 384px | 320px | |
| 图片宽度近似值 | 2000px | 1000px | 500px | ||||
- 最新版的Wordpress可以自动裁剪和适应图片，因此对图片的尺寸要求并不严格。为了方便记忆，全宽图片可按照宽2000px准备，图片占屏幕宽度一半时，可按照宽1000px准备。
- WordPress还可以自动生成多种尺寸的缩略图，我们只需要提供清晰度足够的图片即可。更小的图片WP会自动生成，不需要我们手动裁剪上传。
- 为了保证最佳展示效果，同一组图片的的尺寸应保持一致。比如：如果网站有4个产品类目，这4个产品类目的类目图片尺寸应该是一致的。
Hero全宽图片 高600px~900px
通常出现在网站首页和Landing Page的第一屏，也叫首页大图版块。Hero图片的高度可以自定义，通常在600px~900px之间，如果有多张图片滚动播放，这几张图片的尺寸要一致。
高900px可以覆盖整个版面，让用户把注意力集中在Hero版块。
高600px可以在显示大图的同时，露出下一版块的内容，吸引用户往下翻页。
Banner全宽广告横幅 高300px~500px
经常作为About、Contact等页面的第一个版块出现，比Hero矮一些，偶尔也出现在页中。Banner图片的高度可以自定义，通常在300px~500px之间，如果有多张图片滚动播放，这几张图片的尺寸要一致。
特色图片
在WordPress网站中，Featured Image（特色图片）是用来代表文章、页面或自定义帖子类型的主要视觉元素。它通常显示在文章列表、归档页面、社交媒体分享以及单篇文章的顶部，帮助吸引访客的注意力并提升内容的视觉吸引力。
每篇文章都要准备一张特色图片，整个网站所有文章的特色图片应保护统一比例，统一为16:9、1:1、4:3均可。由Woocomerce创建的产品页面，产品主图就是Featured Image。
