如何在 Divi 中為您的頁面設計歡迎門

歡迎門是提高網站上任何號召性用語轉化率的有效方式。 事實上，歡迎門是一個流行的功能，它有像 OptinMonster 這樣的插件來創建高轉換率的電子郵件選項。 歡迎門背後的基本思想是通過全屏號召性用語隱藏網頁內容。 這會強制用戶在查看預期頁面之前與 CTA 進行交互。

在本教程中，我們將向您展示一種快速簡便的方法，無需使用插件即可向您的網頁添加自定義歡迎門。 這對於提高著陸頁上 CTA 的轉化率可能會派上用場。

一探究竟！

搶先看

這是我們將在本教程中構建的歡迎門的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們開始教程吧？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“選擇預製佈局”選項。
   
4. 選擇 Bistro Layout Pack，然後從 Load from Library 彈出窗口中選擇 Bistro Landing Page 佈局，然後單擊“使用此佈局”按鈕將佈局導入頁面。
   

之後，您就可以在創建自定義歡迎門時使用一個登錄頁面。

創建歡迎門

添加新部分

首先，創建一個新的常規部分並將其拖到頁面頂部。 然後向該部分添加一列行。

設計剖面

在我們開始向該部分添加任何模塊/內容之前，讓我們添加一些自定義設計，以便我們有一個漂亮的畫布可以繼續工作。

背景

首先，添加一個背景漸變和圖像如下：

• 背景漸變左顏色：rgba(0,17,38,0.7)
• 背景漸變右顏色：#001126
• 起始位置：68%
• 將漸變放在背景圖像上方：是
• 背景圖片：[插入圖片]

填充和動畫

接下來，跳轉到設計選項卡並更新以下填充和動畫設置：

• 填充（桌面）：28vh 頂部，28vh 底部
• 填充（平板電腦）：18vh 頂部，18vh 底部
• 填充（電話）：10vh 頂部，10vh 底部
• 動畫風格：幻燈片
• 動畫方向：下
• 動畫開始不透明度：100%；

定位歡迎門部分

現在我們準備給我們的部分一個具有更高 z 索引的固定位置，以便歡迎門將填滿瀏覽器屏幕，直到用戶單擊“不，謝謝”按鈕。

在添加定位 css 之前，讓我們添加一個自定義 CSS ID，如下所示：

• CSS ID：歡迎門

當用戶單擊“不，謝謝”按鈕時，這將用於使用 jQuery 定位該部分以將其向上移出視圖。

將以下自定義 CSS 添加到主元素：

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

然後更新 Z 索引如下：

• Z指數：11

注意：如果您希望歡迎門也隱藏標題，您可以添加更高的 Z 索引，如“99999”。

創建歡迎門內容

現在我們的部分已經準備好了，讓我們開始添加歡迎門內容。 您可以向此歡迎門添加任何您想要的內容。 現在，讓我們創建一個帶有兩個按鈕的簡單 CTA。 左側的按鈕將是您希望用戶單擊的按鈕。 右側的按鈕將是關閉歡迎門的“不，謝謝”按鈕。

文本模塊

在單列行內，添加一個具有以下內容的新文本模塊：

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

文字設計

然後更新文字設計如下：

• 文字字體：小屋
• 文字文字顏色：#ffffff
• 文字文字大小：24px（桌面），18px（手機）
• 文本對齊：居中
• 標題 2 字體：Cabin
• 標題 2 字體粗細：粗體
• 標題 2 文本顏色：#ffffff
• 標題 2 文字大小：66 像素（桌面）、26 像素（平板電腦）

添加兩列行

對於我們的按鈕，讓我們在文本下創建一個兩列的行。

添加左鍵

在左欄中，添加一個按鈕模塊並更新設置如下：

• 按鈕文字：“嗯！ 讓我們預訂吧”

• 按鈕對齊：居中
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#bd8f52
• 按鈕邊框寬度：0px
• 按鈕字體粗細：粗體

然後添加以下自定義 CSS 以使按鈕跨越列的全寬：

display: block !important;

添加正確的“不，謝謝”按鈕

要創建“不，謝謝”按鈕，首先複製左邊的按鈕並將其粘貼到右邊的列中。

然後更新內容如下：

• 按鈕文字：不用了，謝謝
• 按鈕鏈接 URL：#（這很重要，這樣按鈕不會刷新頁面）

然後更新按鈕設計如下：

• 按鈕文字顏色：#333333
• 按鈕背景顏色：rgba(255,255,255,0.4)

然後將以下 CSS 類添加到不感謝按鈕：

• CSS 類：謝謝

這將是我們在 jQuery 中的選擇器，用於在單擊時關閉歡迎門。

添加自定義代碼

現在讓我們添加自定義代碼片段，以添加當用戶單擊“不，謝謝”按鈕時關閉歡迎門的功能。 為此，請在“不感謝”按鈕模塊下方添加一個代碼模塊。

然後將以下代碼粘貼到代碼模塊代碼框中：

最後一點，讓我們通過給包含我們的按鈕的行一個最大寬度來使按鈕靠得更近。 打開行設置並更新以下內容：

• 最大寬度：600px

最後結果

這是最終設計的樣子。

這是刷新頁面時歡迎門的樣子。

這是歡迎門在手機上的樣子。

最後的想法

希望這個歡迎墊對您的頁面或模板有所幫助。 Divi 可以使用可視化構建器輕鬆設計和定位歡迎墊，並且只需要一小段 jQuery 即可完成該功能。 因此，如果您在不使用插件的情況下為您的頁面尋找快速歡迎墊，這應該會派上用場。

我期待在評論中收到您的來信。

乾杯!