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

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

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

如上图所示,这是一个简单的网站落地页,也可以作为首页的BANNER部分,整体的结构看着来比较简单。但实际制作时新手可能会在一些细节上犯难。接下来悦然就带大家一起来分析拆解这个页面吧。

页面拆解

这个页面其实是一个整块容器,然后内部由一些子容组成,拆解起来其实也很容易。

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

如上图所示,这个页面的内容可以拆解为3个子容器,然后每个容器放放对应的内容就可以了。也有其它拆解方式,比如1和2作为一个整体,然后里面再用子容器划分。

页面制作

页面一旦拆解出来之后,制作起来就会相对容易很多了。接下来分享制作的简要步骤:

  1. 添加一个容器,设置一张整体的背景图片,以覆盖的方式拉伸铺满。如果作为一个落地页的话,我们可以把它的高度设置为100%拉伸。
  2. 添加3个子容器,第1个设置宽度大概35%,第1个设置为65%,第3个设置为100%。
  3. 子容器1添加一个轮播组件,上传几张图片。
  4. 子容器2的制作可能会有人比较纠结。如果不管样式的话,那它就是标题+文本+按钮,如果想要字体的背景色的话,那就可以使用标题+4个按钮只写文字+1个按钮加链接。
  5. 子容器3添加一些网站的版权信息、联系方式、社媒按钮。

按上面的步骤制作一般都没什么问题,子容器2的制作注意一下就可以,如果不是非得100%还原设计稿,这里也可以自由发挥一下,用其它方式代替也可以的。

如果还不太明白,悦然还录了一个视频教程,大家可以照着视频教程,边看边做。

视频教程

视频教程给大家简单演示了制作过程,主要介绍方法,一些细节方面的处理就比较简单了,没有完全按照原稿去做。大家可以自行修改完善。最好是跟着先做一遍,以后同类的页面也可以自由发挥一下。

总结

以上就是今天分享的内容,希望对大家学习wordpress外贸建站有一点点帮助。

购物车
优惠劵
搜索