Elementor V4元子化元素如何实现背景视频和图片轮播效果？

Elementor V4的原子化元素代码更简洁，对网站性能的提升会有一些帮助。但是新版本新元素带来的新的操作逻辑，对新手不怎么友好，同时有些功能相对旧版元素功能还更少了。比如原来的容器可以比较容易的实现背景视频和背景图片轮播效果，而且效果挺好的。但是新版本的原子化元素没有提供这个功能，它只能添加背景图片和颜色叠加。

如果你的wordpress外贸建站项目中有这个功能需求，那么有两个方法。

方法一：直接使用旧元素

在Elementor官方没有提供V4的背景视频和图片轮播功能之前，直接使用旧版本元素是最简单方便的。而且现在纯大多数情况下，我们都不太可能完全使用新的V4原子化元素，更多的是需要新旧配合，或者是直接继续使用旧元素。

具体操作：添加旧版本的窝，选中之后在样式设置中看到【背景类型】这一项，可以选视频或幻灯片，然后按提示填写视频URL或上传轮播图片即可。

方法二：通过元素和容器叠加的方式来实现（V4）

如果你只想使用Elementor V4新元素来制作，或者是单纯想了解一下怎么实现的话。悦然wordpress建站可以分享一个实现的思路。

步骤一：添加所需元素

添加一个原子化元素弹性盒，设置向下排列。然后里面依次添加视频（建议用youtube元素）、弹性盒1（用作半透明叠加）、弹性盒2（用来做内容）。

步骤二：设置元素定位和层级

VIDEO放在最底层，设置为相对定位，Z-index设置为1；弹性盒1设置为绝对定位，Z-index设置为2；弹性盒2设置为绝对定位，Z-index设置为3。

然后添加youtube视频链接，视频设置为长宽100%，设置自动播放，隐藏控制拦，默认静音。弹性盒1长宽设置为100%，设置一个背景色，比如半透明的黑色。

弹性合3用来而已正式内容，可以是文字、图片或其它，这个就自己发挥吧。

步骤三：优化视频尺寸

如果发现视频没有铺满，或者是有黑边，可以选中视频，在自定义CSS中粘贴下面的代码。

video {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

最终实现的效果如上图所示。

如果是背景图片轮播，也是同样的实现思路，把视频元素换成图像轮播（旧元素）即可，其它操作一样。

注意事项

这种叠加方式实现的背景视频和背景图片轮播需要注意视频或图片高度与内容高度的问题。比如你的内容很多，这样就可能内容显示区域高度超过了视频和图片的高度，这就很难看了。最好是内容精简一些，或者是在移动端做一下响应处理，移动端换一种显示排列。

以上操作只是一个大概的思路，能过文字实在不太好讲明白，这里我给大家录了一下视频说明（同样讲不到很清楚，大家意会一下吧），点击跳转公众号观看。

另外视频中的效果我也给大家导出来了，如有需要可以关注【悦然wordpress建站】公众号，回复【V4演示2】获取。

最近分享Elementor的内容有点多，只是正好有空就折腾研究一下它的新功能，同时也给大家做一些分享。但悦然wordpress建站做项目时并不是只用Elementor，一般是看用户需求而定的，用户想用什么也可以自己定。

总结

个人感觉这其实又是一个把简单问题复杂化的操作，Elementor V4的一些操作逻辑和功能都有待完善。目前最好是先学习了解为主吧，先不要完全用到正式项目中。