下載 Divi 的免費多用途銷售橫幅設計

在一年中促銷風靡一時的關鍵時期，擁有多功能銷售橫幅肯定會派上用場（並節省您的時間）。 這就是為什麼我們為 Divi 提供這個多用途銷售橫幅作為免費下載！ 這個銷售橫幅可以很容易地定制以滿足您的需求，只需對一些文本和背景圖像進行一些調整。 在 Divi 中設計銷售橫幅很容易，您不必滿足於在網絡上通常看起來有點顆粒感的圖像橫幅。 因此，除了免費下載之外，我還將向您展示如何從頭開始在 Divi 中設計銷售橫幅。

讓我們開始吧！

包括什麼

這是下載中包含的銷售橫幅設計的一瞥。

免費下載銷售橫幅設計

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

下載文件

免費下載

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

下載

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

將佈局加載到 Divi 庫

下載文件後，將其解壓縮。 您會發現它包含一個名為“sales-banner-design.json”的文件。 這是您將加載到 Divi 庫的內容。 現在轉到您的 wordpress 儀表板並導航到 Divi > Divi Library。 然後單擊頁面頂部的導入按鈕。 從可移植性彈出窗口中，選擇導入選項卡並選擇 sales-banner-design.json 文件。 然後單擊“導入 Divi Builder 佈局”按鈕。

現在要將佈局導入您的頁面，只需創建一個新頁面並部署可視化構建器。 然後選擇“選擇預製佈局”。 從庫加載彈出窗口中，選擇“您保存的佈局”選項卡，然後從列表中單擊“銷售橫幅設計”佈局。 就是這樣！

如何在 Divi 中從頭開始創建銷售橫幅

添加節背景

要開始工作，請創建一個新頁面。 為頁面指定標題後，部署可視化構建器並選擇“從頭開始構建”選項。 然後添加一個具有一列行的新部分。

在開始向該行添加任何模塊之前，為您的部分設置背景漸變色（此時顏色無關緊要。我們只需要一個背景色即可查看我們將用於銷售的所有白色設計元素橫幅。）

自定義銷售橫幅的行

在我們將模塊添加到行之前，讓我們首先給我們的行一個 700px 的自定義寬度並去掉任何頂部或底部的間距，這樣我們的行就會很好地坐在我們將在下面添加的另一行的頂部。 轉到行設置並更新以下內容：

自定義寬度：700px
天溝寬度：1
自定義邊距：0px 頂部，0px，底部
自定義填充：0px 頂部，0px 底部

現在將該行複制兩次，以便您總共擁有三行相同的行。 這些將用於構建我們的銷售橫幅。

添加帶有相鄰文本的頂部邊框

為了構建我們的銷售橫幅，我們從頂部邊框開始，左側有一些文本。 為此，我們將使用分隔模塊和文本模塊。 首先，新建一個文本模塊，在內容框中添加幾個字的內容。

內容：“僅限在線”

繼續到設計選項卡並更新以下內容：

文字字體粗細：粗體
文字字體樣式：TT
文字文字顏色：rgba(255,255,255,0.9)
文字文字大小：15px
文字字母間距：2px
文本行高：1em
寬度：22%（桌面）、25%（平板電腦）、40%（智能手機）
模塊對齊方式：左
自定義邊距：0px 頂部，-15px 底部
自定義填充：0px 頂部，0px 底部

這個自定義邊距有點早，因為我們的分隔線還沒有添加，但有必要將文本對齊，以便它與即將添加的分隔線完美相鄰。

現在在同一行的文本模塊下添加一個分隔模塊。 然後按如下方式更新分隔線設置：

顏色：RGBA(255,255,255,0.9)
分隔位置：底部
分隔線重量：15px
高度：15px
寬度：78%（桌面）、75%（平板電腦）、60%（智能手機）
模塊對齊：右
自定義邊距：0px 頂部，0px 底部
自定義填充：0px 頂部，0px 底部

當然，在根據自己的需要自定義設計時，您需要根據文本模塊的寬度來調整邊框的寬度。

接下來，我們需要再添加一個分隔器模塊，將分隔器連接到我們接下來要設計的行的右邊框。

