Создание форма Встроенный вход для вашего заголовка может значительно улучшить пользовательский опыт. Они идеально подходят для членских сайтов и интернет-магазинов, поскольку позволяют пользователям входить в систему в любое время и на любой странице сайта.
В этом уроке мы покажем вам, как спроектировать форма онлайн, используя собственный заголовок в Divi Theme Builder. Для этого мы создадим простой адаптивный глобальный заголовок, а затем разработаем форма компактный онлайн-вход в правом верхнем углу заголовка с помощью модуля входа Divi. Для сборки требуется немного специального CSS-кода, но как только все будет готово, можно будет легко настроить онлайн-форму входа в систему, чтобы она соответствовала любому дизайну заголовка, используя варианты дизайна интегрированных сервисов Divi.
Обзор результатов
Вот краткий обзор настраиваемого заголовка с онлайн-формой входа, которую мы будем создавать в этом руководстве.
А вот и онлайн-форма входа на экран планшета и телефона.
Вот сообщение о выходе и ссылка, которые будут отображаться, когда пользователи входят в систему.
Что нужно для начала
Если вы еще этого не сделали, установить и активировать тему Divi . Это почти все, что вам нужно для начала. Мы собираемся создать новый макет шаблона заголовка с нуля с помощью Divi Theme Builder.
Добавление нового глобального заголовка
Чтобы все заработало, нам нужно создать новый глобальный заголовок для нашего Веб-сайт. Для этого перейдите на панель управления WordPress и выберите Divi > Theme Builder.
На шаблон сайта по умолчанию нажмите «Добавить глобальный заголовок», а затем «Создать глобальный заголовок».
Затем выберите вариант «Создать с нуля».
Создайте глобальный заголовок Divi с онлайн-формой входа
Настройка раздела
В редакторе макета глобального заголовка вы сможете полностью создать собственный заголовок вашего сайта. Для начала откройте настройки обычного раздела и обновите следующее:
- Левый цветовой градиент фона:
- Правый градиент фона:
- Направление градиента: 48 градусов
- Заполнение: 10 пикселей вверху, 10 пикселей внизу, 20 пикселей слева, 20 пикселей справа
Чтобы сделать наш настраиваемый заголовок более отзывчивым, мы добавим следующий настраиваемый CSS-код к основному элементу раздела.
display:flex;justify-content:center;align-items:center;
Добавление логотипа заголовка в первую строку
Теперь, когда раздел готов, мы можем добавить первую строку.
Добавить строку
Добавьте строку в столбец в разделе.
Добавить модуль изображения с изображением логотипа
В строке с одним столбцом добавьте модуль изображения. Здесь мы добавим логотип для заголовка.
Обновление изображения и поля модуля изображения
Обновите настройки изображения следующим образом:
- Изображение: [добавить логотип (примерно 64 на 64 пикселя)]
- Маржа: 20 пикселей справа
Обновить параметры линии
Прежде чем идти дальше, откройте настройки строки и обновите следующее:
- Использовать произвольную ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 25%
- Выравнивание строки: слева
- Обивка: 0px высокий, 0px низкий
Добавление онлайн формы входа во вторую строку
Добавить строку
Теперь, когда первая строка готова, вы заметите в редакторе, что первая строка будет занимать 25% левой части. По сути, это будет обозначенная строка для нашего логотипа в заголовке. Нам нужно создать строку раздела для формы и меню входа в систему с правой стороны.
Добавьте вторую строку со структурой к столбцу в разделе.
Добавить форму входа
В строке столбца добавьте модуль входа в систему.
Удалить содержимое по умолчанию
В настройках входа в систему удалите поддельный заголовок и содержание тела.
Добавить форму входа и собственный класс CSS
Прежде чем мы слишком углубимся в дизайн онлайн-формы входа, давайте сначала добавим настраиваемые классы CSS и CSS в модуль входа. Это позволит нам настроить базовую онлайн-структуру формы, прежде чем вносить окончательный дизайн в форму с помощью встроенных опций Divi.
На вкладке Advanced добавьте следующий класс CSS:
- Класс CSS: header-login-form
Добавьте следующий пользовательский 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
- Обивка кнопок: 2 пикселя сверху, 2 пикселя снизу
- Маржа: минимум 15px
- Отступы: 0px вверху, 0px внизу, 0px слева, 0px справа
Добавление меню во вторую строку
Модуль меню
С нашей онлайн-формой входа в систему мы можем добавить меню прямо ниже.
Добавьте модуль меню под модулем формы входа.
Настройки модуля меню
Обновите настройки меню следующим образом:
- Цвет фона: rgba (0,0,0,0)
- Шрифт меню: Лато
- Вес шрифта меню: жирный
- Цвет текста меню: #ffffff
- Размер текста меню: 16px
- Выравнивание текста: справа
- Цвет фона раскрывающегося меню: #ffffff
- Цвет линии в выпадающем меню: rgba (0,0,0,0)
- Цвет текста раскрывающегося меню: # 000000
- Цвет фона мобильного меню: #ffffff
- Цвет текста мобильного меню: # 000000
- Цвет значка корзины: #ffffff
- Цвет значка поиска: #ffffff
- Цвет значка меню гамбургер: #ffffff
Сохранение заголовка формы входа
Обязательно сохраните макет перед выходом из редактора макета заголовка.
Затем также сохраните настройки генератора тем.
Конечные результаты
Это оно!
Теперь давайте посмотрим окончательный результат. Чтобы увидеть окончательный результат, просто посетите страницу вашего Веб-сайт.
Вот заголовок на экране рабочего стола.
Вот заголовок онлайн-формы входа на экране планшета.
А вот и онлайн-форма входа на экран телефона. Также обратите внимание на мобильное меню.
И это то, что пользователь увидит, войдя в систему.
Заключительные мысли
Этот настраиваемый глобальный заголовок с онлайн-формой входа определенно пригодится для любого сайта членства или интернет-магазина. С помощью всего лишь небольшого количества пользовательского CSS мы смогли преобразовать модуль входа Divi в элегантную онлайн-форму входа, которая будет хорошо смотреться в заголовке любого Веб-сайт. Надеюсь, это будет полезно для вашего следующего проекта.
Я с нетерпением жду вашего ответа в комментариях.
За ваше здоровье!
