Как создать креативную всплывающую форму входа в Divi

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

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

Предварительный просмотр

Вот предварительный просмотр сегодняшнего дизайна. Мы видим, что нажатие на кнопку входа в систему приводит к появлению форм входа в систему, а когда мы нажимаем на выход, появляется всплывающее предупреждение перед выходом из системы.

Всплывающая форма входа в систему с кнопками входа / выхода

Чтобы начать работу с дизайном, вам сначала нужно зайти в Divi.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Теперь нам нужно загрузить верхний и нижний колонтитулы пакетов макетов Divi Crowdfunding с этой страницы . Введите свой адрес электронной почты и нажмите «Загрузить».

Затем вы снова увидите вариант загрузки и щелкните его. Теперь разархивируйте файл после завершения загрузки, вернитесь в конструктор Divi и выберите параметр переносимости.

Теперь выполните дальнейшую процедуру, как написано ниже.

• Выберите вкладку импорта во всплывающем окне переносимости.
• Загрузите загруженный файл Json из распакованной папки.
• Нажмите кнопку импорта.
• Затем нажмите «Изменить», чтобы изменить заголовок.

Часть 1: Создание кнопки входа / выхода

Сначала откройте слои, чтобы мы могли легко увидеть все элементы. В верхней строке раздела заголовка удалите модули социальных сетей.

Создание кнопки входа в систему

В 4-м столбце верхних строк уже есть кнопка входа. Мы его доработаем.

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

• Значок кнопки: значок замка (см. Снимок экрана)
• Расположение значка кнопки: слева
• Показывать только значок при наведении курсора на кнопку: НЕТ
• Заполнение: 0.5em сверху, 0.5em снизу, 2em слева, 0.7em справа

Добавьте два настраиваемых класса CSS к кнопке из расширенной вкладки следующим образом:

• Класс CSS: et-toggle-popup et-popup-login-button

Кнопка выхода

Чтобы создать нашу кнопку выхода, клонируйте существующую кнопку входа в систему в столбце 4. Также пометьте их для дальнейшей идентификации.

Измените текст клонированной кнопки на «Выйти».

Измените значок кнопки на вкладке дизайна, как указано ниже.

Наконец, измените класс CSS на вкладке «Дополнительно».

• Класс CSS: et-toggle-popup et-popup-logout-button

Часть 2: Создание всплывающей страницы

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

Раздел Добавление и настройки

Придадим секции белый фон.

• Цвет фона: #ffffff

Внесите следующие изменения на вкладке дизайна раздела.

• Ширина: 100%
• Макс. Ширина: 800 пикселей (рабочий стол), 80% (планшет), 100% (телефон)
• Выравнивание сечения: по центру
• Высота: авто (компьютер и планшет), 100% (телефон)
• Макс высота: 100%
• Padding: 0px сверху, 0px снизу

• Закругленные углы: 10 пикселей
• Box Shadow: см. Снимок экрана
• Положение прямоугольной тени по вертикали: 0 пикселей
• Сила размытия тени коробки: 100 пикселей
• Сила распространения тени коробки: 50 пикселей

Давайте добавим класс CSS из расширенной вкладки.

• Класс CSS: et-popup-login

Затем добавьте следующий код CSS в основной элемент.

overscroll-behavior: contain;

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

• Горизонтальное переполнение: скрыто
• Вертикальное переполнение: авто
• Позиция: фиксированная
• Расположение: Центр Центр
• Индекс Z: 999999

Добавление и настройки строк

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

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

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px вверху, 5vh внизу

Часть 3: Создание значка закрытия всплывающего окна

Мы будем использовать модуль рекламных сообщений, чтобы создать значок закрытия всплывающего окна.

Удалите тексты модуля из настроек и добавьте следующий значок.

• Значок использования: ДА
• Значок: значок «x» (см. Снимок экрана)

Примените следующие настройки на вкладке дизайна.

