Всяка седмица Elegant Theme пуска нови безплатни пакети за оформление на Divi, които можете да използвате за следващия си проект. За един от презентационните пакети те споделят и пример за употреба, който ще ви помогне да получите вашата уеб сайт на горното ниво. Тази седмица, като част от текущата инициатива за дизайн на Divi, ще ви покажем как креативно да използвате опциите за задържане на курсора на мишката на Divi, за да откроите призивите към действие (CTA) на вашите страници. Използваме пакета услуги за пране на Divi и ще разгледаме три различни примера за открояване на вашия призив за действие.
изследване
Преди да се потопите в урока, нека бързо да разгледаме какво ще създадем, за да добием представа.
Добавете нова страница, като използвате оформлението Пране или услуга пране
Започнете с добавяне на нова страница към вашата уеб сайт и изтеглете началната страница на перални услуги. Трите примера, които ще създадем, ще бъдат базирани на това оформление. След като имате подхода, можете да приложите тези примери към каквото и оформление да работите.
Клонирайте текстовия модул
Да започнем с първия пример! Ние трансформираме съществуващ текстов мод в стимул за задържане. Този подход ще се появи само на работния плот. Ето защо клонираме първоначалния модул, за да му позволим да се показва на по-малки екрани без ефекти на курсора на мишката.
видимост
Текстов модул # 1
Продължете, като скриете първия модул на таблета и телефона.
Текстов модул # 2
И скрийте втория модул на работния плот.
Добавете ефект на преобръщане към текстовия модул на работния плот
Добавете заглавието на съдържанието 3
Ние редактираме само първия текстов модул, който ще бъде този, който се появява на работния плот. Отворете модула и добавете съдържание от участък 3 до зоната на съдържание.
Задръжте курсора на мишката върху текстовите настройки
След това отидете в настройките на текста и "скрийте" текста на абзаца на вашия модул, като добавите 0px към размера на текста при нанасяне на курсора.
- Размер на текста: 0px
Задръжте курсора на мишката върху текстовите настройки на 2
Направете същото за текстовите настройки за Header 2 при задържане на курсора на мишката.
- Заглавие 2 Размер на текста: 0px
Заглавие на текста по подразбиране 3
След това, достъп до текстовите параметри на темата 3 и направете промени.
- Заглавие на шрифта 3: Josefin Sans
- Заглавие 3 Шрифтове: Полусмели
- Заглавие 3 Размер на текста: 0px
Задръжте курсора на мишката върху заглавие 3 Текстови настройки
Променете размера на текста, като задържите.
- Заглавие 3 Размер на текста: 40px
Настройки по подразбиране на разстоянието
След това отидете в настройките за разстоянието и се уверете, че се прилагат следните персонализирани стойности за подложка:
- Горна подложка: 80px
- Подложка отдолу: 50px
- Лявата подложка: 40px
- Тапицерия отдясно: 40px
Настройки на разстоянието при преобръщане
Също така добавете персонализиран марж на преобръщане.
- Горна граница: 50px
- Ляв марж: -53.5vw
Настройки на границата по подразбиране
Добавяме и долна граница без граница.
- Ширина на долната граница: 0px
- Цвят на долната граница: # ff947f
- Стилът на долната граница: пунктирен
Настройки за преливане на границата
Променете ширината на границата на задържане.
- Ширина на долната граница: 5px
Настройки по подразбиране в сянка на полето
След това добавете кутия сянка.
- Кръгла вертикална позиция на сянка: 50px
- Сила за размазване на кутия в сянка: 54px
- Сила на разпространение в сянка на кутията: -32px
- Цвят на сенките: rgba (255,255,255,0)
Настройки за сянка на кутията за преобръщане
И променете цвета на сенките на полето за навъртане.
- Цвят на сенките: rgba (0,0,0,0,2)
преходи
За да създадете плавен преход, увеличете времето за преход в настройките на прехода.
- Продължителност на прехода: 750ms
Резюме
И накрая, в този урок ставаше дума за нас да създадем анимация, която подчертава раздел на нашата страница Divi. Възможностите с Divi са почти неограничени, като използвате различните опции (комбинации от няколко различни опции) ще можете да създавате интерфейси с динамична и атрактивна анимация. Не е завършен, ще разгледаме втората част на този урок по-късно. Дотогава, ако имате някакви въпроси, не се колебайте да ги зададете в раздела за коментари.
