Создание фона для сайта: Как сделать фон для сайта?

Дизайн сайтов. Оформление фона сайта

При разработке дизайна для страниц сайтов очень важно уделить внимание оформлению фона всей страницы или ее элементов. Традиционным считается обычный белый фон – на нем легче воспринимать текст сайта. Также не мешают восприятию текстовой информации сайта и оттенки белого – бежевый, кремовый. Однако все чаще сайты с простым белым фоном кажутся заказчикам слишком скучными и однообразными. Тогда возникает потребность создать сайт с фоном другого цвета или с фоновым рисунком. Что нужно учесть при использовании фонового рисунка или цветного фона в дизайне Вашего сайта? Известно, что разные цвета воспринимаются по-разному. Причем у каждого человека ассоциации между цветом и предметом или чувством, которые он олицетворяет, могут быть разными. Так, для представителей западной культуры со смертью традиционно ассоциируется черный цвет, а вот для некоторых стран восточной культуры – наоборот, белый. Также мы традиционно связываем красный цвет с кровью или опасностью, зеленый- с травой или листвой, голубой – с небом или водой, желтый – с солнцем. Эти ассоциации прочно укрепились в человеческом сознании и трудно убедить посетителя, например, в том, что фирма, сайт которой имеет ярко красный фон, стабильна и надежна. Красный цвет для этого слишком динамичен, тогда как зеленая гамма оттенков придает ощущение спокойствия и умиротворенности. Слишком яркий цвет для фона чрезмерно утомителен для глаз, затрудняет чтение информации. Поэтому если решено сделать цвет фона, отличным от белого, то лучше выбрать какой-нибудь пастельный оттенок, в зависимости от тематики сайта. Например, очень светлые, нежно-розовые оттенки прекрасно подойдут для задания фона различных «женских» сайтов: о детях, о семье, о косметике и т.д. Для задания цвета фона могут быть использованы два варианта цветовой палитры: безопасная и небезопасная. Под безопасной палитрой понимают палитру из 216 цветов, которые остаются неизменными при отображении их в различных браузерах или на разных мониторах. Соответственно, небезопасная палитра содержит гораздо большее количество цветов, однако их отображение на разных мониторах зависит от технических характеристик каждого конкретного видеоадаптера. Задавать фон можно не только для всей страницы, но и для какого-нибудь отдельного элемента, например, определенной ячейки, строки и абзаца. Кроме одноцветного фона в дизайне сайтов популярно использование градиентных фонов. Для их задания применяются два цвета, плавно переходящие друг в друга. Также для задания градиентного фона может быть использован всего один цвет, яркость которого плавно уменьшается от максимального до нулевого значения. Применение градиентов для задания фона в дизайне сайтов целесообразно лишь в некоторых случаях. Во-первых, градиентные фоны подходят для «жесткого» дизайна сайтов, где все элементы закреплены и не сдвигаются при различном разрешении или размерах монитора. А, во-вторых, градиенты можно использовать тогда, когда известны технические характеристики мониторов потенциальной целевой аудитории, потому что иначе плавность градиента может быть искажена ступенчатостью переходов. Когда одноцветного или градиентного фона сайта кажется недостаточно, часто прибегают к использованию фоновых рисунков. При этом копии одного рисунка заполняют собой пространство страницы сайта – получается мозаика. Использование фонового рисунка непременно скажется на длительности загрузки страниц сайта, поэтому следует выбирать рисунок для мозаики размером не более 100х100 пикселей. При загрузке страниц сайта с сервера браузер сохранит в кэш-память компьютера фоновое изображение и уже потом выложит его мозаикой на фоне сайта. Следовательно, чем меньше кусочков в целом изображении, тем быстрее они будут сложены воедино. Поэтому мозаичный фон из изображений размером 25х25 будет загружаться медленнее, чем фон из кусочков 50х50. Подводя итог всему вышесказанному, можно сделать несколько выводов: Цвет воспринимается разными людьми по-разному. Цвет фона не должен мешать восприятию текстовой информации на сайте. Фоновый рисунок не должен сильно увеличивать время загрузки страниц сайта. Теги: дизайн сайтов, фон сайтов, фон страниц, фоновый рисунок, градиент, цвет фона

Создание фонов — Руководство Figma

Добавить в избранное

Создание фонов в Figma

