wordpress外贸建站教程：页面结构分析拆解07

继续分享wordpress外贸建站教程——页面结构分析拆解。今天我们来分析第7个页面。

如上图所示，这是一个简单的网站首页设计，此网页设计采用“多区域、多色块”的网格布局，合理分配视觉重点，强化内容层次感，具有良好的视觉引导和信息组织能力。

分析

实际上，这个页面的整体设计很简单，就是几个容器的组合划分，接搭配不同的图片和包块即可。只要把它的整体布局划分出来，做起来就相对容易了。

拆解

接下来我们开始对页面进行拆解。（忽略掉页眉导航内容）

如上图所示，这个页面可以分成左右两个部分，然后左边的再进行细分，可以分成上下两个部分，然后下面的再划分成3部分，这个整个页面的拆解就完成了。

制作

通过上面的拆解，整个页面的制作流程就比较清晰的，接下来我们就来制作吧，这里依然以Elementor为例。

步骤如下：

1. 添加一个容器，里面再添加两个子容器，然后设置比例，大概划分为70%和30%。
2. 在左边的容器中添加两个子容器，上面的子容器添加slider模块或其它轮播模块都可以，下面的子容器可以再划分为3等分，分别添加背景图片，设置一个统一的高度。
3. 右边的容器分别添加标题、图片、标题、文本、按钮等元素，然后近需填写文字、添加图片。

注意：根据设计图的效果，所有容器和元素之类的间隔需要设置为0.

最终效果

根据上面的制作步骤，悦然wordpress建站制作出了一个大概的效果，如上图所示。图片和文字随便用的其它代替。

我把制作好的Elementor模板导出来了，可以分享给大家研究学习，有需要可自取。关注【wordpress建站开发】公众号，回复【07模板】获取下载地址。

模板下载好后，打开elementor编辑界面，然后点【导入-上传】，选择下载好的json文件，确定后会有一些提示，都确认即可，导入成功后，再点【插入】即可。

---

通知

之前一直有人问我有没有交流群，我的回复都是暂时没有，因为群维护起来比较麻烦，我自己其实也有很多不会的，感觉能分享的东西我都写到网站和公众号了，所以之前一直没建群。

但经过之前几次建站课程筹备失败的经验来看😅，有个群还是挺重要的。所以我现在建了一个群试试看，本群主要面向对wordpress建站学习（中文、外贸）有兴趣朋友，特别是初学者，这是一个基础知识交流的初级群，建议有相关学习需求的朋友加入。高手、熟手就不用加了，后面我有时间了会另外建个其他群。

需要加群的请添加上面微信，我拉你免费入群。

这个群主要供大家讨论wordpress建站学习等内容，我有时间也会分享一些相关的知识和文章，解答一些问题。可能也会做一点简单的直播教程。