WordPress Popup Супер плагин всплывающее окно при нажатии наведении открытии

Естественное продвижение

Привет! Сегодня я расскажу вам о Супер плагине, для создания всплывающих popup окон. Вы сможете добавить на свой сайт всплывающее окно, на любую страницу, с помощью шорткода. Можно сделать, чтобы окно открывалось при нажатии на кнопку, ссылку, изображение, текст, либо любой другой элемент на вашем сайте. Можно сделать, чтобы окно появлялось при наведении на любой элемент. Есть обычный вариант, popup окно всплывает при открытии, загрузки страницы. В окно вы можете добавить любой HTML код, изображение, шорткод и т.д. Очень простой и полезный плагин!

 

Wordpress Popup плагин


popup contact form 7 всплывающая форма

 

Установить плагин Popup Builder — Responsive WordPress Pop up вы сможете прямо из админ-панели WordPress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, установите и активируйте открывшийся плагин.

 

Popup Builder — Responsive WordPress Pop up

 

Далее, после установки и активации плагина, перейдите на страницу: Popup Builder – All Popups. Здесь будут отображаться все созданные всплывающие окна. Чтобы создать новое окно, нажмите вверху на кнопку Add New.

 

All Popup все окна

 

Далее, вам нужно выбрать тип окна. Вам будут доступны 4 бесплатных типа. Для примера я выберу HTML.

 

 – Изображение.

 – HTML код.

 – Facebook.

 – Шорткоды.

 

тип окна

 

Далее, на странице создания, укажите название окна. Добавьте содержание, с помощью визуального редактора. Настройки:

 

– Popup theme, можно выбрать стиль окна.

 – Effect type, эффект при открытии.

 – Effect duration, длительность эффекта.

 – Popup opening delay, задержка при открытии.

 

 – Responsive mode, сделать адаптивным.

 – Custom mode, указать свои размеры.

 – Initial, можно указать начальную ширину и высоту.

 – Max, максимальная высота и ширина.

 

 – Dismiss on “esc” key, закрывать окно при нажатии на клавишу Esc.

 – Show “close” button, показать кнопку Закрыть.

 – Enable content scrolling, включить прокрутку содержимого.

 – Disable page scrolling, отключить прокрутку страницы.

 – Enable reposition, включить репозиции.

 – Enable scaling, включить масштабирование.

 – Dismiss on overlay click, закрывать при нажатии на верхний слой.

 – Dismiss on content click, закрывать при нажатии на зону вне окна.

 – Reopen after form submission, повторно открывать после отправки формы.

 – Show popup this often, как часто открывать окно, выберите дни и время.

 – Repetitive popup, открывать окно после X секунд.

 – Change overlay color, изменить цвет верхнего слоя.

 – Change background color, изменить цвет фона.

 – Background opacity, прозрачность фона.

 – Background overlay opacity, прозрачность слоя.

 – Overlay custom class, свой класс слоя.

 – Content custom class, свой класс контента.

 – Popup z-index, индекс.

 – Content padding, набивка.

 – Popup location, выбрать расположение окна.

 – Сохраните настройки.

 

создать popup окно

 

Далее, на странице All Popups, где отображаются все созданные окна, вы можете скопировать шорткод окна и вставить его в любое место на сайте.

 

шорткод popup окна

 

Можно добавлять окна с помощью кнопки, прямо из визуального редактора, на странице редактирования записи или страницы. Нажмите на кнопку Insert popup.

 

кнопка редактор

 

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

 

 – Select Popup, выберите окно, которое будет открываться.

 – Select Event, выберите тип открытия:

  • On load, при открытии страницы.
  • Click, при нажатии на кнопку или другой элемент.
  • Hover, при наведении на объект.

 

– Нажмите на кнопку Insert.

 

настройки popup

 

Далее, у вас в содержании появится два шорткода. Между ними можно вставить любой элемент, если вы выбрали открытие при нажатии или наведении. Обновите или опубликуйте страницу.

 

кнопка окно редактор

 

Далее, на сайте будет отображаться кнопка. Нажмите на неё.

 

кнопка на сайте

 

При нажатии на кнопку, у вас откроется всплывающее popup окно.

 

всплывающее окно

 

Всё готово! Вот так просто и быстро вы можете создать всплывающее popup окно для своего сайта.

 

 – Супер плагины WordPress, более 500, смотри Здесь!

 

