福建高端网站建设:如何使用Divi创建Sticky CTA

2019.04.29 |
标签

所以你用divi建立了一个华丽的网站,填充了一流的内容,并检查了所有的复选框,以保证搜索引擎的优化。然而,过了一段时间,你的转变并不是你所期望的那样。现在你可能会问自己,“我做错什么了吗?”

还没有必要惊慌失措地按下重置按钮。有时候,小小的改变会对你的转变产生很大的影响,而在回报方面,你能做的最好的事情之一就是优化你的行动号召。

福建高端网站建设在这篇文章的过程中,我们将准确地介绍什么使呼吁采取行动是好的,他们的工作背后的一些心理学,向您展示一些伟大的例子,最后,教您如何在您的Divi网站上实现一个粘性的CTA。

CTA 101

毫不夸张地说,呼吁采取行动的背后有一套完整的科学。几乎每个方面(复制,颜色,大小,宽度等)可以被分解和分析,直到精疲力竭,但其中一些突出其重要性。

颜色

大多数人把黄色和乐观联系在一起,红色与活力,蓝色与信任,绿色与财富和放松,橙色与进取,粉红色与女性的一面,黑色与权力,等等。断断续续。这只是一种肤浅的分析,但取决于你销售的服务或产品的种类,一些特定的颜色会比其他颜色更有效。

复制

光有颜色是不够的,除非它有对词。根据调查,52%的客户更有可能进入商店,如果简单地要求-无论是路标或传单。但问题是,用户习惯于随时随地都会被广告轰炸,他们对此相当在行。忽略这类消息.

考虑到这个事实,当涉及到CTA时,您的副本需要是强大和简洁的。例如,使用活动动词比填充文本(如“单击此处”)更可取,因为“点击此处”对吸引客户没有任何作用。“申请免费拷贝!”如果用户认为内容足够有趣而不附加字符串,可能会得到更好的结果。

积木

除了CTA本身的文本之外,积累还可以影响您的转换速率。以为销售漏斗而建的登陆页面为例-它们专门用来吸引顾客购买一种产品或服务,并且通常遵循类似的结构:以一个人为例,列出一个问题,然后告诉他们的产品是如何在其他所有选择失败的情况下帮助他们解决的。最后,让你有机会把他们的教诲运用到你自己的问题上(这绝不是一种出售,永远是一种机会).

因此,一个伟大的行动号召,就是简单地在正确的时间建议一个行动,创造一种预期的感觉,然后使用令人信服的设计和正确的语言来吸引你的客户做出一个初步的选择。这听起来有很多需要处理的地方,但是创建一个好的CTA的道路是很好的,而且有很多可用的资源对于那些想深入研究这个问题的人来说。

让我们福建高端网站建设看看一个简单的例子使用Divi构建的,它在主要的行动调用中并没有充分利用增强的功能。

福建高端网站建设

整个主页上到处都是以令人信服的方式设计的行动号召,但主要的一页并没有太多的绕圈子。“我们喜欢让你保持积极、健康和快乐。预约吧。“简短,简明扼要,并给出一种紧迫感,同时把决定放在你的手中。

Divi呼叫行动模块

为了让你的生活更轻松,Divi附带了一个内置的CTA模块。这使您能够在使用Divi构建器单击按钮时实现CTA,并享受与其所有模块相同的自定义级别。

Main menu of the Divi call to action module.

该模块包括您可以想象的所有选项,如颜色、文本方向、可定制标签、ID和类、高级设计设置以及通过CSS添加更改的选项。

Example of a call to action built using Divi.

使用Divi构建的一个调用动作的例子。

虽然模块确实有很多选项,福建高端网站建设但在滚动页面时调用动作保持固定并不是其中之一。谢天谢地,Divi通过将子主题用法和一些简单的CSS结合起来,可以轻松地进行一些高级调整。因此,卷起你的袖子,准备玩一些代码。(我们保证这是无痛的!)

用Divi创建一个粘性CTA

福建高端网站建设

使用Divi的演示页面之一运行中的粘性CTA。

