如何在 Divi 中為您的頁面模板創建動畫宣傳欄

已發表: 2019-11-23

在 Divi 中為您的頁面模板創建動畫促銷欄是一種無需依賴插件即可以風格宣傳產品和交易的好方法。 使用 Divi 強大的設計功能，您可以在 Divi 的 Theme Builder 中編輯模板時直觀地構建促銷欄。 然後一旦模板準備好，促銷欄將在已分配給該模板的任何頁面上彈出。 簡單！

讓我們開始吧！

搶先看

這是我們將在本教程中創建的促銷欄的快速瀏覽。

我們還將向您展示如何使促銷欄固定（或粘性）。

免費下載促銷欄頁面模板

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

下載文件
免費下載

免費下載

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

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

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

訂閱我們的 YouTube 頻道

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您還需要至少一個使用 Divi Builder 創建的頁面用於測試目的，以便將促銷欄模板分配給該頁面以顯示結果。

之後，您就可以開始了。

在頁面模板頂部創建動畫宣傳欄

創建新模板

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後單擊“添加新模板”框以創建新模板。

將模板分配給您希望顯示促銷欄的頁面。

在新模板上，單擊“添加自定義正文”區域，然後選擇“構建自定義正文”。

注意：我們將促銷欄添加到模板的正文區域（不是標題），以便它可以與 Divi 的默認標題以及您將來可能添加的任何自定義標題一起使用。

然後選擇“從頭開始構建”選項。

將促銷欄添加到模板

在模板佈局編輯器中，我們可以開始使用 Divi Builder 構建促銷欄。

首先向常規部分添加一列行。

行設置

在添加模塊之前，更新行設置如下：

  • 背景漸變左顏色：#4a42ec
  • 背景漸變右顏色：#521d91
  • 梯度方向：90度
  • 使用自定義裝訂線寬度：是
  • 天溝寬度：1
  • 寬度：100%
  • 最大寬度：100%
  • 填充：0px 頂部，0px 底部

這會處理我們正在創建的促銷欄的背景顏色和寬度。

列設置

在離開行設置之前，點擊 打開列的設置。 然後將以下自定義 CSS 添加到列主元素： 

display: flex;
align-items: center;
justify-content: center;

此 CSS 使用 flex 屬性將列內的內容（或模塊）對齊以水平（並排）堆疊。 它還垂直和水平地將列內的模塊居中。 我們這樣做的原因是為了避免必須使用多個列行結構，這些結構將在移動設備上彼此堆疊。 使用此設置，內容將在所有瀏覽器寬度上保持水平對齊。

現在我們準備向促銷欄添加一些內容。

添加模糊模塊

對於此示例促銷的內容，我們將包含一個帶有小圖標的簡介模塊和一個帶有右側按鈕的文本博客（很像 Elegantthemes.com 上的促銷欄）。

單擊行內的灰色圓圈加號圖標並添加一個模糊模塊。

對於簡介的內容，請輸入以下內容：

  • 標題：[輸入促銷文字]
  • 使用圖標：是
  • 圖標：禮物圖標（見截圖）

更新簡介設計設置如下：

  • 圖標顏色：#ff4a9e
  • 圖像/圖標放置：左
  • 使用圖標字體大小：是
  • 圖標字體大小：16px
  • 標題文字大小：16px（桌面），14px（手機）
  • 標題行 Hewight：1.3em
  • 最大寬度：230px（僅限手機）
  • 填充：10px 頂部
  • 動畫風格：幻燈片
  • 動畫方向：右
  • 動畫延遲：250ms

添加按鈕模塊

接下來在 blurb 模塊下添加一個按鈕模塊。 由於 flex 屬性，模塊將出現在模糊的右側而不是在其下方。

更新按鈕設計設置如下：

  • 為按鈕使用自定義樣式：是
  • 按鈕文字大小：15px（桌面），13px（手機）
  • 按鈕文字顏色：#ffffff
  • 按鈕邊框寬度：0px
  • 按鈕邊框半徑：20px
  • 按鈕字體粗細：半粗體

  • 邊距（桌面）：左 20 像素
  • 邊距（手機）：左 10px
  • 填充（桌面）：0px 頂部，0px 底部
  • 填充（電話）：頂部 2px，底部 2px，左側 8px，右側 8px
  • 動畫風格：彈跳
  • 動畫延遲：1000ms

部分設置

要完成促銷欄設計，請更新包含促銷欄的部分，如下所示：

  • 填充：0px 頂部，0px 底部
  • 動畫風格：彈跳
  • 動畫方向：下
  • 動畫持續時間：500ms
  • 動畫延遲：250ms
  • 動畫開始不透明度：100%
  • Z 指數：999

添加全角帖子內容模塊

此時，促銷欄已準備就緒。 但由於這是一個模板，我們需要確保並添加帖子內容模塊以使用此模板顯示頁面的內容。

對於已經（或將要）使用 Divi Builder 構建的頁面，您將需要使用全角帖子內容模塊以最大化內容區域。

（注意：對於使用默認編輯器的頁面，您需要在常規部分中使用常規帖子內容模塊，以便默認情況下具有類似的最大寬度 1080 像素。）

添加全角部分

在包含促銷欄的部分下，添加一個全角部分。

添加全角帖子內容模塊

然後選擇全角帖子內容模塊。

就這樣吧。 現在在退出編輯器之前確保並保存佈局。

然後也保存主題構建器的更改。

最後結果

前

現在這是使用促銷欄分配模板之前的頁面。

後

這是帶有促銷欄的新模板的同一頁面。

這是在手機上。

這是頁面加載時的促銷欄動畫。

使促銷欄具有粘性

為了使促銷欄貼在默認的 Divi 標題下，我們可以向包含促銷欄的部分添加一個簡單的 CSS 片段。

打開部分設置並將以下 CSS 添加到桌面上的主要元素： 

position: fixed;
width: 100%;

然後將以下 CSS 添加到平板電腦上的主要元素： 

position: relative;

現在看看結果。

不要忘記鏈接

構建促銷欄後，您需要將鏈接 URL 添加到促銷優惠或頁面。 您可以在按鈕設置內容選項卡中添加按鈕鏈接 URL。

對於偶數轉換，您不妨在行設置鏈接選項下將鏈接 url 添加到整行。

最後的想法

在本教程中，我們向您展示瞭如何使用 Divi Theme Builder 設計促銷欄（從頭開始）。 促銷欄配有多種動畫和設計，使其真正吸引遊客。 您甚至可以在向下滾動頁面時固定促銷欄以獲得更多可見性。 並且能夠控制促銷欄在整個站點中出現的位置，該應用程序非常實用。

希望這會激勵您創建一些自己的促銷欄。

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

乾杯!