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

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

如上图，这是一个简约的网站首页或落地页设计稿。我们同样还是分析拆解它的第一个BANNER部分。

分析

我们先边分析一下，第一个BANNER部分初看起来大家可能会觉得非常简单，但实际制作时可能也是遇到问题。对初学者或新手而言，它的难点可能有：黑色的波浪刘海、两个箭头曲线效果、如果让页面元素看起来更生动。

拆解

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

如上图所示，这个banner可以看成一个整体，然后里面分成的3个部分。左右两边宽一些，放图片/图标、标题、文本、按钮，中间放一个长条形的图片。然后刘海背景可以直接按设计图切出来，或者是使用一个页面编辑器自带的形状分隔线功能做成类似的。最后那个曲线和曲线简单可以单独切出来，分别放到中间图片的上一层和下一层，还可以给他们加个 动画效果点缀一下。

制作

通过上面的拆解，整个BANNER的制作流程就非常清楚了，我们一步步做就OK，同样还是用elementor为例为讲吧。

步骤如下：

1. 添加一个容器，给它设置一个合适的高度，或者直接设置为VH 100%。
2. 给整个容器设置一个背景（切出来的刘海背景），然后适当调背景的位置和尺寸。
3. 里面再添加3个子容器，宽度可以大概分为35%、30%、35%。
4. 左边子容器可以分别添加图片/图标、标题、文本、按钮元素来制作，也可以直接使用call toa ction模块制作。该子容器整体设置底部对齐。然后观看设计稿，发现它离底部还有一点间隔，这里我们可以在它里面添加一个间格模块，设置一个合适的间格大小。
5. 右边的子容器和左边的制作方法一样，可以直接把左边的元素复制过去，然后再修改内容即可。
6. 中间容器插入一张图片，底部对齐。也可以插入视频、动图，或者是Lottie动画。如果你不怕麻烦，也可以再把中间这张图切一下，比如人物分离、手机框中的内容分离，然后可以分别添加一些小动画。
7. 中间容器插入一张切出来的曲线图片，图片在高级设置中修改定位模式为“绝对”，然后调到合适位置。
8. 选中最外层容器，添加切出来的颜色曲线图片，高级设置中修改定位模式为“绝对”，然后调到合适位置。最后修改Z-index数值，可以调低一点，让它位于手机图片的后面一层。

总结

以上就是今天分享的内容，希望能对大家有所帮助哦。有时候我们在制作网站时也不用太过纠结一些细节，比如今天分享的制作步骤就有一点点复杂化了，我们完全可以简化一些，比如把刘海背景和箭头曲线切到一起作为背景图，中间的图片和那个曲线也切成一个整体，这样就简单多了。