• Цвет значка: # 004e43
• Выравнивание изображения / значка: по центру
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 50 пикселей

• Ширина: 50 пикселей
• Выравнивание модуля: справа
• Высота: 50 пикселей

Добавьте класс CSS в модуль blurb из расширенной вкладки.

• Класс CSS: et-toggle-popup

Часть 4: Создание формы

Наша форма входа в систему имеет два дизайна: один для входа в систему, а другой - для выхода. Итак, будет два разных модуля формы входа. Первый появится, когда пользователь вышел из системы и ему необходимо войти в систему, а другой - когда пользователь вошел в систему и хочет выйти. Простая концепция, вернемся к работе.

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

Давайте добавим модуль входа в систему, чтобы создать нашу форму выхода из системы.

Теперь откройте настройки модуля формы и измените их на вкладке содержимого.

• Перенаправить на текущую страницу: ДА
• Использовать цвет фона: НЕТ

Вкладка "Дизайн"

• Цвет фона полей: rgba (0,78,67,0.05)
• Цвет фона фокуса полей: rgba (0,78,67,0.15)
• Выравнивание текста: по центру
• Цвет текста: темный

• Шрифт заголовка: Poppins
• Плотность шрифта заголовка: полужирный
• Цвет текста заголовка: # 000000
• Высота строки заголовка: 1,3 мкм
• Шрифт: Work Sans

Теперь вернемся к разделу заголовков из слоев. Затем откройте настройки из по кнопке из 4-го столбца 1-й строки. Перейдите на вкладку дизайна и откройте опцию кнопки. Затем нажмите на вариант с тремя точками и выберите «стиль кнопки копирования».

Теперь вставьте его в только что созданную форму входа.

Мы обновим стиль кнопки для нашей формы входа.

• Использовать пользовательские стили для кнопки: ДА
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 004e43
• Цвет фона кнопки (при наведении): # 00683c
• Ширина границы кнопки: 0 пикселей
• Отступ кнопок: 15 пикселей сверху, 15 пикселей снизу.

Загрузим и настройки размеров.

• Ширина: 100%
• Макс.ширина: 80% (рабочий стол), 90% (планшет), 95% (телефон)
• Выравнивание модуля: по центру

Теперь перейдите на вкладку «Дополнительно» и добавьте класс CSS и собственный CSS, как написано ниже.

• Класс CSS: et-logged-out-form

Добавьте следующий код в поле описания входа.

width: 100% !important;
float: none !important;

Затем добавьте этот код в поле формы входа.

width: 100% !important;
padding: 0px !important;

Это делает форму входа примерно такой.

Создание формы «Авторизован»

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

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

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

• Раньше: «Вы пытаетесь выйти из системы»
• После: «. â € œ

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

Во многих формах входа на веб-сайты мы видели настраиваемое сообщение, прикрепленное к ссылке «выйти из системы». Чтобы создать его, мы настроим параметр основного текста на вкладке «Дополнительно».

• Выберите вкладку ссылки под параметрами основного текста.
• Шрифт ссылки: Work Sans
• Толщина шрифта ссылки: полужирный
• Стиль шрифта ссылки: TT
• Выравнивание текста ссылки: по центру
• Цвет текста ссылки: #ffffff

Перейдите на вкладку «Дополнительно» и добавьте класс CSS и пользовательский CSS.

• Класс CSS: et-logged-in-form

Пользовательский CSS для формы входа:

display:none;

Часть 5: Пользовательские коды

Нам нужно добавить модуль кода для добавления пользовательских кодов. Давайте добавим модуль кода под последний модуль входа в систему.

Код CSS

Добавьте указанный код CSS в модуль в тегах стилей .

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Код JQuery

Теперь проверьте следующий код JQuery в модуле в тегах сценария .

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Результат дизайна

Итак, вот результат нашего дизайна. Все на месте и работает отлично.

Заключительные слова

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