Руководство Figma

1

Инструмент дизайна Figma

0:54

900 02 2

Редактор в Figma

1:17

3

Основные инструменты

2:14

4

Свойства положения, размера, поворота и углового радиуса

1:27

5

Цвет Стили

1:13

7

Темный режим с выбранными цветами

1:17

8

Градиенты

1:36

9

Создание фона 9000 3

2:37

10

Режимы наложения

2:02

11

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

1:24

12

Объединение и угловой радиус

2:53

13

Эффекты тени и размытия

1:48

14

Использование изображений

2:00

15

Заливка, обводка и расширенная обводка

3:21

16

Свойства текста и Стили

1:37

17

Шрифты Google и Пользовательские шрифты

1:13

18

Специальные возможности

19

Адаптивный дизайн

3:07

20

9 0002 Ограничения

1:11

21

Сетка макета

2:00

22

Автоматическая компоновка в Figma

8:17

23

Векторный режим

0:55

24

Векторная сеть

1:19

25

Мокапы в перспективе

2:00

26

3D макеты

1:20

27

Использование иллюстраций в дизайне

2:03

9000 2 28

Логические значения

2:24

29

Дизайн иконок

1:48

30

Компоненты

1:50

31

Коллективная библиотека

2:14

32 900 03

Создание конфетти

1:59

33

Дублирование формы петлителя

1 :41

34

Apple Watch Ring

2:23

35

Экспорт активов в Figma

1:39

36 9000 3

Экспорт кода CSS

1:04

37

Проектирование с использованием данных

1:57

38

Прототипирование

2:25

39

История версий

1:25

40

Мультиплеер, комментарии и превью

1:36

41

Варианты

5:39

42

Интерактивные компоненты

43

UIKits

4:47

44

9000 2 Плагины

5:47

45

Blob Background

4:45

46

Волнистый фон

6:46

47

3D-фигуры

12:27

48

Параллаксное прототипирование в Figma

7:52

49

Перспективный дизайн пользовательского интерфейса 3D

7 :16

50

Стеклянная иконка

9:16

51

Хрустальный шар с анимационным эффектом воды

12:54

52 900 03

Дизайн и программирование линейной анимации с буквами

29:38

53

Футуристическая линейная анимация

19:30

54

Импорт из Adobe Illustrator в Figma

3:16

55

Создать иллюстрацию в Figma

4:07

56

Удалить плагин BG

2:27

57

Круговые линии Advanced Stroke

3:27

58

Опубликовать дизайн в сообществе

9000 2 4:49

59

Превратить изображение в вектор

3:11

60

Прототип с прокручиваемым содержимым

3:42

61

Обнять содержимое и изменить его размер

62

Advanced Auto Layout

4:13

63

Круговой текст на пути

5:57

64

Зеркальный прототип

2:39

65

Прототип липкой панели навигации и вкладок

4:37 9 0003

66

Видео в Figma Prototype

67

Градиенты сетки

3:03

68

Figma Sections

69

Unsplash Stock Photos

2:07

90 002 70

Угловой градиент

4:17

71

Радиальный градиент

5:11

72

Анимация после задержки Прототипирование

73

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

2:53

74

Анимация Лотти

3:55

75

Дизайн Экран регистрации

6:42

76

Генератор контента

2:53

77

Дизайн Отсутствует стиль

2:36

90 002 78

Инструмент «Срез»

79

Адаптивный макет с точками останова

80

Дизайн диаграмм

81

Модальные окна дизайна

82

Пакетное переименование

83

Вводный экран дизайна

84

Прототип анимированной кнопки

85

Smart Selection

86

Свойства компонента

87

RedLines

88

Интерактивный календарь

900 02 89

Измерение расстояния

90

Переменные шрифты

91

Плагины AI

92

Текстовая анимация

93

Изменение размера слоев

94

Просмотр контуров слоя

95

Соединения прототипа

96

Экспорт SVG-файлов и кода

97

3D-иллюстрации

98

Заполнитель пользовательского интерфейса

99

Переключатель темного режима

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

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Шаблоны и исходный код

Загрузить исходные файлы

Загрузить видео и ресурсы, чтобы обращаться к ним и учиться в автономном режиме без перерыва.

Шаблон дизайна

Исходный код для всех разделов

Видеофайлы, ePub и субтитры

