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中使用多层背景字段。无论您是设计英雄部分，功能行还是标注框，此功能都为无尽的创意可能性打开了大门 - 没有触摸一系列代码。 →探索文档并开始。