DIVI教程:深入行为号召模块

2015/12/04
DIVI教程:深入行为号召模块

什么是行为号召?英文名称为call to action。许多地方翻译不一样,笔者把其翻译为行为号召。意思是通过吸引眼球的话引导用户进行点击。Divi主题的行为号召与其它主题不一样,具有更加弹性的自定义功能,比如背景颜色,背景图片,内容文字大小等等。下面笔者通过示例进行讲解。

一、添加一个简单的行为号召

在需要的地方,使用divi构建器添加一个行为号召模块。

divcta1

现在我们可以点那个“三”图标,进行编辑这个模块。

divicta2

模板包括常规设置,高级设置和自定义CSS。

在常规设置里有基本的选项:

  • 标题:这个是用于识别显示的,前台不会发生作用。
  • 按钮url:就是按钮点击链接的地方。
  • url打开:是设置新窗口打开还是原窗口打开。
  • 按钮文本:就是显示在按钮上的文字。
  • 使用背景颜色:就是设置是否使用背景颜色。
  • 背景颜色:置顶背景颜色。
  • 文本颜色:可以选择浅色或深色。如果背景是深色,则选择浅色,反之,则反之。
  • 文本方形:在右边显示还是左边还是居中。
  • 内容:输入除了按钮外的前台显示的文本,甚至是图像。

设置后点保存,发布如下图显示:

divicta3

二、行为号召高级设置

现在我们继续进行编辑,点高级设置,这里面主要是版式设置,包括字体,文本大小,宽度,行高等,这些都很方便。另外在高级设置里有一个值得我们注意的就是背景和边框。这个背景如果上传的图片,你就会发现原来的背景颜色会被覆盖(当然,否则要背景做什么),边框就是行为号召模块的整个边框。下面我们上传一个背景图像:

divcta4

前台显示如下:

divicta5

三、编辑行为号召样式

在我们使用行为号召时会发现文字和按钮并不在一行,比如想把按钮放在与文字在一行,如下图所示:

divicta7

我们先为这个行为号召设置一个css类,这个的目的是为了不影响其他地方的行为号召

divicta9

然后到主题选项里的自定义CSS输入下面代码:

 

@media only screen and ( min-width: 1100px ) {
.djcustom a.et_pb_promo_button.et_pb_button{
float: right;
clear:both;
margin-top:-17%!important; /*按照需要修改值*/
}

.djcustom .et_pb_promo_description {
width: 75% /* edit as required */
float:left;
clear:right;
}
}

保存后即可。

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注