Просмотреть все загрузки

1

Инструмент дизайна Figma

Начало работы с Figma в качестве инструмента дизайна

0:54

2

Редактор в Figma

Знакомство с интерфейсом Figma

1:17

3

Основные инструменты

Знакомство с панелью инструментов в Figma

2:14

4

Свойства положения, размера, поворота и радиуса угла

Работа со свойствами положения, размера, поворота и радиуса угла

1:27

5

Цветовые стили

9000 2 Работа с цветовыми стилями на Figma

1:13

6

Маски

Использование масок для обрезки контента и составления дизайна в Figma

1:47

7

Темный режим с выделением цветов

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

1:17

8

Градиенты

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

1:36

9

900 02 Создание фона

Дизайн фона в Figma

2:37

10

Режимы наложения

Изучите интересные техники с режимами наложения

2:02

11

Выравнивание , распространение и уборка недвижимости

Изучение выравнивания и упорядочивания в Figma

1:24

12

Объединение и угловой радиус

Работа над объединением и угловым радиусом

2:53

13

Эффекты теней и размытия

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

Узнайте больше о заливке и различных параметрах обводки в Figma

3:21

16

Свойства и стили текста

Изучите и узнайте о свойствах типов Figma

1:37

9 0002 17

Шрифты Google и пользовательские шрифты

Изучите различия между шрифтами Google и пользовательскими шрифтами для вашего веб-сайта

1:13

18

Доступность

Изучите возможности дизайна

19

Адаптивный дизайн

Разработка адаптивных макетов в Figma с использованием ограничений и автоматического макета

3:07

20

Ограничения

Работа с ограничениями в Figma

1: 11

21

Сетка макетов

Научитесь проектировать используя сетки, столбцы, строки и поля.

2:00

22

Auto Layout in Figma

Работа с Auto Layout для адаптивного дизайна

8:17

23

Векторный режим

Изучение векторного режима для редактирования и настройки векторных фигур

0:55

24

Векторная сеть

Научитесь использовать векторные сети и дизайнерские значки

1:19 90 003

25

Перспективные макеты

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

2:00

26

3D-макеты

Добавление 3D-макетов в дизайн

1:20

27

Использование иллюстраций в дизайне

Включение иллюстраций в ваш дизайн

2:03

28

Логические значения

Использование логических значений для создания значков

2:24

29 900 03

Дизайн иконок

Узнайте, как создавать иконки с помощью инструментов, предоставляемых Figma

1:48

30

Компоненты

Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов.

1:50

31

Team Library

Публикация стилей дизайна и компонентов

2:14

32

Создание конфетти

Работа с плагином Confetti

1:59

33

Дублирование формы петлителя

9 0002 Работа с плагином Looper Figma

1:41

34

Apple Watch Ring

Создание кольца Apple Watch в Figma

2:23

35

Экспорт ресурсов в Figma

Узнайте об экспорте ресурсов в Figma для реализации

1:39

36

Экспорт CSS-кода

Работа с CSS-кодом в Figma

1:04

37

Проектирование с использованием данных

Плагины, помогающие создавать дизайн с использованием реального контента

900 02 1:57

38

Прототипирование

Быстрое создание полного цикла разработки вашего приложения в Figma

2:25

39

История версий

Работа с историей версий в Figma

1:25

40

Мультиплеер, комментарии и превью

Узнайте о совместной работе и совместном использовании с Figma

1:36

41

Варианты

Объединение похожих компонентов в варианты

5:39

42

Интерактивные компоненты

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

43

UIKits

Проектирование с использованием UIKits в Figma

4:47

44

Плагины

Исследование и проектирование с использованием плагинов в Figma

5:47

45

Фон Blob

Создать простой фон Blob в Figma

4:45

46

Фон Wave

90 002 Создайте волновой дизайн в Figma, используя инструмент Bend и плагин Wave

6:46

47

Трехмерные фигуры

Создание трехмерных фигур с помощью векторных инструментов в Figma ma

Узнайте, как создать технику параллаксной прокрутки, где фоновый и передний слои движутся с разной скоростью

7:52

49

3D UI Perspective Design

Преобразование пользовательского интерфейса с помощью трехмерной перспективы

7:16

50

Стекло Значок

Узнайте, как создать креативный значок с помощью размытие фона

9:16

