Как сделать всплывающее окно открытым при нажатии кнопки с помощью Elementor? [2022]

Интересно, насколько интересным будет ваш веб-сайт для посетителей, если всплывающее окно откроется при нажатии кнопки ? Если вам нужна такая интерактивная кнопка, которая открывает всплывающее окно, то в самом популярном конструкторе веб-сайтов Elementor есть множество способов. Сегодня мы покажем вам, как легко создать потрясающее всплывающее окно нажатием кнопки без программирования.

5 лучших вариантов использования кнопки с модальным всплывающим окном Elementor

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

1. Для привлечения потенциальных клиентов для бизнеса

Для бесперебойного ведения бизнеса и высококлассного роста компании вам нужны лиды. Развивая потенциальных клиентов, вы можете превратить их в своих постоянных клиентов. А веб-сайт — лучшее средство для привлечения лидов. Если сделать так, чтобы всплывающее окно открывалось по нажатию кнопки, то вы можете легко собирать имена потенциальных клиентов , номера телефонов, адреса электронной почты и другие данные.

2. Сбор подписки по электронной почте

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

3. Маркетинговые акции и продажи

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

4. Делитесь интересными объявлениями

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

5. Использовать как блокировку контента

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

Почему Elementor — лучшая платформа для создания всплывающих окон на кнопке?

На веб-сайтах существует несколько способов создания всплывающих окон, открывающихся по нажатию кнопки в WordPress. Один из способов сделать это — использовать собственное кодирование или нанять экспертов. Если вы не разбираетесь в технологиях, то создание кодов или наем экспертов может стоить вам целое состояние. Но когда вы используете Elementor — самый популярный конструктор веб-сайтов WordPress, вы можете сделать это без кодирования .

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

Учебное пособие без кода: как сделать модальное всплывающее окно Elementor открытым при нажатии кнопки?

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

Шаг 1: начните работу с Elementor PRO

Если вы планируете создать модальное всплывающее окно, открывающееся при нажатии кнопки с помощью Elementor, вам необходимо приобрести Elementor PRO . С помощью эксклюзивной функции Elementor PRO, Elementor Popup Builder , вы можете мгновенно создавать всплывающие окна, которые открываются по нажатию кнопки. Elementor поставляется с универсальными тарифными планами, начиная с 49 долларов . После получения плагина Elementor PRO установите и активируйте его на своем веб-сайте WordPress.

Шаг 2: Создайте шаблон с помощью Elementor Popup Builder

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

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

Шаг 3: Настройте и персонализируйте шаблон всплывающего окна

После этого откроется панель редактора Elementor со всеми параметрами конфигурации с левой стороны. Оттуда вы можете легко настроить всплывающее окно, открывающееся при нажатии кнопки. Вы можете сохранить модальное всплывающее окно с Boxed или Full Width . Точно так же вы можете настроить высоту модального всплывающего окна, интервал между столбцами, положение столбца, вертикальное выравнивание, переполнение, HTML-теги и многое другое. Различные типы ширины предлагают различные типы конфигурации.

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

Шаг 4: Настройте условия и триггеры

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

На вкладке «Триггеры» вы должны установить, когда вы хотите, чтобы всплывающее окно открывалось при нажатии кнопки. Поскольку мы хотим просмотреть всплывающее окно с помощью нажатия кнопки, включите «При нажатии» . В «Дополнительных правилах» вы можете настроить такие условия, как, кому показывать всплывающее окно, показывать при получении формы и многое другое. Затем нажмите кнопку «Сохранить и закрыть» . Вот как легко вы можете создать шаблон всплывающего окна Elementor. Затем вернитесь в панель управления WordPress.

Шаг 4: добавьте кнопку Elementor там, где вам нужно

Теперь откройте страницу, на которой вы хотите установить всплывающее окно, открывающееся при нажатии кнопки. Если вы хотите создать новую страницу, то перейдите в Страницы → Добавить новую . в этом уроке мы собираемся соединить всплывающее модальное окно с кнопкой Elementor. Перетащите кнопку Elementor на свою страницу.

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

Окончательный вид всплывающего окна открывается при нажатии кнопки Elementor

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

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

Бонус за основные дополнения для пользователей Elementor

Essential Addons For Elementor — самая мощная библиотека Elementor с более чем 1 миллионом активных пользователей и более чем 85 уникальными виджетами. А его виджет Creative Button отличается более универсальным дизайном и многоцелевым удобством использования для своих клиентов. Если вы используете виджет кнопки Essential Addons, то аналогично кнопке Elementor вы можете легко открыть всплывающее окно при нажатии кнопки.

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

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