Как сделать popup окно в elementor wordpress

Обновлено: 16.05.2024

Всплывающие окна в WordPress и Elementor Pro 2.4. Попапы в Вордпресс

Всплывающие окна в WordPress ещё одна горячая и обсуждаемая тема. Все хотят попапы, пофункциональнее и желательно бесплатно. Оно и понятно, ведь инструмент нужен практически на каждом сайте будь то просто для вывода формы заявки или настоящие маркетинговые попапы, которые позволяют увеличить конверсию. В этом обновлении, разработчики Elementor показали и те и другие попапы. Теперь можно собирать всплывающие окна в Вордпресс используя всю мощь конструктора сайтов Elementor. После публикации будет доступны условия отображения, триггеры и вот некоторые из них:
- отображать всплывающее окно на любой странице сайта, разделе, категории;
- отображать попап при загрузке страницы;
- отображать всплывающее окно WordPress при прокрутке в определённое место страницы;
- попап Вордпресс по клику на кнопку или любой другой элемент, где есть ссылка;
- показать всплывающее окно после бездействия;
- показать попап при попытке закрыть страницу;
- показать всплывающее окно при переходе с определенных сайтов;
- показать на определённых устройствах.

Открыть попап Elementor Pro по триггеру: в меню, ссылке, кнопке, слайдере, изображении

Попап или иначе всплывающие окна в Elementor Pro можно открывать разными способами в зависимости от действий пользователя или по клику.

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

Представляем конструктор Popup

Создавайте удивительные всплывающие окна на WordPress

Создавайте любые Pop-up окна

Благодаря широким возможностям в Elementor Pro вы можете создать любые всплывающие окна: Fly In, Full Screen, Hello Bar, Bottom Bar, Classic, Slide-in и другие.

Email подписки (тест)

Интегрируйте с формами ваши любимые инструменты почтового маркетинга

Форма входа тест

Добавьте красивую и простую форму входа на ваш сайт

Скидки и акции тест

Показывайте скидки и акции на ваши товары или услуги

Товары и продукты (тест)

Интегрируйте с формами ваши любимые инструменты почтового маркетинга

Разблокировка контента тест

Показывайте какой-либо контент только после согласия с вашими условиями

Объявления тест

Уведомляйте посетителей об обслуживании, новостях или обновлениях

Единственный, ориентированный на дизай конструктор всплывающих окон


Легко встраивайте в WordPress

Добавляйте любой контент с вашего сайта WordPress прямо во всплывающие окна, не требуя кода или настройки.

  • Шаблоны Elementor
  • Содержание WordPress
  • Продукты WooCommerce
  • Динамический контент

Неограниченное использование

Создавайте неограниченное количество всплывающих окон. Никаких дополнительных плагинов не требуется, никаких дополнительных затрат, никаких ограничений на использование.

Возможности Elementor Pro

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

Основы

Drag & Drop редактор

Elementor Pro имеет самый быстрый и интуитивно понятный редактор в WordPress. Просто перетащите, отпустите и настройте.

300+ дизайнерских шаблонов

Выбирайте из более чем 300 прекрасно сконструированных шаблонов, разработанных для удовлетворения потребностей любой отрасли.

90+ виджетов

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

Адаптивный дизайн

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

Конструктор всплывающих окон

Настройте Popup как вам угодно. Появление на определенной странице, по событию, по времени. Настройте любой дизайн.

Конструктор тем

Используйте конструктор тем для редактирования каждой части вашего сайта без ко

Рабочие моменты

Никакого кода

Для создания красивого сайта вам не нужно писать код. Наш сервис сделает это за вас. Причем полученный код страницы компактен и оптимизирован для каждого устройства.

Навигатор

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

Поиск

Панель поиска, которая даёт легкую навигацию между различными страницами и настройками панели.

горячие клавиши

Ярлыки

Окно, которое выскакивает и показывает вам полный список ярлыков.

Автосохранение

Больше не нужно нажимать сохранить. Ваша работа постоянно сохраняется и автоматически резервируется.

История

Благодаря истории изменений весь процесс создания страницы сохраняется. Всегда можно вернуться назад.

Черновик

Опубликовали страницу и хотите продолжить работу над ней? Нет проблем, просто сохраните его как черновик.

Копировать вставить

Быстро скопируйте любой элемент и вставьте его в другое место на странице или на совершенно другую страницу вашего сайта.

Копия Стиля

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

Редактирование в строке

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

Глобальный виджет