為此，複製分隔器模塊並更新以下內容：

寬度：15px
自定義邊距：-1px 底部

添加帶有相鄰文本的底部邊框

要創建底部邊框，我們可以使用在頂行的頂部邊框中創建的相同元素。 只是這一次我們將從 15px 寬的分隔器模塊開始。 繼續並複制 15px 分隔器模塊並將其粘貼到第三（底部）行中。 然後將模塊對齊更新為左而不是右。

接下來，從頂行複制較長的分隔線模塊並將其粘貼到底行的 15px 分隔線下方。 然後調整以下內容：

寬度：75%（桌面）、70%（平板電腦）、50%（智能手機）
模塊對齊方式：左

最後，複製頂行的文本模塊並粘貼到底行的兩個分隔模塊下方。 然後更新以下內容：

內容：“11 月 1 日開始”
寬度：25%（桌面）、30%（平板電腦）、50%（智能手機）
模塊對齊：右
自定義邊距：-15px 頂部，0px 底部
自定義填充：左 15px

將文本模塊添加到中間行

現在我們準備開始將文本模塊添加到我們的中間行，該行將保存我們的主要銷售橫幅文本。 我們將堆疊三個文本模塊。 繼續將第一個文本模塊添加到中間行。

然後更新以下內容：

內容：“一切20%折扣”
背景顏色：rgba(255,255,255,0.9)

文字字體粗細：半粗體
文字字體樣式：TT
文字文字顏色：#000000
文字文字大小：34px（桌面），20px（智能手機）
文字字母間距：2px
文本行高：1em
文字方向：居中
自定義填充：2vw 頂部，2vw 底部，5vw 左，5vw 右

在白色背景上為文本提供黑色對於最大化屏幕混合模式效果至關重要，這將使文本與部分背景混合。 稍後我們將在行中添加屏幕混合模式。

現在復製文本模塊以啟動下一個文本模塊的設計。 然後使用以下 html 更新內容：

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

內聯樣式只是在標題文本周圍添加黑色邊框。 同樣，黑色將與屏幕混合模式一起使用，以顯示帶有文本的部分背景。

然後更新以下內容：

標題 2 字體粗細：粗體
標題 2 字體樣式：TT
標題 2 文本顏色：#000000
標題 2 文字大小：100 像素（桌面）、80 像素（平板電腦）、60 像素（智能手機）
標題 2 字母間距：2px
自定義邊距：0px 頂部
自定義填充：0px 頂部，0px 底部

對於最後一個文本模塊，複製中間行中的第一個文本模塊並將其粘貼到第二個文本模塊下。

然後更新以下內容：

內容：“立即購買”
文本字體樣式：TT、U（下劃線）
自定義邊距：0px 頂部
自定義填充：1vw 頂部，2vw 底部

中間行的樣式

此設計的最後階段是在中間行添加邊框和屏幕混合模式效果。 為此，請打開中間行設置並更新以下內容：

自定義填充：左 15 像素，右 15 像素
右邊框寬度：15px
右邊框顏色：rgba(255,255,255,0.9)
左邊框寬度：15px
左邊框顏色：rgba(255,255,255,0.9)
混合模式：屏幕

屏幕混合模式允許文本混合背景圖像以通過文本顯示以獲得酷炫的效果！

查看最終結果。

添加鏈接到您的銷售橫幅

由於這是一個銷售橫幅，您需要最大化橫幅上的可點擊空間以增加轉化率。 為此，您可以添加指向整個中間行的鏈接。 只需打開中間行設置並輸入行鏈接 URL 即可重定向到所需頁面。

為獨特的設計添加不同的部分背景

使用這種新的銷售橫幅設計，您可以輕鬆更新背景圖像以創建獨特的設計。

這裡有一些例子。

最後的想法

我希望這個銷售橫幅設計能在全年所需的所有網絡促銷活動中派上用場。 該設計旨在作為一個多用途的銷售橫幅，可以輕鬆地使用新的文本和部分背景圖像進行更新，以獲得全新的外觀。 您甚至還可以添加視頻背景！

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

乾杯!