Искате ли да имате фонов градиент Divi това се променя при задържане?
Изграждането на уебсайтове е свързано с това да се уверите, че всеки детайл е правилен. Обръщането на внимание на малките детайли на вашия дизайн бързо ще повиши качеството ви уеб сайт.
С новите опции за задържане на курсора на мишката Divi, можете лесно да добавяте малки взаимодействия към вашия уеб сайт. Опциите за задържане се прилагат за почти всички параметри на дизайна. Можете например индиректно да промените градиентен фон при задържане, за да създадете хубав преход.
Точно това ще ви покажем в този урок. Освен че правим градиентния преход, ние също ще създадем зашеметяващ примерен дизайн от нулата, който ще можете свободно да използвате за всякакъв вид уеб сайт които създавате.
Да вървим!
изследване
Преди да се потопим в урока, нека да разгледаме крайния резултат.
Нека започнем да проектираме с Divi
Вижте също: Divi: Как да създадете отзивчив плъзгач на акордеон
Добавете раздел №1
разстояние
Първото нещо, което трябва да направите, е да създадете нова страница или да отворите съществуваща и да добавите нова обикновена секция към нея. Отворете настройките и добавете персонализирани горни и долни полета.
- Подложка (отгоре и отдолу): 100px
Добавете ред 1
Структура на колоната
Продължете, като добавите нов ред, като използвате следната структура на колоните:
Цвят на фона по подразбиране (Desktop) на колона 1
Без да добавяте още модули, отворете настройките на реда и добавете следния цвят на фона по подразбиране към колона 1:
- Фон (десктоп): #e7ffa0
Цвят на фона на колона 1 при задържане
Променете този цвят на фона при задържане.
- Фон: #00020c
Фонов градиент на колона 1
Също така добавете градиентен фонов цвят към колона 1. Забележете, че използваме напълно прозрачен цвят. Този цвят ще позволи на цвета на фона да се покаже, който от своя страна се променя при задържане на мишката.
- Цвят 1 (20%): rgba(255,255,255,0)
- Цвят 2 (100%): rgba(16,0,201,0.8)
- Тип градиент: Линеен
- Посока на градиента: 50 градуса
Цвят на фона на колона 2
Също така добавете фонов цвят към колона 2.
- Фон: #ffffff
оразмеряване
След това отидете в раздела Дизайн и променете настройките за оразмеряване в опцията Оразмеряване.
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 2000px
разстояние
Продължете, като добавите персонализирани стойности за подложка в настройките за разстояние.
- Подложка (отгоре и отдолу): 0px
Разстояние (колона 2)
- Подложка (отгоре и отдолу): 6vw (десктоп), 120px (таблет и телефон)
- Подложка (ляво и дясно): 5vw (десктоп), 80px (таблет), 50px (телефон)
Box Shadow
И също така дайте на реда фина кутийка сянка.
- Сила на замъгляване на сянката на кутията: 100px
- Сила на разпространение на сянка в кутия: -10px
Преходите
Накрая ще създадем плавен градиентен фонов преход, като увеличим продължителността на прехода в раздела Подробно.
- Продължителност на прехода: 1100ms
Добавете модул Image към колона 1
Качете изображение
Време е да започнете да добавяте модули! Добавете модул Image към първата колона.
Градиентен фон
Отидете до настройките на фона на този модул Image и добавете градиентен фон. Ние отново използваме напълно прозрачен цвят, за да позволим на другите цветове да прозират.
- Цвят 1(57%): rgba(50,217,255,0.66)
- Цвят 2(100%): rgba(255,255,255,0)
- Тип градиент: кръгъл
- Позиция на градиента: отгоре
разстояние
След това добавете персонализирана горна подложка към модула.
- Подплата (отгоре): 14vw
Добавете текстов модул към колона 2
Добавете съдържание
Да преминем към втората колона! Първият модул, от който се нуждаем, е текстов модул за заглавието. Продължете и добавете a съдържание заглавие по избор.
Настройки на заглавния текст
След това отидете на настройките на заглавния текст и направете някои промени.
- Шрифт: Abril Fatface
- Цвят на текста: #000000
- Размер на текста: 4 vw (десктоп), 60 px (таблет), 40 px (телефон)
Добавете втори текстов модул към колона 2
Добавете съдържание
Вторият модул, от който ще се нуждаем, е друг модул Text. Добавете малко съдържание по избор.
Текстови настройки
След това отидете на настройките на текста и променете подравняването на текста.
- Подравняване на текста: Изравнено
оразмеряване
Също така коригирайте ширината в настройките за оразмеряване.
- Ширина: 73% (десктоп), 100% (таблет и телефон)
разстояние
Накрая добавете персонализирани горни и долни полета към модула, за да създадете интервали.
- Поле (отгоре и отдолу): 2,5 vw (десктоп), 50 px (таблет и телефон)
Добавете модул Бутон към колона 2
Добавете описание
Третият и последен модул, от който ще се нуждаем във втората колона, е модул Button. Добавете копие по ваш избор.
Настройки на бутона
След това променете настройките на бутоните.
- Използване на персонализирани стилове за бутон: ДА
- Размер на текста на бутона: 1,2 vw (десктоп), 14 px (таблет и телефон)
- Цвят на текста на бутона: #ffffff
- Градиент спира 1 (0%): #9ea6ff
- Градиентни стопове 2 (100%): rgba(16,0,201,0.8)
- Кормилно управление: 78град
- Ширина на рамката на бутона: 0 пиксела
- Радиус на границата: 30px
- Разстояние между буквите: -1px
- Тегло на шрифта: Ultra Bold
- Стил на шрифта: TT (главни букви)
разстояние
Също така добавете персонализирани стойности за запълване
- Подложка (отгоре и отдолу): 10px
- Подложка (ляво и дясно): 40px
Box Shadow
И приложете фина квадратна сянка върху бутона.
- Сила на замъгляване на сянка в кутия: 40px
Прочетете още: Как да персонализирате модула „Таймер за обратно отброяване“ с GIF
Добавете раздел №2
разстояние
Сега, след като завършихме първия раздел, ще преминем към следващия. Добавете нова обикновена секция, като използвате следните персонализирани стойности за подплата:
- Подложка (отгоре и отдолу): 100px
Добавете ред към две колони
Структура на колоната
Продължете, като добавите нов ред към раздела, като използвате следната структура на колоните:
Фон на колона 1
Без да добавяте още модули, отворете настройките на реда и добавете следния фонов цвят към колона 1:
- Фон: #ffffff
Фон на колона 2 (работен плот)
Добавете следния фонов цвят към колона 2.
- Фон (работен плот): #ffffff
Цвят на фона на колона 2 при задържане
И променете този фонов цвят при задържане.
- Фон (Hover): #3d02ff
2 колони градиент фон
Също така добавете градиентен фон към колоната.
- Градиентни стопове 1 (20%): rgba(255,255,255,0)
- Градиентни стопове 2 (100%): #ff7700
оразмеряване
След това отидете на настройките за оразмеряване и направете някои промени.
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 2000px
Интервал (ред)
Продължете, като добавите персонализирани стойности за подложка в настройките за разстояние.
- Подложка (отгоре и отдолу): 0px
Разстояние (колона 1)
Промяна на настройките за разстояние в колона 1
- Подложка (отгоре и отдолу): 6vw (десктоп), 120px (таблет и телефон)
- Подложка (ляво и дясно): 5vw (десктоп), 80px (таблет), 50px (телефон)
Box Shadow
И също така добавете фина кутия сянка към този ред.
- Сила на замъгляване на сянка в кутия: 100px
- Сила на разпространение на сянка в кутия: -10px
Преходите
Накрая създайте плавен преход, като увеличите продължителността на прехода в раздела Подробно.
- Продължителност на прехода: 1100 ms
Дублиране на модули от линия 1
Тъй като вече имаме всички необходими модули в предишния раздел, ще спестим време, като ги клонираме.
Поставете дубликати в ред 2 колони
И поставете дубликатите в новия ред, както следва:
Редактиране на съдържанието
Не забравяйте да промените съдържание от вашите модули.
Промяна на градиентния фон на бутона
Също така променете градиента на фона на бутона.
- Градиент спира 0%: #ff653f
- Градиент спира 100%: #0066ff
- Кормилно управление: 39град
Промяна на изображението
Сменете изображението.
Промяна на градиента на фона
Накрая променете градиента на фона на модула Image.
- Градиент спира 0%: rgba(0,2,12,0.66)
- Градиент спира 57%: rgba(255,255,255,0)
изследване
Сега, след като преминахме през всички стъпки, нека хвърлим последен поглед на крайния резултат.
Изтеглете DIVI сега!!!
Заключение
В тази статия ви показахме как да промените градиентен фон при използване на курсора на мишката Divi. Също така създадохме страхотен пример от нулата, който използва този подход.
Вие сте свободни да използвате дизайна и произведенията на изкуството за всеки тип уебсайт, който създавате.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...