51

Хрустальный шар с анимацией эффекта воды

Анимация волн в хрустальном шаре с помощью инструмента прототипирования

12:54

52

9 0002 Создайте и закодируйте линейную анимацию с буквами

Узнайте, как анимировать линии с помощью CSS в CodeSandbox. 30

54

Импорт из Adobe Illustrator в Figma

Рекомендации по импорту файла Illustrator в Figma

3:16

55

Создание иллюстрации в Figma

Использование векторного инструмента в Figma для создания иллюстрации с нуля

4:07

56

Удалить плагин BG

Удалить фон изображения с помощью плагина RemoveBG в Figma

2:27

57

Круговые линии Дополнительно Stroke

Разработка контроллера камеры с линиями часов в Figma

3:27

58

Публикация дизайна в сообществе

Публикация файлов дизайна в сообществе Figma

4:49

59

Преобразование изображения в вектор 90 003

Преобразование изображения в вектор в Figma

3:11

60

Прототип с прокручиваемым контентом

Добавьте вертикальную и горизонтальную прокрутку в ваш прототип Figma

3:42

61

Hug Content и изменение размера

Узнайте, как выбрать правильные параметры изменения размера, включая объемный контент, фиксированная ширина или высота, контейнер заполнения и усечение текста

62

Advanced Auto Layout

Узнайте, как использовать режим интервалов, наложение холста, выравнивание по базовой линии текста, значения обводки в расширенном макете

4:13

63

Круговой текст на пути

Сделать круговой текст на пути с помощью плагина ARC в Figma

5:57

64

Зеркальный прототип

Просматривайте свои прототипы на мобильном устройстве с помощью Мобильное приложение Figma. 3

Видео в Figma Prototype

Применение видео в качестве заливки с использованием любой векторной сети к вашему прототипу 03

Фигма Разделы

Используйте разделы в Figma для лучшей организации проектов и облегчения совместной работы

69

Unsplash Стоковые Фото

Вставляйте красивые изображения из Unsplash прямо в свои проекты

2:07

70

Угловой градиент

Пошаговое руководство по созданию и настройке углового градиента в Figma

4:17

71

Радиальный градиент

Создание ярких радиальных градиентов в Figma для профессиональный дизайн

5:11

72

Анимация после задержки Прототипирование

Самый простой способ анимировать что-либо в Интернете, используя простое взаимодействие после задержки в Figma

73

UI-каркас

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

2:53

74

Lottie Animation Figma для улучшения совместной работы и улучшения ваших проектов

3:55

75

Дизайн экрана регистрации

Простой дизайн экрана регистрации в Figma для вашего приложения или веб-сайта

6:42

76

Генератор контента

Полезные плагины, которые могут помочь дизайнерам создавать с использованием реального контента и сэкономить время мой дизайн с Design Lint

2:36

78

Slice Tool

Экспортируйте свои дизайны с помощью инструмента Slice в Figma

79

Адаптивный макет с точками останова адаптивный веб-дизайн с адаптивным макетом и точками останова

80

Дизайн диаграмм

Изучение бесконечных возможностей дизайна диаграмм для визуализации данных

81

Дизайн модальных окон

Как создавать модальные окна, улучшающие пользовательский интерфейс

82

Пакетное переименование

Быстрое и простое переименование нескольких файлов в Figma с помощью подключаемого модуля Batch Rename

83

Экран адаптации дизайна

Создание привлекательного опыта для удержания пользователей с помощью дизайна адаптации

84

Прототип анимированной кнопки

Как создать динамическую интерактивную кнопку

85

Интеллектуальное выделение

Более эффективное расположение слоев с помощью интеллектуального выделения

86

Свойства компонента

Уменьшите количество вариантов в вашем проекте систему, используя свойства компонентов и редактируя их непосредственно на панели свойств

87

RedLines

Измеряйте расстояния и комментируйте свои проекты Figma перед передачей с помощью плагина Redlines Figma

88

Интерактивный календарь

Узнайте, как использовать интерактивные компоненты в Figma для создания интерактивного календаря с состояниями наведения и нажатия

89

Измерение расстояния Figma

90

Variable Fonts

Узнайте, как заменить статические шрифты версией Variable Font

91

Плагины AI

Лучшие плагины AI для Figma, которые помогут дизайнерам создавать лучшую графику

