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

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

wordpress外贸建站教程:页面结构分析拆解07-悦然跨境出海

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

分析

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

拆解

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

wordpress外贸建站教程:页面结构分析拆解07-悦然跨境出海

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

制作

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

步骤如下:

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

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

最终效果

wordpress外贸建站教程:页面结构分析拆解07-悦然跨境出海

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

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

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

wordpress外贸建站教程:页面结构分析拆解07-悦然跨境出海

通知

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

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

wordpress外贸建站教程:页面结构分析拆解07-悦然跨境出海

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

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

购物车
优惠劵
搜索