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

儲存後即可。