Всяка седмица ви предоставяме нови идеи за дизайн, които можете да използвате в различните си Divi проекти. Тези уроци обикновено включват примери за употреба, които ще ви помогнат да изведете уебсайта си на следващото ниво.

Тази седмица, като част от нашата текуща инициатива за дизайн на Divi, ще ви покажем как да създадете зашеметяващо плаващо меню, което се разширява, след като задържите курсора на мишката или кликнете върху него. Нека започнем с някои общи стъпки. Ще продължим с добавянето на елементи от менюто, използвайки модулите Blurb, и ще завършим, като ви позволим да избирате между ефект на задържане на курсора или щракване.

Да вървим!

изследване

Преди да се потопите в урока, нека да разгледаме набързо резултата, който можем да получим. Но това може да е различно, защото вероятно ще искате да персонализирате наученото.

1. Създайте празна страница и използвайте шаблона на страницата за забележителности

Добавете нова празна страница и активирайте Divi Builder

Първото нещо, което трябва да направите, е да създадете нова празна страница. Дайте заглавие на страницата си и преминете към Divi Builder.

Изтеглете страница за туристическа дестинация

След като активирате Divi Builder, изтеглете оформлението на целевата страница на пакета за разглеждане.

2. Добавете нов редовен раздел в края на страницата

След като лентата на главното меню е скрита, можем да започнем да добавяме менюто за преглед. За целта ще добавим нов редовен раздел в долната част на нашата страница.

Цвят на фона

Отворете настройките на секцията и добавете леко прозрачен бял цвят на фона.

• Цвят на фона: rgba (255,255,255,0.98)

разстояние

Превключете към раздела Дизайн и премахнете всички подложки по подразбиране отгоре и отдолу от раздела.

• Най-висока подложка: 0px
• Подложка отдолу: 0px

Сянка по подразбиране

Добавете сянка на кутията към следващия раздел.

• Сила за размазване на кутия в сянка: 18px
• Цвят на нюанса: #383838

Hover Box Shadow

И променете силата на размазване на сянката на висящата кутия.

• Сила за размазване на кутия в сянка: 1000px

Скрийте превишаването на раздели и увеличете Z индекса

Ще използваме настройките за оразмеряване на секциите, за да накараме тази техника да работи, но за да сме сигурни, че нищо не надхвърля контейнера на секцията, ще трябва да скрием препълванията. Увеличаваме и Z индекса, за да сме сигурни, че секцията остава в горната част на останалата част от страницата.

• Хоризонтално преливане: скрито
• Вертикално преливане: скрито
• Z индекс: 9999

3. Конфигурирайте размера на менюто, за да съответства на всички размери на екрана

Добавете ред 1

Структура на колоната

След като сте задали основните параметри за секцията, е време да добавите цялото съдържание, което искате да се показва в менюто. Можете да създадете всеки дизайн, който харесвате, като използвате вградените дизайнерски елементи и опции на Divi, но ще трябва да се уверите, че той пасва перфектно на височина от 100px на всички размери на екрана. За да направим това, ще използваме единицата за ширина на viewport по време на целия процес на изграждане и ще коригираме стойностите за различните размери на екрана. Започнете, като добавите нов ред към вашата секция, използвайки следната структура на колоните:

оразмеряване

Без още да добавяте модули, отворете настройките на реда и се уверете, че те запълват цялата ширина на раздела.

• Използвайте персонализирана ширина на улука: Да
• Ширина на улука: 1
• Ширина: 100%
• Максимална ширина: 100%

разстояние

Отидете в настройките за разстоянието и премахнете всички подложки по подразбиране отгоре и отдолу.

• Най-висока подложка: 0px
• Подложка отдолу: 0px

Добавете текстов модул към колона

Добавете символ

Продължете, като добавите текстов модул към колоната на реда. Добавете символа „=“ към областта за съдържание или използвайте друг символ, който желаете.

Цвят на фона

Променете цвета на фона на модула след това.

• Цвят на фона: #000000

Текстови настройки

Преминете към раздела Дизайн и променете и настройките на текста.

• Текст Шрифт: Отворен без
• Подравняване на текста: център
• Цвят на текста: #ffffff
• Размер на текста: 3vw (десктоп), 5vw (таблет), 7vw (телефон)
• Височина на реда на текста: 1em

разстояние

Също така добавяме място в горната и долната част на модула, като използваме следните персонализирани стойности за подплата:

• Горна подложка: 2.5vw (десктоп), 3.5vw (таблет), 5vw (телефон)
• Тапицерия в долната част: 2.5vw (десктоп), 3.5vw (таблет), 5vw (телефон)

Добавете линията 2

Структура на колоната

Продължете да добавяте втори ред, като използвате следната структура на колоните:

оразмеряване

Без още да добавяте модули, отворете настройките на реда и го оставете да запълни цялата ширина на екрана.

• Използвайте персонализирана ширина на улука: Да
• Ширина на улука: 1
• Ширина: 100%
• Максимална ширина: 100%

разстояние

Отидете до настройките за разстоянието и след това добавете персонализирано запълване отгоре и отдолу.

• Горна подложка: 2vw (десктоп), 4vw (таблет), 6vw (телефон)
• Тапицерия в долната част: 2vw (десктоп), 4vw (таблет), 6vw (телефон)

показ

За да сме сигурни, че двете колони остават една до друга при по-малки размери на екрана, ще добавим един ред CSS код към елемента на главния ред.

дисплей: Flex;

Добавете модула Blurb към колоната 1

