10 хитростей дизайна фона теперь возможны с новыми настройками фона Divi

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

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

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

Наслаждаться.

Вот краткий обзор хитростей дизайна

Как подписаться на этот пост

Вместо того, чтобы начинать с нуля каждый раз, когда я объясняю новый трюк дизайна, я использовал один и тот же пример дизайна для большинства из них и добавил к нему различные уловки. Это означает, что для большинства примеров требуется, чтобы вы выполнили предыдущий дизайнерский трюк, прежде чем вы сможете приступить к новому трюку. Уловки №1-9 все следуют одной и той же базовой настройке и требуют уловки №1 в качестве предварительного условия. Поэтому, если вы тестируете функции, я бы посоветовал начать с трюка №1.

10 хитростей дизайна фона с Divi

Подпишитесь на наш канал Youtube

Уловка №1: диагональное наложение

Добавьте раздел с полной шириной, а затем вставьте модуль заголовка с полной шириной.

Затем обновите настройки модуля заголовка следующим образом:

Параметры содержимого

Заголовок: [введите заголовок]
Подзаголовок: [введите подзаголовок]
URL изображения логотипа: [введите логотип]
Цвета градиента фона: rgba (12,113,195,0,55), rgba (255,255,255,0)
Тип градиента: линейный
Направление градиента: 135 градусов
Стартовая позиция: 60%
Конечная позиция: 60% (подойдет все, что 60% или ниже)

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

Варианты дизайна

Цвет текста: светлый
Шрифт заголовка: по умолчанию, полужирный (B), прописные (TT)
Размер шрифта заголовка: 40 пикселей
Размер шрифта подзаголовка: 24 пикс.

Расширенные настройки

В разделе Custom CSS в поле Main Element добавьте следующий CSS:

Padding: 150px 0;

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

Сохранить настройки

Теперь пришло время добавить фон в ваш полноразмерный раздел. Перейдите к настройкам раздела полной ширины, щелкнув значок шестеренки в фиолетовом поле управления.

Затем обновите параметры содержимого настроек раздела следующим образом:

Фоновое изображение: [введите здесь фоновое изображение. Он должен быть не менее 1960 пикселей в ширину. Я выбрал это изображение с сайта unsplash.com и обрезал его так, чтобы выделяющаяся часть изображения оказалась справа.]
Используйте эффект параллакса: ДА (это необязательно, но я думаю, что он хорошо работает с диагональным наложением)
Метод параллакса: истинный параллакс

Вот и все! Не стесняйтесь настраивать непрозрачность цвета градиента и степень направления градиента по своему вкусу.

Думаю, у нас хорошее начало. Перейдем ко второй уловке.

Уловка №2: наслоение диагональных слоев

Этот дизайнерский трюк является продолжением трюка №1, поэтому убедитесь, что у вас есть трюк №1, прежде чем продолжить.

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

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

Перейдите в настройки раздела полной ширины и обновите следующие параметры содержимого :

Цвета градиента фона: rgba (131,0,233,0,38), rgba (255,255,255,0)
Тип градиента: линейный
Направление градиента: 135 градусов (то же, что и другое направление градиента в вашем модуле заголовка)
Стартовая позиция: 38%
Конечная позиция: 38%

Теперь щелкните значок фонового изображения и измените следующее:

Использовать эффект параллакса: нет
Смешивание фонового изображения: умножение

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

Уловка # 3: наложение круга

Этот дизайнерский трюк является продолжением трюка №1, поэтому убедитесь, что у вас есть трюк №1, прежде чем продолжить.

Теперь мы собираемся превратить диагональный оверлей из трюка №1 в круговой оверлей. Для этого перейдите в настройки модуля полной ширины и обновите следующее:

Параметры содержимого

Тип градиента фона: радиальный
Радиальное направление: центр
Стартовая позиция: 30%
Конечная позиция: 30%

Варианты дизайна

Ориентация текста и логотипа: по центру

Теперь посмотрите на новый фон заголовка.

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

Вот пример того, как это будет выглядеть без фонового изображения и с более темным цветом текста.

Уловка №4: наслоение круговых наложений для создания границы круга

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

Перейдите в настройки раздела полной ширины и обновите следующее:

Параметры содержимого

На вкладке "Фоновое изображение":

Использовать эффект параллакса: НЕТ
Смешивание фонового изображения: умножение

На вкладке "Градиент фона":

Цвета градиента фона: rgba (0,0,0,0.45), rgba (255,255,255,0)
Тип градиента фона: радиальный
Радиальное направление: центр
Стартовая позиция: 34%
Конечная позиция: 34%

Сохранить настройки

Вот и все.

Вы также можете легко изменить размер круга фонового градиента, отрегулировав процентное значение начальной позиции.

Уловка # 5: наложение обратного круга

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

Для этого перейдите в Настройки заголовка полной ширины и обновите следующее:

Параметры содержимого

Цвета градиента фона: rgba (255,255,255,0), rgba (12,113,195,0,79)

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

Проверить это…

Уловка №6: наложение обратного круга с видео-фоном

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

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

Теперь перейдите в настройки заголовка Fullwidth и обновите следующее:

Параметры содержимого

Цвета градиента фона: rgba (12,113,195,0.67), # 333333

С новыми цветами градиента фоновое видео видно только внутри круга. А наложенные цвета действительно делают текст ярким.

Уловка # 7: наложение обратной окружности со смещением от центра

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

