如何使用 Divi 創建鎖定內容角彈出窗口

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 和度假村佈局包創建鎖定的內容角落彈出窗口。 鎖定內容選擇表單的概念很簡單。 人們必須輸入他們的電子郵件地址，一旦輸入，隱藏的內容就會顯示出來。 例如，您可以使用此隱藏內容來共享折扣代碼。 為了實現這一切，我們將使用 Bloom 插件並將鎖定的內容選擇表單短代碼添加到我們將其樣式設置為彈出窗口的文本模塊。 文本模塊還將包含一個帶有動畫延遲的動畫，以使文本模塊看起來就像是一個彈出窗口。

讓我們開始吧！

預覽

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

桌面

移動的

安裝 Bloom 插件

下載綻放

您需要做的第一件事是下載 Bloom 插件。 如果您已經是 Elegant Themes 會員，您可以前往會員區找到該插件。 在那裡，您將能夠下載壓縮文件。 如果您還不是 Elegant Themes 會員，則需要先購買會員資格。

上傳和安裝 Bloom

下載 Bloom 後，您可以繼續將其上傳到您的 WordPress 網站，方法是轉到插件 > 添加新並單擊頁面頂部的“上傳插件”。

然後，上傳壓縮文件並單擊“立即安裝”。

不要忘記在上傳後激活插件。

設置 Bloom Optin 表單

添加新的鎖定內容表單

我們現在可以開始創建鎖定的內容表單，稍後我們將在我們的 Divi 設計中使用它！ 轉到您的WordPress 儀表板 > Bloom > Optin Forms並創建一個新的optin 表單。

繼續選擇“鎖定內容”選項類型並進行設置。

設置設置

進入設置設置後，您需要為新的 optin 表單命名。 您還需要選擇您選擇的電子郵件提供商並輸入身份驗證詳細信息。

設計設置

下一步是設計表格。 在這篇文章的後面，我們將在我們將設置樣式的文本模塊中使用 optin 表單短代碼，因此我們不需要對 optin 表單本身應用太多設置。 確保將 optin 標題和 optin 消息內容框留空。 還要更改圖像方向。

• 圖像方向：無圖像

向下滾動頁面並對 optin 樣式和表單設置進行一些其他更改。

• 背景顏色：#ffffff
• 形式方向：底部形式

我們也在改變表單樣式設置。

• 表單字段方向：堆疊表單字段
• 表單背景顏色：#f4f4f4
• 按鈕顏色：#ffffff
• 按鈕文字顏色：深色
• 選擇表格邊緣樣式：第二個選項

用 Divi 創造設計

添加新行

列結構

我們現在可以切換到 Divi Builder！ 繼續使用度假村佈局包的主頁創建一個新頁面。 上傳布局後，繼續使用以下列結構在第二部分的頂部添加一個新行：

漿紗

在不添加任何模塊的情況下，打開行設置並對大小設置進行一些更改。

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

間距

接下來轉到間距設置並將“0px”添加到行的頂部和底部填充。 這將限制我們添加的新行佔用的空間。

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

添加文本模塊

添加H3內容

我們需要創建鎖定內容角彈出窗口的唯一模塊是文本模塊。 將您選擇的 H3 標題添加到內容框中。

添加鎖定內容選擇表單簡碼

然後，返回 Bloom 插件並複制您在本教程的前一部分中創建的 optin 表單的短代碼。

添加您希望在人們填寫 optin 表單後顯示的任何內容。 在下面的示例中，您可以注意到我們共享了一個優惠券代碼，但您可以共享您想要的任何類型的信息。

背景顏色

接下來轉到模塊的背景設置並添加完全白色的背景色。

• 背景顏色：#ffffff

文字設置

轉到設計選項卡，然後更改文本設置。

• 文字字體：Open Sans
• 文字顏色：#0f87ff
• 文字大小：15px

H3 文本設置

也更改用於 H3 副本的字體。

• 標題 3 字體：Gilda Display

間距

為了給模塊一個形狀，我們將添加一些自定義邊距和填充值。 我們還修改了所有這些值，以使設計與您的訪問者使用的任何屏幕尺寸相匹配。

• 上邊距：-17vw
• 左邊距：65vw（桌面）、37vw（平板電腦）、3vw（手機）
• 右邊距：0px
• 頂部填充：5vw（桌面）、11vw（平板電腦）、13vw（手機）
• 底部填充：5vw、11vw（平板電腦）、13vw（手機）
• 左填充：6vw（桌面）、11vw（平板電腦）、16vw（手機）
• 右填充：6vw（桌面）、11vw（平板電腦）、16vw（手機）

邊界

繼續轉到文本模塊的邊框設置，並將“500vw”添加到每個角，除了右下角。

盒子陰影

在旁邊添加一個框陰影以使文本模塊彈出。

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

動畫片

最後，我們還添加了一個從右到左的動畫以創建彈出效果。

• 動畫重複：一次
• 動畫方向：左
• 動畫持續時間：500ms
• 動畫延遲：1000ms
• 動畫強度：16%

克隆行

創建完第一個鎖定的內容角落彈出窗口後，您可以繼續克隆整行。

將重複的行放在此處：

刪除部分底部填充

刪除您放置行的部分的底部填充。

• 底部填充：0px

更改文本模塊間距設置

然後，打開文本模塊的設置並更改自定義邊距值。

• 左邊距：0vw
• 右邊距：65vw（桌面）、37vw（平板電腦）、3vw（手機）

更改文本模塊圓角

確保你也改變了圓角。 除了左下角，我們對每個角使用“500vw”。

更改文本模塊動畫設置

最後但並非最不重要的一點是，將動畫方向更改為右側，您就完成了！

• 動畫方向：右

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi、Bloom 插件和 Resort Layout Pack 創建鎖定的內容角落彈出窗口。 您可以使用此技術通過提供優惠券代碼來說服人們成為您的電子郵件列表的一部分，優惠券代碼在他們填寫表格後顯示。 本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議，請務必在下方評論區留言！