Искате ли да създадете оригинално Divi меню под формата на въртящо се колело при задържане?
La création d’une roue de menu tournante au survol est une façon amusante de présenter des liens utiles sur votre site Web. Ce serait un excellent moyen de fournir plusieurs appels à l’action dans un en-tête pour diriger les utilisateurs là où ils doivent aller. Et ce serait aussi un menu de sous-catégorie sympa pour вашия блог.
В този урок ще ви покажем как да създадете въртящо се колело на менюто при задържане в Divi. Това може да стане с помощта на комбинация от вградени опции на Divi и някои персонализирани css фрагменти.
изследване
Преди да преминем към този урок, нека да разгледаме резултата, който искаме да постигнем.
Изтеглете DIVI сега!!!
Създайте нова страница с Divi Builder
За да започнете, ще ви трябва следното:
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Дизайн на въртящото се колело на менюто в Divi
Създайте раздел и ред 1
В секцията, присъстваща по подразбиране, добавете ред със следната структура на колони.
След това добавете текстов модул към реда със следното съдържание.
След това актуализирайте дизайна на текста, както следва:
- Шрифт на текста: Share Tech
- Разстояние между буквите на текста: 1px
- Заглавие 2 Размер на текста: 8vw
Добавете линия 2, за да изградите колелото
След това трябва да добавим нов ред към колона под ред 1.
Преди да започнем да добавяме нашите текстови модули за нашите връзки, трябва да проектираме нашата линия като колело. Ще има много оптимизации, необходими в реда, за да направим нашия дизайн на колелото.
Прочетете още: Как да разкриете съдържанието на разделителя на секцията при насочване на мишката в Divi
За да започнете, отворете настройките на ред 2 и актуализирайте следното:
- Цвят на фона: #02366b
- Цвят на градиента на левия фон: rgba(0,0,0,0.45)
- Цвят на градиента на фона вдясно: #02366b
- Тип градиент: кръгъл
- Радиална посока: център
- Начална позиция: 36%
- Крайна позиция: 0%
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 500px
- Максимална ширина: 500px (десктоп), автоматично (таблет и телефон)
- Височина: 500px (десктоп), автоматично (таблет и телефон)
- Подплата (работен плот): 0px (отгоре и отдолу)
- Подложка (таблет и телефон): 20px (отгоре, отдолу и отляво)
- Марж (телефон): -10% (вдясно)
Трябва да зададем както височината, така и ширината на линията на 500 пиксела, така че да е идеален квадрат. Това ще ни позволи да му придадем перфектна кръгла форма, като използваме опцията за заоблени ъгли (радиус на границата) на Divi.
- Заоблени ъгли: 50%
След това можем да добавим друго ниво на кръгов дизайн, като използваме сянка на кутия, както следва:
- Сила на замъгляване на сянка в кутия: 0px
- Сила на разпръскване на сянка в кутия: 210px
- Цвят на сянка: rgba(2,54,107,0.66)
След това ще добавим малък CSS фрагмент, за да центрираме вертикално съдържанието на нашия ред. Под раздела Подробно, добавете следния персонализиран CSS в главния елемент.
display:flex;align-items:center;
Добавяне на връзки
Всяка връзка в колелото ще бъде създадена с модул Текст. Ще създадем общо шест модула Текст. Пет от модулите Текст ще съдържа връзките за колелото, а другият ще съдържа заглавието на менюто.
Започнете със създаване на нов модул „Текст“.
След това актуализирайте настройките на текста, както следва:
- Боди: “Element 1”
- Шрифт на текста: Share Tech
- Цвят на текста: #ffffff
- Размер: 16px (по подразбиране), 20px (Hover)
- Разстояние между буквите: 1px
- Височина на текстовия ред: 60px
- Ширина: 250px (десктоп), автоматично (таблет и телефон)
- Височина: 60px
- Подложка (вляво): 20px
Запазете настройките за сега. След това дублирайте текстовия модул 4 пъти, за да създадете общо 5 текстови модула.
Позициониране на текстови връзки/модули
Вече сме готови да позиционираме нашите връзки по периметъра на колелото. За целта ще актуализираме всеки модул Текст с опции за трансформиране, които преместват/транслират и завъртат модула на място.
Открийте също: Как да създадете решетка с течни колони при задържане на мишката в divi
За да улесните това, разгърнете режима на телена рамка и маркирайте текстовите модули, като започнете с връзка 1 отгоре до връзка 5 отдолу.
Връзка 1
Ще започнем с редактиране на връзка 1. Отворете настройките на текстовия модул за връзка 1 и актуализирайте следното:
- Трансформиране на превод (ос Y): 120 px (десктоп), 0 px (таблет и телефон)
- Трансформиране на завъртане (ос Z): 60 градуса (десктоп), 0 px (таблет и телефон)
- Произход: 50% (център вдясно)
Връзка 2
Отворете настройките на текстовия модул за връзка 2 и актуализирайте следното:
- Transform
- Превод (ос Y): 60px (десктоп), 0px (таблет и телефон)
- Завъртане на оста Z: 30 градуса (настолен компютър), 0 пиксела (таблет и телефон)
- Произход: 50% (център вдясно)
Връзка 3
Тъй като текстовият модул за връзка 3 е в средата, можем да го оставим на място.
Връзка 4
Отворете настройките на текстовия модул за връзка 2 и актуализирайте следното:
- трансформиране :
- Превод на ос Y: -60px (десктоп), 0px (таблет и телефон)
- Въртене на ос Z: -30 градуса (настолен компютър), 0 пиксела (таблет и телефон)
- Произход: 50% (Център вдясно)
Връзка 5
Отворете настройките на текстовия модул за връзка 2 и актуализирайте следното:
- трансформиране :
- Превод на ос Y: -120px (десктоп), 0px (таблет и телефон)
- Въртене по ос Z: -60 градуса (настолен компютър), 0 пиксела (таблет и телефон)
- Произход: 50% (център вдясно)
Сега да видим резултата дотук. Забележете как връзките/текстовете в текстовите модули вървят перфектно по периметъра на кръга.
Добавен етикет на менюто
За да добавим етикета на менюто, ще трябва да добавим друг текстов модул върху петте текстови модула, които вече имаме. Продължете и добавете нов текстов модул над връзка 1.
След това актуализирайте съдържанието на тялото със следното:
Menu
След това, за да ускорите дизайна, копирайте стиловете на текстовия модул за връзка 3 и поставете тези модулни стилове в новия текстов модул.
След това актуализирайте следното:
- Височина на текстовия ред: 300px (десктоп), 20px (таблет и телефон)
- Височина: възстановяване на настройката по подразбиране (автоматично)
- Трансформиране на въртене (ос Z): 180 градуса (настолен компютър), 0 градуса (таблет и телефон)
- Произход на трансформация: 50% (център вдясно)
След като приключим, трябва да дадем на модула Menu Label Text абсолютна позиция. За да направите това, добавете следния персонализиран CSS към главния елемент:
position: absolute!important;
Сега разберете резултата. Трябва да видите, че елементът от менюто е с главата надолу вдясно от колелото.
Добавен е ефект на въртящо се завъртане към линия/колело
За да добавите ефекта на завъртане на курсора на мишката към реда, актуализирайте настройките на реда, както следва:
- Трансформиране на завъртане (ос Z): 180 градуса (настолен компютър), 0 градуса (задръжте курсора на мишката), 0 градуса (таблет и телефон)
След това актуализирайте настройките за преход, както следва:
- Продължителност на прехода: 450ms
- Преход на кривата на скоростта: Ease-in-Out
Сега вижте как колелото се върти, когато задържите над него.
Създаване на оформление в две колони за секцията
В момента оформлението се състои от два реда с една колона, подредени един върху друг. Въпреки това можем да използваме свойството flex css, за да подравним двата реда хоризонтално.
За да направим това, можем да добавим малък фрагмент от персонализиран CSS към раздела. След като това стане, ще трябва да коригираме малко разстоянието, за да оправим нещата.
Отворете настройките на раздела и добавете следния персонализиран css към основния елемент:
display:flex;
Актуализиране на разстоянието между ред 1
След това актуализирайте размера и разстоянието на ред 1, както следва:
- Ширина: 40% (десктоп)
- Марж (десктоп): остават 5%.
Краен резултат
Сега нека видим крайния резултат.
Изтеглете DIVI сега!!!
Алтернативен дизайн на половин колело
Интересен алтернативен дизайн е дясната половина на колелото да се скрие извън секцията, така че връзките да са скрити и след това да се разкриват при задържане.
За да направите това, продължете напред и дублирайте цялата секция, съдържаща чертежа, който току-що създадохме.
В дублиращата се секция актуализирайте параметрите в ред 1, както следва:
- Ширина: 70% (десктоп)
След това актуализирайте настройките в ред 2, за да избутате колелото извън секцията, както следва:
- Поле: -250px вдясно
Трябва да използваме -250px, защото общата ширина на колелото е 500px и искаме да скрием точно половината от линията.
Définissez ensuite la видимост de la section sur masquée comme suit :
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
Ето и крайния резултат.
Изтеглете DIVI сега!!!
Заключение
Колелото с въртяща се връзка е един от онези стилни дизайнерски елементи, които могат да ангажират посетители с фин и уникален ефект на движение. И е доста невероятно колко лесно може да се направи този дизайн с вградените настройки за дизайн на Divi.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...