Как создать встроенную форму входа для настраиваемого глобального заголовка в Divi

Создание встроенной формы входа в систему для вашего заголовка может стать прекрасным стимулом для взаимодействия с пользователем. Они идеально подходят для членских сайтов и интернет-магазинов, поскольку позволяют пользователям легко входить в систему в любое время или на любой странице сайта. В этом руководстве мы покажем вам, как создать встроенную форму входа для пользователя с настраиваемым заголовком Divi Theme Builder. Для этого мы создадим простой адаптивный глобальный заголовок, а затем разработаем компактную встроенную форму входа в систему в правом верхнем углу заголовка с помощью модуля входа в Divi. Для сборки требуется немного настраиваемого CSS, но как только все будет готово, будет легко настроить встроенную форму входа в систему, чтобы легко соответствовать любому дизайну заголовка, используя встроенные параметры дизайна Divi.

Давайте начнем!

Sneak Peek

Вот быстрый взгляд на настраиваемый заголовок со встроенной формой входа, которую мы создадим в этом руководстве.

А вот и встроенная форма входа на дисплей планшета и телефона.

Вот сообщение и ссылка «выйти из системы», которые будут отображаться, когда пользователи вошли в систему.

Загрузите макет заголовка встроенной формы входа БЕСПЛАТНО

Чтобы ознакомиться с макетом из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете лишены подписки или получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и добавьте один из json-файлов в Divi Theme Builder, используя опцию «Переносимость Theme Builder».

Давайте перейдем к руководству, ладно?

Что вам нужно для начала

Если вы еще этого не сделали, установите и активируйте тему Divi. Это почти все, что вам нужно для начала. Мы будем создавать новый макет шаблона заголовка с нуля с помощью Divi Theme Builder.

Добавление нового глобального заголовка

Чтобы начать работу, мы должны создать новый глобальный заголовок для нашего веб-сайта. Для этого перейдите в панель управления WordPress и перейдите в Divi> Theme Builder.

В шаблоне веб-сайта по умолчанию нажмите «Добавить глобальный заголовок», а затем «Создать глобальный заголовок».

Затем выберите вариант «Создать с нуля».

Разработка глобального заголовка Divi с помощью встроенной формы входа

Настройка раздела

С помощью редактора Global Header Layout вы сможете создать собственный заголовок для своего сайта полностью с нуля. Для начала откройте настройки для обычного раздела и обновите следующее:

• Цвет фона градиента слева:
• Правый цвет градиента фона:
• Направление градиента: 48 градусов
• Отступ: 10 пикселей сверху, 10 пикселей снизу, 20 пикселей слева, 20 пикселей справа

Чтобы сделать наш настраиваемый заголовок более отзывчивым, мы добавим следующий настраиваемый CSS в основной элемент раздела.

display:flex;
justify-content:center;
align-items:center;

Добавление логотипа заголовка в первую строку

Теперь, когда секция готова, мы можем добавить первую строку.

Добавить ряд

Добавьте в раздел строку из одного столбца.

Добавить модуль изображения с изображением логотипа

В строке с одним столбцом добавьте модуль изображения. Здесь мы добавим логотип для заголовка.

Обновление изображения модуля изображения и поля

Обновите настройки изображения следующим образом:

• Изображение: [добавить логотип (примерно 64 на 64 пикселя)]

• Поле: 20 пикселей справа

Обновить настройки строки

Прежде чем мы продолжим, откройте настройки строки и обновите следующее:

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 25%
• Выравнивание ряда: слева
• Padding: 0px сверху, 0px снизу

Добавление встроенной формы входа во вторую строку

Добавить ряд

Теперь, когда первая строка готова к работе, вы заметите в редакторе, что первая строка займет 25% раздела слева. По сути, это будет назначенная строка для логотипа нашего заголовка. Нам нужно создать строку раздела для встроенной формы входа и меню с правой стороны.

Добавьте в раздел вторую строку со структурой из одного столбца.

Добавить форму входа

Внутри строки с одним столбцом добавьте модуль входа в систему.

Удалить содержимое по умолчанию

В настройках входа удалите фиктивный заголовок и основной текст.

Добавить настраиваемый класс формы входа и CSS

Прежде чем мы зайдем слишком далеко в дизайне встроенной формы входа в систему, давайте сначала добавим настраиваемый CSS и класс CSS в модуль входа. Это позволит нам получить базовую встроенную структуру формы до того, как мы внесем окончательные изменения в дизайн формы с помощью встроенных опций Divi.

На вкладке Advanced добавьте следующий класс 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
• Выравнивание строк: справа
• Padding: 0px сверху, 0px снизу

Настройки дизайна формы входа

Теперь мы готовы обновить настройки формы входа. Откройте настройки модуля формы входа и обновите следующее:

• Использовать цвет фона: НЕТ

Текст поля и ссылки

• Фон полей: Цвет: rgba (255,255,255,0.2)
• Цвет текста полей: #ffffff
• Шрифт полей: Lato
• Размер текста полей: 14 пикселей
• Выравнивание текста: по правому краю
• Шрифт ссылки: Lato
• Стиль шрифта ссылки: подчеркивание
• Цвет текста ссылки: # ff3190

Дизайн кнопок

• Размер текста кнопки: 15 пикселей
• Цвет фона кнопки: # ff3190
• Ширина границы кнопки: 0 пикселей
• Шрифт кнопки: Lato
• Отступ кнопки: 2 пикселя сверху, 2 пикселя снизу.
• Поля: 15 пикселей снизу
• Отступ: 0 пикселей сверху, 0 пикселей снизу, 0 пикселей слева, 0 пикселей справа

Добавление меню во вторую строку

Модуль меню

Имея встроенную форму входа в систему, мы можем добавить меню прямо под ней.

Добавьте модуль меню под модулем формы входа.

Настройки модуля меню

Обновите настройки меню следующим образом:

• Цвет фона: rgba (0,0,0,0)
• Шрифт меню: Lato
• Толщина шрифта меню: полужирный
• Цвет текста меню: #ffffff
• Размер текста меню: 16 пикселей
• Выравнивание текста: по правому краю
• Цвет фона выпадающего меню: #ffffff
• Цвет строки выпадающего меню: rgba (0,0,0,0)
• Цвет текста раскрывающегося меню: # 000000
• Цвет фона мобильного меню: #ffffff
• Цвет текста мобильного меню: # 000000
• Цвет значка корзины покупок: #ffffff
• Цвет значка поиска: #ffffff
• Цвет значка меню гамбургера: #ffffff

Сохранение заголовка встроенной формы входа

Обязательно сохраните макет перед выходом из редактора макета заголовка.

Затем сохраните также настройки построителя тем.

Окончательные результаты

Вот и все!

Теперь посмотрим на окончательный результат. Чтобы увидеть окончательный результат, просто зайдите на страницу своего сайта.

Вот заголовок на дисплее рабочего стола.

Вот заголовок встроенной формы входа на дисплей планшета.

А вот встроенная форма входа на дисплей телефона. Обратите внимание на мобильное меню.

А вот что увидит пользователь, войдя в систему.

Последние мысли

Этот настраиваемый глобальный заголовок со встроенной формой входа определенно пригодится любому членскому сайту или интернет-магазину. С помощью небольшого настраиваемого CSS мы смогли преобразовать модуль входа в Divi в элегантную встроенную форму входа, которая будет хорошо вписываться в заголовок любого веб-сайта. Надеюсь, это пригодится для вашего следующего проекта.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!