如何使用Elementor的Call To Action功能

做谷歌优化的人肯定听说过Call To Action这个词，那么它是什么意思呢？大体的意思翻译过来就是—呼吁采取行动。我们试想一下，当一个陌生访客在浏览了你的网站页面的时候会有两种情况，一种是感觉没什么意思就直接关闭网页退出了；还有一种是感觉网页内容和体验还蛮不错的想继续深入了解这个网站。那么这时候他就会面临选择，当前页面内容看完之后的下一个页面或者下一个操作动作是什么？!

先别急着回答上面提出的问题，我们回过头来想想另外一个问题—我们的询盘从哪里来？有同学会说有流量就有询盘！真的是这样吗？我看未必！访客对于不熟悉的网站页面，他的浏览目的性总是很模糊的，因为他并不知道这个网站上有什么内容，自己的需求是否能够匹配。所以我们就回过头去看前面那个问题，询盘就在于对访客的浏览内容有意识引导！既然是有意识的内容引导，那么就需要Call To Action去进行网站内容的部署了。所以接下来，Jack老师将和同学们一起来学习如何使用Elementor的Call To Action功能。

第一步：将Call To Action功能元素添加到网站的内容编辑区域

如上图所示，我们在左侧的Elementor编辑器中找到箭头1所指的“Call To Action”功能元素，然后按住鼠标左键不松开，慢慢的拖到上图箭头2所指的地方，也就是内容编辑版块中。注意在没有将Call To Action功能元素添加到内容编辑版块区域之前，内容编辑版块外面是一个灰色的虚线框，只有当出现了一个蓝色的虚线外边框之后才代表着我们已经成功的将Call To Action功能元素添加到了内容编辑版块中！

第二步：对Call To Action功能元素的主体功能进行设置

Call To Action功能元素的主体设置主要分为三大版块，分别是image、content和ribbon，我们先来看image的设置。

2.1、“Skin”：指的是图片的线上效果，有两种选择：classic和cover。这两者的区别在于，前者是一半图片一半主体内容共同组合成一个call to action整体内容。后者是图片占据整个内容篇幅，然后主体内容包括标题和描述都显示在图片上面。同学们根据自己的需要进行选择

2.2、“Position”：指的是图片的水平对齐相对位置，有左对齐，顶部对齐和右对齐三种。如果你选择的是cover那就不用去考虑了，因为没有对齐选项。

2.3、“Choose Image”：指的是选择需要展示的图片

2.4、“Graphic Element”：指的是主体内容部分的图形元素，你可以选择其他图片或者用elementor编辑器提供的图标或者放弃选用该功能

2.5、“Title”：指的是内容的标题

2.6、“Description”：指的是主体内容的描述。这个地方需要同学们花点心思去琢磨一下描述文字，因为只有具备号召力或者有诱惑力的描述文字才能让call to action功能具备客户引导的作用。

2.7、“Title HTML Tag”：指的是主体内容中的标题的h系列标签标号，一般情况下建议用h2或者h3

2.8、“Button Text”：指的是主体功能中按钮上显示的文字

2.9、“Link”：指的是点击按钮之后跳转的页面链接URL

2.10、“Ribbon Title”：指的是整个Call To Action内容版块的色带标题。有点类似我们在超市中常见的hot sell这种促销小标签

第三步：对Call To Action功能元素的样式功能进行设置

Call To Action的样式功能设置分为4大版块，分别是Box、Content、Button和Hover Effect。我们先从Box这个样式开始学习

3.1、“Height”：指的是整个call to action的篇幅高度设置

3.2、“Alignment”：指的是主体内容部分的水平对齐方式，有左对齐、居中对齐和右对齐三种选择

3.3、“Vertical Position”：指的是主体内容部分也就是标题、描述和按钮的垂直对齐方式，也是有三种对齐方式可供选择

3.4、“Padding”：字的是主体内容部分距离Call To Action4个外边框线的距离

3.5、“Image width”：指的是图片的宽度大小

3.6、“image height”：指的是图片的高度大小。注意：如果我们在主体功能中选择的是classic，在Box样式中已经调整了Height的数值，那么你在image中进行图片高度调整是不会有变化的。

3.7、“Title 排版”：这种排版功能在Elementor编辑器中都是具备一样的功能和设置，所以这里不再赘述

3.8、“Spacing”：指的是title文字和下面的描述文字之间的间距

3.9、“Description 排版”和“Spacing”：和上面的title文字操作是一模一样的，这里就不再多说了

3.10、“colors”：它有normal和hover两种显示效果，也就是正常显示状态和鼠标悬停显示状态，因为这两者的功能都是只要4个完全一样的选项，所以我只对normal部分进行操作说明

3.11、“Background color”：注意如果主体功能中我们设置了显示方式为cover的话，这里是没有背景颜色的设置选项的。为了方便下面的所有项目都是默认在classic显示方式下进行讲解。background color指的就是call to action中除去图片占据部分之外的所有版面的背景颜色（简单点说就是主体内容部分的背景颜色）

3.12、“Title color”：指的是对标题文字的颜色进行修改

3.13、“Description Color”：指的是主体描述部分文字的颜色修改

3.13、“Button Color”：指的是按钮的文字颜色修改