什麼是行為號召?英文名稱為 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;
}
}

保存後即可。