Искате ли да създадете a форма изскачащо влизане в Divi с бутони за влизане/излизане?
Създаването на a форма изскачащ прозорец за влизане Divi може да бъде ефективен начин за подобряване на дизайна на вашия сайт и потребителското изживяване при влизане/излизане.
Идеята е да се създаде a форма вход, който се показва в изскачащ прозорец всеки път, когато потребителят щракне върху бутон за вход в заглавката на страницата.
Това е по-удобно от пренасочване на потребителя към персонализирана страница за вход.
В този урок ще създадем изскачащ формуляр за влизане с персонализирани бутони за влизане и излизане в Divi.
Използвайки модула Divi Login и няколко модула Button, ние ще създадем безпроблемно изскачащо изживяване при влизане в предния край, като позволим на потребителите да влизат и излизат, без да бъдат пренасочвани към друга страница.
Нека да започнем!
изследване
Ето един бърз поглед върху дизайна, който ще създадем в този урок.
Забележете как се променят съответно бутонът за вход и бутоните за излизане. И след като потребителят влезе, той остава на текущата страница.
Освен това изскачащият формуляр за влизане показва различно „предупредително“ съдържание всеки път, когато потребителят се опита да излезе.
Какво трябва да започнете
Въпреки че можете да добавите този изскачащ формуляр за влизане и персонализирани бутони за влизане/излизане към всяка персонализирана заглавка, ние ще използваме предварително направена заглавка, за да ускорим процеса и бързо да започнем дизайна.
Импортирайте шаблона за заглавка „Crowdfunding Layout Pack“ в Divi builder
За да започнете, изтеглете Divi Crowdfunding Layout Pack Header и Footer безплатно . За да направите това, отидете на статията в блога.
След това въведете вашия имейл, за да изтеглите 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
- Box Shadow: вижте екранната снимка
- Вертикална позиция на сянката на кутията: 0px
- Сила на размазване: 100 пиксела
- Сила на разпространение: 50px
Под раздела Подробно, актуализирайте следното:
Добавете персонализиран CSS клас.
- CSS клас: et-popup-login
Добавете персонализиран CSS фрагмент към основния елемент:
overscroll-behavior: contain;Mettez à jour les options видимост et Position.
- Хоризонтално преливане: Скрито
- Вертикално преливане: автоматично
- Позиция: Фиксирана
- Местоположение: Център център
- 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, за да скрие/покаже съответните бутони за влизане/излизане и форми Съобщение за влизане „Влязъл“/„Излязъл“ всеки път, когато потребителят влезе или излезе.
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 за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...