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

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

Создание форма всплывающее окно входа в систему Divi может быть эффективным способом улучшить дизайн вашего сайта и удобство входа/выхода пользователей. 

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

Это более удобно, чем перенаправление пользователя на пользовательскую страницу входа.

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

Используя модуль Divi Login и несколько модулей Button, мы создадим беспрепятственный вход во всплывающее окно на интерфейсе, позволяя пользователям входить и выходить из системы без перенаправления на другую страницу.

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

обследование

Вот краткий обзор дизайна, который мы будем создавать в этом уроке.

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

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

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

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

Импортируйте шаблон заголовка «Crowdfunding Layout Pack» в конструктор Divi.

Для начала скачайте Верхний и нижний колонтитул пакета Divi Crowdfunding Layout Pack бесплатно . Для этого перейдите в сообщение в блоге .

Затем введите свой адрес электронной почты, чтобы загрузить zip-файл.

После этого разархивируйте файл, чтобы он был готов к импорту.

Чтобы импортировать файл в редактор тем, выполните следующие действия:

1. Перейдите в Divi > Конструктор тем.
2. Нажмите на значок переносимости.
3. Во всплывающем окне «Переносимость» выберите вкладку «Импорт».
4. Выберите ранее загруженный разархивированный файл для импорта.
5. Cliquer sur Импорт конструктора тем Divi Шаблоны.
6. Щелкните значок редактирования, чтобы изменить импортированный заголовок.

Создание всплывающей формы входа в Divi

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

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

В верхней строке раздела заголовка удалите модуль Социальные сети Подписаться рядом с кнопкой входа в столбце 3.

Читайте также: Divi: Сравнение различных типов градиентов

Создание кнопки входа

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

Обновите следующие элементы на вкладке «Дизайн»:

• Значок кнопки: значок замка (см. скриншот)
• Расположение значка кнопки: справа
• Показывать значок только при наведении для кнопки: НЕТ
• Отступы: 0,5 см (сверху и снизу), 2 см (слева), 0,7 см (справа)

Под вкладкой Фильтр, назначьте кнопке два пользовательских класса CSS следующим образом:

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

Создание кнопки выхода

Чтобы создать нашу кнопку выхода, продублируйте существующую кнопку входа в столбце 3.

Чтобы различать две кнопки, вы можете соответственно обновить метку каждой из них. Далее откройте настройки модуля Duplicate Button в столбце 3.

Измените текст кнопки на «Выход».

Обновите следующие элементы на вкладке «Дизайн»:

• Значок кнопки: значок разблокировки (см. скриншот)

Под вкладкой Фильтр, обновите кнопку CSS Classes следующим образом:

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

Первый класс останется прежним, а второй класс будет другим.

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

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

Под разделом заголовка добавьте новый обычный раздел.

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

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

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

Под вкладкой Содержание, придайте разделу белый цвет фона:

• Фон: #ffffff

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

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

• Закругленные углы: 10 пикселей
• Box Shadow: см. снимок экрана
• Коробчатая тень по вертикали: 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: Создание форм входа «Вход в систему» ​​и «Выход из системы»

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

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

Создание формы «Выход из системы»

Чтобы создать форму входа «Вышел из системы», добавьте новый модуль входа под значком модуля Blurb внутри строки.

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

Вкладка «Контент»

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

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

• Цвет фона полей: 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 использует класс «connected», встроенный в WordPress, чтобы скрыть/показать соответствующие кнопки входа/выхода и формы Вход/Выход из системы каждый раз, когда пользователь входит в систему или выходит из системы.

JQuery

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

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

Этот фрагмент просто переключает всплывающее окно всякий раз, когда пользователь нажимает на один из трех элементов с классом " и-переключить-всплывающее окно (кнопки входа и выхода плюс значок презентации «x»).

Смотрите также: Divi: как использовать настройки фоновой маски и параметры преобразования узора

Сделано !

Не забудьте сохранить изменения, внесенные в шаблон, в конструкторе тем. После сохранения вы можете просмотреть результаты на странице в реальном времени.

Конечный результат

Вот окончательные результаты на компьютере, планшете и телефоне.

Обратите внимание, как изменились кнопка входа и кнопка выхода. И, как только пользователь входит в систему, он остается на текущей странице. 

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

Скачайте DIVI прямо сейчас!!!

ЗАКЛЮЧЕНИЕ.

Надеемся, что создание этой всплывающей формы входа и настраиваемых кнопок входа/выхода даст вам некоторое представление о том, как творчески использовать форму входа Divi. 

Не стесняйтесь настраивать дизайн и содержимое каждой формы входа (или кнопок), чтобы создать уникальный опыт входа на свой собственный веб-сайт.

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

Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для выполнения ваших проектов создания интернет-сайтов.

Не стесняйтесь также обращаться к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...