92

Текстовая анимация

Создайте впечатляющую анимацию движущегося текста с использованием интерактивного компонента и после задержки

93

Изменение размера слоев

Изменение размера слоев с помощью инструмента масштабирования

94 90 003

Просмотр контуров слоев

Понимание и организация дизайн с контурами слоя просмотра

95

Подключения прототипов

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

96

Экспорт файлов и кода SVG

Экспорт изображения в виде файла SVG позволяет легко встроить его в код HTML и CSS

97

3D-иллюстрации Дизайн проекта

98

Заполнитель пользовательского интерфейса

Вставка временного элемента для визуализации дизайна

99

Переключатель темного режима

Превратите свой дизайн в темный режим одним щелчком мыши

Познакомьтесь с инструкторами

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

Сурья Ананд

Дизайнер

Хотите научиться дизайну

3 курса — 8 часов

Руководство по дизайну iOS

Полное руководство по проектированию для iOS 14 с видео, примерами и файлами дизайна

2 часа

Руководство по дизайну пользовательского интерфейса

. Комплексное руководство по лучшим советам и трюкам для трюков для Дизайн пользовательского интерфейса. Бесплатные учебные пособия для изучения дизайна пользовательского интерфейса.

2 часа

Справочник по Figma

Полное руководство по лучшим советам и рекомендациям по Figma

4 часа

Sourany Phomhome

Дизайнер пользовательского интерфейса +Код.

7 курсов — 27 часов

Дизайн и прототипирование приложений с помощью Midjourney

Комплексный курс по преобразованию концепций Midjourney в интерактивные прототипы с использованием основных методов проектирования и инструментов искусственного интеллекта

4 часа

Изучение прототипирования Figma

Мастер дизайна взаимодействия с Figma Prototyping. Создание анимированного приложения с помощью After Delay, прокрутки контента, прототипа видео

1 час

Дизайн пользовательского интерфейса для iOS 16 в Sketch

Полное руководство по дизайну для iOS 16 с видео, примерами и файлами дизайна

3 часа

Прототипирование в Figma

Изучите основы прототипирования в Figma, создавая интерактивные потоки из пользовательских дизайнов

1 час

Дизайн пользовательского интерфейса Android-приложений в Figma

Разработка пользовательского интерфейса приложений для Android с нуля с использованием различных приемов и методов в Figma

2 часа

Быстрый дизайн пользовательского интерфейса в Figma

Разработка пользовательского интерфейса приложений с нуля с использованием различных приемов и методов в Figma

12 часов

900 02 Справочник Figma

Полное руководство с лучшими советами и рекомендациями по Figma

4 часа

Как смешивать изображения для создания собственного дизайна фона в Divi

Смешивание нескольких изображений может быть полезно для создания профессионального дизайна фона для вашего веб-сайта.

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

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

Начнем.

• 1 Краткий обзор
• 2 Скачайте макет БЕСПЛАТНО
• 3 Скачать бесплатно
• 4 Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
• 5 Что нужно для начала
• 6 Как смешать несколько изображений для создания пользовательского дизайна фона в Divi
  • 6.
    1 Создайте раздел и строку
  • 6.2 Добавление изображений с помощью модуля изображения
  • 6.3 Настройки раздела
  • 6.4 Настройки строки
  • 6,5 Вертикальное центрирование изображений
  • 6,6 Сделайте последние штрихи к двум верхним изображениям
  • 6.7 Добавление текстового содержимого
• 7 Окончательный дизайн
• 8 Изучение дополнительных вариантов дизайна
• 9 Последние мысли

Краткий обзор

Вот краткий обзор дизайна, который мы собираемся построить вместе.

Скачать макет БЕСПЛАТНО

Чтобы получить эскизы из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на нашу рассылку, используя форму ниже. Как новый подписчик, вы будете получать еще больше возможностей Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже в списке, просто введите свой адрес электронной почты ниже и нажмите «Загрузить».

Вы не будете «переподписываться» или получать дополнительные электронные письма.

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

Чтобы импортировать макет на свою страницу, просто распакуйте zip-файл и перетащите файл json в Divi Builder.

Давайте перейдем к туториалу?

Что нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если тема Divi не используется).
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Загрузите несколько фиктивных изображений в медиатеку, чтобы использовать их в учебном пособии. Я использую изображения из пакета макетов Eye Doctor.

