Вы хотите добавить всплывающее окно входа в WordPress на свой сайт? Модальное всплывающее окно входа позволяет вашим пользователям быстро получить доступ к вашему веб-сайту, не покидая страницу, которую они просматривают. Это улучшает пользовательский опыт и вовлеченность на вашем сайте. В этой статье мы покажем, как шаг за шагом легко создать всплывающий режим входа в WordPress.
Зачем создавать всплывающий режим входа в WordPress?
Если вы управляете интернет-магазином, сайтом участника или продаете курсы в Интернете, вы, скорее всего, разрешите пользователям регистрироваться и заходить на ваш сайт.
Обычно, когда пользователи нажимают на ссылку для входа, они направляются на страницу входа по умолчанию в WordPress или на другую пользовательскую страницу входа на своем веб-сайте. После входа пользователи снова перенаправляются на другую страницу.
Модальное всплывающее окно входа позволяет отображать форму входа без отправки пользователей на другую страницу. После входа в систему вы можете перенаправить пользователей на нужную страницу.
Модальное всплывающее окно входа быстрее и улучшает пользовательский опыт на вашем сайте. Более быстрый и плавный пользовательский опыт может увеличить ваши продажи и конверсию.
С учетом сказанного давайте посмотрим, как легко создать модальное всплывающее окно входа в WordPress. Мы покажем вам два способа сделать это, и вы сможете выбрать тот, который наилучшим образом соответствует вашим потребностям.
Способ 1. Создайте модальное всплывающее окно входа в систему, используя имя входа CSH
Этот метод проще и рекомендуется для большинства пользователей.
Первое, что нужно сделать, это установить и активировать плагин для входа в CSH. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вы должны перейти на Модальный логин в области администрирования WordPress и выберите тип для модальной формы входа.
После выбора модального типа поля для входа в систему вы можете прокрутить вниз и управлять перенаправлениями входа / выхода из формы. Вы также можете разрешить пользователям создавать свои собственные пароли.
Затем вы должны прокрутить вниз до Стили раздел и выберите макет, отображение меток, цвет фона, цвет кнопки, цвет ссылки и многое другое.
Также вы можете добавить регистрационное письмо, тему письма, использовать Google reCaptcha и многое другое. Этот плагин также позволяет добавлять социальные логин, как Facebook, Twitter и гугл
Сохраните ваши изменения и скопируйте короткий код, расположенный вверху этой страницы. Вам нужно будет создать новую страницу WordPress или отредактировать существующую, чтобы добавить шорткод в редакторе контента.
Вы также можете добавить модальный вход в систему на боковой панели WordPress. Просто иди в Внешний вид »Виджеты перетащите CSH Войти виджет в боковой панели вашего сайта.
Модальный логин CSH также можно добавить в файлы шаблонов вашего сайта. Добавив его на свой сайт, просто зайдите на сайт WordPress, чтобы увидеть модальную ссылку для входа в систему.
Способ 2. Создайте модальное всплывающее окно входа с WPForms и OptinMonster
Для этого метода вам понадобится плагин WPForms и OptinMontser. Если у вас уже есть эти два плагина, этот метод является лучшим решением для вас.
WPForms – лучший плагин для контактной формы WordPress. Вам понадобится, по крайней мере, ваш Pro-план для доступа к плагину регистрации пользователей.
OptinMonster – лучший плагин для WordPress и программное обеспечение для генерации лидов на рынке. Помогает конвертировать посетителей сайта в подписчиков и клиентов. Вам потребуется как минимум Pro-план для доступа к функции MonsterLinks, используемой в этой статье.
Готов? Начнем.
Используйте WPForms для создания формы входа пользователя
Сначала необходимо установить и активировать плагин WPForms. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вы должны перейти на WPForms »Плагины страница для установки и активации Плагин регистрации пользователя,
После активации плагина, вам нужно перейти на WPForms »Добавить новый страница для создания формы входа пользователя.
После запуска генератора WPForms вам нужно будет выбрать предварительно созданный генератор Форма входа пользователя модель.
Этот шаблон формы входа в систему имеет поля электронной почты и пароля, которые будут работать аналогично стандартной форме входа в WordPress. При необходимости вы можете перетаскивать любые дополнительные поля в левой части экрана.
Затем нажмите пароль поле в разделе предварительного просмотра, и он будет отображать параметры поля на левой стороне. Вы можете добавить код ниже в поле описания пароль поле, чтобы показать параметры, такие как забыть пароль и регистрацию пользователя.
Вы не помните свой пароль? Кликните сюда. У вас нет аккаунта? Зарегистрируйтесь здесь.
После этого вы должны нажать Сохранить кнопку, а затем нажмите на встраивать кнопка.
Откроется всплывающее окно с кодом для встраивания. Вы должны скопировать этот код и сохранить его для дальнейшего использования.
Ваша форма авторизации готова. Теперь вы можете создать модальное всплывающее окно.
Использование OptinMonster для создания модального всплывающего окна
Сначала вам необходимо установить и активировать плагин OptinMonster. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вы должны перейти на OptinMonster в админке WordPress и нажмите Создать новую кампанию кнопка.
Панель инструментов OptinMonster откроется на новой веб-странице.
Оказавшись внутри, вы должны выбрать Лайтбокс всплывающее окно как тип кампании, так что вы можете добавить свою форму входа во всплывающее окно.
Затем вы должны выбрать холст Шаблон кампании, который является пустым шаблоном и позволяет добавлять пользовательские коды и коды доступа.
Он попросит вас добавить имя в ваш лайтбокс и выбрать сайт, на который вы хотите загрузить это всплывающее окно.
После нажатия Начать строительство , вы будете перенаправлены на страницу настроек кампании OptinMonster.
Отсюда вы должны пойти в Активировать вкладка и установите ширину и высоту экрана, добавьте код для вставки в форму входа Пользовательский HTML-дисплей Управление отображением и звуковыми эффектами для модальных всплывающих окон и многое другое.
Примечание: Код для встраивания в форму входа в систему должен быть кодом, который вы скопировали после создания формы входа в систему на предыдущем шаге.
Поскольку вы создаете модальное всплывающее окно входа, вам нужно перейти на вкладку «Настройки» и установить значение «0» в Длительность cookie и Правильная продолжительность печенья, Он будет показывать форму всем посетителям каждый раз, когда они нажимают на вашу ссылку.
Тогда вы должны посетить Показать правила направлять и расширять Monsterlink изменить статус на активный.
Не забудьте нажать на Сохранить в правом верхнем углу и перейдите к Для публикации раздел для активации статуса.
Теперь вы можете добавить этот модальный логин на ваши страницы или посты WordPress.
Добавить модальный логин в WordPress
Вы должны вернуться к OptinMonster в вашей админке WordPress, и он покажет вам список кампаний. Если вы не видите свою недавно созданную кампанию для модального входа, просто нажмите Обновить кампании кнопка.
Затем вам нужно отредактировать настройки вывода кампании, чтобы активировать подписку на вашем сайте, и выбрать, кто должен видеть всплывающее окно модального входа. Не забудьте нажать на Сохранить настройки кнопка.
После этого вам нужно вернуться на страницу обзора кампании и скопировать слаг, который отображается под опцией прямой кампании. Этот эксклюзивный слаг может использоваться в кодах доступа и коде для отображения модального входа в WordPress.
Вы можете создать новую страницу WordPress или отредактировать существующую и добавить этот код в свою эксклюзивную кампанию кампании.
Войти / Зарегистрироваться
Вы также можете добавить приведенный выше код в меню WordPress, на боковую панель или в любое другое место на своем сайте.
Сохраните ваши изменения на странице WordPress и посетите их веб-сайт, чтобы увидеть модальный логин в действии.
Мы надеемся, что эта статья помогла вам узнать, как создать модальный логин в WordPress. Вы также можете просмотреть наш полный список лучших плагинов для страницы входа в WordPress и легко создать свою собственную страницу входа.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube, чтобы посмотреть обучающие видеоролики WordPress. Вы также можете найти нас на Twitter и Facebook,
