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

继续分享wordpress外贸建站教程——页面结构分析拆解。今天我们来分析第7个页面。如上图所示，这是一个简单的网站首页设计，此网页设计采用“多区域、多色块”的网格布局，合理分配视觉重点，强化内容层次感，具有良好的视觉引导和信息组织能力。

分析

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

拆解

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

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

制作

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

步骤如下：

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

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

最终效果

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

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

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