如何將下拉聯繫表添加到您的全局標題

已發表: 2020-02-19

當您使用 Divi 的主題構建器為您的網站構建自定義標題時，您會發現自己正在尋找添加 CTA 的理想方式。 一種方法是添加下拉聯繫表。 這將幫助您保持標題的整體外觀和感覺，同時仍然提供無需滾動即可聯繫的可能性。 在本教程中，我們將向您展示如何使用 Divi 和一些 JQuery 和 CSS 代碼創建下拉聯繫表單。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

下拉聯繫表

移動的

下拉聯繫表

免費下載全局標題模板

要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

1.轉到Divi Theme Builder並開始構建全局標題

轉到 Divi 主題生成器

首先轉到 WordPress 網站後端的 Divi Theme Builder。

下拉聯繫表

構建全局標題

單擊“添加全局標題”並選擇“構建全局標題”以開始構建自定義全局標題。

下拉聯繫表

2. 構建標題設計

部分設置

背景顏色

進入全局標題模板後，您會注意到一個部分。 打開該部分並使用白色背景色。

  • 背景顏色：#FFFFFF

下拉聯繫表

間距

接下來刪除該部分的默認頂部和底部填充。

  • 頂部填充：0px
  • 底部填充：0px

下拉聯繫表

盒子陰影

也應用一個微妙的框陰影。

  • 框陰影模糊強度：50px
  • 陰影顏色：rgba(0,0,0,0.15)

下拉聯繫表

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

下拉聯繫表

漿紗

在不添加任何模塊的情況下，打開行設置並按如下方式更改大小設置：

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 均衡柱高：是
  • 寬度：95%
  • 最大寬度：100%

下拉聯繫表

間距

接下來添加一些自定義的頂部和底部填充。

  • 頂部填充：1vw
  • 底部填充：1vw

下拉聯繫表

主要元素

並通過向行的主要元素添加一行 CSS 代碼來對齊所有列內容。 

align-items: center;

下拉聯繫表

第 2 列 Z 索引

我們還確保第二列具有更高的 z 索引值以用於響應目的。

  • Z指數：12

下拉聯繫表

將圖像模塊添加到第 1 列

上傳標誌

是時候開始添加模塊了！ 從第 1 列中的圖像模塊開始。上傳徽標。

下拉聯繫表

結盟

接下來更改模塊的對齊方式。

  • 圖像對齊：居中

下拉聯繫表

漿紗

也修改寬度。

  • 寬度：3vw（桌面）、5vw（平板電腦）、7vw（手機）

下拉聯繫表

將菜單模塊添加到第 2 列

選擇菜單

在第二列中，我們將添加一個菜單模塊。

下拉聯繫表

佈局

轉到模塊的設計選項卡並更改佈局樣式。

  • 風格：居中

下拉聯繫表

菜單文字設置

接下來修改模塊的菜單文本設置。

  • 菜單字體：Open Sans
  • 菜單字體粗細：半粗體
  • 菜單文字顏色：#000000
  • 菜單文字大小：0.8vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 菜單字母間距：1px

下拉聯繫表

下拉菜單文本設置

然後，更改下拉菜單行顏色。

  • 下拉菜單行顏色：#007dff

下拉聯繫表

圖標

隨著漢堡包菜單圖標顏色。

  • 漢堡菜單圖標顏色：#007dff

下拉聯繫表

將文本模塊 1 添加到第 3 列

添加副本

進入第三個模塊！ 添加帶有您選擇的一些副本的文本模塊。

下拉聯繫表

背景顏色

接下來添加背景顏色。

  • 背景顏色：#007dff

下拉聯繫表

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

  • 文字字體：Open Sans
  • 文字字體粗細：粗體
  • 文字顏色：#ffffff
  • 文字大小：0.8vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 文本對齊：居中

下拉聯繫表

漿紗

接下來修改模塊的大小設置。

  • 寬度：33%
  • 模塊對齊：居中

下拉聯繫表

間距

然後，添加一些自定義的頂部和底部填充。

  • 頂部填充：0.8vw（台式機），2vw（平板電腦和手機）
  • 底部填充：0.8vw（台式機），2vw（平板電腦和手機）

下拉聯繫表

邊界

並通過添加一些邊框半徑來完成模塊的設置。

  • 所有角落：100px

下拉聯繫表

將文本模塊 2 添加到第 3 列

將符號添加到內容框

進入下一個模塊，這是另一個文本模塊。 將以下箭頭符號添加到內容框中：'▼'。

下拉聯繫表

文字設置

轉到模塊的設計選項卡並相應地更改文本設置：

  • 文字字體：Open Sans
  • 文字顏色：#007fff
  • 文字大小：3vw
  • 文本行高：0em
  • 文本對齊：居中

