Винаги е забавно да бъдете креативни с възможностите за трансформация на Divi. Те ви позволяват да създавате невероятни дизайни „извън пътя“. И в този урок ще преобразуваме текстовете на Divi в красиво сегментирано кръгло меню, което се разраства и свива при щракване. Трикът за създаване на сегментирани области (като кръгова диаграма) е да се използва наклонът на трансформацията по доста уникален начин.
изследване
Ето преглед на сегментираното кръгово меню, което ще изградим в този урок.
Какво трябва да започнете
За да започнете, ще трябва да направите следното:
- Ако още не сте го направили, инсталирайте и активирайте Тема на Divi инсталиран (или приставката Divi Builder, ако не използвате Тема на Divi).
- Създайте нова страница в WordPress и използвайте Divi Builder, за да редактирате страницата в предния край (визуален конструктор).
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създаване на реда за елементи от менюто
В обикновената секция по подразбиране добавете ред от една колона.
Стилизиране на реда
Преди да добавим модул, нека извикаме линията, за да получим нашата кръгла форма и цвят на фона. Отворете настройките на реда и актуализирайте следното:
- Цвят на фона: #8857f2
- Използвайте персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 30em
- Височина: 30em
- Тапицерия: 0px в горната част, 0px в долната част
След това добавете заоблените ъгли и сянката на кутията.
Заоблени ъгли: 50%
Box Shadow: вижте екранната снимка
Ще се върнем, за да добавим някои допълнителни персонализации към реда, но засега можем да започнем да добавяме нашите въвеждащи бележки.
Създайте размазване за менюто
Добавете нов текст за размиване към реда на колона вътре в кръговия ред.
Размиване стил # 1
Актуализирайте съдържание на първото рекламно съобщение, което включва заглавие и икона.
- Заглавие: линк
- Използвайте иконата: ДА
- Икона: вижте екранната снимка
След това актуализирайте параметрите на дизайна, както следва:
- Цвят на фона: #773ef2
- Цвят на фона (задържане на курсора): #222222
- Цвят на иконата: #ffffff
- Размер на шрифта на иконата: 40px (десктоп), 30px (таблет)
- Подравняване на текста: център
След това актуализирайте текстовия стил на заглавието, както следва:
- Заглавие на шрифта: Archivo Narrow
- Заглавие Шрифт Стил: TT
- Цветен текст заглавие: #ffffff
- Размер на заглавието на текста: 14px (десктоп), 12px (таблет)
След това трябва да позиционираме референтния текст с помощта на персонализиран CSS. Отидете в раздела Разширени и добавете следния персонализиран CSS код към основния елемент:
позиция: абсолютно! важно; вляво: 50%; отгоре: 50%;
Сега се върнете в раздела Дизайн и актуализирайте размера и разстоянието на размазването, както следва:
- Ширина: 15em
- Височина: 15em
- Марж: -15ем вляво
Това поставя долния десен ъгъл на презентационния текст директно в центъра на кръга.
Създаване на сегмента с помощта на опциите за трансформация
За да превърнем размазването в сегмент на кръг, ще го наклоним и завъртим. За да направите това, актуализирайте следните опции за трансформация:
- Преобразуване на наклона на оста X: 60 градуса
- Произход на трансформацията: 100% 100% (долу вдясно)
Тъй като долният десен ъгъл на нашата размивка е директно в центъра на кръга, ние искаме началото на трансформацията да бъде зададен и в долния десен ъгъл. Това ще гарантира, че върхът на ъгловата размивка е в центъра на кръга, което го прави сегмент.
Отключи съдържание
В действителност всичко, което искаме да наклоним, е формата на рекламното съобщение, за да създадем формата на сегмента, а не съдържание вътрешни (т.е. иконата и текста). Но тъй като това не е възможно, просто трябва да добавим свойство за трансформация към съдържание blurb, който обръща ефекта на отклонение, така че да изглежда нормално. За да направите това, отидете в раздела Разширени и добавете следния персонализиран CSS:
трансформация: косо (-60deg) завъртане (-75deg); позиция: абсолютна; височина: 27em; ширина: 27em; дъно: -13.5em; вдясно: -13.5em;
След това намалете полето между иконата и заглавието, като добавите следния CSS код за изображението Blurb:
CSS за замъгляване на изображението
margin-bottom: 15px;
И сега, тъй като пространството за съдържание на blurb се простира отвъд blurb (въпреки че не можете да го видите), трябва да скрием преливането, както следва:
- Хоризонтално преливане: скрито
- Вертикално преливане: скрито
Ако не добавим това, ще имаме нежелано пространство за прелитане.
Създайте останалия свят
За да създадете останалата част от размазването, внедрете каркасен дисплей и дублирайте съществуващата размазване 5 пъти за общо 6 идентични оформления на размазване.
Въртене на замъгляване # 2
След това отворете настройките на Blurb # 2 и завъртете модула, както следва:
- Преобразуване на Z завъртане на ос: 30deg
Това ще завърти Текст # 2 по посока на часовниковата стрелка от централната точка на кръга.
След това можем да продължим да завъртаме останалия текст на презентацията на стъпки от 30 градуса, за да създадем полукръг от сегменти.
Завъртете размазването # 3
Отворете настройките на Blurb # 3 и актуализирайте следното:
- Преобразуване на Z завъртане на ос: 60deg
Въртене на замъгляване # 4
Отворете настройките на Blurb # 4 и актуализирайте следното:
- Преобразуване на Z завъртане на ос: 90deg
Завъртете размазването # 5
Отворете настройките на Blurb # 5 и актуализирайте следното:
- Преобразуване на Z завъртане на ос: 120deg
Завъртете размазването # 6
Отворете настройките на Blurb # 6 и актуализирайте следното:
- Преобразуване на Z завъртане на ос: 150deg
Ето резултата до момента.
Създаване на бутона на менюто
За да създадем бутона от менюто, ще намалим размера на цял раздел и след това ще използваме икона на презентация за дизайна на бутона.
За да направите това, започнете с добавяне на нов редовен раздел под текущия раздел.
След това добавете ред от една колона към раздела.
Създаване на икона Blurb за бутона
След това добавете модул за размазване към линията.
Изтрийте съдържанието по подразбиране на заглавието и тялото и използвайте икона, както следва:
- Използвайте иконата: ДА
- Икона: плюс символ (вижте екранната снимка)
Продължете да актуализирате настройките, както следва:
- Цвят на иконата: # 222222
- Използвайте размер на шрифта на иконата: ДА
- Размер на шрифта на иконата: 50px
- Анимация на изображение / икона: няма анимация
След това добавете следния персонализиран CSS код към основния елемент, за да премахнете полето по подразбиране под иконата.
Основен елемент на CSS
margin-bottom: 0px;
Подплънки на редове
След това премахнете попълването по подразбиране от реда.
- Тапицерия: 0px в горната част, 0px в долната част
Настройки на секцията
За да завършим бутона, ние ще оформим нашата секция в кръг.
Отворете настройките на секцията и актуализирайте следните елементи:
- Ширина: 100px
- Височина: 100px
- Тапицерия: 0px в горната част, 0px в долната част
- Заоблени ъгли: 50%
- Box Shadow: вижте екранната снимка
След това му дайте бял фон.
- Цвят на фона: #ffffff
В раздела Разширени добавете следния персонализиран CSS код към основния елемент, за да позиционирате бутона, както е фиксиран в долната част на прозореца.
позиция: фиксирана! важно; дъно: -50px; вляво: 50%; поле отляво: -50px;
Също така трябва да добавим CSS клас, който може да бъде насочен с нашата jQuery. Добавете следното:
- CSS клас: transform_target
След това актуализирайте Z индекса (все още в същия прозорец), така че бутонът да остане над останалото съдържание на страницата.
- Z индекс: 12
Позициониране на кръговата линия от менюто
Сега, когато бутонът за менюто е на мястото си, трябва да позиционираме реда, съдържащ нашето сегментирано кръгло меню, така че той също да е фиксиран и центриран в долната част на страницата, като се вижда само горната половина на кръга.
За целта отворете параметрите на реда, съдържащ оформлението на менюто и добавете следния персонализиран CSS:
Основен елемент на CSS
позиция: фиксирана! важно; дъно: -10em; вляво: 25%; марж-ляво: -15em; марж-дъно: -5em;
Актуализирайте z индекса, както следва:
- Z индекс: 11
След това добавете следния CSS клас.
- CSS клас: има-трансформира
И накрая, трябва напълно да свием (или свием) кръговото меню, използвайки скалата за преобразуване. Това ще ни позволи да активираме и деактивираме ефекта с jQuery, който ще разшири и свие менюто при щракване.
Актуализирайте следните елементи:
- Мащаб на трансформация: 1%
С нашето сегментирано кръгово меню и бутон от менюто, всичко, което трябва да направите, е да добавите персонализирания CSS и jQuery, за да завършите функционалността на бутона.
Добавяне на външен персонализиран CSS към настройките на страницата
Отворете настройките на страницата от менюто в долната част на визуалния конструктор и добавете следния персонализиран CSS под раздела Разширени:
.for-transform, .transform_menu .and-pb-icon, .toggle-transform-animation {преход: всички 400ms лекота на излизане; } .for-transform, .toggle-transform-animation {font-size: 14px; } .toggle-transform-animation {transform: няма! важно; } .transform_target {cursor: указател; } .toggle-active-target .and_pb_blurb .et-pb-icon {transform: rotateZ (45deg); } @media all и (max-width: 980px) {.to-transform {{-webkit-mask-image: -webkit-radial-gradient (бял, черен); } .for-transform, .toggle-transform-animation {font-size: 10px; }}
Добавяне на jQuery с кодов модул
След това внедрете режим на показване на каркасна рамка и добавете кодов модул под бутона за менюто на менюто.
(function($) {
$(document).ready(function(){
$('.transform_menu').click(function(){
$(this).toggleClass('toggle-active-target');
$('.pour-transformer').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
Краен резултат
Сега нека видим крайния резултат на страница на живо.
Настройка на размера на кръговото меню
Сегментираното кръгло меню се изгражда, като се използват единици за дължина em, които са спрямо размера на шрифта на родителското тяло. Това улеснява увеличаването и намаляването на размера на менюто. За да промените размера на шрифта, всичко, което трябва да направите, е да промените свойството за размер на шрифта на класа pour-transform, който е насочен към реда в персонализирания CSS, който сме добавили към настройките на страницата.
Заключителни мисли
В този урок ние обяснихме как да създадем сегментирано кръгло меню в Divi, като сме креативни с опциите за трансформация на Divi. Също така използвахме персонализиран CSS за задачи като фиксирано позициониране и наклонено размито съдържание за елементи от менюто.
JQuery ни позволява да включим и изключим свойството на мащаба на трансформация, за да създадем ефекта на разгъване и свиване на менюто, когато щракнете върху бутона на менюто.
Като цяло мисля, че ще намерите много вдъхновение в този урок.