一个固定的行动呼吁可以是一个简单的解决方案,以增加转换,只要它不是过度侵入或其他破坏您的网站设计流程。理想情况下,您希望将其合并到布局中,但仍然可以作为潜在的提醒,提醒客户可以随时选择您的服务。

正如我们前面提到的,这不是CTA模块的默认选项,但谢天谢地,优雅的调整想出了一个简单的方法来实现这个特性。

首先,你需要复制你的Header.php将文件放入儿童主题并找到以下代码行:

<body <?php body_class(); ?>>

<div id="page-container">

在下面的代码片段中,我们创建了一个名为顶-CTA他的名字是不言自明的。如果要更改CTA的文本,请在粘贴后替换必要的代码行。

<div id="top-cta">
<a href="#">This is an<span class="cta_gray">example</span>of a sticky</a>
<span class="blurb_button">
<a class="et_pb_promo_button cta" href="#">CTA</a>
</span>
</div>

现在,福建高端网站建设需要深入了解一些CSS来定制全新的粘性CTA,您可以使用ePanel底部的CustomCSS字段进行部署。

The Divi ePanel Custom CSS field.

Divi ePanel中包含的自定义CSS字段。

这些代码中的大部分应该已经为您所熟悉,而且即使您不习惯于处理CSS,导航也是相当容易的。让我们一步地看一遍。

第一节介绍CTA栏的一般设计,包括背景、文本对齐、填充、强制文本大写,说明该条应占据浏览器的全部宽度,以及z-索引(设置为一个较高的值以取代其他所有内容)。

每一个连续的部分都处理我们先前在Header.php还包括一些小的文体细节,你可以根据你的内心内容来调整。

最后,我们有一些媒体查询可以帮助调整CTA栏的大小以获得更小的分辨率,这样它就不会占用一半的屏幕并吓跑所有的访问者(相信我们,您不想忽略这一部分)。

#top-cta {

background-color: #Insert your preferred color here;

background-color: rgba(57, 178, 235, .9);

text-align: center;

padding: 5px 0 5px;

text-transform: uppercase;

position: fixed;

top: 0;

width: 100%;

z-index: 9997;

}

#top-cta a {

color: #fff;

font-size: 28px;

font-weight: 700;

display: inline-block;

}

#top-cta a span.cta_gray {

color: #dfdfdf;

text-shadow: 1px 1px 1px #5a5a5a;

}

#top-cta .blurb_button {

padding-left: 20px;

}

#top-cta a.cta {

background-color: #ff9900;

}

#top-cta a.cta:hover {

background-color:#FFAD33;

}

/*-------------------[768px]------------------*/

@media only screen and ( max-width: 980px ) {

#top-cta {

padding: 10px 0 10px;

}

#top-cta a {

font-size: 20px;

}

}

/*-------------------[480px]------------------*/

@media only screen and ( max-width: 767px ) {

#top-cta {

padding: 7px 0 7px;

}

#top-cta a {

font-size: 18px;

}

#top-cta .et_pb_promo_button {

padding: 4px 15px;

}

}

/*-------------------[320px]------------------*/

@media only screen and ( max-width: 479px ) {

#top-cta {

padding: 5px 0 5px;

line-height: 1.2em;

}

#top-cta a {

font-size: 16px;

}

#top-cta .et_pb_promo_button {

padding: 2px 10px;

}

}

是时候进行分裂测试了!

正如您可能已经注意到的,在我们的上一节,即使有这样一个简单的酒吧,有大量的定制选项,使之真正成为您自己。当然,你可以选择一种很好的风格,把你的CTA举起来,并祈祷你的手指,或者我们可以更进一步。

这是一个简单的事实,访问者将更好地响应一些设计比其他,虽然你可以跟踪所有的最新趋势,总会有一些优化的空间。选择要实现哪些更改的明智方法是使用分析来指导自己。

例如,如果您有两个可用于粘性CTA的设计,则应进行测试每个指标在特定时间内如何影响您的指标,然后与明确的赢家保持一致。这使您可以在对特定观众有用的知识的基础上,尽可能地定制您的内容。

