如何使用 Divi 為任何類型的網站設計一個有吸引力的訂閱部分

人們創建網站的主要原因之一是找到一種新的方式來接觸他們的目標受眾。 一旦您邁出了第一步並開始構建網站，您就會開始想知道如何才能與潛在客戶取得聯繫。 已證明可以幫助許多網站所有者的一件事是建立列表。 這一切都是關於從訪問者那裡收集電子郵件地址，通過電子郵件營銷將他們轉變為潛在客戶（並最終成為客戶）。

隨著列表構建，您可以在您的網站上創建有吸引力的訂閱部分。 您希望您的訂閱部分引人注目，更重要的是，您希望您的訂閱部分進行轉換。 在本教程中，我們創建了一個令人驚嘆的訂閱部分，無疑會吸引訪問者的注意力。 我們將巧妙的設計與關於為什麼要註冊電子郵件列表的爭論相結合。 最重要的是，我們還將分享三種調色板，您可以在創建設計時從中進行選擇。

讓我們開始吧！

訂閱我們的 YouTube 頻道

預覽

在我們深入學習本教程之前，讓我們先看看不同屏幕尺寸下的結果。

調色板 #1

• 顏色 #1： rgba(79,35,255,0.88)
• 顏色 #2： #e09900
• 顏色 #3： #4f23ff

調色板 #2

• 顏色 #1： rgba(255,35,97,0.75)
• 顏色 #2： #e09900
• 顏色 #3： #d80e00

調色板 #3

• 顏色 #1： RGBA(41,17,147,0.75)
• 顏色 #2： #00ffd8
• 顏色 #3： #291193

方法

選擇上述調色板之一（或創建您自己的調色板）並在整個教程中使用這些顏色。 當我們在設置中使用顏色時，我們將參考顏色 #1、#2 或 #3。 我們還使訂閱模塊與兩列重疊，並強調註冊電子郵件列表的好處。

重新創建訂閱部分

添加新部分

頂部分隔線

打開要添加訂閱部分的頁面並添加新的標準部分。 立即打開您部分的設置並添加以下頂部分隔符：

• 分隔線樣式：在列表中查找
• 分隔線顏色：#FFFFFF
• 分隔線高度：200px
• 分隔線翻轉：垂直

底部分隔線

在您的部分底部添加相同類型的分隔線：

• 分隔線樣式：在列表中查找
• 分隔線顏色：#FFFFFF
• 分隔線高度：200px
• 分隔線翻轉：垂直

間距

接下來打開間距設置並通過將“0px”添加到頂部和底部填充來刪除部分的所有默認填充。

添加新行

列結構

現在我們完成了所有部分的設置，我們可以添加一個新行。 為其選擇以下列結構

漸變背景

打開您的行設置並繼續添加以下漸變背景：

• 第一種漸變顏色：顏色 #1
• 第二個漸變顏色：顏色 #2
• 梯度方向：123deg
• 將漸變放在背景圖像上方：是

背景圖片

繼續添加選擇的背景圖像。 此背景圖像只會顯示一點。 也選擇“封面”作為背景圖像大小。

列 2 背景顏色

接下來，添加 'rgba(255,255,255,0.87)' 作為第 2 列的背景顏色。

漿紗

我們還將通過應用以下大小設置來減少兩列之間的空間並使行佔據屏幕的整個寬度：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

您需要在行設置中做的最後一件事是添加一些自定義填充：

• 頂部和底部填充：0px
• 第 1 列頂部填充：200px
• 第 1 列底部填充：100px
• 第 2 列頂部填充：300 像素（桌面）50 像素（平板電腦和手機）
• 第 2 列底部填充：100 像素（平板電腦和手機）
• 第 2 列左右填充：50px

將 Blurb 模塊 #1 添加到第 1 列

添加模糊標題

現在讓我們開始添加我們的模塊！ 我們將從第一列​​開始，添加一個 Blurb 模塊。 一旦我們完成了對 Blurb 模塊的修改，我們也會為其他兩個模塊重用它的設置。 添加 Blurb 模塊後，為其命名。

添加模糊圖標

