Искате ли да създадете персонализирани модели на фона, като използвате опцията за повторение на градиент на Divi ?
Опциите за фон на Divi предлагат много начини за създаване на фонови модели. Можете дори да създавате фонови модели, като използвате само градиенти. Опцията за повторение на градиента прави това просто и лесно.
В тази статия ще видим как да използвате опцията Gradient Repeat на Divi за създаване на персонализирани фонови модели.
Нека да започнем.
Вижте също: Divi: Как да създадете форма за контакт, която се появява след щракване върху бутон
Какво е градиентно повторение
Опцията за повторение на градиента създава модел въз основа на градиентните стопове. Градиентните стопове са измервания, които определят къде се появяват и спират цветовете в градиента. Divi и неговият Gradient Builder използват тези спирки, за да създадат шаблона.
Последният цвят казва на градиента къде е точката на прекъсване в градиента. Можете да имате колкото искате цветове преди тази точка на прекъсване.
Le Конструктор на градиенти след това ще го повтори, за да запълни екрана, който създава шаблона. Опцията може да се добави към всеки раздел, ред, колона или модул и те могат да се използват заедно.
Активирайте опцията „Градиент на фона“.
За да активирате опцията Повторение на градиента, отворете настройките на секцията, като щракнете върху иконата на зъбно колело. Също така работи с редове, колони и модули.
Превъртете до История . Изберете раздел Предистория на градиента и кликнете върху Добавяне на фонов градиент.
Под лентата за спиране на градиента има настройка, наречена Повторение на градиента . Това е деактивирано по подразбиране. Просто щракнете върху него, за да го активирате.
Сега градиентът ще се повтори, създавайки шаблон въз основа на вашите градиентни стопове и другите ви градиентни настройки, като градиентната единица.
Градиентни единици
Градиентната единица е мерната единица. Това указва какво показват числата на градиентните стопове на градиентната лента, което определя как се измерват градиентните стопове. Това засяга модела, създаден от опцията за повторение.
Генераторът на фонов градиент на Divi предлага 15 единици. Нека да разгледаме пример за четирите най-популярни опции. Както ще видим в нашите примери, резултатът ще се промени в зависимост от вашия брой спирки на градиента и вашите настройки.
Процент (процент)
Процентът измерва спиранията на градиента в проценти. Това изчислява градиентните точки въз основа на родителския елемент. Колкото по-малък е последният градиентен бод, толкова по-стегнат е създаденият модел. Когато регулирате позицията на един от цветовете, този цвят се мести, докато другите остават на мястото си.
пиксели (px)
Pixels измерва броя на пикселите за всяка градиентна спирка. Това дава на градиента по-малък модел от повечето други типове единици. Преместването на позицията на първия или последния цвят променя позицията на всеки цвят.
Височина на прозореца (vh)
Прозорецът за изглед е зоната на прозореца на браузъра, която се вижда. Измерва се на височина и ширина отделно. Височината на прозореца използва ограничители на градиента за измерване на процента от височината на размера на прозореца. Регулирането на позицията на първия или последния цвят засяга всички цветове.
Ширина на прозореца (vw)
Ширината на прозореца използва ограничители на градиента, за да измери процента на ширината на размера на прозореца (или ширината на браузъра). Корекциите се променят в зависимост от ширината. Докато коригирате числото, което увеличава или намалява, този конкретен цвят променя позицията си, докато другите остават същите.
Примери за използване на опцията "Повтаряне на градиент".
Прочетете още: Divi: Как да създадете таблет с превъртащо се тийзър съдържание
За нашите примери използваме раздела Call-to-Action на началната страница на безплатен пакет за оформление на акупунктура налични в Divi.
Ще трябва да направим корекция на първата колона на раздела. Отворете ги параметри на линията като щракнете върху иконата му на зъбно колело.
След това изберете икона на зъбно колело за първата колона.
колона един градиент
Първата колона има собствен фонов градиент. Това е част от оформлението. Ние няма да променим това. Ще използваме същия градиент в нашите четири примера. Ето настройките, в случай че имате нужда от тях.
- Градиентни стопове:
- 0px: #f4d5b8
- 100px: rgba(244,213,184,0)
Настройки на градиента
- Тип градиент: Линеен
- Позиция на градиента: 180 градуса
- Повторение на градиента: НЕ
- Градиентна единица: процент
- Квадратен градиент над фоновото изображение: НЕ
разстояние
Ще добавим интервал отляво на колоната. Достъп до раздела Дизайн, превъртете до Отстояние и изберете икона на таблет за да отворите опциите на устройството.
Добавете 5% ляво поле за раздели на настолен компютър и таблет. Изберете раздела на телефона и изтрийте левия подложка. Оставете отгоре и отдясно на текущите им настройки.
- Подложка
- Горна част: 180px
- Ляво: 5%
- Ляво: 80px
пример едно
Първият ни пример създава диагонален повтарящ се модел с тънки линии.
Този има три градиентни спирки.
- Градиентни стопове:
- 4px: #fff6ee
- 9px: #ede3dc
- 14px: #e8ded7
Използвайте следните настройки.
- Тип градиент: Линеен
- Посока на градиента: 156 градуса
- Повторение на градиента: ДА
- Градиентна единица: пиксели
- Квадратен градиент над фоновото изображение: No
Втори пример
Нашият втори пример създава диагонален повтарящ се модел с по-големи линии.
Този има три градиентни спирки.
- Градиентни стопове:
- 4px: #fff6ee
- 43px: #ede3dc
- 50px: #e8ded7
За градиентни настройки,
- Тип градиент: Линеен
- Посока на градиента: 156 градуса
- Повторение на градиента: ДА
- Градиентна единица: пиксели
- Квадратен градиент над фоновото изображение: НЕ
Пример трети
Третият ни пример създава повтарящ се кръгов модел с кръгове със среден размер.
Този има три градиентни спирки.
- Градиентни стопове
- 4px: #fff6ee
- 7px: #e8ded7
- 8px: #ede3dc
Приложете следните настройки на градиента
- Тип градиент: кръгъл
- Позиция на градиента: отдолу
- Повторение на градиента: ДА
- Градиентна единица: процент
- Квадратен градиент над фоновото изображение: НЕ
Пример 4
Нашият четвърти пример създава кръгъл модел с големи кръгове.
Този има три градиентни спирки.
- Градиентни стопове:
- 4px: #fff6ee
- 23px: #e8ded7
- 31px: #ede3dc
За настройките на градиента променете както следва:
- Тип градиент: кръгъл
- Позиция на градиента: Център
- Повторение на градиента: ДА
- Градиентна единица: процент
- Квадратен градиент над фоновото изображение: No
Изтеглете DIVI сега!!!
Заключение
Това е нашият поглед върху това как да използвате опцията за Повторение на градиента от Divi за създаване на персонализирани фонове. Много корекции в настройките на градиента засягат дизайна на градиента.
Повторението на градиента работи добре с всички тези настройки за лесно създаване на интересни персонализирани фонови модели.
Препоръчваме да изпробвате примерите, които сме предоставили тук, и да направите промени, за да видите как градиентите се отразяват, и да създадете свои собствени персонализирани фонови градиенти.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...