Хотите создать всплывающую форму входа в Divi с кнопками входа/выхода?
Создание всплывающей формы авторизации в Divi Это может быть эффективным способом улучшить дизайн и пользовательский опыт входа и выхода с вашего сайта.
Идея заключается в создании формы авторизации, которая будет появляться во всплывающем окне всякий раз, когда пользователь нажимает кнопку входа в систему в заголовке страницы.
Это удобнее, чем перенаправлять пользователя на собственную страницу входа в систему.
В этом уроке мы создадим всплывающую форму входа с настраиваемыми кнопками входа и выхода в Divi.
Используя модуль Divi Login и несколько модулей Button, мы создадим удобное всплывающее окно авторизации на стороне клиента, позволяющее пользователям входить и выходить из системы без перенаправления на другую страницу.
Давайте начнем!
обследование
Вот краткий обзор дизайна, который мы будем создавать в этом уроке.
Обратите внимание, как меняются кнопки входа и выхода соответственно. И, как только пользователь входит в систему, он остается на текущей странице.
Кроме того, контекстная форма входа отображает различное предупреждающее содержимое каждый раз, когда пользователь пытается выйти из системы.
Что нужно для начала
Хотя вы можете добавить эту всплывающую форму входа и пользовательские кнопки входа/выхода в любой пользовательский заголовок, мы воспользуемся готовым шаблоном заголовка, чтобы ускорить процесс и быстро начать разработку дизайна.
Импортируйте шаблон заголовка из "Пакета макетов для краудфандинга" в конструктор Divi.
Для начала скачайте Бесплатный набор шаблонов Divi для краудфандинга: заголовок и нижний колонтитул. Для этого перейдите к статье в блоге.
Затем введите свой адрес электронной почты, чтобы загрузить zip-файл.
После этого распакуйте файл, чтобы он был готов к импорту.
Для импорта файла в редактор тем выполните следующие действия:
- Перейдите в Divi > Конструктор тем.
- Нажмите на значок портативности.
- В появившемся окне «Переносимость» выберите вкладку «Импорт».
- Выберите ранее загруженный разархивированный файл для импорта.
- Cliquer sur Импорт шаблонов Divi Theme Builder.
- Нажмите на значок редактирования, чтобы изменить импортированный заголовок.
Создание всплывающей формы входа в Divi
Часть 1: Создание кнопок входа и выхода
Оказавшись в глобальном редакторе макета заголовка, откройте вид слоя так что вы можете легко увидеть все элементы.
В верхней строке раздела заголовка удалите модуль. Социальные сети Подписаться рядом с кнопкой входа в столбце 3.
Читайте также: Divi: Сравнение различных типов градиентов
Создание кнопки входа
Чтобы создать нашу кнопку входа, откройте настройки модуля Button в столбце 3 верхней строки.
Обновите следующие элементы на вкладке «Дизайн»:
- Значок кнопки: значок замка (см. скриншот)
- Расположение значка кнопки: справа
- Показывать значок только при наведении для кнопки: НЕТ
- Отступы: 0,5 см (сверху и снизу), 2 см (слева), 0,7 см (справа)
Под вкладкой Фильтр, назначьте кнопке два пользовательских класса CSS следующим образом:
- Класс CSS: et-toggle-popup et-popup-login-button
Создание кнопки выхода
Чтобы создать нашу кнопку выхода, продублируйте существующую кнопку входа в столбце 3.
Чтобы различать две кнопки, можно обновить метку каждой из них. Затем откройте настройки модуля «Дублировать кнопку» в столбце 3.
Измените текст кнопки на «Выход».
Обновите следующие элементы на вкладке «Дизайн»:
- Значок кнопки: значок разблокировки (см. скриншот)
Под вкладкой Фильтр, обновите кнопку CSS Classes следующим образом:
- Класс CSS: et-toggle-popup et-popup-logout-button
Первый класс останется прежним, а второй класс будет другим.
Часть 2: Создание всплывающего раздела
После завершения создания кнопок мы готовы создать всплывающий раздел, который будет служить нашим всплывающим окном, содержащим форму(ы) входа.
Ниже заголовка добавьте новый обычный раздел.
Далее вставьте в этот раздел строку в один столбец.
Настройки раздела
Перед обновлением строки откройте настройки раздела.
Под вкладкой КонтентЗадайте для этого раздела белый цвет фона:
- Фон: #ffffff
Под вкладкой Дизайн, обновите следующее:
- Ширина: 100%
- Максимальная ширина: 800 пикселей (рабочий стол), 80% (планшет), 100% (телефон)
- Выравнивание сечения: по центру
- Высота: авто (ПК и планшет), 100% (телефон)
- Максимальная высота: 100%
- Отступ: 0px (сверху и снизу)
- Закругленные углы: 10 пикселей
- Тень от рамки: см. скриншот
- Коробчатая тень по вертикали: 0px
- Сила размытия: 100 пикселей
- Сила распространения: 50px
Под вкладкой Фильтр, обновите следующее:
Добавьте пользовательский класс CSS.
- Класс CSS: et-popup-логин
Добавьте пользовательский CSS-фрагмент к основному элементу:
overscroll-behavior: contain;Обновите параметры видимости и положения.
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: авто
- Позиция: Фиксированная
- Расположение: Центр Центр
- Индекс Z: 999999
Настройки линии
Установив настройки раздела, откройте настройки линии и обновите следующие настройки дизайна:
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 100%
- Отступы: 0px (сверху), 5vh (снизу)
Часть 3: Создание значка закрытия всплывающего окна
Для создания значка закрытия всплывающего окна, который будет закрывать/скрывать всплывающее окно по щелчку, мы будем использовать модуль Blurb.
Добавьте в строку новый модуль Blurb.
Откройте настройку модуля и удалите заголовок и основной текст.
Далее добавьте значок следующим образом:
- Использовать значок: ДА
- Значок: значок «x» (см. скриншот)
Под вкладкой Дизайн, обновите следующее:
- Цвет значка: #004e43
- Выравнивание изображения/значка: по центру
- Использовать размер шрифта значка: ДА
- Размер шрифта значка: 50px
- Ширина: 50 пикселей
- Модуль выравнивания: правый
- Высота: 50 пикселей
Под вкладкой Фильтр, добавьте класс CSS в модуль Blurb следующим образом:
- Класс CSS: et-toggle-popup
Часть 4: Создание форм входа «Вход в систему» и «Выход из системы»
Для того чтобы форма авторизации имела разное содержимое и дизайн при входе и выходе из системы, мы создадим два разных модуля формы авторизации.
Первая форма будет отображаться каждый раз, когда пользователь выходит из системы. Вторая форма будет отображаться каждый раз, когда пользователь входит в систему.
Создание формы "Выход из системы"
Чтобы создать форму входа для пользователей, вышедших из системы, добавьте новый модуль «Вход» под значком модуля «Краткое описание» внутри строки.
Откройте настройки модуля и измените следующие настройки:
Вкладка «Контент»
- Перенаправить на текущую страницу: ДА
- Использовать цвет фона: НЕТ
Вкладка "Дизайн"
- Цвет фона полей: rgba(0,78,67,0.05)
- Цвет фона поля фокусировки: rgba (0,78,67,0,15)
- Выравнивание текста: по центру
- Цвет текста: темный
- Шрифт заголовка: Поппинс
- Начертание шрифта заголовка: полужирный
- Цвет текста: #000000
- Высота строки заголовка: 1,3 см
- Основной шрифт: Work Sans
Чтобы обновить стили кнопок, скопируйте стили кнопок из созданной нами кнопки входа в третий столбец в строке раздела «Заголовок».
Далее вставьте стили кнопок в группу параметров кнопок в настройках подключения на вкладке «Дизайн».
Затем обновите стили кнопок для формы входа следующим образом:
- Button
- Цвет текста: #ffffff
- Фон: #004e43
- Фон (при наведении): #00683c
- Ширина границы: 0 пикселей
- Отступы: 15px (сверху и снизу)
Затем обновите параметры размера следующим образом:
- Ширина: 100%
- Максимальная ширина: 80% (настольный компьютер), 90% (планшет), 95% (телефон)
- Модуль выравнивания: Центр
Продвинутая вкладка
Под вкладкой Фильтр, обновите класс CSS и пользовательский CSS следующим образом:
- Класс CSS: et-logged-out-form
Пользовательский CSS для описания подключения:
width: 100% !important;
float: none !important;Пользовательский CSS для формы входа:
width: 100% !important;
padding: 0px !important;Это гарантирует, что модуль входа будет занимать всю ширину строки/столбца даже на рабочем столе.
Создание формы "Вход в систему"
Теперь, когда версия формы для «незарегистрированных пользователей» готова, нам нужно создать версию для «зарегистрированных пользователей», которая будет иметь другое содержимое и стиль для максимального удобства пользователя.
Чтобы создать форму входа для лиц, вышедших из системы, скопируйте существующую форму входа.
Далее обновите метку для каждой из форм входа в систему.
Откройте дубликат настроек (форму "Вход в систему") и добавьте заголовок сайта в качестве динамического контента в заголовок модуля формы входа в систему.
Затем откройте настройки динамического содержимого заголовка сайта и обновите содержимое до и после следующим образом:
- Раньше: «Вы пытаетесь выйти из Elegant Themes»
- После: ". "
Это создаст приятное динамическое уведомление для пользователей, пытающихся выйти из системы.
Далее добавьте в основной текст следующий заголовок H3:
<h3>Are you sure?</h3>
Если вы когда-либо видели содержимое модуля «Вход» после авторизации, вы знаете, что там есть пользовательское сообщение, включающее пользовательскую ссылку «Выход». Чтобы эта ссылка выглядела как кнопка, нам нужно настроить шрифт/текст в теле ссылки следующим образом:
- Выберите вкладку Ссылка в рамках опции Основной текст.
- Шрифт ссылки: Work Sans
- Вес шрифта ссылки: полужирный
- Стиль шрифта: ТТ
- Выравнивание текста ссылки: по центру
- Цвет текста ссылки: #ffffff
Примечание: Предварительный просмотр результатов будет недоступен до тех пор, пока форма не будет отображена на рабочей странице.
Под вкладкой Фильтр, обновите класс CSS и пользовательский CSS следующим образом:
- Класс CSS: et-logged-in-form
Пользовательский CSS для формы входа:
display:none;
Часть 5. Добавьте пользовательский код
Чтобы добавить пользовательский CSS и JQuery, необходимые для функциональности всплывающей формы входа, создайте новый модуль кода под последним модулем входа.
CSS
Откройте настройки модуля «Код» и вставьте следующий 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;
}Обратите внимание, что в CSS используется встроенный в WordPress класс "connected", который скрывает/отображает соответствующие кнопки входа/выхода и формы входа "Вход выполнен"/"Выход выполнен", независимо от того, авторизован пользователь или нет.
JQuery
Под конечным тегом стиля вставьте следующий код JQuery, убедившись, что код заключен в необходимые теги сценария.
(function ($) {
$(document).ready(function () {
$(".et-toggle-popup").click(function (e) {
e.preventDefault();
$(".et-popup-login").fadeToggle(500);
});
});
})(jQuery);Этот фрагмент кода просто переключает контекстный раздел каждый раз, когда пользователь щелкает по одному из трех элементов с классом "и-переключить-всплывающее окно(кнопки входа и выхода, а также значок презентации "x").
Смотрите также: Divi: как использовать настройки фоновой маски и параметры преобразования узора
C'est fait!
Не забудьте сохранить изменения, внесенные в шаблон в конструкторе тем. После сохранения вы сможете увидеть результат на странице в режиме реального времени.
Конечный результат
Вот окончательные результаты на компьютере, планшете и телефоне.
Обратите внимание, как меняются кнопки входа и выхода. И, как только пользователь входит в систему, он остается на текущей странице.
Кроме того, всплывающая форма входа отображает различное предупреждающее содержимое каждый раз, когда пользователь пытается выйти из системы.
Скачайте DIVI прямо сейчас!!!
ЗАКЛЮЧЕНИЕ.
Надеюсь, создание этой всплывающей формы входа и пользовательских кнопок входа/выхода даст вам представление о том, как креативно использовать форму входа в Divi.
Вы можете свободно изменять дизайн и содержимое каждой формы авторизации (или кнопок), чтобы создать уникальный интерфейс входа на свой веб-сайт.
Мы также надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.
Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...