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

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

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

分析

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

拆解

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

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

如果想要实现这种复杂页面的轮播，用常规的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就可以，安装免费版的就够用。

总结

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