从零开始建外贸B2B独立站:设计首页

全文字数:1258 | 阅读时间:7分钟

首页首屏Banner

首页是整个网站权重最高的页面,首页Banner是访客打开首页时,第一眼看到的内容,应该争取让访客第一眼就明白提供的产品或服务,吸引访客往下看。

  1. 进入Elementor编辑界面:Wordpress – 左侧菜单 – 页面 – Home – 编辑 – 使用Elementor编辑 – 页面设置:页面布局选择Elementor全宽
  2. 添加容器 – 在高级设置标签中把内距设置为0 – 在布局标签中选择全宽度
  3. 在容器中添加【图像】部件,输入图片链接地址(正式网站请把图片上传到Wordpress媒体库,然后从媒体库中选择图片)
  4. 图文分离以便翻译:在容器中添加标题、文本编辑器、按钮等元素 – 设置容器高度 – 设置容器水平居中和垂直居中 – 在容器样式中设置背景图片 – 调整元素样式
  5. 更多Banner样式:Slider。多组图文轮播
  6. 更多Banner样式:视频背景 + 标题、文本、按钮等元素

外贸B2B工厂独立站首页常见内容

首页是整个网站权重最高的页面,它不仅要起到整站导航的作用,还要展示公司实力、赢得用户信任,目标是激发访客的合作意向,促使他们愿意建立初步联系。常见模块有:产品类目、关于我们、工厂展示、Call to Action(行动号召)、为什么选择我们、资质证书、知名客户LOGO、客户评价、FAQ

创建模块

统一样式

先设置第一个模块的样式,然后将其样式复制到其它模块。

首页常用模块制作

提前准备好各模块要用的文案、图片、视频,以便快速创建首页。建议每制作一个版块保存一次。

产品目录模块 Catalog

用图像框制作,以产品类目名称为标题,图像框设置自定义宽度33%,容器方向为水平。先设置好第一个图像框的样式,然后把样式应用于其它图像框。

关于我们模块 About us

左右结构的Container,左边放视频,右边放标题和文本。视频可以设置Poster、自动播放、循环播放、静音播放等。文本太长可以分成多个模块。首页的About us描述建议精简些,详细内容可以放在About us专用页面。

工厂环境模块 Factory

插入Elementor【基本图库】部件,插入工厂内部环境组图。提前统一图片尺寸,以便获得最佳展示效果。样式标签下可设置图片间距、圆角、边框、阴影等。

行动号召模块 Call to Action

从Elementor模板库中选择一个模板,修改文本与样式(背景色、字体系列、间距)。

展示优势模块 Why Choose us

对应Elementor模板库中的Benefits分类,导入模板后,修改模板的内容和样式。

外贸证书与客户评价版块 Certificates & Testimonial

由于演示用的工厂没有相关素材,删除了这两个模块。Certificates通常用图像轮播部件制作,Testimonial通常用Testimonial Carousel部件制作。

常见问题版本 FAQ

可以从Elementor模板库中选择模板,也可以用Elementor部件从创建,常用部件:Tab选项卡、Toggle切换、Accordion手风琴。

Toggle切换与Accordion手风琴非常相似,区别在于Accordion部件最多展开一项详情,Toggle部件可以同时展开多项详情。

首页样式调整

Banner 首页大图

为Banner容器添加背景图,在网速不足以加载视频时,先加载背景图片。修改按钮的背景颜色、文本颜色、文本内容。

Categories 产品分类

修改产品分类模块中的标题样式,直接在Elementor站点设置的排版中修改H3标题(首字母大写),以便应用于整个网站。

About us 关于我们

调整容器与元素的结构,使其更精简。适当调整各元素的宽度。

Our Factory 工厂实拍

无需修改。

Call to Action 行动号召

修改容器外边距,Call to Action模块的文案可以用ChatGPT写。

Testimoinal 客户评价

  1. 用ChatGPT生成客户评论、客户名称
  2. AI免费生成客户头像:打开在Canva – 创建500px x 500px的图片,用Magic Media生成头像
  3. 应用生成的评论(复制粘贴)与图片(先上传到媒体库,然后调用)
  4. 调整样式。

FAQ 常见问题

用ChatGPT生成内容后,通过复制粘贴应用到FAQ版块。

最后的预览与修整

  1. 效果预览
  2. 修改菜单Hover背景色
  3. 修改全局主色
  4. 修改底部导航栏内部元素的底部外间距
  5. 设置Banner描述每个单词的首字母大写
  6. 调整CTA的文案、字号、行高
  7. 调整各模块标题的底部内间距
  8. 访客模式预览效果
文章目录
Scroll to Top