分裂测试变得有点更复杂当你有各种各样的选项可用时。如果你在相同的测试中包含了非常不同的设计,你很容易得到扭曲的结果。因此,如果您有时间和耐心这样做,您应该尝试在以前的测试结果的基础上(使用每一点知识来改进您的设计),直到您对您的指标感到满意为止。

不过,别害怕-这比我们让它听起来容易得多。您的测试可以是长的,也可以是短的(只要您已经收到足够的流量来达到一个明智的决定),并且这些度量标准并不难读。你还会有更多点击吗?你的反弹率下降了吗?最重要的是,你能得到更多的销售吗?如果是这样的话,那就好好享受吧,这是你应得的。

结语

你可以让世界上所有的访问者或最受欢迎的产品,但有时人们只需要一点点轻推,然后他们决定注册您的服务或打开他们的钱包。这种轻推就像一次有效的行动呼吁一样简单。

福建高端网站建设在我们使用Divi构建的优秀CTA示例中可以找到灵感,按照上面列出的步骤创建自己对操作的粘性调用,并记住使用拆分测试来优化您的转换。


相关推荐

福建高端网站建设:如何使用Divi创建Sticky CTA
 

福建高端网站建设:如何使用Divi创建Sticky CTA

所以你用divi建立了一个华丽的网站,填充了一流的内容,并检查了所有的复选框,以保证搜索引擎的优化。然而,过了一段时间,你的转变并不是你所期望的那样。现在你可能会问自己,“我做错什么了吗?”还没有必要惊慌...
2019.04.29
福建做网站:如何为WordPress站点选择正确的UI设计颜色
 

福建做网站:如何为WordPress站点选择正确的UI设计颜色

这些天你多久听说一次UI设计颜色?除非你是在和UI设计人员交谈,不经常。浏览一个成功的WordPress网站,你会看到不同的颜色传达品牌的信息,传达网站的结构,改善对象识别,并提供大量的其他好处。福建做网站在W...
2019.04.29
福建企业网站建设:理解WordPress文件和目录结构
 

福建企业网站建设:理解WordPress文件和目录结构

虽然只通过仪表板与WordPress网站进行交互是完全可能的,但是了解安装的结构以及哪些文件执行哪些功能对于实现对站点的更高程度的控制至关重要。至少,这种理解将使您能够更容易地解决可能出现的任何错误。每个Wo...
2019.04.29

最新文章

三亚做网站:如何为你的网站进行速度测试
 

三亚做网站:如何为你的网站进行速度测试

当涉及到目标转换率和提供积极的用户体验时,您的网站的速度可以使它成功,也可以破坏它。现在已经不是拨号的日子了-你的访问者已经习惯了不需要等待网站的加载。如果你的网站处于停滞状态,用户比以往任何时候都更有...
2019.05.14
福建网站设计制作:如何利用社交媒体来推广你的Webinar
 

福建网站设计制作:如何利用社交媒体来推广你的Webinar

不管有多棒你的网络研讨会结果是,如果没有人出现,也不会有什么区别。推广你的网络研讨会同样重要。作为设计因此,这一步应该给予同样多的时间和注意力。我们福建网站设计制作已经讨论过了使用电子邮件营销您的网络...
2019.05.14
福建公司网站建设:年最佳WordPress支持服务10项
 

福建公司网站建设:年最佳WordPress支持服务10项

WordPress是世界上26%的网站的首选内容管理系统。其中许多主要品牌,公司和公众人物,如CNN,美国棒球大联盟,凯蒂佩里,玛斯可,TechCrunch,和纽约邮报。显然,他们管理自己的WordPress网站的经验将与你...
2019.04.29

热门推荐

选择您希望福建网站设计成品的风格偏好,让我们通过精确的分析与筛选,为您推荐合适的版式布局,
为此,您可以节省最基本的沟通时间,
让我们把有限的时间,充分的用在对行业的分析及您企业网站建设的自身分析上吧
联系电话 400-6065-301

微信咨询 寒总监