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

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

如上图所示，我随便找了张免费图片，这里一个网站页面的设计稿，我们只看第一张图的前两部分，看看可以如何拆解，如何制作。

页面拆解

前两部分其实就是两个模块，这个很容易看出来，就不用再花时间分析了，我们可以直接对页面进行拆解，大概如上图所示。整体来看这个页面其实还是比较简单的，根据我们前两节的页面拆解教程都可以做出来。

页面制作

接下来我们来看看怎么把这个页面做出来，我们直接写大概的步骤了，大家可以参考一下。

模块1制作

模块1整体是一个比较常规的布局，制作步骤如下：

1. 添加一个容器，整体设置一个背景图。然后里面按左右排列再添加两个子容器，看图上似乎不是等分的，可以把左边的子容器比例设置小一些。
2. 左边的子容器添加图片、标题（设置艺术字体，或用图片代替）、标题或文本、按钮、文本，然后子容器设置整体向下排列。
3. 右边的子容器有多种做法，如果不是那么在意细节，可以做简单一些，把右边的整体放一张图片就可以了。

子容器右路边部分如果要严格参照设计稿，做细一点的话，可以把右边的图片中的几个部分单独切出来，具体操作可以看最后的视频教程。

模块2制作

模块2的的整体结构也比较简单，制作步骤如下：

1. 添加一个容器，背景默认或设置为白色。
2. 在容器中依次添加标题（或图片）、文本、网格（分为3列）、按钮。
3. 3个网格中分别添加图像框之类的模块。

按这样的做法，模块2比模块1还更简单一些。

进阶教程（视频）

接下来我们再看看模块1部分，这部分比较特殊的是右边的那个叶子，它的位置延伸到了模块2，这样看起来有浮动、立体的效果。

悦然wordpress建站给大家录了一个视频教程，如果有兴趣可以跟着视频教程操作试试。如需使用视频教程中切好的素材，可以在【wordpress建站开发】公众号回复【练习素材03】获取。

总结

以上就是今天分享的内容，感谢观看。