Загрузите 10 БЕСПЛАТНЫХ фоновых изображений раздела жидкости для Divi
Опубликовано: 2018-10-07Если вы хотите освежить внешний вид своих разделов, этот пост может быть идеальным для вас. Мы создали 10 различных фоновых изображений для жидких разделов, которые вы можете бесплатно скачать и использовать на любом веб-сайте, который вы создаете. Кроме того, мы также покажем вам, как объединить эти фоновые изображения жидких разделов со встроенными опциями Divi. Вы сможете назначить любой градиентный фон своему плавному фоновому изображению и объединить его с градиентным фоном строки, чтобы ваш контент также оставался читаемым.
Давайте приступим к делу!
Предварительный просмотр
Давайте начнем с рассмотрения 10 различных фоновых изображений разделов жидкости, которые вы сможете скачать ниже. Мы объединили изображения с градиентным фоном, чтобы получить уникальные результаты. Мы также поделимся каждой из комбинаций градиентов в этом посте, но не стесняйтесь экспериментировать с разными цветами, чтобы достичь желаемого конечного результата.
Загрузите БЕСПЛАТНО фоновые изображения раздела "Жидкость"
Чтобы получить бесплатные фоновые изображения раздела жидкости, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Восстановить раздел
Добавить новый регулярный раздел
Интервал
После того, как вы загрузили все файлы изображений, перейдите на свой веб-сайт WordPress и откройте новую или существующую страницу. Затем, используя Visual Builder Divi, добавьте новый обычный раздел. Откройте его настройки и измените значения Интервал.
- Верхний отступ: 0 пикселей
- Нижний отступ: 0 пикселей
Добавить новую строку
Структура столбца
Продолжите, добавив новую строку в свой раздел, используя следующую структуру столбцов:
Размеры
Еще не добавляя никаких модулей, откройте настройки строки и внесите изменения в настройки размера.
- Сделать эту строку полной шириной: Да
- Использовать нестандартную ширину желоба: Да
- Ширина желоба: 1
Интервал
Также добавьте некоторые значения отступов в настройки интервала.
- Верхний отступ: 312 пикселей
- Нижний отступ: 312 пикселей
- Отступ столбца слева: 50 пикселей
- Отступ справа от столбца: 50 пикселей
Добавить текстовый модуль
Добавить содержимое
Пора начинать добавлять модули! Первый модуль, который нам нужен, - это текстовый модуль. Продолжайте и добавьте контент в поле содержимого, желательно заголовок H2 и абзац.
Настройки текста H2
Затем перейдите к настройкам текста H2 и примените следующие изменения:
- Шрифт заголовка 2: Montserrat
- Толщина шрифта заголовка 2: Ультра полужирный
- Цвет текста заголовка 2: #FFFFFF
- Размер текста заголовка 2: 82 пикселей (рабочий стол), 60 пикселей (планшет), 40 пикселей (телефон)
- Высота строки заголовка 2: 1,4 em
Настройки текста
Также измените общие настройки текста.
- Цвет текста: #FFFFFF
- Размер текста: 16 пикселей
- Высота текстовой строки: 1.9em
- Ориентация текста: по центру
Размеры
Продолжайте уменьшать ширину этого модуля на рабочем столе.
- Ширина: 58% (рабочий стол), 100% (планшет и телефон)
- Выравнивание модуля: по центру
Добавить модуль кнопок
Добавить копию
Второй и последний модуль, который нам нужен, - это кнопочный модуль. После добавления модуля под текстовым модулем добавьте копию.
Выравнивание кнопок
Затем измените выравнивание кнопок.
- Расположение кнопок: по центру
Настройки кнопок
Затем перейдите к настройкам кнопки и внесите некоторые изменения.
- Использовать пользовательские стили для кнопки: Да
- Размер текста кнопки: 18 пикселей
- Цвет текста кнопки: # 000000
- Цвет фона кнопки: #FFFFFF
- Ширина границы кнопки: 0 пикселей
- Радиус границы кнопки: 0 пикселей
- Расстояние между буквами кнопки: -1px
- Шрифт кнопки: Montserrat
- Плотность шрифта: Ультра полужирный
- Стиль шрифта: прописные
Интервал
И последнее, но не менее важное: добавьте пробел между предыдущим и этим модулем, добавив верхний отступ.
- Верхнее поле: 25 пикселей
Фон раздела жидкости # 1
Раздел градиентный фон
Используйте следующий градиентный фон для своего раздела:
- Цвет 1: # 000000
- Цвет 2: # 2d5b9b
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл ' fluid-style-1.png ', который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Положение фонового изображения: по центру
Строка градиентный фон
В довершение всего, добавьте градиент строки поверх фона раздела. Это сделает текст более читабельным. Это также поможет вам добавить глубины вашей странице.
- Цвет 1: rgba (0,0,0,0.67)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон секции жидкости №2 и №3
Раздел градиентный фон
Второе и третье фоновые изображения секции жидкости используют следующий градиентный фон секции:
- Цвет 1: # 4f009e
- Цвет 2: # fa00ff
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл " fluid-style-2.png " или " fluid-style-3.png ", который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Положение фонового изображения: по центру
Строка градиентный фон
Также добавьте тонкий градиентный фон строки:
- Цвет 1: rgba (255,48,75,0,13)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон раздела жидкости # 4
Раздел градиентный фон
Используйте следующий градиентный фон для своего раздела:
- Цвет 1: # 00245e
- Цвет 2: # ffee00
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл ' fluid-style-4.png ', который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Положение фонового изображения: по центру
Строка градиентный фон
В завершение добавьте градиентный фон строки, используя следующие настройки:
- Цвет 1: rgba (0,0,0,0.37)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон раздела жидкости # 5
Раздел градиентный фон
Добавьте в раздел следующий градиентный фон:
- Цвет 1: # 04000f
- Цвет 2: # 00436d
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Затем загрузите файл " fluid-style-5.png ", который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Положение фонового изображения: по центру
Строка градиентный фон
Завершите свой дизайн, используя следующий градиентный фон строки:
- Цвет 1: rgba (0,0,0,0.58)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон секции жидкости # 6
Раздел градиентный фон
Используйте следующую потрясающую комбинацию градиентного фона раздела:
- Цвет 1: # 4800ff
- Цвет 2: # c854ff
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл ' fluid-style-6.png ', который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Положение фонового изображения: по центру
Строка градиентный фон
И последнее, но не менее важное: добавьте наложение фона градиента строки.
- Цвет 1: rgba (0,0,0,0.51)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон секции жидкости # 7
Раздел градиентный фон
Примените к своему разделу следующие настройки градиентного фона:
- Цвет 1: # ff8300
- Цвет 2: # 52006b
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл ' fluid-style-7.png ', который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Расположение фонового изображения: вверху справа
Строка градиентный фон
Наконец, добавьте фон градиента строки поверх вашего раздела.
- Цвет 1: rgba (106,0,198,0,34)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон раздела жидкости # 8
Раздел градиентный фон
Примените к разделу следующий синий градиентный фон:
- Цвет 1: # 0b43dd
- Цвет 2: # 09f9ed
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл ' fluid-style-8.png ', который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Расположение фонового изображения: вверху слева
Строка градиентный фон
Завершите свой дизайн, применив градиентный фон строки.
- Цвет 1: rgba (0,7,119,0.57)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: линейный
- Радиальное направление: центр
Фон раздела жидкости # 9
Раздел градиентный фон
Добавьте в раздел следующий градиентный фон:
- Цвет 1: # 051f89
- Цвет 2: # 6d0272
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл " fluid-style-9.png ", который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: обложка
- Положение фонового изображения: по центру
Строка градиентный фон
И последнее, но не менее важное: увеличьте удобочитаемость вашего контента с помощью градиентного фона строки.
- Цвет 1: rgba (0,0,0,0.59)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фон раздела жидкости # 10
Раздел градиентный фон
В последнем примере нужен следующий градиентный фон раздела:
- Цвет 1: # 051f89
- Цвет 2: # 6d0272
- Тип градиента: линейный
- Направление градиента: 137 градусов
- Стартовая позиция: 48%
Фоновое изображение раздела
Загрузите файл ' fluid-style-10a.png ', который вы можете найти в папке загрузки, и объедините его со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Расположение фонового изображения: вверху слева
Строка градиентный фон
Затем добавьте градиентный фон строки.
- Цвет 1: rgba (0,0,0,0.59)
- Цвет 2: rgba (255,255,255,0)
- Тип градиента: радиальный
- Радиальное направление: центр
Фоновое изображение строки
Также добавьте фоновое изображение в свою строку. Найдите в папке загрузки файл « fluid-style-10b.png », загрузите его и объедините со следующими настройками фона:
- Размер фонового изображения: фактический размер
- Расположение фонового изображения: внизу справа
Предварительный просмотр
Теперь, когда мы прошли все этапы, давайте в последний раз взглянем на конечный результат.
Последние мысли
В этом посте мы поделились 10 различными и уникальными фоновыми изображениями жидких разделов, которые вы можете использовать на своих веб-сайтах без каких-либо ограничений. Вдобавок ко всему, мы также предоставили вам потрясающие градиентные фоны, которые вы можете комбинировать с плавными фоновыми изображениями, используя только встроенные параметры Divi. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже и сообщите нам, какое из фоновых изображений раздела жидкости вам нравится больше всего!