Искате ли да създадете изскачаща форма за вход в Divi с бутони за вход/изход?
Създаване на изскачаща форма за вход в Divi може да бъде ефективен начин за подобряване на дизайна и потребителското изживяване при влизане и излизане от вашия сайт.
Идеята е да се създаде форма за вход, която се появява в изскачащ прозорец, когато потребителят кликне върху бутон за вход в заглавката на страницата.
Това е по-удобно от пренасочването на потребителя към персонализирана страница за вход.
В този урок ще създадем изскачащ формуляр за влизане с персонализирани бутони за влизане и излизане в Divi.
Използвайки модула за вход в Divi и няколко модула Button, ще създадем безпроблемно изскачащо изскачащо изживяване за вход в интерфейса, което ще позволи на потребителите да влизат и излизат, без да бъдат пренасочвани към друга страница.
Нека да започнем!
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Обърнете внимание как бутоните за вход и излизане се променят съответно. И след като потребителят влезе, той остава на текущата страница.
Освен това, контекстният формуляр за вход показва различно „предупредително“ съдържание всеки път, когато потребителят се опита да излезе.
Какво трябва да започнете
Въпреки че можете да добавите тази изскачаща форма за вход и персонализирани бутони за вход/изход към всеки персонализиран заглавен файл, ние ще използваме предварително изграден заглавен файл, за да ускорим процеса и да започнем бързо с дизайна.
Импортирайте шаблона за заглавката от „Crowdfunding Layout Pack“ в Divi builder-а.
За да започнете, изтеглете Заглавката и долната част на Crowdfunding Layout Pack на Divi са безплатни За да направите това, отидете на статията в блога.
След това въведете вашия имейл, за да изтеглите zip файла.
След това разархивирайте файла, така че да е готов за импортиране.
За да импортирате файла в редактора на теми, направете следното:
- Отидете на Divi > Theme Builder.
- Кликнете върху иконата за преносимост.
- В изскачащия прозорец „Преносимост“ изберете раздела „Импортиране“.
- Изберете предварително изтегления разархивиран файл за импортиране.
- Кликър сър Импортиране на шаблони за създаване на теми Divi.
- Щракнете върху иконата за редактиране, за да промените импортирания заглавен файл.
Създаване на изскачаща форма за влизане в Divi
Част 1: Създаване на бутони за влизане и излизане
След като сте в редактора за оформление на глобалния заглавен файл, отворете изглед на слоя така че да можете лесно да видите всички елементи.
В горния ред на заглавната секция изтрийте модула Следват социалните медии до бутона Вход в колона 3.
Прочетете още: Divi: Сравнение на различните видове градиенти
Създаване на бутона за вход
За да създадете нашия бутон за влизане, отворете настройките на модула Button в колона 3 на горния ред.
Актуализирайте следните елементи в раздела „Дизайн“:
- Икона на бутон: икона на катинар (вижте екранната снимка)
- Разположение на иконата на бутон: вдясно
- Показване на икона само при задържане на курсора на мишката за бутон: НЕ
- Подложка: 0,5 em (отгоре и отдолу), 2 em (отляво), 0,7 em (дясно)
Под раздела Подробно, задайте на бутона два персонализирани CSS класа, както следва:
- CSS клас: et-toggle-popup et-popup-login-button
Създаване на бутон за излизане
За да създадете нашия бутон за излизане, дублирайте съществуващия бутон за влизане в колона 3.
За да разграничите двата бутона, можете да актуализирате етикета на всеки от тях. След това отворете настройките на модула „Дублиране на бутон“ в колона 3.
Променете текста на бутона, така че да се чете „Изход“.
Актуализирайте следните елементи в раздела „Дизайн“:
- Икона на бутон: икона за отключване (вижте екранната снимка)
Под раздела Подробно, актуализирайте бутона CSS Classes, както следва:
- CSS клас: et-toggle-popup et-popup-logout-button
Първият клас ще остане същият, но вторият клас ще бъде различен.
Част 2: Създаване на изскачащ раздел
След като бутоните са готови, сме готови да създадем изскачащата секция, която ще служи като наш изскачащ прозорец, съдържащ формуляра(ите) за вход.
Под заглавната секция добавете нова обикновена секция.
След това вмъкнете ред с една колона вътре в секцията.
Настройки на секцията
Преди да актуализирате реда, отворете настройките на раздела.
Под раздела съдържаниеДайте на секцията бял фонов цвят:
- Фон: #ffffff
Под раздела Дизайн, актуализирайте следното:
- Ширина: 100%
- Максимална ширина: 800 пиксела (десктоп), 80% (таблет), 100% (телефон)
- Подравняване на раздела: Център
- Височина: автоматично (настолен компютър и таблет), 100% (телефон)
- Максимална височина: 100%
- Подплата: 0px (отгоре и отдолу)
- Заоблени ъгли: 10px
- Сянка на кутията: вижте екранната снимка
- Вертикална позиция на сянката на кутията: 0px
- Сила на размазване: 100 пиксела
- Сила на разпространение: 50px
Под раздела Подробно, актуализирайте следното:
Добавете персонализиран CSS клас.
- CSS клас: et-popup-login
Добавете персонализиран CSS фрагмент към основния елемент:
overscroll-behavior: contain;Актуализирайте опциите за видимост и позиция.
- Хоризонтално преливане: Скрито
- Вертикално преливане: автоматично
- Позиция: Фиксирана
- Местоположение: Център център
- Z индекс: 999999
Настройки на линията
С настройките на секциите на място, отворете настройките на линията и актуализирайте следните настройки на дизайна:
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 100%
- Подплата: 0px (отгоре), 5vh (отдолу)
Част 3: Създаване на икона за затваряне на изскачащ прозорец
За да създадем икона за затваряне на изскачащ прозорец, която ще го затваря/скрива при щракване, ще използваме модул Blurb.
Добавете нов модул Blurb към реда.
Отворете настройката на модула и изтрийте заглавието и основния текст.
След това добавете иконата, както следва:
- Използване на икона: ДА
- Икона: икона „x“ (вижте екранната снимка)
Под раздела Дизайн, актуализирайте следното:
- Цвят на иконата: #004e43
- Подравняване на изображение/икона: центрирано
- Използвайте размер на шрифта на иконата: ДА
- Размер на шрифта на иконата: 50px
- Ширина: 50px
- Модул за подравняване: вдясно
- Височина: 50px
Под раздела Подробно, добавете CSS клас към модула Blurb, както следва:
- CSS клас: et-toggle-popup
Част 4: Създаване на формуляри за вход „Влезли“ и „Излезли“.
За да имаме различно съдържание и дизайн за формата за вход по време на влизане и излизане, ще създадем два различни модула за формуляри за вход.
Първата ще бъде формата за вход, която ще се появява всеки път, когато потребителят „излезе“. Втората ще бъде формата за вход, която ще се появява всеки път, когато потребителят „влезе“.
Създаване на формуляр „Излизане от системата“
За да създадете формата за вход „Излизане от системата“, добавете нов модул за вход под иконата на модула Blurb в реда.
Отворете настройките на модула и променете следните настройки:
Раздел Съдържание
- Пренасочване към текущата страница: ДА
- Използвайте цвят на фона: НЕ
Раздел Дизайн
- Цвят на фона на полетата: rgba(0,78,67,0.05)
- Цвят на фона на фокуса на полето: rgba (0,78,67,0,15)
- Подравняване на текст: центрирано
- Цвят на текста: тъмен
- Шрифт на заглавието: Poppins
- Дебелина на шрифта на заглавието: полу-удебелен
- Цвят на текста: #000000
- Височина на заглавния ред: 1,3 см
- Основен шрифт: Work Sans
За да актуализирате стиловете на бутоните, копирайте стиловете на бутоните от бутона за влизане, който създадохме, в третата колона в реда на секцията Header.
След това поставете стиловете на бутоните в групата с опции за бутони в настройките за връзка в раздела Дизайн.
След това актуализирайте стиловете на бутоните за формата за влизане, както следва:
- Бутон
- Цвят на текста: #ffffff
- Фон: #004e43
- Фон (задръжте): #00683c
- Ширина на рамката: 0 пиксела
- Подложка: 15px (отгоре и отдолу)
След това актуализирайте опциите за оразмеряване, както следва:
- Ширина: 100%
- Максимална ширина: 80% (десктоп), 90% (таблет), 95% (телефон)
- Модул за подравняване: Център
Раздел Разширени
Под раздела Подробно, актуализирайте CSS класа и персонализирания CSS, както следва:
- CSS клас: et-logged-out-form
Персонализиран CSS за описание на връзката:
width: 100% !important;
float: none !important;Персонализиран CSS за формата за вход:
width: 100% !important;
padding: 0px !important;Това ще гарантира, че модулът за влизане обхваща цялата ширина на ред/колона, дори на работния плот.
Създаване на формуляр „Влезли сте“
След като версията на формуляра „Излезли от системата“ е завършена, трябва да създадем версията „Влезли в системата“, която ще има различно съдържание и стил, за да се подобри максимално потребителското изживяване.
За да създадете формуляра за вход „Излязъл от системата“, дублирайте съществуващия формуляр за вход.
След това актуализирайте етикета съответно за всеки от формулярите за вход.
Отворете дублиращите се настройки (формулярът „Влязъл“) и добавете заглавието на сайта като динамично съдържание към заглавието на модула на формуляра за вход.
След това отворете настройките за динамично съдържание на заглавието на сайта и актуализирайте съдържанието преди и след, както следва:
- Преди: „Опитвате се да излезете от Elegant Themes“
- След: ". "
Това ще създаде приятно динамично известие за потребителите, които се опитват да излязат от сайта.
След това добавете следния H3 заглавие към тялото:
<h3>Are you sure?</h3>
Ако някога сте виждали съдържанието на модула за вход, когато сте влезли в системата, знаете, че има персонализирано съобщение, което включва персонализирана връзка за „излизане“. За да изглежда тази връзка като бутон, трябва да персонализираме настройките за шрифт/текст на тялото на връзката, както следва:
- Изберете раздел връзка под опцията Основен текст.
- Шрифт на връзката: Work Sans
- Тегло на шрифта на връзката: Полудебел
- Стил на шрифта: TT
- Подравняване на текста на връзката: центрирано
- Цвят на текста на връзката: #ffffff
ЗАБЕЛЕЖКА: Няма да можете да видите визуализацията на тези резултати, докато не покажете формуляра на активна страница.
Под раздела Подробно, актуализирайте CSS класа и персонализирания CSS, както следва:
- CSS клас: et-logged-in-form
Персонализиран CSS за формата за вход:
display:none;
Част 5: Добавете потребителски код
За да добавите персонализирания CSS и JQuery, необходими за функционалността на изскачащия формуляр за влизане, създайте нов модул за код под последния модул за влизане.
CSS
Отворете настройките на модула Code и поставете следния CSS в областта на кода, като се уверите, че сте обвили CSS в необходимите тагове за стил.
/* hide popup section */
.et-popup-login {
display: none;
}
/* hide login button when logged in */
.logged-in .et-popup-login-button {
display: none !important;
}
/* hide logout button when logged out */
.et-popup-logout-button {
display: none !important;
}
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
display: inline-block !important;
}
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
display: none !important;
}
/* hide logged in form when logged out */
.et-logged-in-form {
display: none !important;
}
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
display: block !important;
}
/* style logout link within logged in form */
.et-logged-in-form a {
display: block;
padding: 15px 1em;
border-radius: 8px;
background: #004e43;
max-width: 400px;
margin: 20px auto 0px;
}
.et-toggle-popup {
cursor: pointer;
}
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
display: block !important;
}
body.et-fb .et-popup-login-button {
display: inline-block !important;
}Обърнете внимание, че CSS използва класа "connected", който е вграден в WordPress, за да скрие/покаже съответните бутони за вход/изход и формулярите за вход "Logged In"/"Logged Out", когато потребителят е влязъл или излязъл.
JQuery
Под тага за крайния стил поставете следния JQuery, като се уверите, че обвивате кода в необходимите тагове на скрипта.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);Този фрагмент просто превключва контекстната секция всеки път, когато потребителят кликне върху един от трите елемента с класа "and-toggle-popup"(бутоните за вход и излизане плюс иконата за презентация „x“).
Вижте също: Divi: Как да използвате настройките на фоновата маска и опциите за трансформиране на шаблона
Готово е !
Не забравяйте да запазите промените, които сте направили в шаблона в конструктора на теми. След като бъдат запазени, можете да видите резултатите на активна страница.
Краен резултат
Ето и крайните резултати на компютър, таблет и телефон.
Обърнете внимание как се променят бутоните за вход и излизане. И след като потребителят влезе, той остава на текущата страница.
Освен това, изскачащият формуляр за вход показва различно „предупредително“ съдържание всеки път, когато потребителят се опита да излезе.
Изтеглете DIVI сега!!!
Заключение.
Надяваме се, че създаването на този изскачащ формуляр за вход и персонализирани бутони за вход/изход ще ви даде представа как да използвате креативно формата за вход на Divi.
Чувствайте се свободни да променяте дизайна и съдържанието на всяка форма (или бутон) за вход, за да създадете уникално изживяване при влизане в собствения си уебсайт.
Също така се надяваме, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове.
Не се колебайте да се консултирате и с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...