您可以使用 Divi 的電子郵件選擇加入模塊創建 5 種電子郵件選擇加入設計

已發表: 2019-01-14

我們都喜歡我們電子郵件列表的新訂閱者。獲得新訂閱者的主要方法之一是為訪問者提供精心設計的電子郵件選擇加入表格。這就是為什麼在本教程中，我將向您展示如何使用 Divi 電子郵件選擇加入模塊實現五種不同的設計，以幫助激發您對這個強大而靈活的模塊的可能性的想像力。

搶先看

這是我們今天將要處理的五個 Divi 電子郵件選擇加入模塊設計的預覽。

#1 Shadow Stacks 選擇加入

divi 電子郵件選擇加入模塊

開始設計 #1

#2 大而小的選擇加入

divi 電子郵件選擇加入模塊

開始設計#2

#3 瘦身選擇加入

divi 電子郵件選擇加入模塊

開始設計 #3

#4 圖書優惠選擇加入

divi 電子郵件選擇加入模塊

開始設計 #4

#5 剪切框選擇加入

divi 電子郵件選擇加入模塊

開始設計 #5

你需要什麼開始

訂閱我們的 YouTube 頻道

對於本教程，您只需要 Divi。我們將從頭開始構建每一個，因此不需要預製佈局。但是，我將使用我們的一些佈局包中的一些圖像，但您可以根據需要使用自己的圖像。

此外，重要的是要知道，在您為電子郵件選擇加入模塊分配電子郵件提供商/列表之前，您將無法在實時站點上看到選擇加入表單字段。您可以在電子郵件帳戶下的電子郵件選擇設置中執行此操作。

divi 電子郵件選擇加入模塊

現在讓我們來看看這些設計！

#1 Shadow Stacks 選擇加入

divi 電子郵件選擇加入模塊

此設計為 Divi 電子郵件選擇加入模塊添加了兩個框陰影，以實現獨特的堆疊效果，使表單彈出。第一個框陰影被添加到電子郵件選擇加入模塊，第二個框陰影被添加到具有自定義大小和邊框的行中以使其工作。

這是它的完成方式。

首先創建一個包含一列行的新部分，並將電子郵件選擇加入模塊添加到該行。

打開電子郵件選擇加入設置並更新以下內容：

背景顏色：#1a0a38
佈局：身體在頂部，表格在底部
字段圓角：0px
文字方向：居中
標題字體粗細：輕
標題文字大小：36px
按鈕文字顏色：#ffffff
按鈕背景顏色：#00ac69
按鈕邊框寬度：0px
按鈕邊框半徑：0px
自定義填充：3vw 頂部，3vw 底部，5vw 左，5vw 右

divi 電子郵件選擇加入模塊

現在讓我們在電子郵件選擇加入模塊後面添加我們的第一個框陰影層。

盒子陰影：見截圖
框陰影水平位置：25px
框陰影垂直位置：-25px
陰影顏色：rgba(26,10,56,0.82)

divi 電子郵件選擇加入模塊

現在讓我們添加一小段自定義 CSS 以去除默認情況下添加到表單的左側填充。轉到高級選項卡並在選擇加入表單下添加以下 CSS。

padding-left: 0px !important;

divi 電子郵件選擇加入模塊

這負責電子郵件選擇加入模塊設置。現在讓我們編輯我們的行。打開行設置並更新以下內容：

自定義寬度：600px
自定義填充：頂部 25 像素，底部 0 像素，右側 25 像素
底部邊框寬度：25px
底部邊框顏色：rgba(0,0,0,0)
左邊框寬度：25px
左邊框顏色：rgba(0,0,0,0)

divi 電子郵件選擇加入模塊

現在我們可以將框陰影添加到行中。

盒子陰影：見截圖
框陰影水平位置：50px
框陰影垂直位置：-50px
框陰影傳播強度：-25px
陰影顏色：rgba(26,10,56,0.55)

divi 電子郵件選擇加入模塊

現在讓我們看看最終的設計。

divi 電子郵件選擇加入模塊

#2 大而小的選擇加入

divi 電子郵件選擇加入模塊

這種電子郵件選擇加入設計是最小的、乾淨的、大的。表單字段隨瀏覽器的大小縮放，因此在所有設備上看起來都很棒。並且它不會太大以迫使用戶滾動。

這是如何做到的。