Добавете съдържание

Време е да започнете да добавяте елементи от менюто! Добавете нов Blurb модул към първата колона на реда и въведете желаното съдържание.

Изберете иконата

След това изберете икона.

Добави линк

И въведете връзка към страница, съответстваща на елемента от менюто.

• URL адрес на заглавието на връзката: #

Настройки на икони

Преминете към раздела Дизайн и променете съответно настройките на иконата:

• Цвят на иконата: # ff3314
• Разположение на иконата: отгоре
• Използвайте Размер на шрифта на иконата: Да
• Размер на шрифта на иконата: 2vw (десктоп), 3vw (таблет), 4vw (телефон)

Настройки за текст на заглавието

Също така променете текстовите настройки на заглавието.

• Заглавие на полицията: PT Serif
• Заглавие на шрифта: Подчертайте
• Подчертайте цвета на заглавието: # ff3314
• Заглавие на текста: Центрово подравняване
• Размер на заглавието на текста: 1.8vw (десктоп), 2.3vw (таблет), 3.3vw (телефон)

Настройки на основния текст

След това променете настройките на текста на тялото.

• Шрифт на тялото: Lato
• Подравняване на тялото на текста: център
• Цвят на основния текст: # c6c6c6
• Размер на основния текст: 0.9vw (десктоп), 1.7vw (таблет), 2.1vw (телефон)
• Височина на тялото: 1.8em

оразмеряване

И променете ширината на модула на различни размери на екрана, като използвате следните стойности:

• Ширина: 60% (десктоп), 65% (таблет), 80% (телефон)

Анимация

Премахваме и анимацията на иконата в настройките за анимация.

• Икона Анимация: Без анимация

Клонирайте модула и поставете копието в колоната 2

След като завършите модула Blurb, можете да го клонирате и да поставите дубликата във втората колона на реда.

Промяна на копие

Не забравяйте да смените копието. Не забравяйте да смените иконата и връзката.

Клонирайте линията два пъти

След като завършите двата модула Blurb в реда, можете да дублирате целия ред два пъти.

Променете копието, иконата и връзката за всеки дубликат на blurb поотделно

Не забравяйте да промените копието, иконата и връзката за всеки от елементите на размазаното меню поотделно.

4. Направете раздела лепкав

Défaut

След като добавите всички елементи, които искате да покажете към вашата секция, можете да запазите секцията в горния ляв ъгъл на страницата си, като добавите следните два реда CSS код към основния елемент на секцията. :

позиция: фиксирана; отгоре: 0;

Задръжте курсора (Важно!)

Активирайте опцията за задържане върху основния елемент на секцията и се уверете, че секцията остава лепкава и в това състояние.

позиция: фиксирана;

5. Изберете метод: A) Меню за прелитане или B) Кликнете върху менюто

A) Меню на курсора

Оразмеряване на раздели по подразбиране

В следващата част на урока ще трябва да изберете предпочитан метод. меню с мишката или щракване. Менюто за задържане ще се държи като меню за щракване на по-малки устройства. Ако решите да изберете опцията за задържане, отворете отново настройките на раздела, отидете в настройките за оразмеряване и съответно променете ширината и височината на менюто си:

• Ширина: 8vw (десктоп), 12vw (таблет), 20vw (телефон)
• Височина: 7.4vw (десктоп), 12vw (таблет), 16vw (телефон)

Задръжте курсора на секцията

Променете стойностите за прехвърляне, за да създадете разширяващо се меню.

• Ширина: 80%
• Височина: 100vh

Б) Меню при щракване

Добавете клас CSS към секция

Ако искате меню, което се отваря само с щракване, трябва да отворите текстовия модул, който съдържа символа на менюто. Отидете в раздела Разширени и добавете персонализиран клас CSS.

• CSS клас: пълна ширина-отворен

Добавете CSS клас към текстовия модул

След това отворете параметрите на секцията и добавете друг CSS клас.

• CSS клас: гладка трансформация

Оразмеряване на секцията

След това променяме ширината и височината на нашия раздел.

• Ширина: 8vw (десктоп), 12vw (таблет), 20vw (телефон)
• Височина: 7.4vw (десктоп), 12vw (таблет), 16vw (телефон)

Добавете код към страницата

Добавете нов ред в долната част на секцията

Сега, за да създадем ефект на обръщане, ще ни трябва малко JQuery и CSS код. Започнете с добавяне на кодов модул към нов ред в долната част на раздела.

Добавете кодов модул към секцията и поставете JQuery превключващ код

Копирайте следните редове от кода JQuery и ги поставете в полето с код:

jQuery(function($){
$("#fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});
});

Добавете персонализиран CSS код към настройките на страницата

Не на последно място, отворете следните настройки на страницата и добавете следните CSS редове от код:

.smooth-transform-active {височина: 100vh; ширина: 80%; } .smooth-трансформация {-webkit-преход: всички 0.5s лекота; -moz-преход: всички 0.5s лекота; -o-преход: всички 0.5s лекота; -ms преход: всички 0.5s лекота; преход: всички 0.5s лекота; }

Заключителни мисли

В този урок ви показахме как да създадете красив модул за презентация, който се разширява чрез щракване / задържане (в зависимост от вашите предпочитания). Това е чудесен начин да добавите допълнителна интерактивност към менюто си, като същевременно поддържате реагиращ резултат за всички размери на екрана. Ако имате въпроси или предложения, моля, оставете коментар в резервирания раздел по-долу.

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на плъгини, теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография