Създаването на a форма Вграденото влизане за вашия хедър може да бъде огромен тласък за потребителското изживяване. Те са идеални за сайтове за членство и онлайн магазини, защото позволяват на потребителите да влизат по всяко време и на всяка страница на сайта.
В този урок ще ви покажем как да проектирате a форма онлайн с помощта на персонализирана заглавка на Divi Theme Builder. За да направим това, ще създадем прост адаптивен глобален хедър и след това ще проектираме a форма компактно онлайн влизане в горния десен ъгъл на заглавката с помощта на модула за влизане на Divi. Изграждането изисква малко персонализиран CSS код, но след като всичко е на мястото си, ще бъде лесно да персонализирате онлайн формуляра за влизане, за да съответства лесно на всеки дизайн на заглавка, като използвате опциите за дизайн, интегрирани услуги на Divi.
Преглед на резултатите
Ето бърз преглед на персонализирания заглавие с онлайн формата за вход, която ще създадем в този урок.
И тук е онлайн формата за влизане на екрана на таблета и телефона.
Ето съобщението и връзката за излизане, които ще се показват, когато потребителите са влезли в системата.
Какво трябва да започнете
Ако още не сте го направили, инсталирайте и активирайте темата Divi . Това е почти всичко, от което се нуждаете, за да започнете. Ще създадем ново оформление на заглавния шаблон от нулата с Divi Theme Builder.
Добавяне на нова глобална заглавка
За да продължим напред, трябва да създадем нов глобален заглавен файл за нашия уебсайт. За да направите това, отидете в таблото за управление на WordPress и отидете на Divi > Theme Builder.
На шаблон за уебсайт по подразбиране щракнете върху „Добавяне на глобална заглавка“ и след това върху „Създаване на глобална заглавка“.
След това изберете опцията Изграждане от нулата.
Проектирайте глобалния хедър Divi с онлайн формуляр за вход
Персонализиране на секции
От Global Header Layout Editor ще можете напълно да създадете персонализиран хедър на вашия сайт. За да започнете, отворете настройките на обикновения раздел и актуализирайте следното:
- Градиент на фона на левия цвят:
- Градиент на десния фон:
- Посока на градиента: 48 градуса
- Подплащане: 10 пиксела в горната част, 10 пиксела в долната част, 20 пиксела вляво, 20 пиксела вдясно
За да направим потребителския ни заглавие по-отзивчив, ще добавим следния персонализиран CSS към основния елемент на раздела.
display:flex;justify-content:center;align-items:center;
Добавяне на лого на заглавката към първия ред
Сега, когато секцията е готова, можем да добавим първия ред.
Добавете ред
Добавете ред към колона в секцията.
Добавете модул за изображение с изображение на лого
В реда с единична колона добавете модул за изображение. Тук ще добавим логото за заглавката.
Актуализиране на изображението и полето на модула на изображението
Актуализирайте настройките на изображението, както следва:
- Изображение: [добавете лого (приблизително 64 пиксела на 64 пиксела)]
- Марж: 20px вдясно
Актуализиране на параметрите на реда
Преди да продължите, отворете настройките на реда и актуализирайте следното:
- Използвайте персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 25%
- Подравняване на редовете: вляво
- Подплащане: 0px високо, 0px ниско
Добавяне на онлайн формата за вход във втория ред
Добавете ред
Сега, когато първият ред е готов, ще забележите в редактора, че първият ред ще заема 25% от левия раздел. Това основно ще бъде определената линия за нашето лого на заглавката. Трябва да създадем секционен ред за формуляра и менюто за онлайн вход от дясната страна.
Добавете втори ред със структура към колона в секцията.
Добавете форма за вход
В реда на колона добавете модул за вход.
Премахване на съдържанието по подразбиране
Под настройките за вход изтрийте фалшивото заглавие и съдържанието на тялото.
Добавете форма за вход и персонализиран клас CSS
Преди да навлезем твърде дълбоко в дизайна на онлайн формата за вход, нека първо добавим персонализираните CSS и CSS класове към модула за вход. Това ще ни позволи да създадем основната онлайн структура на формуляра, преди да поставим окончателния дизайн върху формата с вградените опции на Divi.
В раздела Разширени добавете следния клас CSS:
- CSS клас: заглавна форма за вход
Добавете следния персонализиран CSS в областта за описание на връзката CSS:
margin-bottom: 0px !important
След това добавете следния персонализиран CSS в CSS областта на формата за вход:
width: 100%;
Добавете следния персонализиран CSS в полето CSS за полета за връзка:
padding: 5px 4% !important
Добавете персонализиран CSS към настройките на оформлението на заглавката
Тъй като към модула на формата за вход сме добавили нашия персонализиран клас CSS, можем да добавим нашия персонализиран CSS, който ще е насочен само към този конкретен формуляр за вход.
Отворете настройката за оформление на заглавката и добавете следния персонализиран CSS:
.header-login-form .et_pb_login_form form {display: flex;justify-content: flex-end;align-items: center;}.header-login-form .et_pb_login_form .et_pb_contact_form_field {padding-bottom: 0px;margin-right: 5px;}.header-login-form .et_pb_forgot_password {display:none;}
Този CSS ще направи полетата за вход и бутонът да се появи вграден (хоризонтално), скривайки връзката „Забравена парола?“. »И добавете малко поле между полетата.
Настройки на линията
Преди да поставим финалните щрихи на онлайн формата за вход, нека актуализираме параметрите на реда, както следва:
- Използвайте персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Подравняване на линията: права
- Подплащане: 0px високо, 0px ниско
Дизайн настройки за формата за вход
Вече сме готови да актуализираме настройките на формуляра за вход. Отворете настройките на модула за формуляр за вход и актуализирайте следното:
- Използвайте цвят на фона: НЕ
Текст на полето и връзката
- Фон на полето: Цвят: rgba (255,255,255,0.2)
- Цвят на текста на полето: #ffffff
- Теренна полиция: Лато
- Размер на текста на полето: 14px
- Подравняване на текст: вдясно
- Шрифт на линка: Lato
- Стил на шрифта за връзка: Подчертано
- Цвят на текста на връзката: # ff3190
Дизайн на бутони
- Размер на текста на бутона: 15px
- Цвят на фона на бутона: # ff3190
- Ширина на границата на бутона: 0px
- Бутон за шрифт: Lato
- Подплънки с бутони: 2px в горната част, 2px в долната част
- Марж: 15px ниско
- Подплънки: 0px в горната част, 0px в долната част, 0px вляво, 0px вдясно
Добавяне на менюто към втория ред
Модулен меню
С нашата онлайн форма за вход можем да добавим менюто директно по-долу.
Добавете модул от менюто под модула за регистрация.
Настройки на модула от менюто
Актуализирайте настройките на менюто, както следва:
- Цвят на фона: rgba (0,0,0,0)
- Шрифт на менюто: Lato
- Тегло на шрифта на менюто: удебелен
- Цвят на текста на менюто: #ffffff
- Размер на текста на менюто: 16px
- Подравняване на текст: вдясно
- Цвят на фона на падащото меню: #ffffff
- Цвят на линията в падащото меню: rgba (0,0,0,0)
- Цвят на текста от падащото меню: # 000000
- Цвят на фона на мобилното меню: #ffffff
- Цвят на текста на мобилното меню: # 000000
- Цвят на иконата на количката: #ffffff
- Цвят на иконата за търсене: #ffffff
- Цвят на иконата на менюто на хамбургер: #ffffff
Запазване на заглавката на формуляра за вход
Не забравяйте да запазите оформлението, преди да излезете от редактора на оформление на заглавки.
След това запазете и настройките на генератора на теми.
Крайни резултати
Това е!
Сега нека видим крайния резултат. За да видите крайния резултат, просто посетете страница на вашия уебсайт.
Ето заглавката на екрана на работния плот.
Ето заглавката на онлайн формата за вход на екрана на таблета.
И тук е онлайн формата за вход на екрана на телефона. Обърнете внимание и на мобилното меню.
И това е, което потребителят ще види, когато влезе.
Заключителни мисли
Този персонализиран глобален заглавен файл с онлайн форма за вход определено ще бъде полезен за всеки сайт за членство или онлайн магазин. Само с малко персонализиран CSS, успяхме да конвертираме модула за вход на Divi в елегантна вградена форма за вход, която ще изглежда страхотно в заглавката на всеки уебсайт. Надявам се това да е полезно за следващия ви проект.
Нямам търпение да се чуем в коментарите.
За вашето здраве!
