Beaver Builder 2.9引入了強大的新設計功能：多層背景。此更新可以通過讓您堆疊背景顏色，漸變和圖像來對行，列和框模塊進行更多的創造性控制。

但是，隨著更多的力量，需要進行周到的設計。在本文中，我們將詳細介紹使用此新功能的智能方法，並分享技巧以幫助您充分利用它。

什麼是多層背景？

多層背景是Beaver Builder的強大補充，它使您可以在單個列，行或盒子模塊上堆疊多個背景元素（例如圖像，漸變和顏色）。

您不必選擇一種類型的背景，而是可以組合幾個背景，為您的用戶創造更具吸引力和視覺上的豐富體驗：

以下是多層背景的外觀：

• 基礎層：高質量的圖像設置了該部分的音調和上下文。
• 中層：半透明的梯度增加對比度，並有助於確保文本保持可讀性。
• 頂層：品牌顏色疊加層或微妙的紋理將所有內容聯繫在一起並增強您的視覺標識。

通過融合這些元素，您可以創建具有審美吸引力和功能清晰度的背景。結果是具有深度，對比度和視覺紋理的佈局，而不會壓倒用戶。

無論您是設計英雄部分，通話障礙物還是功能網格，多層背景都可以提供靈活性和創造性控制，從而將您的設計從平坦提升到完全尺寸。

為什麼使用多層背景？

多層背景是視覺上提升設計的好方法，而沒有編寫一行代碼。通過堆疊背景顏色，漸變和圖像，您可以創建醒目的效果，以改善美學和可用性：

以下是使用分層背景的一些實際原因：

• 提高文本的可讀性：在文本後面添加覆蓋層或梯度以提高對比度和透明度，尤其是在使用圖像背景時。
• 加強您的品牌標識：在背景層中使用品牌顏色，圖案或紋理來創造更具凝聚力和可識別的視覺體驗。
• 引起人們對重要內容領域的注意：分層背景可以指導用戶的眼睛關鍵呼籲行動，特色部分或促銷內容。

最重要的是，這一切都在Beaver Builder UI中完成。無需額外的CSS或複雜的設置。只需單擊幾下，您就可以創建動態的，分層的設計，這些設計功能既優美。

如何在Beaver Builder中使用多層背景

您可以按任何順序混合和匹配自己想要的多數背景類型（顏色，漸變和圖像）：

這是將多個背景添加到行，列或框模塊的方法：

1. 打開元素進行編輯
   單擊以編輯要應用多層背景的行，列或框模塊。
2. 轉到背景設置
   在模塊設置面板中，導航到背景部分。
3. 啟用多個背景
   選擇多個背景選項以激活分層。
4. 添加您的第一個背景
   單擊+圖標以添加背景類型，然後從顏色，照片或漸變中選擇。根據需要自定義設置。
5. 添加更多背景層
   再次單擊+圖標以添加另一層。重複要堆疊的每個背景類型的過程。
6. 保存您的更改
   一旦您對分層背景設計感到滿意，請單擊“保存” 。

只需單擊幾下，您就可以創建精美的分層背景，以增加視覺深度並增強可讀性。

像專業人士一樣分層的設計技巧

為了幫助您充分利用此功能，這裡有七個快速提示，可有效地使用多層背景。

1。圖像上的層梯度以獲得更好的可讀性

在背景圖像之上覆蓋黑暗或半透明的梯度，以提高文本可見性。這有助於白色或淺色文本流行，而不會失去圖像的影響。這是一個簡單的技巧，可以使您的內容清晰可讀。

2。保持微妙，不要分散注意力

少更多。堅持2–3個背景層，以避免淹沒您的佈局。太多的紋理或鮮豔的色彩會分散用戶的注意力並傷害您的信息。旨在進行清潔，專注的設計，以指導注意力，而不是竊取它。

3。策略性地使用品牌顏色

使用您的品牌調色板創建梯度或顏色疊加。這加強了品牌標識，並為您的網站增添了專業風格。這是將視覺風格與一致品牌相結合的明智方法。

4。添加圖層堆疊的視覺興趣

結合純色，梯度和圖像以創建深度 - 無需運動。例如，在半透明的顏色覆蓋下將微妙的紋理分層，以使您的設計更加豐富和復雜。

5。測試移動響應能力

在桌面上看起來很棒的背景可能無法在較小的屏幕上使用。使用Beaver Builder，您可以完全控制響應式設置，以便您可以在移動設備上調整層定位，擴展甚至隱藏某些層。

6。突出顯示帶有視覺紋理的關鍵部分

是否需要提請注意呼籲行動或特色部分？在梯度下使用紋理圖像來產生微妙的視覺興趣。該技術有助於突出重要區域，而不會破壞設計流。

7。使用不透明度平穩地混合層

調整每一層的不透明度，以在顏色和圖像之間創建無縫混合。較低的不熟悉度會軟化過渡，從而使您可以構建自然和凝聚力的分層設計。

現實世界中的用例

尋找如何有效使用多層背景的靈感？以下是一些現實世界的設計思路，可以讓您入門：

• 英雄部分：將圖像與彩色疊加層相結合，以進行乾淨，高影響的介紹。
• 通話行動（CTA） ：使用大膽的品牌顏色和紋理立即吸引註意力。
• 博客亮點：應用梯度和圖像背景以使標題脫穎而出。
• 彎網：在每個塊後面使用分層紋理和顏色來創建深度和視覺興趣。

在下一個佈局中嘗試這些想法，以創建具有持久印象的視覺引人入勝的頁面。

下一步：保存的背景層

在將來的更新中，您將能夠在網站上保存和重複使用多層背景。這將使保持設計保持一致並減少重複設置變得更加容易。目前，您可以選擇保存您的行，列和模塊，以便在網站上其他地方重複使用。

今天嘗試多層背景

現在可以在Beaver Builder 2.9中使用多層背景字段。無論您是設計英雄部分，功能行還是標註框，此功能都為無盡的創意可能性打開了大門 - 沒有觸摸一系列代碼。 →探索文檔並開始。