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