Как создать и отобразить всплывающее окно по тегу сообщения в WordPress

Вы хотите создать и отобразить одно всплывающее окно для каждого тега записи в WordPress? Так что продолжайте читать эту статью.

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

В WordPress есть множество плагинов для создания всплывающих окон, таких как Elementor Pro, JetPopup, Brizy Pro и другие.

Важно помнить, что всплывающие окна не должны раздражать посетителей вашего сайта. Поэтому создайте всплывающее окно максимально простым и привлекательным.

содержание

Некоторые плагины WordPress для создания всплывающих окон

Факир Pro

Elementor Pro — это расширение Elementor с сотнями премиум-функций. Он предоставляет вам мощные профессиональные инструменты, ускоряющие рабочий процесс и проектирование. Elementor Pro дает вам полный контроль над макетом и дизайном вашего сайта. В этом случае вы можете свободно настраивать дизайн своего всплывающего окна.

Utiliser Факир Pro создать всплывающее окно по тегу сообщения очень просто и удобно. Вы можете легко и точно определить условия отображения всплывающего окна.

JetPopup от Crocoblock — это расширение для Elementor. Вы можете купить его как отдельный плагин или в комплекте с другими плагинами Crocoblock. Преимущество использования JetPopup для создания всплывающего окна заключается в том, что он имеет множество интересных функций.

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

Читайте также: 22 лучших премиум-аддона для Elementor

Brizy Pro

Конструктор всплывающих окон Brizy Pro предлагает вам два варианта. Первое — это всплывающее окно, активируемое кликом, а второе — автоматические триггеры и условия.

Открытие по клику: ваше всплывающее окно может быть вызвано простым нажатием на элементы вашей страницы.
Автоматические триггеры и условия: вы можете настроить действия посетителей, которые будут определять, когда будут отображаться всплывающие окна.

Как упоминалось ранее, у вас есть несколько вариантов создания всплывающего окна в WordPress. В этом уроке мы покажем вам, как создать и отобразить всплывающее окно для тега сообщения, используя версию Факир Pro, поэтому убедитесь, что он у вас уже есть.

Первое, что нужно сделать, это создать новый шаблон всплывающего окна. Чтобы создать новый шаблон всплывающего окна, перейдите к Шаблоны > Всплывающие окна на панели инструментов WordPress и нажмите на кнопку Добавить новое.

Затем добавьте имя вашего всплывающего окна и нажмите кнопку СОЗДАТЬ МОДЕЛЬ.

Вы будете перенаправлены в библиотеку шаблонов, вы можете выбрать шаблон из окна библиотеки или создать свой собственный шаблон всплывающего окна. Чтобы использовать шаблон из библиотеки, просто нажмите кнопку вставить.

Но в этом уроке мы собираемся создать шаблон всплывающего окна с нуля. Щелкните значок X чтобы закрыть библиотеку шаблонов.

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

Щелкните значок шестеренки в левом нижнем углу. В настройках всплывающего окна измените Ширина в 90% ширины вида (VW) Et Позиция en Центр-Низ.

Затем создайте шаблон всплывающего окна. Добавьте новый раздел и выберите структуру из 5 столбцов. В настройках раздела установите Ширина на 950. Можно поиграться с настройками.

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

Теперь вернемся к вашим колонкам. В левом столбце установите ширину на 33%, а для остальных четырех — на 16%.

В левом столбце мы добавим виджет «Заголовок» с текстом. Вы можете добавить текст, приглашающий посетителей вашего веб-сайта просмотреть другой контент, который имеет отношение к текущему контенту, или любой другой текст по вашему выбору.

Справа мы добавим виджет изображения. Вы можете добавлять изображения из миниатюр/избранных изображений постов или загружать их вручную.

Теперь конструкция готова. Вернуться к Настройки всплывающих окон настроить анимацию входа, выхода и полей. В этом уроке мы устанавливаем вход на исчезать и выход на Растворяться. Затем перейдите на вкладку Передовой и установите маржу на 30 (обычное значение для ссылок).

Теперь, когда дизайн готов, нажмите кнопку ОПУБЛИКОВАТЬ для установки условий отображения и триггеров. Чтобы определить условие отображения, нажмите на кнопку ДОБАВИТЬ УСЛОВИЕ и выберите свой вариант из выпадающего списка.

Поскольку вы хотите отображать всплывающее окно по тегу сообщения, вы можете установить следующие условия отображения (см. анимацию).

Нажмите "Далее. Во вкладке триггеры, установите триггер на При прокрутке переключив переключатель на да. Определить Руководство из Bas и Ширина более 95%. Потому что мы хотим, чтобы всплывающее окно появлялось, когда посетители доходят до конца нашей статьи.

В этом уроке мы не собираемся определять Расширенные правила. Так что нажмите на СОХРАНИТЬ И ЗАКРЫТЬ. Что ж, теперь мы закончили.

Давайте посмотрим, как это выглядит.

Здесь вы только что закончили свое всплывающее окно. Смотрите также наши статьи по теме:

Скачать Elementor Pro

Поделитесь этой статьей:

Михос Гартнер

Михос Гартнер — эксперт по цифровым инструментам, который покупает, тестирует и проверяет инструменты SAAS для малого бизнеса. Опираясь на многолетний опыт работы в области технологий, он предоставляет содержательные обзоры. Его контент широко потребляется, ежемесячно обслуживая миллионы пользователей.