Banner也可以称之为海报，一般出现在网页的顶部。因为前端设计采用的是Html语言，而Html语言采用的是从上往下依次展示内容的方式，所以Banner的内容往往是一个网站首先呈现给网站访客的内容。如果将访客浏览网站的过程比喻成相亲的话，那么banner就起到了第一印象或者说叫“眼缘”的作用。用林志炫的那句歌词改编一下来形容就是—“每一个单身的人都得看透，想要有好的转化率，就一定要有好的banner设计！”

那么问题来了，如何做一个好看的banner去吸引访客的眼球呢？

条件一：优秀的Photoshop设计能力

条件二：充分掌握Elementor编辑器的banner设计功能

条件一不在我们今天这篇文章的讨论范畴，如果同学们有兴趣，到时候Jack老师可以专门开几个单章来讲解photoshop的相关使用技巧和平面设计的思路。那么接下来我们就要重点对条件二进行详细的讲解。

这里稍微讲一下条件一的注意事项：因为现在的主流电脑显示屏分辨率是1920*1080px，而我们的banner通常使用的是全宽设计，所以我们在设计banner图片尺寸的时候，最好将宽度设置为1920px，至于高度可以自定义，但不建议做的特别大，因为大尺寸的图片会在一定程度上导致网页打开速度变慢。假设我们已经设计好了这样一个banner，如下图所示（我偷懒没有自己去作图，这张图是阿里巴巴网站上借用来的）：

那么在Elementor编辑器中，有哪些元素可以让我们用来制作banner呢？——元素背景样式、图像、Slides（幻灯片）、图像幻灯器

那么这三者对应banner的最终呈现效果有什么不同的地方吗？别着急，我们一个个来看。

一、元素背景样式制作banner

1.1选择版块内容布局，如下图所示

注意这里的布局选择是作用于banner背景之上的，所以不用担心对我们前面预定的那张banner图会有影响，随便选择50/50还是33/33/33的布局都可以。这里Jack老师选择用全局100%的内容版块布局样式。

点击上图箭头所指的地方之后，我们再看页面的左边Elementor编辑器，点击中间的“样式”，如下图所示：

点击“选择图像”，然后将刚才我们已经选定好的图片作为背景即可，我们一起来看一下效果图，如下图所示：

有点失望是不是，为什么我们提交的是整个大图完整的banner，而这里只显示了一点点背景呢？别着急，Jack老师接下来就为你解答这个疑惑。

首先，我们上传的图片是作为背景存在的，既然是背景，那么这一块区域的核心内容就不是这张背景了，而且前面我们选择的内容板块，只不过我们前面没有将相关的元素移动到这个内容版块区域上。如果这时候我们来拖动一个按钮元素放到这个全宽的内容版块上，那么该内容版块的高度也会因为我们将按钮元素的置入而增加。这段话看的不太懂是不是？别着急，Jack老师操作给你们看。

这张图和上面那张图对吧，在背景高度上是不是高了一些？也就是说随着同学们在这个内容版块上添加的Elementor元素越多，背景高度也就会越高，那么之前我们上传的那张背景图片展示的也就越完整！那有的同学会说，我不想要其他的内容和元素了，我只需要一个按钮元素就够，但是还想保持背景图片的完整展示。要求就是这么任性，咋办？安排！

我们只需要在“高级设置”中，调整“内距”的顶部和底部数值即可。注意在操作的时候，先点击一下数值栏的第5个图标（就是那个链接的图标），如果不点击取消的话，那么但你在前面4个数值框中，随便输入一个数字，其他三个也会一起变化。

注意：具体的数值根据背景图片的高度来进行设定

操作到这里就结束了吗？显然不是，我们可以从上图中看到，按钮上的文字还是中文状态，需要切换成中文，而且按钮的位置也要调整一下，不然就挡住了背景图片上的文字了。那么我们点击一下按钮，相关操作如下所示：

上图一共4个版块，前面3个是相关的操作，第4个是具体的效果。同学们参照上图的配置进行操作就可以了，具体数值根据自己的背景图尺寸来进行调整，不要照搬我的这个参数值！如果你觉得按钮元素和背景图片之间没有比较明显的区别，那么你还可以到内容版块的样式中找到“背景覆盖”和“形状分隔线”这两个选项进行进一步的调整。（篇幅关系，这里不再展开讲解）

