Background image linear gradient: repeating-radial-gradient() — CSS: Cascading Style Sheets

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

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

Давайте приступим!

• 1 Предварительный просмотр
• 2 Начнем создавать!
  • 2.1 Добавить новый раздел
  • 2.2 Добавить новую строку
  • 2.3 Добавьте модуль Blurb в # 1
  • 2,4 Клонируйте рекламный модуль 7 раз и поместите 4 дубликата во вторую колонку
  • 2,5 Изменить модуль рекламного объявления № 1
  • 2,6 Изменить модуль рекламного объявления № 2
  • 2,7 Изменить модуль описания № 3
  • 2,8 Изменить модуль описания № 4
  • 2,9Изменить модуль описания № 5
  • 2. 10 Изменить модуль рекламного объявления № 6
  • 2.11 Изменить модуль рекламного объявления № 7
  • 2.12 Изменить модуль описания № 8
• 3 Предварительный просмотр
• 4 Последние мысли

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

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

Начнем творить!

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

Добавить новый раздел

Интервал

Добавьте новый раздел на свою страницу, откройте настройки раздела и добавьте нестандартное верхнее и нижнее заполнение.

• Верхний отступ: 150 пикселей
• Нижний отступ: 150 пикселей

Добавить новую строку

Структура колонны

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

Добавить модуль Blurb в № 1

Добавить контент

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

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

Перейдите на вкладку «Дизайн» и измените настройки текста.

• Ориентация текста: Центр
• Цвет текста: темный

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

Также откройте настройки текста заголовка и измените настройки.

• Шрифт заголовка: Antic Didone
• Размер текста заголовка: 23px
• Высота строки заголовка: 1,5em

Тень коробки

Наконец, добавьте тонкую тень к модулю Blurb.

• Коробчатая тень Размытие Сила: 80 пикселей
• Box Shadow Spread Strength: -10px
• Цвет тени: rgba(0,0,0,0.3)

Клонировать модуль Blurb 7 раз и поместить 4 дубликата во второй столбец

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

Изменить модуль рекламного объявления № 1

Градиентный фон

Теперь мы можем начать добавлять уникальные настройки в каждый из модулей Blurb. Откройте первый модуль Blurb в столбце 1 и добавьте к нему градиентный фон.

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Радиальный
• Радиальное направление: снизу
• Стартовая позиция: 45%
• Конечное положение: 45%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

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

• Положение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

И последнее, но не менее важное: добавьте пользовательские отступы, чтобы все встало на свои места.

• Верхний отступ: 100 пикселей
• Нижний отступ: 350 пикселей
• Отступ слева: 50 пикселей
• Правый отступ: 50 пикселей

Изменить модуль рекламного объявления № 2

Градиентный фон

Давайте перейдем к следующему модулю Blurb (первый модуль во втором столбце) и добавим градиентный фон.

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Радиальный
• Радиальное направление: вверху справа
• Стартовая позиция: 45%
• Конечное положение: 45%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

Продолжите, добавив фоновое изображение в сочетании с настройками фона, указанными ниже.

• Положение фонового изображения: вверху справа
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 350 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 200 пикселей (для ПК и планшетов), 50 пикселей (для телефонов)

Изменить модуль рекламного объявления № 3

Градиентный фон

Переходим к третьему модулю аннотации (второй модуль аннотации в первом столбце). Откройте настройки и добавьте градиентный фон.

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Радиальный
• Радиальное направление: вверху слева
• Начальная позиция: 45%
• Конечное положение: 45%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

Далее добавьте фоновое изображение.

• Положение фонового изображения: вверху слева
• Повтор фонового изображения: без повтора

Интервал

И добавьте к модулю нестандартные отступы, чтобы он принял свою форму.

• Верхний отступ: 350 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 200 пикселей (для ПК и планшетов), 50 пикселей (для телефонов)
• Правый отступ: 50 пикселей

Изменить модуль рекламного объявления № 4

Градиентный фон

На второй модуль во второй колонке! Откройте настройки модуля Blurb и добавьте градиентный фон.

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Радиальный
• Радиальное направление: Верх
• Стартовая позиция: 45%
• Конечное положение: 45%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

Далее добавьте фоновое изображение.

• Положение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 350 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 50 пикселей
• Правый отступ: 50 пикселей

Изменить модуль рекламного объявления № 5

Градиентный фон

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

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Радиальный
• Радиальное направление: влево
• Стартовая позиция: 35%
• Конечное положение: 35%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

Продолжите, добавив фоновое изображение в сочетании со следующими настройками фона:

• Положение фонового изображения: вверху слева
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 240 пикселей (для ПК и планшетов), 150 пикселей (для телефонов)
• Отступ справа: 50 пикселей (настольный ПК и планшет), 20 пикселей (телефон)

Изменить модуль рекламного объявления № 6

Градиентный фон

Переходим к третьему модулю во второй колонке! Откройте настройки и добавьте градиентный фон.

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Линейный
• Направление градиента: 140 градусов
• Начальная позиция: 60%
• Конечное положение: 60%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

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

• Положение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 350 пикселей
• Отступ слева: 50 пикселей
• Отступ справа: 200 пикселей (настольный ПК и планшет), 50 пикселей (планшет)

Изменить модуль рекламного объявления № 7

Градиентный фон

Следующий модуль Blurb в столбце 1 использует следующий градиентный фон:

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Линейный
• Направление градиента: 220 градусов
• Начальная позиция: 60%
• Конечное положение: 60%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

Также добавьте фоновое изображение.

• Положение фонового изображения: вверху по центру
• Повтор фонового изображения: без повтора

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 350 пикселей
• Отступ слева: 200 пикселей (для ПК и планшетов), 50 пикселей (для телефонов)
• Правый отступ: 50 пикселей

Изменить модуль рекламного объявления № 8

Градиентный фон

На последний модуль рекламного объявления! Откройте настройки и добавьте градиентный фон.

• Цвет 1: rgba(255,255,255,0)
• Цвет 2: #ffffff
• Тип градиента: Радиальный
• Радиальное направление: вправо
• Стартовая позиция: 35%
• Конечное положение: 35%
• Разместить градиент над фоновым изображением: Да

Фоновое изображение

Далее загрузить фоновое изображение.

• Положение фонового изображения: вверху слева
• Повтор фонового изображения: без повтора

Интервал

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