wordpress独立站建站教程：一种简单通用的播BANNER轮播图设计方法

继续分享wordpress独立站建站教程。今天悦然给大家分享一种简单通用的网站轮播图片设计没方法，使用这种方法无需抠图，无需PS，只需要稍微好看一点的产品图片就可以了。

如上图所示，这是给一个客户的网站设计的首页BANNER广告图样式。最开始客户给和图片是没办法直接使用的，因为图片上面本身就有文字，这样加按扭和宣传文案就不好看了，精细一点的处理方法是把产品主体抠出来，然后再通过网站配文字，但是这样太折腾，每换一个主推产品就得处理一下，如果公司没有专职美工，那就特别麻烦了。

方法

结合实际情况，悦然wordpress建站使用了一种简单粗暴的方法，直接把素材图片放上去，再通过背景叠加点缀，最后再配上简单的文案和按扭，看着还是有点感觉哈。再结合我们上一篇《页面结构分析拆解08》中用到的知识点制作轮播就可以了。

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

接下来就给大家分享方法。（Elementor制作；古腾堡也可以，推荐kadence block或greenshift插件）

步骤一

添加一个容器，设置一个高度，根据实际的内容多少来设置，比如设置为700PX。然后添加背景图片，直接把素材图片添加上去，设置覆盖模式。

然后再添加一个背景覆盖，设置黑色，调用一下透明度，这个按需设置，比如设置成80%左右就可以了。

最后容器设置内容居中，横向排列。

步骤二

往容器中再添加两个子容器，可以设置成等分或其它比例，我这里就用的等分的。然后左边的子容器分别添加标题、促销文字、按钮等，具体的操作就不细讲了，大家可以自由发挥。

右边的容器直接添加一个图像元素，使用和背景图一样的图片既可。这样一个简单的BANNER就做好了，大家可以再处理一下细节，比如移动端的显示调整，还是自由发挥吧，我这里只讲大概思路。

步骤三

接下来我们可以使用Elementor Pro自带的Carousel模块，或者是HT Slider扩展插件来实现。只把要把上面做好的BANNER复制重复利用就可以了。

总结

今天分享的只是大概思路，大家不妨回去试试哦，也可以根据你的理解自行优化显示效果。