Хотели бы вы придать форму своим изображениям с помощью генератора градиента? Divi ?
Маски изображений часто используются для добавления интересных фигур к изображениям. Они позволяют изображению видеть сквозь форму, придавая странице уникальный элемент дизайна.
С Построитель градиентов de Divi, вам не обязательно использовать маски для создания фигур. Вместо этого вы можете использовать Остановки градиента и параметры для их создания!
В этой статье мы увидим, как украсить ваши изображения с помощью Gradient Builder. Divi чтобы помочь вам добавить уникальный дизайн к вашим изображениям.
Давайте начнем.
обследование
Во-первых, давайте посмотрим, что мы собираемся создать в этом уроке на разных размерах экрана.
Первый пример — круглая форма изображения
Настольный компьютер
таблетка
телефон
Второй пример — линейная форма изображения
офис
таблетка
телефон
Третий пример — эллиптическая форма изображения
Настольный компьютер
таблетка
телефон
Четвертый пример — коническая форма изображения
Настольный компьютер
таблетка
телефон
Дизайн макета с Divi
Начнем с создания макета, который мы будем использовать во всех примерах. Этот макет можно использовать как главный раздел.
Он будет включать заголовок и описание с одной стороны и изображение с другой. Затем мы будем использовать этот макет и изображение для примеров.
Настроить раздел
Сначала создайте новую страницу Divi и настройте раздел. Откройте настройки раздела и измените оттенок фон для #f0f3fb.
- Фон: #f0f3fb
Затем перейдите на вкладку Проект и измените настройки интервала следующим образом:.
- Набивка (сверху и снизу): 10%
Добавить строку
Затем добавьте линия со структурой столбца ниже.
Доступ к параметрам линии на вкладке Проект, перейдите к варианту Калибровка и изменить параметры размера.
- Использовать пользовательскую ширину желоба: ДА
- Максимальная ширина: 1 пикселей
Настройки первого столбца
Во вкладке Содержание ряда, откройте настройки первого столбца ряда, перейдите на вкладку Проект. Измените интервал следующим образом.
- Отступы (слева и справа): 9% слева, справа
Параметры первого модуля Text
Затем добавьте Текстовый модуль в левую колонку.
выбрать Заголовок 4 для текста содержание и добавьте содержание вашего тела.
- Текст: «Добро пожаловать в BlogPasCher».
Затем перейдите на вкладку Проект и измените настройки заголовка.
- Шрифт: Монтсеррат
- Вес шрифта: полужирный
- Стиль: ТТ
- Цвет текста: #1d4eff
- Размер текста: рабочий стол 16 пикселей, планшет 14 пикселей, телефон 12 пикселей
- Расстояние между буквами: 0,3em
- Высота строки: 1,6 см
Прокрутите до Расстояние и изменить нижнее поле.
- Поле (снизу): 0px
Параметры второго модуля Text
Затем добавьте Текстовый модуль под первым.
Установите тип текста на «Заголовок 1» и добавьте содержание вашего тела.
- Содержание: «Планируйте свое финансовое будущее»
Затем выберите вкладку Проект и измените параметры заголовка.
- Шрифт: Монтсеррат
- Вес шрифта: полужирный
- Цвет текста: #0f1154
- Размер: 80 пикселей для настольных ПК, 40 пикселей для планшетов, 24 пикселей для телефонов.
- Высота строки: 110%
Параметры третьего модуля Text
Затем добавьте Текстовый модуль под второй.
Оставьте тип текста «Абзац» и добавьте содержимое основного текста.
- Тело: содержание
Затем перейдите на вкладку Дизайн и изменить настройки текста.
- Шрифт текста: Робото
- Вес шрифта: средний
- Цвет текста: #000000
- Размер текста: 18 пикселей (для ПК и планшетов), 14 пикселей (для телефонов)
- Высота линии: 180%
Наконец, прокрутите вниз до расстояние и установите нижнее поле. Закройте настройки модуля.
- Поле (снизу): 0px
Настройки модуля изображения
Теперь добавьте Модуль изображения в правую колонку.
Во-первых, удалить фиктивное изображение нажав на корзину или значок сброса над изображением.
Затем прокрутите вниз Бакграунд , выберите вкладку Изображение и добавьте свое изображение. Оставьте все настройки изображения со значениями по умолчанию. Изображение не будет показывать много в первую очередь. Мы разберемся с этим по ходу дела.
Затем выберите вкладку Стиль и прокрутите до Расстояние.
- Поля (рабочий стол): -10% (сверху), -30% (слева), 10% (справа)
- Отступы (сверху и снизу): 300 пикселей
- Поля (планшет/телефон): 0% (сверху), 0% (слева и справа)
- Отступы (телефон): 150 пикселей (сверху и снизу)
Примеры изображений, созданных с помощью Divi Gradient Builder
Первый пример – круглая форма
В нашем первом примере изображение имеет круглую форму с отверстием в центре.
Откройте настройки модуля изображения и прокрутите вниз до проверка данных . Выберите Вкладка «Градиент фона» и установите 6 остановок градиента:
- Первая остановка: 0%, #f0f3fb
- Второй: 45%, #f0f3fb
- Третий (выше второго): 45%, rgba (41,196,169,0 XNUMX XNUMX)
- Четвертое: 69%, rgba (250,255,214,0 XNUMX XNUMX)
- Пятое (выше четвертого): 69%, #f0f3fb
- Шестое: 100%, #f0f3fb
- Тип: Круглый
- Позиция: Центр
- Единица измерения: процент
- Квадратный градиент над фоновым изображением: ДА
Второй пример – линейная форма
Вот предварительный просмотр второго примера формы изображения. В этом примере диагональные линии размещаются поперек изображения.
Откройте настройки, прокрутите вниз до Backgound и выберитеВкладка «Градиент фона». Добавьте четыре остановки градиента:
- Первая остановка: 0%, #f0f3fb
- Второй: 5%, #f0f3fb
- Третий (выше второго): 5%, rgba (175,175,175,0 XNUMX XNUMX)
- Четвертое: 13%, rgba (41,196,169,0 XNUMX XNUMX)
- Тип: Линейный
- Рулевое управление: 150 градусов
- Повторить градиент: ДА
- Единица градиента: процент
- Квадратный градиент над фоновым изображением: ДА
Третий пример – эллиптическая форма
Это наш третий пример формы изображения. При этом используется эллиптическая форма.
Откройте настройки модуля изображения и прокрутите вниз до проверка данных . Выберите вкладку Фоновый градиент и создайте четыре остановки градиента:
- Первая остановка: 0%, #f0f3fb
- Второй: 9%, #f0f3fb
- Третий (выше второго): 9%, rgba (175,175,175,0 XNUMX XNUMX)
- Четвертое: 21%, rgba (41,196,169,0 XNUMX XNUMX)
- Тип: Эллиптический
- Положение градиента: вверху слева
- Повторить градиент: ДА
- Единица градиента: процент
- Квадратный градиент Над фоновым изображением: ДА
Четвертый пример – коническая форма
Наш четвертый пример использует «Конический» для создания единой формы изображения.
Откройте настройки модуля изображения, прокрутите вниз до проверка данных и выберите вкладку Фоновая картинка. У этого есть 5 остановок градиента:
- Первая остановка: 23%, #f0f3fb
- Второй: 35%, #f0f3fb
- Третий (выше второго): 35%, rgba (41,196,169,0 XNUMX XNUMX)
- Четвертое: 65%, rgba (250,255,214,0 XNUMX XNUMX)
- Пятое (выше четвертого): 65%, #f0f3fb
- Тип: Конический
- Направление градиента: 180 градусов
- Положение градиента: снизу
- Единица измерения: процент
- Квадратный градиент над фоновым изображением: ДА
Конечные результаты
Все макеты прошли успешно. Формы изображения выделяются, и изображения всегда легко понять. Все они адаптивны, поэтому отлично смотрятся на любом устройстве.
Первый пример — круглая форма изображения
Настольный компьютер
Скачайте DIVI прямо сейчас!!!
таблетка
телефон
Второй пример — линейная форма изображения
Настольный компьютер
Скачайте DIVI прямо сейчас!!!
таблетка
телефон
Третий пример — эллиптическая форма изображения
Настольный компьютер
Скачайте DIVI прямо сейчас!!!
таблетка
телефон
Четвертый пример — коническая форма изображения
Настольный компьютер
Скачайте DIVI прямо сейчас!!!
таблетка
телефон
Заключение
Это наш взгляд на то, как формировать ваши изображения с помощью Divi Gradient Builder.
Gradient Builder может создавать интересные формы изображений. Игра с остановками градиента, проба различных типов градиентов и включение повторения градиента — отличные способы создания новых дизайнов.
Обязательно проверяйте свои дизайны на всех размерах экрана и при необходимости вносите коррективы.
Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