Остались вопросы? Напиши комментарий! Удачи!

 

info-effect.ru
Добавить комментарий для Артем Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Антон

    !!! Спасибо !!! очень помогли с настройками

    Ответить
    1. Admin автор

      Пожалуйста! Вот здесь ещё – Очень много полезных плагинов WordPress!

      Ответить
  2. Дмитрий

    Я вот не пойму, а как эту всплывающую форму, встроить в нужную мне кнопку?
    Все работает, контакт форм открывается, если добавляю на странице, а если в адрес в кнопке не работает.

    Ответить
    1. Admin автор

      “в адрес в кнопке” что это значит? Как вы кнопку добавляете? В инструкции всё показано, внимательно смотрите.

      Ответить
      1. Дмитрий

        неправильно написал, у меня стоит siteirigin page builder, там есть готовый виджет кнопки. И там есть место куда вставлять адрес ссылки, только если вставлять шорткод-это не работает.

        Можно еще вставить класс ,но где его взять?

        Ответить
        1. Admin автор

          Вы хотите в поле для URL адресов поставить класс? Попробуйте использовать шорткод кнопки от плагина Shortcodes Ultimate.

          Ответить
  3. Мария

    Добрый день!
    Мне нужна была плавающая кнопка “Записаться”. Но никак не могу добиться, чтобы при плавающей кнопке убрать “верхний слой”, чтобы можно было кликать на меню сайта.

    Ответить
    1. Admin автор

      Здравствуйте. Могу вам порекомендовать – Плавающий виджет для обратной связи плагин WordPress.

      Ответить
  4. Мария

    Большое спасибо! Буду пробовать.

    Ответить
  5. Евгений

    админ, подскажи плиз, рабочий и бесплатный плагин для входа на сайт через попап окно! я перерыл все. Идея такая – в хэдэре есть кнопка войти. жмешь – выскакивает попап с формой входа+регистрация+ забыл пароль+ вход через соцсети. после авторизации эта кнопка заменяется на Выйти. Спасибо заранее.

    Ответить
    1. Admin автор

      Посмотрите плагин Theme Login.

      Ответить
  6. Артем

    Не работает данный плагин. Сделал все по инструкции. Что делать?

    Ответить
    1. Admin автор

      Плагин рабочий. Значит что-то не так сделали. Попробуйте ещё раз.

      Ответить
  7. ильдар

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

    Ответить
    1. Admin автор

      Здравствуйте. Не понял, что вы хотите сделать, можно пример?

      Ответить
  8. CTAC

    Добрый день, подскажите мне в таком вопросе хочу себе на сайт вставить открытие модульного окна после нажатия на ссылку. Вот такой код –

    href=”/wp-content/uploads/referats/adminpravo_0019.zip” rel=”nofollow”>Верховный суд Российской Федерации

    Если вставляю шорткод

    [sg_popup id=”8″ event=”onload”]href=”/wp-content/uploads/referats/adminpravo_0019.zip” rel=”nofollow”>Верховный суд Российской Федерации[/sg_popup]

    у меня не отрабатывает окно, либо наоборот открывает окно а ссылка не работает.
    Как обойти костылём или как правильно сделать ?

    Ответить
    1. Admin автор

      Здравствуйте! У вас не правильный код! Если вы хотите сделать открытие окна при нажатии на изображение, вам нужно сначала вставить изображение в запись, затем перейти на вкладку Текст и от туда скопировать код изображения. Именно таким должен быть код изображения! Как на вкладке Текст.

      Что значит “открывает окно а ссылка не работает”, какая ссылка?

      Ответить
  9. CTAC

    Добры день Илья, я хочу вставить открытие модульного окна при нажатии на текст-ссылку. То есть при нажатии должен отдаться файл, а после открыться модальное окно. К примеру вот страница с раздачей рефератов и при нажатии на название в данный момент отдаётся файл… а я хочу после отдачи файла выводить модальное окно.

    Ответить
    1. Admin автор

      Код у вас не правильный. Без шорткодов, файл скачивается?

      Ответить
  10. CTAC

    Происходит, что- то одно если с кодом то открывается мод.окно, если без него то отдаёт файл.

    Ответить
    1. Admin автор

      Вы хотите, чтобы одновременно две функции выполнялись. Но, в плагине такого не предусмотрено. Зачем так делать? Разделите эти функции, зачем усложнять. Можно так сделать – при нажатии на кнопку, будет открываться popup окно, а уже в самом окне будет ссылка для скачивания файла.

      Ответить
  11. Надежда

    Илья, здравствуйте. Я раньше пользовалась плагином Easy Modal – очень довольна. Сейчас стало смущать, что он 2 года не обновлялся и нет ясности, совместим ли он с версией WordPress 5.03. Что думаете по этому поводу?

    Ответить
    1. Admin автор

      Добрый вечер. Вы установите плагин и посмотрите. Если никаких проблем не будет, значит можно пользоваться. У меня стоит плагин, который уже больше 5 лет не обновлялся, но он работает и всё нормально. Я не собираюсь удалять его, пока что. Важнее проверять на совместимость с php версией. Для этого плагин есть специальный PHP Compatibility Checker. Я тут перешёл на php 7 и как раз пришлось отказаться от одного плагина.

      Ответить
  12. Надежда

    Илья, спасибо. Сравню функции, тогда решу, какой выбрать.
    Немного не в тему. Как раз сижу по Вашей инструкции настраиваю другой плагин Woocommerce Flexible Checkout Fields. Очень помогает Ваша плагинотека :))). Спасибо!

    Ответить
  13. Никита

    Привет, спасибо большое за статью, она очень полезна.
    Но к сожалению у меня возникла проблема:
    Для редакции сайта я использую Elementor. Хотел сделать так, что при нажатии на текст появлялось всплывающее окно. Что бы это сделать я вышел из редактора Elementor в стандартный от WordPress, там я вставил между двумя шорткодами текст (вы вставили картинку) обновил страницу и все работает. При нажатии на текст появляется окно. Но как только я перешел из обычного редактора к Elementor все сразу пропало.
    Илья, подскажите пожалуйста, что делаю не так.
    Может быть вы знаете как сделать так, что бы при нажатии на текст (а лучше на фрагмент текста) всплывало окно и при этом все это работало с Elementor?
    Спасибо.

    Ответить
    1. Никита

      Уже все сделал, Спасибо.
      Чуть-чуть тупанул)

      Ответить
  14. Сергей

    Всех приветствую. Люди добрые, поможите!
    Плагин распрекрасный, заработал сразу, однако, не так как мне бы хотелось.
    Совершенно странная система прокрутки. Скролбар появляется рядом со всплывающим окном и прокручивает только его содержимое без оверлея. Мне нужно чтобы крутилось всё вместе и скролбар был справа на своём обычном месте (или чтобы вся страница крутилась и с ней содержимое всплывающего окна). Есть возможность этого добиться? Я в настройках не нахожу.
    Если блокирую прокрутку контента и разрешаю прокрутку страницы, то она просто крутиться на фоне, а к контенту не поместившемуся по высоте просто нет доступа.
    Объясните, где я дурачок?

    Ответить
    1. Admin автор

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

      Ответить
  15. Надежда

    Добрый день. Работаю с Elementor. Установлен плагин папапа, на одной странице в Elementor сделана всплывающая кнопка, которая выводит нужную форму, и работает как надо.
    Сейчас делаю просто запись, через редактор WordPress (т.е. без Elementor). Хочу вставить там эту же самую кнопку… Но в панели редактора нет никаких кнопок, связанных с Popup. (вот у вас есть кн. Insert Popup, а у меня она не появляется в перечне того, что можно вставить на страницу).
    И найти шорт-код у созданного папапа тоже не могу: у меня есть столбец “Классы CSS”… Но что с ними делать??
    Можете что-то подсказать? Спасибо

    Ответить
    1. Admin автор

      Добрый день. Не понял ничего. Причём тут Elementor, вы с помощью него сделали всплывающую кнопку? В записи всё показано, шорткод нужно вставить, его можно взять в деталях плагина, но это popup плагин, а не элементор.

      Ответить
  16. Аноним

    Здравствуйте . В репозитории WordPress нет этого плагина и на просторах интернета не могу найти где скачать. Может есть ссылочка на скачивание этого плагина ? Буду премного благодарна))

    Ответить
  17. Нина

    Доброго! Дайте ссылку на скачивание плагина, пожалуйста. Ни в интернете ни в репозитории не нашла (((((

    Ответить
    1. Admin автор

      Здравствуйте, похоже плагин был удалён. Есть альтернативы: Popup Maker, Popup Builder, Popup Builder by OptinMonster, Brave — Create Popup, Optins и т.д.

      Ответить