Beaver Builder 2.9 представила новую мощную функцию дизайна: многослойный фон . Это обновление дает вам более творческий контроль над строками, столбцами и модулями коробки, позволяя вам сложить цвета фона, градиенты и изображения - все в одном месте.

Но с большей мощностью приходит потребность в вдумчивом дизайне. В этой статье мы проведем умные способы использовать эту новую функцию и поделиться советами, которые помогут вам получить максимальную отдачу от этого.

Что такое многослойный фон?

Многослойный фон является мощным дополнением к бобр-строителю, которое позволяет складывать несколько фоновых элементов, таких как изображения, градиенты и цвета-с помощью одного столбца, строки или модуля коробки.

Вместо того, чтобы выбрать только один тип фона, вы можете объединить несколько, чтобы создать более привлекательный и визуально богатый опыт для ваших пользователей:

Вот как может выглядеть многослойный фон:

• Базовый слой : высококачественное изображение задает тон и контекст для раздела.
• Средний слой : полупрозрачный градиент добавляет контраст и помогает гарантировать, что текст остается читаемым.
• Верхний слой : наложение цвета бренда или тонкая текстура связывает все вместе и усиливает вашу визуальную идентичность.

Смешивая эти элементы, вы можете создавать фон, которые имеют как эстетическую привлекательность, так и функциональную ясность. Результатом является макет с глубиной, контрастностью и визуальной текстурой - без перегрузки пользователя.

Независимо от того, разрабатываете ли вы раздел героев, блок вызовов или сетку функции, многослойные фоны предлагают гибкость и творческий контроль, которые поднимают ваш дизайн с плоской до полной размерной.

Зачем использовать многослойный фон?

Многослойные фон-отличный способ визуально поднять ваши дизайны, не написав ни одну строку кода. Складывая фоновые цвета, градиенты и изображения, вы можете создавать привлекательные эффекты, которые улучшают как эстетику, так и удобство использования:

Вот несколько практических причин для использования слоистых фонов:

• Улучшение читаемости текста : добавьте наложение или градиент текста, чтобы увеличить контрастность и разборчивость, особенно при использовании фона изображений.
• Подкрепляйте идентичность вашего бренда : используйте цвета, узоры или текстуры вашего бренда в фоновых слоях, чтобы создать более сплоченный и узнаваемый визуальный опыт.
• Привлечь внимание к важным областям контента : слоистые фоны могут направлять взгляд пользователя к ключевым вызовам к действию, избранным разделам или рекламного контента.

И лучше всего - все это сделано в пользовательском интерфейсе Beaver Builder. Не требуется дополнительная CSS или сложная настройка. С всего лишь нескольких кликов вы можете создавать динамические, слоистые дизайны, которые являются такими же функциональными, как и красивые.

Как использовать многослойные фон в бобр-строителе

Вы можете смешать и сопоставить столько типов фонов, сколько вы хотели бы, - Colors, Gradients и изображения - в любом порядке:

Вот как добавить несколько фонов в модуль строки, столбца или коробки:

1. Откройте элемент для редактирования
   Нажмите, чтобы отредактировать модуль строки, столбца или поле, где вы хотите применить многослойный фон.
2. Перейти к настройкам фона
   На панели «Настройки модуля» перейдите в фоновый раздел.
3. Включить несколько фонов
   Выберите параметр «Несколько фонов» , чтобы активировать наслоение.
4. Добавьте свой первый фон
   Нажмите значок + , чтобы добавить тип фона, затем выберите из цвета , фотографии или градиента . Настройте настройки по мере необходимости.
5. Добавить больше фоновых слоев
   Нажмите на значок + еще раз, чтобы добавить еще один слой. Повторите процесс для каждого фона, который вы хотите сложить.
6. Сохраните свои изменения
   Как только вы довольны своим слоистым фоновым дизайном, нажмите «Сохранить» .

С помощью всего лишь нескольких кликов вы можете создать красиво слоистые фон, которые добавляют визуальную глубину и улучшают читаемость.

Советы по дизайну для наслоения, как профессионал

Чтобы помочь вам максимально использовать эту функцию, вот семь быстрых советов по эффективному использованию многослойного фона.

1. Градиенты слоя над изображениями для лучшей читаемости

Наложите темный или полупрозрачный градиент на верхней части фонового изображения, чтобы повысить видимость текста. Это помогает белому или светлому тексту, не теряя воздействия вашего изображения. Это простой трюк, который делает ваш контент чистым и читаемым.

2. Держите это тонким, а не отвлекающим

Меньше больше. Придерживайтесь 2–3 фоновых слоев, чтобы избежать подавляющего макета. Слишком много текстур или ярких цветов может отвлечь пользователей и повредить ваше сообщение. Цель чистых, сфокусированных дизайнов, которые направляют внимание - не украсть его.

3. Используйте цветы бренда стратегически

Используйте свою палитру бренда, чтобы создать градиенты или цветные наложения. Это усиливает идентичность бренда и добавляет профессиональный прикосновение к вашему сайту. Это умный способ сочетать визуальный стиль с последовательным брендингом.

4. Добавьте визуальный интерес с укладкой слоя

Объедините сплошные цвета, градиенты и изображения, чтобы создать глубину - не требуется движения. Например, слой тонкой текстуры под полупрозрачным цветом, чтобы придать вашему дизайну больше богатства и сложности.

5. Проверка на мобильную отзывчивость

Фон, который выглядит потрясающе на рабочем столе, может не работать на небольших экранах. С помощью Beaver Builder вы имеете полный контроль над отзывчивыми настройками, чтобы вы могли регулировать позиционирование слоя, масштабирование или даже скрыть определенные слои на мобильных устройствах.

6. Выделите ключевые разделы с визуальной текстурой

Нужно привлечь внимание к разделу вызовов или избранного? Используйте текстурированное изображение под градиентом, чтобы создать тонкий визуальный интерес. Этот метод помогает выделить важные области, не нарушая поток дизайна.

7. Используйте непрозрачность, чтобы плавно смешать слои

Отрегулируйте непрозрачность каждого слоя, чтобы создать бесшовные смеси между цветами и изображениями. Более низкие недостатки смягчают переходы, позволяя вам создавать слоистые конструкции, которые кажутся естественными и сплоченными.

Реальные варианты использования

Ищете вдохновение о том, как эффективно использовать многослойные фон? Вот несколько реальных дизайнерских идей дизайна, чтобы вы начали:

• Разделы героев : комбинируйте изображения с цветными наложениями для чистого, высокого воздействия.
• Call-to-Actions (CTA) : используйте цветы и текстуры жидких брендов, чтобы мгновенно привлекать внимание.
• Основные моменты блога : применить градиент и фон изображений, чтобы выделить названия.
• Bento Grids : используйте слоистые текстуры и цвета за каждым блоком, чтобы создать глубину и визуальный интерес.

Попробуйте эти идеи в своем следующем макете, чтобы создать визуально привлекательные страницы, которые оставляют неизгладимое впечатление.

Вверх следующим: сохраненные фоновые слои

В будущем вы сможете сохранить и повторно использовать многослойные фон на вашем сайте. Это облегчит поддержание конструкций и сокращению повторяющейся настройки. На данный момент у вас есть возможность сохранить ваши строки, столбцы и модули для повторного использования в другом месте на вашем сайте.

Попробуйте многослойный фон сегодня

Многослойное поле фона теперь доступно в Beaver Builder 2.9. Независимо от того, разрабатываете ли вы раздел героев, строку функции или коробку вызовов, эта функция открывает дверь для бесконечных творческих возможностей, не касаясь линии кода. → Исследуйте документы и начните.