接下來為您的 Blurb 模塊添加一個圖標。 我們為第一個模塊使用了以下圖標：

圖標設置

通過添加以下設置來更改圖標的外觀：

• 圖標顏色：#FFFFFF
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：43px

標題文字設置

我們只使用了一個模糊的標題。 這就是為什麼我們只需要修改 H4 的文本設置：

• 標題字體：Yeseva One
• 標題文本對齊：居中
• 標題文字顏色：#FFFFFF
• 標題字母間距：-1px

漿紗

我們還將根據不同的屏幕尺寸修改 Blurb 模塊的寬度：

• 內容寬度：150px
• 寬度：33%（桌面）、40%（平板）、60%（手機）
• 模塊對齊：居中

間距

最後，還將以下自定義填充添加到您的 Blurb 模塊中：

• 頂部和底部填充：50px

克隆 Blurb 模塊兩次並修改特色 Blurb 模塊

更改圖標和內容

您現在可以繼續克隆 Blurb 模塊兩次。 將它們全部保留在第一列中。 對於每個新的 Blurb 模塊，請繼續更改圖標和標題，使其與您要發送的消息相匹配。

添加背景顏色

我們將突出顯示中間的 Blurb 模塊。 為此，我們將首先為其添加白色背景色。

更改圖標和標題文本顏色

我們還將圖標和 H4 標題的顏色更改為“#000000”。

添加圓角

接下來，我們將為邊框設置中的每個角添加“5px”。

盒子陰影

最後但並非最不重要的一點是，我們將使用第一個框陰影選項添加一些深度。

將文本模塊 #1 添加到第 2 列

文字設置

讓我們繼續第二列！ 我們需要的第一個模塊是文本模塊。 添加內容後，對其應用以下文本設置：

• 文字字體：Yeseva One
• 文字顏色：#000000
• 文字大小：54px
• 文本行高：1em

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

間距

在該文本模塊的正下方，我們將添加另一個用於描述的文本模塊。 添加內容後，將“20px”添加到上邊距。

將電子郵件選擇模塊添加到第 2 列

背景顏色

我們需要添加的下一個模塊是 Email Optin 模塊。 添加後，繼續將背景顏色更改為“rgba(255,255,255,0)”。

電子郵件帳戶

添加您的電子郵件帳戶，然後選擇您選擇的服務提供商。

字段

繼續打開字段設置並禁用名字和姓氏字段。

字段設置

我們還將修改字段設置。 通過向每個角添加“0px”來移除圓角。 添加第一個框陰影選項。

按鈕設置

接下來，更改按鈕的外觀：

• 按鈕文字顏色：#FFFFFF
• 按鈕背景顏色：顏色 #3
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字體：Yeseva One
• 顯示按鈕圖標：是
• 按鈕圖標顏色：#FFFFFF
• 按鈕圖標位置：左
• 僅在懸停按鈕時顯示圖標：否
• Box Shadow：選擇第一個選項

間距

最後，使用以下間距設置使訂閱模塊與兩列重疊：

• 上邊距：20px（桌面），0px（平板和手機）
• 左邊距：-60%（桌面和平板電腦），0px（手機）
• 右邊距：60%（桌面）、50%（平板）、0px（手機）

將社交媒體關注模塊添加到 Colum 2

添加任意數量的社交網絡

最後但並非最不重要的是，我們將添加一個社交媒體關注模塊。 繼續並添加您希望出現的社交網絡。

圓角

添加完所有社交網絡後，將“50px”添加到邊框設置中的每個角。

間距

我們還將通過將“50px”添加到頂部邊距來向下推模塊。

單獨更改每個社交網絡的背景顏色

最後但並非最不重要的一點是，將每個社交網絡的背景顏色分別更改為“#000000”。

預覽

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

最後的想法

訂閱部分是您網站的重要組成部分。 它們可幫助您構建電子郵件列表、啟用電子郵件營銷並在短時間內將潛在客戶轉變為訪問者。 在這篇文章中，我們向您展示瞭如何創建一個令人驚嘆的訂閱部分，以匹配任何類型的網站。 我們將華麗的設計與註冊優勢相結合。 如果您有任何問題或建議，請務必在下方評論區留言！