Содержание
Здравствуйте, друзья! В этом уроке мы поговорим о создании модальных окон в WordPress. Возможности применения у модальных окон очень разнообразные. Их используют как для обычного всплывающего сообщения на сайте, так и для множества других задач, к примеру для создания всплывающей формы регистрации, объявления, акции и т.п.
В любом случае, главная задача модальных (всплывающих окон) — привлечь внимание пользователя.
Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться.
Создание всплывающих окон в WordPress
И так, давайте перейдем непосредственно к созданию всплывающих окон, для создания которых мы будем использовать плагин Popup Maker. Как пример, давайте создадим всплывающее окно с видеозаписью внутри, которое будет открываться при клике на кнопку, но при желании всегда можно сделать его появление автоматическим.
1. Установите и активируйте плагин Popup Maker.
2. После активации плагина перейдите в Pupup Maker -> Add New.
3. В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:
- 1) Указываем название модального окна. Это название пользователю видно не будет.
- 2) Заглавие модального окна.
- 3) Отмечаем галочкой страницы, на которых будем использовать всплывающее окно. Если указываем «On Entrie Site» — модальное окно можно использовать на всех страницах и записях сайта.
- 4) Наполнение всплывающего окна. Сюда пишем текст, вставляем изображения и т.п. В общем, делаем наполнение по желанию. В нашем примере я вставил фрейм видеозаписи с youtube.
- 5) Указываем размер модального окна. Размер можно указать как в процентах, так и в пикселях. Значение «Auto» — автоматически подбирает размер модального окна. В случае добавления видеозаписи это лучший вариант.
- 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
- 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
- 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
- 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
- 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.
- 11) Настройки закрытия модального окна. Click Overlay to Close — закрытие модального окна при нажатии мимо него. Press ESC to Close — закрытие модального окна клавишей Esc. Press F4 to Close — закрытие клавишей F4. Я отмечаю все пункты, дабы не злить пользователей сайта и упростить возможность закрытия всплывающего окна 😉
- 12) Настройки автоматического открытия модального окна. В нашем примере его использовать не будем.
4. После того как мы выполнили настройки, нажимаем кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.
Настройки внешнего вида всплывающего окна
После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.
В открывшейся странице можно настроить фон модального окна, размеры и цвет шрифтов, тени, отступы и изменить название кнопки отвечающей за закрытие модального окна.
Такие настройки индивидуальны, и говорить о них я не вижу смысла. Если будут вопросы — задавайте в комментариях.
Настройка открытия всплывающего окна
После создания модального окна нам нужно решить каким образом оно будет открываться. Для начала давайте разберем каким образом можно открыть всплывающее окно.
При создании модального окна ему назначается два класса, которые являются уникальными идентификаторами модального окна. Один из идентификаторов нужно указать в элементе, при клике на который должно открываться модальное окно.
Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.
На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.
Для того чтобы модальное окно работало, нужно добавить class-идентификатор в элемент, при нажатии на который мы ходим чтобы модальное окно появлялось. Ниже примеры добавления в ссылку, кнопку и изображение.
В примере будем использовать класс popmake-106.
Открытие модального окна при клике по ссылке:
Открытие модального окна при нажатии кнопки:
Открытие модального окна при клике по изображении:
После добавления класса, модальное окно будет появляться при нажатии на элемент которому мы этот класс добавили.
Вот такое всплывающее окно в результате у нас получится:
Готово! Если у вас будут возникать вопросы или какие-либо проблемы при создании всплывающего окна — смело пишите в комментариях, постараюсь всем ответить и помочь.
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Здравствуйте!
Речь идет о плагине Popup Maker ? https://ru.wordpress.org/plugins/popup-maker/
В настроках плагина при создании модалки создайте свой триггер (класс или ID). А потом этот же триггер укажите для кнопки.
На данный момент к кноппе не подвязана функция, т.е. это просто кнпока-пустышка.
https://screenshots.firefox.com/y24Ubbjw7p14bEj9/null
Также обратите внимание, что в консоли браузера у вас очень много ошибок. Они также могут являться причиной того, что до привязки ф-ции модалки не доходит.
Замечательный плагин — popup maker для всплытия окон не работает!
Основные причины
- Вы создали окно но не указали класс окна на кнопку в коде
- Вы указали класс окна в кнопке но он не оказался верным
- Вы указали верный класс окна в кнопке но ограничили показ окна на некоторых страницах.
Эти настройки находятся в самом окне, по умолчанию нужно оставить именно так
Что нужно, чтобы заработал popup maker? (как присвоить class кнопке)
- Создаем новый Popup .
- Переходим по ссылке только со своим сайтом (adminka->menu ->Popup Maker)
- Копируем класс только что созданного вами Popup из таблички (колонка CSS Classes)
Табличка всплывающих окон:
my_popup popmake-50
далее идем в html редактор, и добавляем новый класс нужной кнопке popmake-50
Например:
где pozvonit — старый стиль кнопки
popmake-50 класс при нажатии на который будет всплывать ваше созданное окно.
Бывает такой глюк — сталкиваюсь не в первый раз . Нужно создать свою тему. И ее использовать по умолчанию в окнах. Тогда все заработает . Даже те темы которые были до этого.
Еще про вордпресс:
Создал popup. При нажатии View Popup, выдает, что страничка 404. Что за ерунда?
Я ответил в конце поста
А можно как нибудь сделать простую ссылку, типа: http://pozvonit popmake-50 ?
У меня в окне кнопка «закрыть окно» не редактируется. Все время находится в правом верхнем углу экрана, не меняется стиль, независимо от того, какие настройки задаю в настройках темы окна, и так во всех темах. В сети не нашел информацию, кто может подсказать, как исправить?
Как уменьшить размер всплывающего окна, при открытии на адаптированной мобильной версии сайта? У нас всплывающее окно выходит огромного размера ан весь экран с отступом налево
дина — у вас модальное окно наверное имеет фиксированную ширину.. она должна быть в процентах и не более 100.
Второй день не работает popup maker. работаю с плагином Elementor and Popup Maker, создано уже множество сайтов, и раньше все ок работало. А сейчас второй день настраиваю как обычно, всплывающее окно вроде должно появиться, и оно как бы появилось, но ничего нет…пустота. даже новый сайт специально был создан для тестирования этой пары плагинов и ничего не работает.
Я скоро напишу стать как использовать remodal.js — намного удобней и проще. ожидайте.
Что не так я настроил, если темы попапов не отображаутся?
Тригер срабатывает, окно открывается но только содержимое,
самого оформления окна нет.
от темы толко размер и Х – текст закрытия окна, который пупо
в левом низу просто текст.
Не отображается ни от тригера ни в предпросмотре
Тема попапа названа на латинице. она назначена по умолчанию,
и в отображении самого попапа. попап тож на латинице, в общем
вроде все настройки в норм. WordPress – 5.1
Та же проблема — сначала все отображалось (работаю с Elementor и Popup Maker), настроила триггеры, прописала классы в элементе кнопки на вывод модального окна — ничего!
Скажите, что нужно прописать, чтобы при всплытии модального окна не дергалась страница. Смещается контент влево(
я думаю нужно сделать фиксированное позиционирование некоторых классов окна. т.е нужно разобраться в верстке
Добавить комментарий Отменить ответ
скидка 25% новичкам по промокоду 648333263