Сохраните ваши любимые настройки виджета и повторно используйте виджет на любой странице простым перетаскиванием.

Глобальные цвета и тексты

Установите глобальные цвета и настройки текста, чтобы они влияли на стиль всего вашего сайта.

Пишите и изменяйте прямо на сайте

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

Выбор цвета

Настройте цвета, которые отображаются в палитрах цветов в Elementor Pro.

дизайн

Фоновые градиенты

С Elementor Pro легко добавить цвета градиента на любую страницу или пост WordPress.

Фоновые видео

Сделайте свой фон живым, добавив интересные фоновые видеоролики в свои разделы.

Наложение фона

Добавьте еще один слой цвета, градиента или изображения над фоном.

Улучшенные фоновые изображения

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

CSS фильтры

Используя фильтры CSS, вы можете поиграть с настройками изображения и добавить удивительные эффекты.

Режим смешивания

Смешайте фоны и фоновые наложения, чтобы создать эффекты в режиме наложения.

Элементор Холст

Переключитесь на шаблон Elementor Canvas и создайте всю свою целевую страницу в Elementor без необходимости иметь дело с верхним или нижним колонтитулом.

Разделитель

Добавите разделитель, чтобы разделить разные части вашего сайта. Настройте его как вы хотите.

Добавьте к любому элементу эффектную тень, чтобы выделить фрагмент сайта.

Абсолютное позиционирование

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

Одностраничные сайты

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

Эффекты движения

Добавьте движение и анимацию на свой сайт с помощью эффектов прокрутки и мыши.

маркетинг

Landing Pages

Создание одностраничных сайтов и управление ими никогда не было таким простым, все на вашем текущем веб-сайте WordPress.

Виджет формы

Создавайте все свои формы в живую прямо из редактора Elementor Pro.

Виждет карусели

Добавите вращающуюся карусель на ваш сайт одним кликом.

Виджет обратного отсчета

Увеличьте чувство срочности, добавив к вашему предложению таймер обратного отсчета.

Виджет рейтинга

Добавьте звездный рейтинг и стилизируйте его по своему вкусу.

Action ссылки

Легко подключайтесь к своей аудитории с помощью WhatsApp, Waze, Google Calendar и других приложений.

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

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

текст

Легко настроить

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

HTML-теги

Установка правильного HTML-тега для заголовка (H1 или иным образом) важна с точки зрения SEO.

Предварительный просмотр шрифта

Смотрите предварительный просмотр шрифтов на панели, чтобы легче было выбрать правильный.

Пользовательские Шрифты

Добавьте свои собственные шрифты и шрифты Typekit и используйте их в своих проектах.

Google Fonts

Выберите из сотен шрифтов Google необходимый именно вам.

Размер шрифта: PX, EM, REM

Установите размер ваша теста с использованием PX, EM или REM, для лучшего адаптивного дизайна.

Первая буква

Увеличьте размер первой буквы вашего блога, чтобы создать стильный и утонченный образ.

Тень текста

Подчеркните свой контент, добавив эффект тени текста к любому виджету с текстом.

Редактор столбцов текста

Разделите ваш текст на адаптивные столбцы и установите промежуток между ними для лучшего внешнего вида.

макеты

Ширина Раздела

Установите заданную ширину вашего раздела или виджета.

высота раздела

Установите заданную высоту вашего раздела или виджета.

Полная ширина

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

Ширина колонки

Введите определенную ширину столбца или визуально масштабируйте ширину, перетаскивая край столбца.

Разрыв колонки

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

позиция контента

Разместите ваш контент или виджет в любом месте вашего сайта, вне зависимости от макета.

Отступы, внутренние и внешние

Установите отступы и поля для разделов, столбцов и виджетов.

Z-Index

Поместите любой раздел, столбец, виджет над или под другим, используя функцию Z-index.

Вертикальное и горизонтальное выравнивание Flexbox

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

Inline Elements

Поместите два виджета рядом в одном столбце со встроенной шириной или пользовательской шириной.

Фиксированная позиция

Установите виджет на фиксированную позицию и разместите его где угодно. Элемент будет прокручиваться рядом с вашим пользователем.

Вложенные столбцы

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

Как открыть всплывающее окно Elementor из URL-адреса или меню

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

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

Для начала добавьте кнопку на свою страницу Elementor

Сначала перейдите на свою страницу и отредактируйте ее с помощью Elementor, наконец, добавьте " кнопка .


Затем выберите «Всплывающее окно» под параметрами ссылки.

