wordpress独立站建站教程:页面结构分析拆解08

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

wordpress独立站建站教程:页面结构分析拆解08-悦然跨境出海

这是一个主题鲜明的旅游网站首页模板,也可以作为一个全屏模块,或者是作为单独的落地页。

分析

如果做单个页面,这个页面的制作并不难。但是设计稿左下角有一个切换的按钮,一般这种都是想做成轮播的,简单的图文轮播大家可能都问题不大,但是把一个完整且丰富的页面模板作为轮播要怎么去实现呢?这就是我们今天需要解决的问题了。

拆解

接下来我们开始对页面进行拆解,先把单个页面拆解出来,再去考虑轮播的问题。

wordpress独立站建站教程:页面结构分析拆解08-悦然跨境出海

如上图所示,我们可以先把页面分成左右两个部分,然后再分别制作左右两部分的内容。左边的部分可以再细分为两个;右边的部分同样可以细分为两个,这个整个页面大概就拆分好了。

如果想要实现这种复杂页面的轮播,用常规的slider模块是不行的,可以使用Carousel模块,或者是HT Slider扩展插件来实现。

制作

通过上面的拆解分析,整个制作流程就差不多出来了,接上来我们一步步梳理制作流程吧。

步骤如下:

  1. 添加一个容器,里面再添加两个子容器,然后设置比例,大概划分为40%和60%。
  2. 在左边的容器中再添加两个子容器,设置纵向排列。上面的容器设置背景色,然后添加一个标题模块,再添加一个图标列表模板,按需填写内容既可;下面的容器可以添加一个图标框,把图标删除,填写标题和内容,内容就写价格吧,把字体调大调粗。然后给这个图标框设置一个内距大概20px,然后它的宽带设置为大概60%,背景设置一个颜色,最后再调整它的向上外距,设置一个负数,调到和设计稿差不多就行。
  3. 右边的容器同样添加两个子容器,设置纵向排列。上面的容器设置背景图片,覆盖拉伸,如果图片比较亮的话可以再给它添加一个半透明的黑色迭加层,然后里面添加两个标题模块,分别输入文字,调整大小。下面的容器中可以添加一个相册或两个图片模块,如果想在图片上打字,也可以添加Call to Action模块,设置为Cover模式,设置内容底部左对齐,只填写一个标题文字,文字调整到合适大小,其它的内容删除,像这样制作两个,然后可以给Call to Action设置宽度为60%,下面的子容器设置一下对齐方式为居中。最后再设置这两个Call to Action模块的身上外边距,设置为和左边的一样。
  4. 如果要保留设计稿中的社媒图标,可以在整个容器下面再添加一个容器,设置背景为白色,里面添加一个社媒图标的模块,添加需要的图标和链接就可以了。如果还需要那边装饰的线条,可以再添加一个分隔线模块,设置一下线条的颜色既可。最后整个容器设置横向排列。

到这里,我们就做好了单个页面的内容。如果要实现轮播,请再看下面的步骤:

  1. 添加一个Carousel模块(需要elementor pro),然后 设置滑块显示为1个,然后把上面制作好的内容复制到Carousel的滑块里面,然后可以在这个基础上复制一个滑块,再修改里面的内容就可以了,需要多少个滑块,就添加多少个。
  2. 另外一个方法是使用第3方插件,HT Slider就可以,安装免费版的就够用。

总结

这里只是给大家提供了一个大概的方法和思路,实际制作时,一些细节还需要自己处理一下,也可以自由发挥,方法其实也不止一种,大家慢慢摸索吧。

购物车
优惠劵
搜索