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

Опубликовано: 2017-06-13

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

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

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

Примеры наложения градиентного фона

Мы создали три раздела с изображением до и после, которые покажут вам, как новые параметры могут улучшить ощущение, которое отражает ваш веб-сайт, и придать ему определенный фактор «je ne sais quoi».

Раздел героев

Вот так выглядит раздел героя при добавлении только фонового изображения:

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

Раздел вставки

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

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

Раздел цен

Вот так выглядит раздел цен, когда мы используем один цвет (более светлый и темный тона):

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

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

Шаг за шагом: раздел "Герой"

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

Начать Создавать

Начнем с создания новой страницы на вашем сайте WordPress. Теперь добавьте на эту страницу стандартный раздел со строкой на всю ширину. Затем разместите разные модули в вашем ряду. Мы использовали два текстовых модуля и один кнопочный модуль.

Настройки первого текстового модуля

В первом текстовом модуле появится заголовок раздела вашего героя. Введите текст, который вы хотите отображать в поле содержимого в подкатегории «Текст» вкладки «Содержимое», и перейдите на вкладку «Дизайн».

На вкладке «Дизайн» внесите следующие изменения в подкатегорию «Текст»:

Ориентация текста: по центру
Размер шрифта текста: 30
Цвет шрифта текста: #FFFFFF

Настройки второго текстового модуля

Теперь откройте следующий текстовый модуль и введите текст в поле содержимого. Затем перейдите на вкладку Дизайн и внесите следующие изменения в подкатегорию Текст:

Ориентация текста: по центру
Размер шрифта текста: 16
Цвет шрифта текста: #FFFFFF

Прокрутите ту же вкладку и добавьте «500 пикселей» к максимальной ширине в подкатегории «Размер» и «2%» к нижнему полю в подкатегории «Интервал».

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

И последнее, но не менее важное: откройте настройки модуля кнопок. Введите CTA, который вы хотите связать с вашей кнопкой, в подкатегории «Текст» на вкладке «Содержимое» и перейдите на вкладку «Дизайн».

На вкладке «Дизайн» внесите следующие изменения в подкатегорию «Кнопка»:

Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 20
Цвет текста кнопки: #FFFFFF
Цвет фона кнопки: rgba (0,0,0,0)
Ширина границы кнопки: 2
Цвет границы кнопки: #FFFFFF
Радиус границы кнопки: 7

Теперь откройте разделы строк и внесите следующие изменения в подкатегорию интервалов модуля «Дизайн»:

Максимальная маржа: 15%
Нижняя маржа: 10%

Настройки наложения градиентного фона

Теперь мы переходим к самой интересной части; добавление градиентного фона на фоновое изображение. Идите вперед и откройте настройку раздела. Затем перейдите в подкатегорию «Фон» и начните с добавления градиентного фона.

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

Первый цвет: # 3730ff
Второй цвет: # e02b20
Тип градиента: линейный
Направление градиента: 272 градуса
Стартовая позиция: 40%
Конечное положение: 100%

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

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

И вот окончательный результат:

Шаг за шагом: раздел вставки

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

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

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

Начать Создавать

Начните с добавления стандартного раздела на новую или существующую страницу. В этом разделе нам понадобится строка с тремя столбцами.

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

Настройки Blurb

Откройте настройки модуля Blurb и введите заголовок и содержимое в подкатегории «Текст» на вкладке содержимого. Перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Изображение и значок»:

Цвет значка: rgba (255,255,255,0,36)
Значок Круга: Да
Цвет круга: rgba (255,255,255,0)
Показать границу круга: Да
Цвет границы круга: rgba (255,255,255,0,36)
Размещение изображения / значка: вверху
Использовать размер шрифта значка: Да
Размер шрифта значка: 96 пикселей

Прокрутите ту же вкладку и установите для параметра Ориентация текста значение «Центр» в подкатегории «Текст».

Продолжайте прокрутку и откройте подкатегорию «Текст заголовка». Продолжайте и используйте следующие настройки:

Размер шрифта заголовка: 18
Цвет текста заголовка: #FFFFFF
Высота строки заголовка: 1em

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

Размер шрифта основного текста: 14
Цвет основного текста: #FFFFFF
Высота линии тела: 1.5em

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

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

Откройте настройки строки и перейдите в подкатегорию «Интервал» на вкладке «Дизайн». Единственное, что вам нужно сделать, это изменить верхнее и нижнее поле на «5%».

Настройки наложения градиентного фона