二、Elementor的图像幻灯器元素制作banner

第一步：设置内容板块布局为全宽或者百分百

第二步：拖动Elementor编辑器中的“图像幻灯器”元素到第一步设置的内容板块上

第三步：设置“图像幻灯器”元素的相关属性和配置，如下图所示

因为是图像幻灯器所以就决定了该元素可以在同一个全宽板块内容上，轮换播放几个不同的全宽banner，所以你需要几个轮播图做banner就在这里添加几个背景图片即可。图像尺寸我们选择完整的，也就是图像的原始尺寸（因为背景图像的尺寸早就在我们用ps制作的时候就设置好了）。

“幻灯片显示”指的是同时显示几张背景图片，因为我们要的是全宽效果，所以这里我们将数值设置为“1”

“图像拉伸”：因为背景图片的宽度是刚好整个显示器宽度，所以这里就不用拉伸图像，选择“否”即可。

“导航”里面你可以选择“箭头或者圆点”，也可以任选其一或者干脆一个都不选。

但是为什么这样操作之后，幻灯片的背景图像还是不能全宽显示呢？因为我们的Astra主题在默认情况下，每个主体内容版块的宽度都不是全宽的，是一个固定的数值，比方说是1200px，所以即使我们在“图像幻灯器”上设置为全宽，哪怕背景图片的宽度是1920px，也不能在这个时候变为全宽显示。

那怎么办？有没有办法解决？当然有！

先点击上图右边箭头所指的地方，然后在左边箭头所指的“布局”选项中，设置“内容宽度”为“全宽度”，这样就能达到我们背景图作为全宽显示的目的。

三、Elementor的Slides元素制作banner

slides翻译过来就是幻灯片，所以从本质上来说，这个元素的效果和刚才讲的“图像幻灯器”元素效果基本上是类似的。所以Jack老师就不在这里对具体的相关操作进行赘述了。我会将重点放在这两者之间的区别上进行对比。

1.Slides的功能比图像幻灯器更加强大

2.在不同宽度的显示设备上（比方说智能手机和PC端），Slides可以随意切换背景图片全图展现（同比例缩小尺寸）或者背景图片的完整尺寸重点内容展示，而图像幻灯片不可以这样操作

3.Slides元素在背景图片所配套的标题、文字描述、按钮配置等方面有更大的开放性和统一规划，而“图像幻灯器”没有这么多统一配套，如果要操作的话需要自己额外的去使用Elementor编辑器中的相关元素进行操作。

4.三者在PC端的表现都是大同小异，但是到小尺寸的显示器上，特别是智能手机端，Jack老师还是建议同学们使用Slides这个元素去进行操作。因为Slides元素的综合表现在手机端具有最好的效果。

那么背景图片就是简单的和幻灯片一样左右滑动吗？还有没有其他的效果能够让我们的网站背景图片banner更加出彩？

在设置好背景图片之后，我们再点击该元素的高级设置，进行相关的配置，如下图所示：

在“滚动效果”中可以设置为背景图片固定在页面上，不随着鼠标的滚动而在页面端上下移动。

点击“进入动画”选项之后，里面有非常多的动态效果，这些效果都是由javascript事先设置好存储在Astra主题的js基础文件中，一旦你选择了某个动画效果，那么Astra主题就会将这个动画效果的javascript代码附加在你这个背景图片上，让你的背景图片更加生动更加活跃。

好了，以上就是本章关于 如何用Elementor设计banner 的全部内容，因为篇幅的关系，有很多相关操作没有详细的进行实操讲解，留待给同学们自己去进行探索和操作。

如果对本章内容还有不理解的地方，欢迎用百度或者谷歌搜索关键词---Jack外贸建站

JACK 外贸建站 -致力于提供SOHO外贸建站，谷歌SEO优化免费教程服务​www.jackgoogleseo.com

排名首页首位的就是我的网站，网站上有更多免费的外贸建站、谷歌SEO优化、外贸客户开发等方面的实操干货内容等着你哦！