首先創建一個包含一列行的新部分，並將電子郵件選擇加入模塊添加到該行。

打開電子郵件選擇加入設置並更新內容以包括您的標題和頁腳文本。

divi 電子郵件選擇加入模塊

然後用深色或圖像更新背景：

背景顏色：#121212
背景圖片：這是可選的。我正在使用 Podcast Layout Pack 中的一個

在我們繼續使用設計選項卡進行更多自定義之前，我們需要為我們將添加的大型表單元素騰出空間。為此，請轉到行設置並更新以下內容：

自定義寬度：100%

提示：使用 100% 自定義寬度是確保您的設計在移動設備上沒有任何左右邊距的好方法。如果您使用“製作全寬”選項，您的最大寬度將為 89%，因此您在移動設備上仍然有邊距。

divi 電子郵件選擇加入模塊

現在跳回電子郵件選擇加入模塊設置並更新以下設計：

佈局：身體在頂部，表格在底部

表單字段背景顏色：rgba(0,0,0,0)
字段圓角：0px
字段底部邊框寬度：2px
字段底部邊框顏色：#ffffff

文字方向：居中

標題字體：Lato
標題字體粗細：輕
標題字體樣式：TT
標題文字大小：4vw
標題行高度：1em

字段文本顏色：#ffffff
字段字體：Lato
字段字體重量：輕
字段文本大小：3.5vw
字段字母間距：0.1em
場線高度：1.3em

正文字母間距：0.5em

按鈕文字大小：4vw
按鈕邊框半徑：0px
按鈕字母間距：0.1em
按鈕字體：Lato
字體粗細：輕
自定義填充：頂部 10vw，底部 10vw，左側 10vw，右側 10vw

divi 電子郵件選擇加入模塊

注意字體大小的 vw 長度單位與行高和字母間距的 em 長度單位的結合使用。這允許文本和設計在調整瀏覽器時無縫縮放。

最後一步是包含一些自定義 CSS 片段來完善設計。轉到高級選項卡並在選擇加入表單字段下添加以下自定義 CSS：

font-size: 3.5vw;

這將允許鍵入時文本的大小與表單字段中的佔位符文本相匹配。

然後讓我們在按鈕上方添加一些自定義邊距，給它一點喘息的空間。在訂閱按鈕下添加以下內容：

margin-top: 3.5vw;

divi 電子郵件選擇加入模塊

現在讓我們看看最終的設計。

divi 電子郵件選擇加入模塊

#3 瘦身選擇加入

divi 電子郵件選擇加入模塊

對於希望在帖子或登錄頁面上節省一些垂直空間的公司和博客來說，下一個設計肯定會成為一種流行的解決方案。儘管 Divi 的 Email Opt-in 模塊最適合更傳統的垂直表單，但您實際上可以僅使用一小段 CSS 將表單轉換為細長的水平表單。

這是如何做到的。

創建一個包含一列行的新部分，並將電子郵件選擇加入模塊添加到該行。

打開電子郵件選擇加入設置並更新內容以包含標題但不包含其他內容。

然後使用背景和按鈕顏色更新設計，如下所示：

背景顏色：#54677d
佈局：身體在頂部，形式在底部
文字方向：居中
按鈕背景顏色：#b0c94f
按鈕邊框寬度：0px

divi 電子郵件選擇加入模塊

現在是自定義 CSS 的時候了。由於我們只希望在桌面上（而不是在移動設備上）使用瘦表單設計，因此我們將使用自定義 CSS ID 將 CSS 添加到頁面（在頁面設置下）以定位表單樣式。

為此，請轉到高級選項卡並為選擇加入模塊提供自定義 CSS ID。

CSS ID：瘦

這將用於使用我們將添加到頁面的外部 CSS 來定位此表單。

現在打開 Divi Builder 頁面設置並在“高級”選項卡下添加以下 CSS。

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
}

divi 電子郵件選擇加入模塊

由於 Divi 已經在後端使用 flex 來設置表單的樣式，因此這個 CSS 去掉了導致表單字段垂直對齊的 flex-wrap 屬性。結果是表單字段的水平佈局。將 flex-basis 屬性調整為 23% 基本上可以設置每個表單字段的寬度。並且因為我們在媒體查詢中添加了 CSS，設計只會發生在桌面上，表單的默認佈局顯示在移動設備上。

這是最終的設計。

divi 電子郵件選擇加入模塊