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