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

如上图所示,这是一个简单的网站首页设计,此网页设计采用“多区域、多色块”的网格布局,合理分配视觉重点,强化内容层次感,具有良好的视觉引导和信息组织能力。
分析
实际上,这个页面的整体设计很简单,就是几个容器的组合划分,搭配不同的图片和包块即可。只要把它的整体布局划分出来,做起来就相对容易了。
拆解
接下来我们开始对页面进行拆解。(忽略掉页眉导航内容)

如上图所示,这个页面可以分成左右两个部分,然后左边的再进行细分,可以分成上下两个部分,然后下面的再划分成3部分,这个整个页面的拆解就完成了。
制作
通过上面的拆解,整个页面的制作流程就比较清晰了,接下来我们就来制作吧,这里依然以Elementor为例。
步骤如下:
- 添加一个容器,里面再添加两个子容器,然后设置比例,大概划分为70%和30%。
- 在左边的容器中添加两个子容器,上面的子容器添加slider模块或其它轮播模块都可以,下面的子容器可以再划分为3等分,分别添加背景图片,设置一个统一的高度。
- 右边的容器分别添加标题、图片、标题、文本、按钮等元素,然后近需填写文字、添加图片。
注意:根据设计图的效果,所有容器和元素之类的间隔需要设置为0.
最终效果

根据上面的制作步骤,悦然制作出了一个大概的效果,如上图所示。图片和文字随便用的其它代替。
我把制作好的Elementor模板导出来了,可以分享给大家研究学习,有需要可自取。关注【wordpress建站开发】公众号,回复【07模板】获取下载地址。
模板下载好后,打开elementor编辑界面,然后点【导入-上传】,选择下载好的json文件,确定后会有一些提示,都确认即可,导入成功后,再点【插入】即可。

通知
之前一直有人问我有没有交流群,我的回复都是暂时没有,因为群维护起来比较麻烦,我自己其实也有很多不会的,感觉能分享的东西我都写到网站和公众号了,所以之前一直没建群。
但经过之前几次建站课程筹备失败的经验来看😅,有个群还是挺重要的。所以我现在建了一个群试试看,本群主要面向对wordpress建站学习(中文、外贸)有兴趣的朋友,特别是初学者,这是一个基础知识交流的初级群,建议有相关学习需求的朋友加入。高手、熟手就不用加了,后面我有时间了会另外建个其他群。

需要加群的请添加上面微信,我拉你免费入群。
这个群主要供大家讨论wordpress建站学习等内容,我有时间也会分享一些相关的知识和文章,解答一些问题。可能也会做一点简单的直播教程。