После этого у вас будет чистый холст для начала проектирования в Divi.

Как смешать несколько изображений для создания пользовательского дизайна фона в Divi

Создать раздел и строку

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

Добавление изображений с помощью модуля изображения

Изображение #1

После установки строки и столбца добавьте в строку модуль изображения.

Загрузите изображение размером около 500 на 700 пикселей. Я использую один из пакета макетов Eye Doctor.

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

• Максимальная ширина: 33vw
• Выравнивание модуля: слева

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

.

 поплавок: левый;
 

Изображение #2

Затем добавьте новый модуль образа под текущий образ.

После этого загрузите новое изображение размером около 1000 на 667 пикселей.

Затем задайте для изображения новую максимальную ширину и выравнивание.

• Максимальная ширина: 40vw
• Выравнивание модуля: справа

Поскольку первое изображение смещено влево, второе изображение теперь должно располагаться справа.

Мы еще вернемся, чтобы внести последние штрихи в эти изображения, а пока давайте перейдем к настройкам раздела.

Настройки раздела

Откройте настройки раздела и добавьте фоновое изображение и градиент следующим образом:

• Фоновое изображение: [загрузить изображение около 1920 на 1280 пикселей]

• Градиент фона влево Цвет: rgba(1,16,63,0,64)
• Фоновый градиент правого цвета: rgba(12,113,195,0,82)
• Разместить градиент над фоновым изображением: ДА

Затем немного откорректируйте отступы.

• Отступы (рабочий стол): 0 пикселей сверху, 0 пикселей снизу
• Отступы (телефон): 0px сверху, 10vw снизу

Настройки строки

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

• Ширина: 100%;
• Максимальная ширина: 100%;
• Отступы: 0 пикселей сверху, 0 пикселей снизу

Добавить режим наложения в строку

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

• Режим наложения: умножение

Зачем умножать?

Режим наложения «Умножение» в основном умножает текущий слой/строку (включая содержащиеся в нем изображения) на нижний слой (фон раздела). Простой способ представить эффект — представить два слайда в слайд-проекторе, расположенные друг за другом. Если вы спроецируете два изображения на экран, вы получите смесь двух, которая будет немного темнее.

Центрировать изображения по вертикали

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

 дисплей: гибкий;
выравнивание элементов: по центру;
 

Добавьте последние штрихи к двум верхним изображениям

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

Изображение #1 Последние штрихи

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

• Тень коробки: см. снимок экрана
• Box Shadow Blur Сила: 6vw
• Сила распространения тени коробки: 6vw
• Цвет тени: #ffffff

• Преобразование Перевод: 5vw (ось X), 11vw (ось Y)

Изображение #2 Последние штрихи

Когда вы закончите подкрашивать изображение №1 слева, откройте настройки для изображения №2 справа и внесите следующие изменения:

• Тень коробки: см. снимок экрана
• Box Shadow Blur Сила: 3vw
• Сила распространения тени коробки: 3vw
• Цвет тени: #ffffff

Мы даже можем добавить несколько эффектов фильтра, чтобы сделать изображение еще лучше.

• Насыщенность: 30%
• Непрозрачность: 60%

Добавление текстового содержимого

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

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

Затем добавьте в строку текстовый модуль.

Содержимое тела

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

  
Записаться на бесплатную проверку зрения
 
Ваш контент будет здесь. Отредактируйте или удалите этот текст внутри или в настройках содержимого модуля. Вы также можете стилизовать каждый аспект этого контента в настройках модуля «Дизайн» и даже применить собственный CSS к этому тексту в расширенных настройках модуля.
 

Дизайн текста

Как только содержимое тела будет на месте, обновите параметры дизайна следующим образом:

• Текст Цвет текста: #ffffff
• Шрифт заголовка: Poppins
• Цвет текста заголовка: #ffffff
• Размер текста заголовка: 5vw
• Ширина: 60vw (рабочий стол), 100% (телефон)
• Поля (рабочий стол): -35% сверху, 35% снизу
• Маржа (телефон): -70% сверху, 70% снизу

Окончательный проект

Вот окончательный вариант.

Вот как он масштабируется для браузеров разной ширины.

Изучение дополнительных вариантов дизайна

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

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

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

Режим наложения и параметры фильтра

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