wordpress外贸建站教程：页面结构分析拆解05

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

如上图所示，这是一个宠物网站落地页设计稿，整体看直来很简单，主要是图片和文字的组合，再加上一些圆圈的点缀。如果是你来制作这个页面，要怎么做呢？接下来悦然wordpress建站就和大家一起来分析拆解，以第一块BANNER来演示。

页面拆解

第一块BANNER内容看起来非常简洁，主要是文字、图片、背景加上一些圆圈色块点缀。但有的时候，看起来简单的页面，制作起来其实也并不是特别容易哦。

如上图所示，我们可以把整个页面划分为3部分，左边放文字、圆圈色块，中间放图片，右边放一个文字框、圆圈色块。拆解的方式不止一种，我所说的仅供参考，大家也可以自由发挥。

页面制作

接下来我们开始制作。页面拆解出来后，制作思路就比较清晰了。接下来分享简单的步骤：

1. 添加一个容器，里面再分成3块。根据参考图，中间的部分要小一些，所以我们可以按35%、30%、35%这样的比例来划分。然后整体容器可以添加一个网格的背景，调整位置显示到底部大概1/3的位置。
2. 在左边的子容器中可以再套一个容器，这个容器的宽度设置为80%整体靠右对齐，然后里面可以添加3个标题模块，再根据参考图来设计文字的大小，最后里面的文字整体左对齐。然后左边子容器中再添加两个圆圈色块，这个可以导入图片，也可以直接在wordpress制作，比如拿一个图标模块来做，然后参考设计图调圆圈的大小，和位置。
3. 中间的子容器最简单，直接拖一个图像模块，上传对应的图片就可以了。
4. 右边子容器中可以添加一个BOX类型的模块，比如elementor中的call to action，或古腾堡中的Info box模块都可以，然后按参考图填写内容和按钮。接下来添加3个圆圈色块，按图中所示调整位置即可。

优化效果

经过以上操作，整个BANNER就差不多制作完成了。但是当你制作好后可能会发现整个页面比较单调，因为这个模块的设计很简单，如果是静态的看着就不太生动了。所以我们可以尝试对里面的圆圈色块进行一些动态处理，如果你使用的插件有动画效果的模块，可以尝试去用用。

selector {
  animation: float 1s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

也可以使用我提供的这个CSS动画代码，会有一个简单的飘浮效果，飘浮的数量可以按需修改。以Elementor为例，把上面的代码直接复制到元素的【高级设置】-【custom CSS】中即可。

总结

以上就是今天分享的内容，希望能对大家有所帮助哦。