Трябва да създадете глобална заглавка с форма връзка в DIVI?
Създаването на a форма вход в заглавката ви може да бъде чудесен тласък за потребителското изживяване.
Те са идеални за абонаментни уебсайтове и онлайн магазини, защото позволяват на потребителите да влизат по всяко време на всяка страница на уебсайт.
В този урок ще ви покажем как да проектирате a форма онлайн влизане за потребители на персонализирана заглавка. Да започваме!
изследване
Ето бърз преглед на персонализираната заглавка с формуляра за вход, който ще създадем в този урок.
Ето съобщението „излизане“ и връзката, които ще се показват, когато потребителите са влезли.
Добавяне на нова глобална заглавка
За да потръгнем нещата, трябва да създадем нов глобален хедър за нашия уеб сайт. За да направите това, отидете на таблото за управление на WordPress и навигирайте до Divi> Theme Builder.
На шаблон за уебсайт по подразбиране щракнете върху „Добавяне на глобална заглавка“, след което щракнете върху „Изграждане на глобална заглавка“.
Глобален дизайн на заглавката на Divi с хоризонтална форма за влизане
Персонализирайте секцията
От редактора на Global Header Layout можете да създадете персонализирана заглавка на вашия уебсайт Започвайки от нищото. За да започнете, отворете настройките в нормалния раздел и актуализирайте следното:
- Ляв фонов градиент цвят:
- Цвят на градиента на десния фон:
- Посока на градиента: 48 градуса
- Вътрешно поле: 10px отгоре, 10px отдолу, 20px отляво, 20px отдясно
За да направим нашата заглавка по-отзивчива, ще добавим следния персонализиран CSS към основния елемент на раздела.
display:flex;
justify-content:center;
align-items:center;
Добавяне на лого на заглавката към първия ред
Сега, когато секцията е готова, можем да добавим първия ред.
Добавете линия
Добавете ред към колона в секцията.
Добавяне на модул Image с изображение на лого
В реда с една колона добавете модул Изображение. Тук ще добавим логото на заглавката.
Актуализиране на изображението и полето на модула на изображението
Актуализирайте настройките на изображението, както следва:
- Изображение: [добавете лого (прибл. 64 x 64 px)]
- Поле: 20px вдясно
Актуализирайте параметрите на реда
Преди да продължите, отворете настройките на линията и актуализирайте следното:
- Използване на персонализирана ширина на улука: ДА
- Разстояние между колоните: 1
- Максимална ширина: 25%
- Подравняване: ляво
- Вътрешно поле: 0px отгоре, 0px отдолу
Добавена хоризонтална форма за влизане във втория ред
Добавете линия
Сега, когато първият ред е готов, ще забележите в редактора, че първият ред ще заеме 25% от лявата секция. Това ще бъде основно редът, определен за нашето лого в заглавката. Трябва да създадем ред със секции за формата за вход и менюто от дясната страна.
Добавете втори ред със структура към колона в секцията.
Добавете форма за вход
В реда с една колона добавете модул „Свързване“.
Премахване на съдържанието по подразбиране
Под настройките на модула за влизане премахнете фалшивото заглавие и основно съдържание.
Добавете персонализиран клас за формуляр за вход и CSS
Преди да отидем твърде далеч в проектирането на формата за влизане, нека първо добавим CSS класа и персонализирания CSS към модула за влизане. Това ще настрои основната онлайн структура на формуляра, преди да постави финалните щрихи върху дизайна на формуляра с вградените опции на Divi.
Вижте и нашето ръководство за Как да създадете плъзгащо се и реагиращо странично меню в DIVI
В раздела Разширени добавете следния CSS клас:
- CSS клас: заглавна форма за влизане
Добавете следния персонализиран CSS към CSS полето за описание на връзката:
margin-bottom: 0px !important
След това добавете следния персонализиран CSS в CSS областта на формуляра за вход:
width: 100%;Добавете следния персонализиран CSS към CSS зоната за входни полета:
padding: 5px 4% !important
Добавете персонализиран CSS към настройките за оформление на заглавката
Тъй като добавихме нашия персонализиран CSS клас към модула на формуляра за вход, можем да добавим нашия персонализиран CSS, който ще е насочен само към този конкретен формуляр за вход.
Прочетете и нашия урок за Как да създадете страницата на блога с модула Блог с DIVI
Отворете настройката за оформление на заглавката и добавете следния персонализиран 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 отдолу
Дизайн настройки за формата за вход
Вече сме готови да актуализираме настройките на формата за влизане. Отворете настройките на модула Connect и актуализирайте следното:
- Използвайте цвят на фона: НЕ
Текст на полето и връзката
- Полета за цвят на фона: rgba(255,255,255,0.2)
- Полета за цвят на текста: #ffffff
- Полета Шрифт: Lato
- Полета с размер на текста: 14px
- Подравняване на текста: вдясно
Дизайн на бутони
- Използвайте персонализирани стилове за бутона: НЕ
- Размер на текста на бутона: 15px
- Бутон за фон: #ff3190
- Бутон за ширина на границата: 0 пиксела
- Шрифт на бутона: 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
Запазване на заглавката на формуляра за вход
Не забравяйте да запазите оформлението, преди да излезете от редактора на заглавката.
След това запазете и настройките на Theme Builder.
Крайни резултати
Това е направено !
Сега да видим крайния резултат. За да видите крайния резултат, всичко, което трябва да направите, е да посетите страница от уебсайта си.
И това е, което потребителят ще види, когато влезе.
Изтеглете DIVI сега!!!
Заключение
Тази персонализирана глобална заглавка с формуляр за вход определено ще бъде полезна за всеки абонаментен уебсайт или онлайн магазин.
Само с малко персонализиран CSS успяхме да конвертираме модула за влизане на Divi в елегантен формуляр за влизане, който ще пасне идеално в заглавката на всеки уебсайт.
Надяваме се, че това ще бъде полезно за следващия ви проект. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...