После добавления кнопки

  1. Перейти в раздел залог и нажмите " Динамические теги », А оттуда
  2. Выберите " Всплывающее " в " Действия .
  3. Затем нажмите Всплывающее и выберите свою модель.

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

открыть всплывающее окно Elementor

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


открыть всплывающее окно Elementor

Добавьте или измените текстовый элемент, который будет связан со всплывающим окном

После копирования ссылки с кнопки вернитесь в редактор Elementor и " Добавьте свой текст ". Мы просто выбрали название.


Добавьте часть ранее скопированной ссылки в свой текстовый элемент

Смотрите скриншоты ниже.


открыть всплывающее окно Elementor

Чтобы добавить всплывающее окно как пункт меню

Просто зайдите в опции меню WordPress. Там добавьте настраиваемую ссылку в свое меню навигации и введите URL-адрес, который вы получили выше!

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Наконец, воспользуйтесь всплывающей ссылкой на Elementor!

Наконец, вы можете убедиться, что все работает, перейдя на страницу и щелкнув свой текст или пункт меню!

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

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. WordPress PDO Crud

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

Wordpress pdo crud плагины wordpress вставить таблицы графика сайт блог форма

Он предлагает красивую таблицу, в которую вы можете добавить свои данные несколькими способами, которые будут легко определены любым веб-мастером.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Его основные особенности: очень простой синтаксис, поддержка нескольких представлений, автоматическое создание форм вставки или обновления из таблиц базы данных, отображение определенных полей, поддержка многочисленных плагинов WordPress, экспорт данных в форматах pdf, xml, csv и excel, различные настройки, многоязычная поддержка, поиск по определенным полям, несколько вариантов удаления и многое другое.

скачать | Демонстрация | веб-хостинг

2. Рекомендуемое аудио

Рекомендуемые плагины audio premium wordpress добавляют аудиоплеер

Среди других функций у нас будут: песня на главной странице, аудиоплеер, полностью поддерживающий HTML5, поддержка мобильных устройств, таких как: iPhone, iPad, Android и WP7, воспроизведение аудиофайлов, хранящихся в медиатеке WordPress. , поддержка старых браузеров, поддержка аудиоформатов: mp3, wav, ogg и т. д., многоязычный и многие другие…

3. ChimpMate Pro

Chimpmate - это всплывающий плагин MailChimp для WordPress, который поможет вам превратить ваших читателей в подписчиков. Он был разработан, чтобы увеличить ваш список адресов электронной почты, не раздражая посетителей, с раздражающими всплывающими окнами.

Chimpmate Pro

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

Другие рекомендуемые ресурсы

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

Заключение

Здесь ! Это все для этого урока. Надеюсь, это позволит вам открывать всплывающее окно Elementor из URL-адреса или меню. не стесняйся поделитесь советом с друзьями в социальных сетях.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

JetPopup или Elementor Popup Builder: какой из них вы выбираете?

Первые всплывающие окна были созданы на основе сценария, предложенного Итаном Цукерманом для размещения своего веб-сайта на Tripod в начале 90-х. Его пользователи жалуются на количество размещаемых им объявлений на сайте, сказал он. поэтому решили разместить баннеры на отдельной странице, которая открывается, когда пользователь заходит на страницу.

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

Есть две вещи, которые раздражают пользователей, когда дело доходит до всплывающих окон: когда они прыгают на вас, когда вы не хотите их; и когда его внешний вид полностью отличается от стиля сайта. Эти две проблемы появляются, когда вы используете плагины, которые, кажется, не самого высокого качества.

Два замечательных плагина, созданные специально для Elementor Page Builder, помогут вам создавать всплывающие окна всех типов, форм и стилей, которые вам нужны: Elementor Popup Builder et JetPopup. Поскольку они оба сделаны из той же плоти, что и Elementor, единственный вопрос, который нужно задать, - какой из этих плагинов выбрать. Чтобы помочь вам принять это решение, я собираюсь провести тщательный обзор обоих, и вы сможете сравнить их плюсы и минусы. Итак, начнем !

Загрузка и установка

Это не самый важный критерий при выборе плагина, но чтобы опробовать его, вам нужно сначала его получить. Вот почему я собираюсь начать с самого начала и описать процесс его получения - цены, требуемые усилия и простота процесса установки.

Popup Builder

Факир

Этот плагин был создан командой Elementor. Поэтому мы могли назвать его настоящим «ребенком». Это последнее обновление для Elementor, выпущенное в январе 2019 года для удовлетворения потребностей клиентов. Однако он недоступен для пользователей бесплатной версии Elementor.