下拉聯繫表

Z索引

我們也在增加模塊的 z 索引。

  • Z指數：11

下拉聯繫表

將聯繫表單模塊添加到第 3 列

添加全角選擇字段

第三列中我們需要的下一個也是最後一個模塊是聯繫表單模塊。 添加您需要的所有全角字段。

下拉聯繫表

添加標題

也使用標題。

下拉聯繫表

背景顏色

我們接下來要更改背景顏色。

  • 背景顏色：#e7f2ff

下拉聯繫表

字段設置

然後，轉到模塊的設計選項卡並更改字段設置。

  • 字段背景顏色：#ffffff
  • 字段文本顏色：#dddddd
  • 字段焦點文本顏色：#007dff
  • 字段頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 字段底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 字段字體：Open Sans

下拉聯繫表

  • 字段文本大小：0.7vw（桌面）、1.8vw（平板電腦）、3vw（手機）

下拉聯繫表

標題文字設置

接下來修改標題文本設置。

  • 標題標題級別：H3
  • 標題字體粗細：粗體
  • 標題文本對齊：居中
  • 標題文字顏色：#007dff
  • 標題文字大小：1vw（桌面）、2.5vw（平板電腦）、3.5vw（手機）
  • 標題行高度：1.6em

下拉聯繫表

驗證碼文本設置

隨著驗證碼文本設置。

  • 驗證碼字體：Open Sans
  • 驗證碼文本顏色：#007dff

下拉聯繫表

按鈕設置

繼續設置按鈕樣式。

  • 為按鈕使用自定義樣式：是
  • 按鈕文字大小：0.8vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 按鈕文字顏色：#ffffff
  • 按鈕背景顏色：#007dff
  • 按鈕邊框寬度：0px
  • 按鈕邊框半徑：100px

下拉聯繫表

  • 按鈕字體：Open Sans
  • 按鈕字體粗細：粗體

下拉聯繫表

  • 按鈕頂部邊距：1vw
  • 按鈕頂部填充：1vw（桌面），2vw（平板電腦和手機）
  • 按鈕底部填充：1vw（桌面），2vw（平板電腦和手機）
  • 按鈕左填充：2vw（桌面），7vw（平板電腦和手機）
  • Button Right Padding：2vw（桌面），7vw（平板電腦和手機）

下拉聯繫表

間距

然後，在不同的屏幕尺寸上使用一些自定義填充值。

  • 頂部填充：4vw（台式機）、6vw（平板電腦和手機）
  • 底部填充：4vw（台式機），6vw（平板電腦和手機）
  • 左填充：2vw（桌面），6vw（平板電腦和手機）
  • 右填充：2vw（桌面），6vw（平板電腦和手機）

下拉聯繫表

邊界

接下來修改邊框設置。

  • 所有角：10px

下拉聯繫表

主要元素、聯繫人標題和驗證碼 CSS

通過向高級選項卡添加一些小的 CSS 更改來完成模塊的設置。

主要元素： 

border-radius: 20px;

聯繫人標題： 

margin-bottom: 1vw;

驗證碼： 

margin-top: 1.5vw;

下拉聯繫表

3.自定義元素以單擊創建聯繫表單

添加第 3 列高度

一旦您準備好所有模塊，就可以創建效果了。 實現預期結果的第一步是打開第 3 列設置並在高級選項卡中添加一些響應式自定義高度。

桌面： 

height: 3vw;

藥片： 

height: 5vw;

電話： 

height: 6vw;

下拉聯繫表

將 CSS 類添加到按鈕和箭頭

然後，我們將相同的 CSS 類添加到第 3 列中的兩個第一個文本模塊。

  • CSS 類：show-contact

下拉聯繫表

將 CSS 類添加到聯繫表單

我們也需要一個用於聯繫表單模塊的自定義 CSS 類。

  • CSS 類：聯繫表單模塊

下拉聯繫表

隱藏聯繫表單模塊

繼續向聯繫表單模塊的主要元素添加一行額外的 CSS 代碼。 這將允許我們在單擊之前隱藏模塊。 

display: none;

下拉聯繫表

使用 JQuery 和 CSS 代碼將代碼模塊添加到第 3 列

為了創建點擊函數，我們需要一些 JQuery 代碼。 我們也將使用一些自定義 CSS 代碼。 使用代碼將新的代碼模塊添加到第 2 列。 確保將 JQuery 代碼放在 script 標籤之間，並將 CSS 代碼放在 style 標籤之間。 

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});
.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

下拉聯繫表

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

下拉聯繫表

移動的

下拉聯繫表

最後的想法

在這篇文章中，我們向您展示瞭如何將下拉聯繫表單添加到您的自定義標題中。 這是從一開始就觸發行動的好方法。 我們還免費共享了 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。