使用 Divi 的新背景選項構建響應式橫幅

已發表: 2017-08-03

在我的上一篇文章中，我向您展示瞭如何使用 Divi 的背景選項界面通過在列和行背景上分層按鈕模塊來設置按鈕樣式。 今天，我將向您展示如何使用 Divi 的背景選項界面設計響應式可點擊橫幅。

我們將使用與按鈕背景相同的技術，並稍作調整。 基本上，我將向您展示如何創建非常大的按鈕並將它們設計得更像橫幅。 這裡的重要因素是橫幅的整個表面區域保持可點擊。 但是，您應該從一開始就知道我們只能使用這種方法製作簡單的橫幅。 因為我們受限於按鈕模塊的文本輸入，所以我們只能用一串文本創建橫幅。 但是，通過使用列背景選項，我們可以使用 Visual Builder 立即創建一些非常酷的橫幅。

Html 橫幅與圖像橫幅

使用 html 橫幅（使用 html 元素構建的橫幅）比圖像橫幅（作為沒有任何 html 元素的單個圖像構建的橫幅）有很多優點。 對於 html 橫幅，網絡瀏覽器可以識別文本（頁面翻譯器和屏幕閱讀器必不可少）。 它們隨著瀏覽器窗口的大小而縮放，因此它們總是看起來很清晰，不像可能會變形或難以辨認的圖像。 也許我最喜歡使用 html 橫幅而不是圖像橫幅的方面是 html 真的很容易改變。 我可以通過幾次按鍵更改文本，而不是在我的硬盤驅動器的深處搜索我需要在照片編輯器中編輯的原始文件。 而且，我可以快速製作另一個版本的橫幅，以使用 Divi Leads 進行拆分測試。

這種將按鈕變成橫幅的方法為一些有用的應用程序打開了大門，例如為您的博客（或播客）創建自定義的特色帖子、類別或系列。

讓我們開始吧。

搶先看

在我們正式開始之前。 這是我們將在這篇文章中構建的橫幅的先睹為快。

橫幅

使用 Divi 實現設計

訂閱我們的 YouTube 頻道

示例 #1：徽標橫幅

使用 Visual Builder，添加一個包含一列和一行的常規部分。

橫幅

接下來向該行添加一個按鈕模塊。

橫幅

然後更新按鈕模塊設置如下：

內容選項

按鈕文本：[輸入要用於橫幅消息的文本]
按鈕網址：[輸入網址]

設計選項

按鈕對齊：居中
文字顏色：淺
為按鈕使用自定義樣式：是
按鈕文字大小：32px
按鈕邊框寬度：0px
按鈕字體：Arvo
按鈕圖標：[添加圖標。 我正在使用光標圖標]
僅在懸停按鈕時顯示圖標：否

高級選項

我們需要將按鈕的寬度設置為 100% 以填充列的寬度。 我們還需要擴大按鈕的高度，為我們的橫幅內容提供足夠的空間。 為此，請在 Main Element 框中輸入以下自定義 CSS：

 Width: 100%;
padding: 20px 0 200px;

注意：這裡的自定義填充是調整橫幅文本顯示位置的關鍵。 由於按鈕對齊已經居中，我需要做的就是垂直調整文本。 因此，給按鈕文本一個較短的頂部填充和一個較長的底部填充將向橫幅頂部調整文本。

保存設置

現在一切仍然是白色的，看不見，但這沒關係。 我們將在行和列設置中為按鈕模塊添加背景。

轉到按鈕模塊所在的行設置並更新以下內容：

內容選項

在背景圖像選項卡下

背景圖片：[插入圖片]
背景圖像位置：[使用此選項調整橫幅的圖像。 我想顯示圖像的底部，所以我選擇了“底部中心”。]

橫幅

現在向下滾動一點以更新第 1 列背景選項。

選擇第 1 列背景漸變選項卡，然後單擊帶有白色加號的灰色圓形按鈕。

橫幅

更新以下內容：

背景漸變色：rgba(131,0,233,0.92), rgba(0,0,0,0.69)
柱梯度方向：180度
列起始位置：50%
列結束位置：0%

橫幅

保存設置

接下來，我們將向橫幅添加徽標。 單擊背景圖像選項卡並更新以下內容：

第 1 列背景圖像大小：實際大小（我的徽標是 120 x 120 png）

第 1 列背景圖像位置：居中

橫幅

就是這樣。 現在您有了一個可點擊且響應迅速的簡單橫幅。 您可以使用按鈕模塊設置來添加任何您想讓橫幅脫穎而出的懸停效果。

橫幅

讓我們再舉一個例子。

示例 2：簡單的文本橫幅

對於下一個橫幅，讓我們複製包含您剛剛設計的第一個橫幅的整個部分。 這將節省一些設置時間。

然後轉到行設置並更新以下內容：

內容選項