Popup Builder включен в профессиональный план подписки. Итак, чтобы иметь возможность создавать всплывающие окна, вы должны сначала установить Elementor Pro. Самый простой тарифный план, который позволяет использовать все возможности Elementor для одного веб-сайта, стоит 49 долларов в год. Итак, с первых шагов (покупка Elementor Pro), вот алгоритм получения Popup Builder:

  • Купить Pro Elementor Page Builder.
  • Зайдите в личный кабинет и загрузите плагин.
  • Перейдите в панель управления вашего веб-сайта, выберите «Плагины»> «Добавить новый», нажмите кнопку «Загрузить плагин» и выберите соответствующий файл .zip.
  • Когда установка будет завершена, активируйте плагин своим лицензионным ключом.
  • Вот Конструктор всплывающих окон, расположенный на вкладке «Шаблоны»> «Всплывающие окна».

Это немного долгий путь, но с Popup Builder вы также получаете огромную коллекцию различных элементов от Elementor, таких как виджеты, шаблоны и другие дополнительные инструменты.

Popup Builder

JetPopup

JetPopups

«Семейство» плагинов Jet уже содержит больше статей 10, и JetPopup - одна из них. Он был тщательно создан специально для Elementor и увеличивает количество доступных инструментов. Этот плагинПолностью совместим с бесплатными и платными версиями. Так что дополнительных покупок делать не нужно. JetPopup стоит 15 долларов, и как только вы его получите, вы сможете использовать его только для одного веб-сайта. Если он вам нужен более чем для одного проекта, вы можете приобрести плагин по лицензии разработчика (это будет стоить вам 45 долларов) и использовать его на пяти веб-сайтах. Алгоритм получения плагина немного проще:

  • Купите плагин на Торговой площадке TemplateMonster. Он будет загружен на ваш компьютер.
  • Перейдите в панель управления вашего веб-сайта, выберите «Плагины»> «Добавить новый», нажмите кнопку «Загрузить плагин» и выберите соответствующий файл .zip.
  • Когда установка будет завершена, активируйте плагин.
  • Вуаля! Когда вы откроете меню настройки Elementor (нажав кнопку «Редактировать с помощью Elementor»), вы увидите раздел JetPopup в левом меню виджета.

Создание всплывающих окон

Теперь, когда инструменты готовы и готовы, я могу попытаться создать всплывающее окно с обоими плагинами и посмотреть, насколько проста и понятна эта функция. Далее я создам основное всплывающее окно и рассмотрим параметры настройки для Popup Builder и JetPopup.

Popup Builder

В Pro Elementor всплывающие окна создаются отдельно от страниц сайта. Чтобы изменить внешний вид веб-сайта, откройте страницу, которую вы хотите настроить, нажмите кнопку «Редактировать с помощью Elementor» и внесите изменения. Но для создания (а затем редактирования) всплывающих окон вам нужно перейти в «Шаблоны»> «Всплывающие окна» и нажать кнопку «Добавить новое всплывающее окно».

Popup Builder


Попробуйте Popup Builder прямо сейчас

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

создание всплывающих окон

После нажатия кнопки «Создать шаблон» вы будете перенаправлены в меню персонализации Elementor. Проще настроить существующий элемент, создав его с нуля. Поэтому сначала вас попросят выбрать подходящую модель.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

библиотека всплывающих окон

Я выбрал одну из моделей, отображаемых вверху списка библиотек. Сразу после выбора вы попадаете в рабочее пространство Elementor, к которому, вероятно, уже привыкли. Параметры персонализации размещены на боковой панели в левой части экрана. У вас есть три вкладки.

Вкладка «Настройки» позволяет изменить макет всплывающего окна, изменить название модели и превью. На вкладке «Стиль» вы можете настроить дизайн - изменить цвета, шрифты, изображения и границы. На вкладке «Дополнительно» также есть набор дополнительных ползунков; например, они предотвращают закрытие всплывающего окна клавишей ESC.

настройки всплывающих окон

Как видите - ничего неожиданного, если вы использовали Elementor раньше, у вас не возникнет никаких проблем с этим плагином. Вот подробное видео, в котором объясняется, как создать всплывающее окно с помощью Popup Builder:

JetPopup

Этот плагин также добавляет новую вкладку на панель инструментов WordPress тема и с его помощью также создаются попапы отдельно от страниц. Готовые к использованию всплывающие окна также хранятся на вкладке «Библиотека всплывающих окон». Чтобы создать новое всплывающее окно, вы можете либо нажать кнопку «Добавить» на предопределенном шаблоне, либо перейти к JetPopup> Добавить новое всплывающее окно, дать шаблону имя и нажать «Редактировать с помощью Elementor».

