如何在 Divi 中創建一個吸引註意力的粘性電子郵件選項
已發表: 2020-09-30Divi 的粘性位置選項允許您使頁面上的任何元素具有粘性。 這允許您在用戶向下滾動頁面時以特定間隔固定頁面上的元素，以便它們保持可見時間更長。 對於你的博主來說，在你的帖子模板中添加一個粘性電子郵件選擇加入是很有意義的，以便巧妙而有效地將這個重要的表格放在最前面。
在本教程中，我們將向您展示如何向您的 Divi 博客帖子模板添加粘性電子郵件選擇加入，以吸引更多關注，並希望吸引更多潛在客戶。 我們甚至會向您展示如何為粘性電子郵件選擇添加彈出懸停效果！
讓我們開始吧！
搶先看
這是我們將在本教程中構建的設計的快速瀏覽。
免費下載粘性電子郵件 Optin 帖子模板
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
如何將帶有粘性電子郵件選項的帖子模板上傳到您的網站
要上傳模板，請導航到 WordPress 網站後端的 Divi Theme Builder。
然後，在右上角，您會看到一個帶有兩個箭頭的圖標。 單擊該圖標。
導航到導入選項卡，上傳您可以在本文中下載的 JSON 文件，然後單擊“導入 Divi 主題生成器模板”。
上傳文件後，您會注意到一個新模板，其中包含已分配給所有帖子的新正文區域。 一旦您希望激活模板，請立即保存 Divi Theme Builder 更改。
讓我們進入教程，好嗎？
第 1 部分：導入預製博客帖子模板
在本教程中，我們將使用 Divi 商業顧問佈局包的博客文章模板，您可以從此博客文章下載。
下載 zip 文件後，您需要解壓縮它並將文件導入 Divi Theme Builder。
這是如何做到的……
- 導航到 Divi > Theme Builder。
- 單擊右上角的便攜性圖標。
- 在可移植性彈出窗口中選擇導入選項卡。
- 從您下載的文件中選擇 json 文件。
- 單擊導入按鈕。
第 2 部分：將粘性電子郵件選項添加到模板
導入 JSON 文件後，單擊編輯圖標以編輯自定義正文模板佈局。
在帖子模板佈局的底部，您會找到帶有電子郵件選擇加入表單的部分，我們將用於粘性電子郵件選擇加入。
對於此示例，我們希望電子郵件選擇加入的粘性位置位於某個部分，以便用戶在滾動到具有粘性電子郵件選擇加入的部分之前不會看到電子郵件選擇加入。 但是，由於電子郵件選擇加入在其自己的部分中，因此電子郵件選擇加入將沒有足夠的移動空間。 因此，我們需要將其帶入上麵包含評論部分的部分，以便選擇加入的電子郵件將懸停在該部分上，然後再停留在其原始位置。
在上面的部分添加新行
為此，請直接在包含評論模塊的行下方創建一個新的單列行。
添加行樣式
然後打開新行的設置，添加背景色如下：
- 背景顏色：#282828
在設計選項卡下，更新行的以下大小和間距：
- 寬度：100%
- 最大寬度：100%
- 邊距：15vw 頂部
- 填充：0px 頂部，0px 底部
將電子郵件選擇加入新行
行樣式到位後，將底部的電子郵件選擇加入您剛剛創建的新行。
刪除底部部分（我們不再需要它了）。
使用粘性位置更新電子郵件選擇加入
然後現在在新行內打開電子郵件選擇加入的設置，並更新棒位置選項，如下所示：
- 粘性位置：粘在底部
- 最高粘性限制：部分
這將導致電子郵件選擇加入在滾動瀏覽該部分時停留在瀏覽器窗口的底部，然後再停留在其父行中。
更新電子郵件選擇加入樣式
在設計選項卡下，更新電子郵件選擇加入的佈局，如下所示：
- 佈局：身體在頂部，形式在底部
然後更新以下樣式：
- 標題文字大小：32px
- 最大寬度：600px
- 模塊對齊：居中
然後將動畫樣式設置為無。
結果
此時，我們可以通過在另一個瀏覽器窗口中查看帖子來查看結果。
添加粘性位置樣式
當電子郵件選擇加入處於粘性位置時，我們可以向模塊添加僅適用於粘性狀態的特定樣式。 這允許我們添加不同的配色方案來抵消白色背景，使其更加突出。
要為粘性狀態添加不同的背景顏色，請打開電子郵件選擇加入設置並選擇背景選項旁邊的縮略圖圖標（粘性圖標）。 然後單擊粘性選項卡並添加以下背景顏色：
- 背景顏色（粘性）：#282828
繼續相同的過程，為設計選項卡下的以下選項添加粘性樣式：
- 標題文字顏色（粘性）：#ffffff
- 正文顏色（粘性）：#ffffff
- 最大寬度（粘性）：500px
- 填充（粘性）：頂部 18 像素，底部 30 像素，左側 30 像素，右側 30 像素
結果
現在讓我們在實時帖子中查看結果。
將懸停彈出效果添加到粘性電子郵件選擇中
要在粘性電子郵件選擇加入上添加懸停彈出效果，請打開電子郵件選擇加入設置，並按如下方式更新棒轉換翻譯：
- Transform Translate Y 軸（粘性）：85%
這將使電子郵件選擇向下（在視口外）降低其自身高度的 85%，暴露足夠的電子郵件選擇，以便用戶可以將鼠標懸停在標題上。
然後將懸停狀態添加到變換選項，以便變換平移位置在懸停時返回其原始位置：
- 變換平移 Y 軸（懸停）：0%
結果
這是最終結果。
最終結果
這是我們構建的粘性標題的三個版本。
最後的想法
值得慶幸的是，Divi 可以輕鬆地向您的網站添加粘性電子郵件選項。 這可以騰出更多時間來調整粘性元素的設計，以採用更獨特的方式來顯示表單。 希望這項技術能在即將到來的博客項目中為您提供良好的服務。
我期待在評論中收到您的來信。
乾杯!