背景圖片：[輸入新圖片]
背景圖片位置：中心
第 1 列背景漸變顏色：rgba(0,0,0,0.41), rgba(12,113,195,0.66)
柱梯度方向：270deg

橫幅

接下來單擊第1 列背景圖像選項卡並刪除圖像/徽標。

保存設置

轉到按鈕模塊設置並更新以下內容：

內容選項

按鈕文字：[為您的橫幅輸入文字]
按鈕 URL：[輸入橫幅的 URL]

設計選項

按鈕文字大小：42px
按鈕邊框寬度：19px
按鈕邊框顏色：rgba(0,0,0,0.17)
按鈕字母間距：8px
按鈕字體：Montserrat，粗體（B）
添加按鈕圖標：否
按鈕懸停邊框顏色：rgba(0,0,0,0.46)
按鈕懸停邊框半徑：0px
按鈕懸停字母間距：12px

橫幅

如您所見，此示例橫幅具有獨特的懸停效果，可更改邊框顏色並增加字母間距：

橫幅

如何使您的橫幅全寬

要使此橫幅全寬，您所要做的就是更新“設計”選項卡下的“部分設置” ，如下所示：

自定義填充：頂部 0px、右側 0px、底部 0px、左側 0px

橫幅

保存設置

現在轉到行設置並更新設計選項，如下所示：

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

橫幅

現在，橫幅會在所有設備上拉伸屏幕的全寬。

如何製作粘性橫幅

如果您願意，您可以輕鬆地將此橫幅固定（粘性），並將其固定在瀏覽器窗口的頂部。 我建議減少填充以使其更短，這樣它就不會阻擋太多的窗口。

要降低高度，請轉到“高級”選項卡下的“按鈕模塊設置” ，在“主要元素”框中添加以下 CSS：

padding: 0px 0px !important;

現在要使整個部分具有粘性，請轉到“部分設置”並在“主要元素”框中使用以下自定義 CSS更新“高級”選項卡選項：

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

現在，您的整個部分將粘在頁面頂部，並在您向下滾動頁面時保持在那裡。

橫幅

這種橫幅對於沒有導航欄的登陸頁面上的促銷項目效果很好，因為粘性橫幅最終會隱藏導航欄。

向多列佈局添加橫幅

您還可以在多列行結構上製作橫幅。 如果您想在頁面或博客的底部展示一些項目，這會很方便。

讓我們試一試。

添加另一個具有 1/2 1/2 列行結構的常規部分。

橫幅 為了節省時間，請繼續複製或複制我們剛剛創建的按鈕模塊並將其粘貼或拖動到第一列中。

為了獲得橫幅背景設計，我們將使用行設置中的列背景。 轉到行設置並更新以下內容：

內容選項

在背景圖像選項卡下

第 1 列背景：[輸入背景圖片]
第一欄背景圖片位置：【根據自己的喜好調整圖片的位置】
第 1 列背景圖像混合：相乘

橫幅

在背景漸變選項卡下

第 1 列漸變顏色：rgba(255,255,255,0), #e02b20
第 1 列梯度方向：180 度
第 1 列起始位置：70%
第 1 列結束位置：0%

橫幅

最後一步是更新按鈕模塊設置：

內容選項

按鈕文字：旅行系列

設計選項

按鈕文字大小：32px
按鈕邊框寬度：2px
按鈕字母間距：0px
按鈕懸停邊框顏色：#edf000
按鈕懸停字母間距：0px

高級選項

主元素框中的自定義 CSS：

padding: 350px 0px 50px;
width: 100%;

橫幅

此自定義 css 調整 Button 模塊的填充，以便文本位於底部漸變背景後面。

隨意為下一列中的橫幅複製此過程，並根據需要更新內容。

檢查結果。

橫幅

注意：使用此功能時，我不會使用均衡列高度。 該列將延伸超過按鈕模塊。 如果您希望橫幅高度完美匹配，您可能需要調整按鈕模塊上的填充以使其正確。

有反應嗎？

是的。 因為按鈕是在 Divi 的列結構中構建的，所以按鈕在所有設備上都會很好地響應。 對於水平橫幅，我會小心放置您的徽標和文字，因為它們可能會在移動設備上重疊。

以下是縮小到較小屏幕尺寸時這些外觀的示例：

橫幅

瀏覽器兼容性

目前，Internet Explorer 或 Edge 不支持 background-blend-mode CSS 屬性，並且 Safari 的混合選項有限。 然而，在大多數情況下，根據我的經驗，回退並不重要。

最後的想法

我希望你喜歡這個小而有用的設計技巧來創建響應式橫幅。 只要您了解所涉及的限制並保持簡單，您就可以創建一些非常酷的橫幅。 此外，該解決方案易於實施且可快速定制。

而且，我確信還有其他有用的應用程序。 我期待在評論中聽到您的想法。

乾杯!