добавить новое всплывающее окно

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

всплывающие элементы

Плагин JetPopup добавляет в меню виджета единственный пункт - кнопку контекстного действия. Это позволяет определить тип действия, которое будет происходить, когда пользователь нажимает кнопку.

всплывающая кнопка действия

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

Открыть настройки из всплывающего окна не совсем очевидно. Вам нужно нажать на кнопку обслуживания внизу меню. Меню настроек очень похоже на меню Popup Builder, но есть только две вкладки настройки. «Общие настройки» позволяют определить эффект анимации, переименовать модель или определить условия. На вкладке «Стиль» вы можете изменить макеты, цвета, изображения, шрифты и границы.

общие настройки всплывающего окна

JetPopup имеет чуть менее очевидную функциональность, но компенсирует это подробными и полезными видеоуроками.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

JetPopup или Elementor Popup Builder: какой из них вы выбираете?

Первые всплывающие окна были созданы на основе сценария, предложенного Итаном Цукерманом для размещения своего веб-сайта на Tripod в начале 90-х. Его пользователи жалуются на количество размещаемых им объявлений на сайте, сказал он. поэтому решили разместить баннеры на отдельной странице, которая открывается, когда пользователь заходит на страницу.

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

Есть две вещи, которые раздражают пользователей, когда дело доходит до всплывающих окон: когда они прыгают на вас, когда вы не хотите их; и когда его внешний вид полностью отличается от стиля сайта. Эти две проблемы появляются, когда вы используете плагины, которые, кажется, не самого высокого качества.

Два замечательных плагина, созданные специально для Elementor Page Builder, помогут вам создавать всплывающие окна всех типов, форм и стилей, которые вам нужны: Elementor Popup Builder et JetPopup. Поскольку они оба сделаны из той же плоти, что и Elementor, единственный вопрос, который нужно задать, - какой из этих плагинов выбрать. Чтобы помочь вам принять это решение, я собираюсь провести тщательный обзор обоих, и вы сможете сравнить их плюсы и минусы. Итак, начнем !

Загрузка и установка

Это не самый важный критерий при выборе плагина, но чтобы опробовать его, вам нужно сначала его получить. Вот почему я собираюсь начать с самого начала и описать процесс его получения - цены, требуемые усилия и простота процесса установки.

Popup Builder

Факир

Этот плагин был создан командой Elementor. Поэтому мы могли назвать его настоящим «ребенком». Это последнее обновление для Elementor, выпущенное в январе 2019 года для удовлетворения потребностей клиентов. Однако он недоступен для пользователей бесплатной версии Elementor.

Popup Builder включен в профессиональный план подписки. Итак, чтобы иметь возможность создавать всплывающие окна, вы должны сначала установить Elementor Pro. Самый простой тарифный план, который позволяет использовать все возможности Elementor для одного веб-сайта, стоит 49 долларов в год. Итак, с первых шагов (покупка Elementor Pro), вот алгоритм получения Popup Builder:

  • Купить Pro Elementor Page Builder.
  • Зайдите в личный кабинет и загрузите плагин.
  • Перейдите в панель управления вашего веб-сайта, выберите «Плагины»> «Добавить новый», нажмите кнопку «Загрузить плагин» и выберите соответствующий файл .zip.
  • Когда установка будет завершена, активируйте плагин своим лицензионным ключом.
  • Вот Конструктор всплывающих окон, расположенный на вкладке «Шаблоны»> «Всплывающие окна».

Это немного долгий путь, но с Popup Builder вы также получаете огромную коллекцию различных элементов от Elementor, таких как виджеты, шаблоны и другие дополнительные инструменты.

Popup Builder

JetPopup

JetPopups

«Семейство» плагинов Jet уже содержит больше статей 10, и JetPopup - одна из них. Он был тщательно создан специально для Elementor и увеличивает количество доступных инструментов. Этот плагинПолностью совместим с бесплатными и платными версиями. Так что дополнительных покупок делать не нужно. JetPopup стоит 15 долларов, и как только вы его получите, вы сможете использовать его только для одного веб-сайта. Если он вам нужен более чем для одного проекта, вы можете приобрести плагин по лицензии разработчика (это будет стоить вам 45 долларов) и использовать его на пяти веб-сайтах. Алгоритм получения плагина немного проще:

  • Купите плагин на Торговой площадке TemplateMonster. Он будет загружен на ваш компьютер.
  • Перейдите в панель управления вашего веб-сайта, выберите «Плагины»> «Добавить новый», нажмите кнопку «Загрузить плагин» и выберите соответствующий файл .zip.
  • Когда установка будет завершена, активируйте плагин.
  • Вуаля! Когда вы откроете меню настройки Elementor (нажав кнопку «Редактировать с помощью Elementor»), вы увидите раздел JetPopup в левом меню виджета.