И последнее, но не менее важное: мы собираемся добавить фоновое изображение с наложением градиента. Откройте настройки своего раздела и перейдите в подкатегорию «Фон» на вкладке «Контент».

Затем внесите следующие изменения в параметр градиента:

Первый цвет: # 52009b
Второй цвет: # 0edeed
Тип градиента: радиальный
Радиальное направление: вправо
Стартовая позиция: 28%
Конечное положение: 100%

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

Положение фонового изображения: по центру
Повтор фонового изображения: повтор (в зависимости от вашего рисунка)
Смешивание фонового изображения: умножение

Вот и все! У вас должен получиться следующий потрясающий результат:

Шаг за шагом: раздел цен

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

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

Начать Создавать

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

Настройки первого текстового модуля

Добавьте новый текстовый модуль в первый столбец, добавьте тип ценового пакета в поле содержимого в подкатегории «Текст» вкладки содержимого и перейдите на вкладку «Дизайн».

Примените следующие изменения к подкатегории Текст на вкладке Дизайн:

Ориентация текста: по центру
Размер шрифта текста: 24
Цвет шрифта текста: #FFFFFF
Высота текстовой строки: 1,5 м

Прокрутите ту же вкладку и внесите следующие изменения в подкатегорию Spacing:

Верхнее поле: 50 пикселей
Нижнее поле: 20 пикселей

Настройки второго текстового модуля

Добавьте еще один текстовый модуль в тот же столбец. Запишите цену пакета в поле содержимого в подкатегории «Текст» вкладки «Содержимое» и перейдите на вкладку «Дизайн».

На вкладке «Дизайн» внесите следующие изменения:

Ориентация текста: по центру
Размер шрифта текста: 82 пикселей
Цвет шрифта текста: #FFFFFF
Высота текстовой строки: 1,1 мкм

Прокрутите ту же вкладку и добавьте «10 пикселей» к нижнему полю.

Настройки третьего текстового модуля

Для нашего последнего текстового модуля добавьте текст в поле содержимого в подкатегории «Текст» на вкладке «Содержимое». Затем перейдите на вкладку «Дизайн» и внесите следующие изменения в подкатегорию «Текст»:

Ориентация текста: по центру
Размер шрифта текста: 16
Цвет шрифта текста: #FFFFFF
Высота текстовой строки: 1,1 мкм

Прокрутите ту же вкладку и добавьте «33px» к нижнему полю в подкатегории «Интервал».

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

Следующий модуль, который мы добавим в этот столбец, - это модуль кнопок. Введите CTA, который должен отображаться в поле содержимого в подкатегории «Текст» вкладки «Содержимое», и перейдите на вкладку «Дизайн».

На вкладке «Дизайн» установите для параметра «Выравнивание кнопок» в подкатегории «Выравнивание» значение «Центр» и внесите следующие изменения в подкатегорию «Кнопки»:

Использовать пользовательские стили для кнопки: Да
Размер текста кнопки: 13
Цвет текста кнопки: #FFFFFF
Цвет фона кнопки: rgba (255,255,255,0.11)
Ширина границы кнопки: 2
Цвет границы кнопки: #FFFFFF
Радиус границы кнопки: 4
Расстояние между буквами кнопки: 1

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

Наконец, мы собираемся добавить разделитель к столбцу, чтобы освободить место. Выберите «Не показывать разделитель» на вкладке «Содержимое» и перейдите на вкладку «Дизайн», где вы поместите «25 пикселей» в поле высоты.

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

Настройки наложения градиентного фона

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

Перейдите к настройкам строки и примените следующие изменения к параметру градиента первого и третьего столбца в подкатегории «Фон» на вкладке «Содержимое»:

Первый цвет: rgba (10,122,178,0,57)
Второй цвет: rgba (142,0,142,0,47)
Столбец 1 Тип градиента: радиальный
Столбец 1 Радиальное направление: вверху слева
Столбец 1 Начальная позиция: 0
Конечное положение столбца 1: 100%

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

Первый цвет: # 0a7ab2
Второй цвет: # 8e008e
Столбец 2 Тип градиента: линейный
Столбец 2 Направление градиента: 180 градусов
Столбец 2 Начальная позиция: 0
Конечное положение столбца 2: 100

Перейдите к параметру фонового изображения, загрузите фоновое изображение и измените настройки:

Столбец 2 Расположение фонового изображения: вверху слева
Столбец 2 Повторение фонового изображения: повтор
Столбец 2 "Наложение фонового изображения": "Умножить".

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

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!