Перейдите в Настройки заголовка полной ширины и обновите следующее:

Параметры содержимого

Радиальное направление: вправо

Варианты дизайна

Ориентация текста и логотипа: влево

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

Эти примеры, очевидно, требуют некоторой доработки, но вы поняли идею.

Уловка # 8: использование градиентов для теневых эффектов

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

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

Чтобы добавить эффект тени, перейдите в настройки заголовка полной ширины и обновите следующее:

Параметры содержимого

Цвета градиента фона: rgba (0,0,0,0.55), rgba (0,0,0,0)
Направление градиента: 90 градусов
Стартовая позиция: 38%
Конечная позиция: 85%

Вот результат.

Уловка № 9: смешивание фонового изображения

Новые параметры фона Divi включают режимы наложения CSS для настройки изображений. Изучение различных сочетаний изображений - это очень весело и, как правило, позволяет создавать удивительные дизайны. Тем из вас, кто не является дизайнерами, необязательно знать определение насыщенности или яркости, чтобы воспользоваться этими классными опциями. Вам понадобится установить цвет фона или градиент в сочетании с фоновым изображением, чтобы увидеть все интересные эффекты (на самом деле это не будет работать только с фоновым изображением). Затем поиграйте, пока не получите желаемый вид. Результаты могут Вас удивить.

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

Перейдите к параметрам заголовка полной ширины и удалите фоновые градиенты в параметрах содержимого.

Сохранить настройки

Теперь перейдите в Настройки раздела и обновите следующее:

Параметры содержимого

Цвета градиента фона: rgba (0,0,0,0.76), # 0c71c3
Направление градиента: 90 градусов
Стартовая позиция: 50%
Конечная позиция: 50%

Вы пока не видите никаких изменений. Это нормально. Перейдите на вкладку Фоновое изображение и обновите следующее:

Использовать эффект параллакса: НЕТ
Наложение фонового изображения: жесткий свет

Вот и все. Посмотрите результат.

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

Уловка №10: наслоение, чтобы добавить больше цветов к вашему градиентному фону.

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

Вот как это сделать. Во-первых, добавьте регулярный раздел со структурой строки в 1 столбец. Затем внутри строки добавьте модуль Blurb.

Обновите настройки модуля Blurb следующим образом:

Параметры содержимого

Заголовок: [введите заголовок]
Содержание: [введите содержание]

Варианты дизайна

Цвет текста: светлый
Ориентация текста: по центру
Шрифт заголовка: по умолчанию, полужирный (B)
Размер шрифта заголовка: 56 пикселей
Размер основного шрифта: 22px
Пользовательские отступы: 100 пикселей сверху, 100 пикселей снизу.

Поскольку текст рекламного объявления белый на белом фоне, вы его пока не видите, но это нормально. Ты будешь скоро. Пора начать добавлять цвета градиента.

Мы будем работать от задней части к передней слева направо. Для начала перейдите в раздел Настройки и обновите следующее:

Параметры содержимого

Цвета градиента фона: # ff0077, # 0c71c3
Направление градиента: 90 градусов
Стартовая позиция: 0%
Конечная позиция: 30%

Варианты дизайна

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

Теперь давайте обновим наш следующий уровень цвета градиента - нашу строку. Перейдите в настройки строки и обновите следующее:

Параметры содержимого

Цвета градиента фона: rgba (255,255,255,0), # 8300e9
Направление градиента: 90 градусов
Стартовая позиция: 25%
Конечная позиция: 50%
Цвета градиента фона столбца 1: rgba (255,255,255,0), # e02b20
Направление градиента: 90 градусов
Стартовая позиция: 50%
Конечная позиция: 75%

Варианты дизайна
Сделать эту строку полной шириной: ДА
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

Сохранить настройки

Теперь для последнего слоя градиента нам нужно перейти в модуль Blurb и обновить следующее:

Параметры содержимого
Цвета градиента фона: rgba (255,255,255,0), # edf000
Направление градиента: 90 градусов
Стартовая позиция: 75%
Конечное положение: 100%

Варианты дизайна

Пользовательские отступы: 100 пикселей сверху, 100 пикселей снизу.

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

Не забывайте, что вы также можете изменить Тип градиента на Радиальный (круговой) и полностью изменить дизайн (это займет около 20 секунд).

Если вы измените Тип градиента на Радиальный для всех слоев (раздел, строка, столбец и модуль рекламного объявления), вы получите что-то вроде этого.

Бонусный трюк

Вот пример того, как вы можете накладывать фоновые изображения с параллаксом. Это обычный раздел с фоновым изображением с использованием True Parallax. Внутри раздела находится строка из 1 столбца, которая была сделана на всю ширину и без отступов, поэтому она растягивается на всю ширину раздела. К строке я добавил прозрачное фоновое изображение с несколькими градиентными кругами (которые должны выглядеть как пузыри), используя метод CSS Parallax. Затем я добавил модуль призыва к действию в строку с прозрачным фоном. Эта комбинация создает движение при прокрутке раздела на странице вниз.

Этот трюк немного сложнее, поскольку требует создания пользовательской фотографии вне Divi. Я просто надеюсь показать вам возможности.

Еще несколько примеров

Я закончу это некоторыми примерами дизайна, которые я построил, тестируя те же приемы, упомянутые в этом посте.

Последние мысли

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

Будем рады услышать от вас в комментариях.