Создание всплывающих окон

Теперь, когда инструменты готовы и готовы, я могу попытаться создать всплывающее окно с обоими плагинами и посмотреть, насколько проста и понятна эта функция. Далее я создам основное всплывающее окно и рассмотрим параметры настройки для Popup Builder и JetPopup.

Popup Builder

В Pro Elementor всплывающие окна создаются отдельно от страниц сайта. Чтобы изменить внешний вид веб-сайта, откройте страницу, которую вы хотите настроить, нажмите кнопку «Редактировать с помощью Elementor» и внесите изменения. Но для создания (а затем редактирования) всплывающих окон вам нужно перейти в «Шаблоны»> «Всплывающие окна» и нажать кнопку «Добавить новое всплывающее окно».

Popup Builder


Попробуйте Popup Builder прямо сейчас

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

создание всплывающих окон

После нажатия кнопки «Создать шаблон» вы будете перенаправлены в меню персонализации Elementor. Проще настроить существующий элемент, создав его с нуля. Поэтому сначала вас попросят выбрать подходящую модель.

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

библиотека всплывающих окон

Я выбрал одну из моделей, отображаемых вверху списка библиотек. Сразу после выбора вы попадаете в рабочее пространство Elementor, к которому, вероятно, уже привыкли. Параметры персонализации размещены на боковой панели в левой части экрана. У вас есть три вкладки.

Вкладка «Настройки» позволяет изменить макет всплывающего окна, изменить название модели и превью. На вкладке «Стиль» вы можете настроить дизайн - изменить цвета, шрифты, изображения и границы. На вкладке «Дополнительно» также есть набор дополнительных ползунков; например, они предотвращают закрытие всплывающего окна клавишей ESC.

настройки всплывающих окон

Как видите - ничего неожиданного, если вы использовали Elementor раньше, у вас не возникнет никаких проблем с этим плагином. Вот подробное видео, в котором объясняется, как создать всплывающее окно с помощью Popup Builder:

JetPopup

Этот плагин также добавляет новую вкладку на панель инструментов WordPress тема и с его помощью также создаются попапы отдельно от страниц. Готовые к использованию всплывающие окна также хранятся на вкладке «Библиотека всплывающих окон». Чтобы создать новое всплывающее окно, вы можете либо нажать кнопку «Добавить» на предопределенном шаблоне, либо перейти к JetPopup> Добавить новое всплывающее окно, дать шаблону имя и нажать «Редактировать с помощью Elementor».

добавить новое всплывающее окно

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

всплывающие элементы

Плагин JetPopup добавляет в меню виджета единственный пункт - кнопку контекстного действия. Это позволяет определить тип действия, которое будет происходить, когда пользователь нажимает кнопку.

всплывающая кнопка действия

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

Открыть настройки из всплывающего окна не совсем очевидно. Вам нужно нажать на кнопку обслуживания внизу меню. Меню настроек очень похоже на меню Popup Builder, но есть только две вкладки настройки. «Общие настройки» позволяют определить эффект анимации, переименовать модель или определить условия. На вкладке «Стиль» вы можете изменить макеты, цвета, изображения, шрифты и границы.

общие настройки всплывающего окна

JetPopup имеет чуть менее очевидную функциональность, но компенсирует это подробными и полезными видеоуроками.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки


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

Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки | Тьерри М. | Середина

Всплывающее окно, которое я создал для этой цели

Сначала создайте свое всплывающее окно. Пусть будет что угодно. Для этого конкретного клиента веб-разработки я настраивал модальное окно с контактной формой.

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

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

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

Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки | Тьерри М. | Середина

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

Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки | Тьерри М. | Середина

Откройте вкладку Advanced.

Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки | Тьерри М. | Середина

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

Как создать ссылку на всплывающее окно Elementor с помощью якорной ссылки | Тьерри М. | Середина

Отличная работа! Теперь вы можете ссылаться из любого места на любой странице вашего веб-сайта, и откроется модальное / всплывающее окно.

Читайте также: