Looking for a way to create a full screen popup for your WordPress site?
A full screen popup can be incredibly effective for capturing leads. They’re designed to convince and convert by pulling the visitor’s entire focus on themselves.
But having to code one from scratch is a real pain. For one thing, you’d have to know enough HTML, CSS, and Javascript to create the popup along with trigger rules for when to show it. Then, you’d have to create a manual integration with your email service provider. And finally, you’d have to deal with any privacy and security issues.
Good news: there’s a much simpler way.
In this article, we’re going to show you how to launch a full screen popup in WordPress with zero coding in less than 10 minutes.
Давайте начнем.
What is a Full Screen Popup in WordPress?
A full screen popup is an opt-in form that popups up with a full screen cinematic effect. Think of it as watching a movie on Netflix in full-screen mode. When a full screen optin form pops up, you can’t see the rest of the WordPress site. This way, your entire focus is on the popup.
Вот пример:
You can use full screen popups to:
- Welcome new visitors
- Offer a discount coupon
- Point visitors to their best content
- Send visitors to their social media profiles
And more. You can even create popup contact forms. Popups are super flexible and as long as you’re creative, you can set up high-converting ones easily.
How to Create a Full Screen Popup in WordPress
Now that you understand what a full screen popup is and why you’d want to create one, how do you create a full screen popup? We recommend using OptinMonster to create all your popups.
OptinMonster — это лучший набор инструментов для конверсии в мире, и мы сами им пользуемся. OptinMonster очень просто создавать мощные всплывающие окна, которые конвертируют. И вам никогда не придется использовать какой-либо код.
We even wrote a full review of OptinMonster.
You can check that out, or get started with your campaign right now. All you have to do is signup for OptinMonster and follow along with the rest of this article.
Step #1: Create a Campaign
Перейдите на панель управления OptinMonster и нажмите кнопку Создать:
Выберите опцию Шаблон, чтобы начать создание формы подписки с использованием предварительно разработанного шаблона:
Select the Fullscreen to get started with full screen popup templates:
Then, choose a campaign template. You can choose whatever template you like, but we’re going with the Product Recommendation (Gamified) campaign template for this tutorial.
После выбора шаблона дайте вашей кампании имя. Помните, что это имя кампании предназначено для вас, и вы, вероятно, создадите множество таких всплывающих окон с различными параметрами таргетинга. Поэтому дайте кампании осмысленное имя, иначе вы сильно запутаетесь позже.
Also, depending on your plan, you can also use OptinMonster on multiple sites. So, select the website where you want to display your campaign as well.
Press Start Building when you’re done.
Step #2: Edit Your Popup
With OptinMonster, you’ll get a visual drag and drop popup builder. Once you’re done creating your campaign, you’ll be able to edit even the tiniest details about your popup. Start by editing your popup headline:
Самое удивительное здесь то, что вы просто нажимаете на любой текст, который хотите отредактировать, и меняете его прямо на месте. Нет необходимости заполнять форму или редактировать какой-либо HTML-код во всплывающем окне.
You can edit everything you want about your full screen popup. When you’re happy with the optin’s appearance, you can move on to more advanced settings.
Step #3: Set Full Screen Popup Display Rules
Display rules are meant to define when your campaign shows up on your site and who sees it.
Our recommendation is that you change the trigger condition to exit-intent:
Click Next Step to choose the Action. Here, we recommend that you set Show the campaign view to Optin View, set the show with MonsterEffect to any entry animation you like, and play sound effect to any sound effect for your popup.
And then, click the Next Step button. You can see the full extent of your settings in the Summary tab.
Шаг № 4: Добавьте кнопку «Нажми, чтобы подписаться» в свое всплывающее окно
Push-уведомления помогают вам автоматически увеличивать трафик вашего сайта и вовлеченность. И если вы управляете интернет-магазином, PushEngage также помогает вам увеличить продажи, помогая создавать автоматические push-уведомления для электронной коммерции.
Вы можете начать бесплатно, но если вы серьезно относитесь к развитию своего бизнеса, вам следует приобрести платный план. Кроме того, прежде чем покупать какую-либо службу push-уведомлений, ознакомьтесь с этим руководством по стоимости push-уведомлений.
Вот краткий обзор того, что вы получаете с PushEngage:
- Высококонверсионные автоматизированные кампании
- Множеством вариантов таргетинга и планирования кампаний
- Отслеживанием целей и расширенной аналитикой
- Интеллектуальным A/B-тестированием
- Выделенный менеджер по успеху
Вы увидите, что PushEngage — это, без сомнения, лучший выбор, если вы хотите увеличить трафик, вовлеченность и продажи для своего бизнеса. И если у вас ограничен бюджет, вы всегда можете немного проявить креативность с вашими push-уведомлениями.
Сначала добавьте блок HTML в ваше всплывающее окно из боковой панели в OptinMonster.
Здесь мы добавим код для сбора подписчиков push-уведомлений. Сначала вставьте следующий код, чтобы создать кликабельную кнопку:
<button onclick="subscribeOnClickButton()" style="border: none; width: 100%; padding-left: 15%; padding-right:15%; text-align: center; display: inline-block; color: white;">Get Updates via Push Notifications</button>Вставьте код туда, где указано, что можно добавить HTML:
Конечно, вы можете поэкспериментировать со стилями, чтобы сделать его более привлекательным. Далее мы сделаем так, чтобы кнопка собирала подписчиков push-уведомлений при нажатии.
Перейдите на главную страницу PushEngage и нажмите кнопку Начать:
Затем выберите бесплатный план, чтобы попробовать PushEngage, или выберите платный план, если вы серьезно относитесь к развитию своего бизнеса. Платные планы включают больше опций для кампаний и возможность создавать еще большие списки подписчиков.
В вашей панели управления PushEngage перейдите в раздел Настройки сайта » Детали сайта и нажмите кнопку Нажмите здесь для инструкций по настройке. В разделе Любой сайт вы получите код установки:
ВНИМАНИЕ: Вам нужно скопировать код, который вы получите из вашей панели управления. Код уникален для каждого пользователя PushEngage. Вы не сможете скопировать код из изображения и собирать подписчиков push-уведомлений.
Когда у вас будет код в вашей панели управления PushEngage, возьмите второй скрипт и добавьте к нему дополнительный код. Ваш окончательный код должен выглядеть примерно так:
<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>Добавьте этот код в блок HTML в OptinMonster сразу после кода вашей кнопки и между блоком кода <div></div>, и вы закончите!
Step #5: Setup Your Email Integration
The next step is to set up your email integration. Click Add New Integration from the Integrations tab and select your email service provider:
We recommend using Drip for your email marketing if you don’t already have an email service provider.
Step #6: Publish Your Full Screen Popup in WordPress
Когда вы создаете новую кампанию, по умолчанию она приостановлена.
Перейдите на вкладку Опубликовать в верхнем меню, чтобы увидеть Параметры публикации. Затем установите статус Опубликовать и выберите платформу веб-сайта:
Если у вас сайт на WordPress, плагин OptinMonster автоматически выполнит остальную настройку. То же самое касается Shopify и BigCommerce. Для любого другого сайта нажмите Любой сайт и вставьте код вставки в раздел head вашего веб-сайта:
И вы закончили!
What to do After Creating a Full Screen Popup in WordPress
На этом всё, друзья!
Let us know if this article helped. Creating popups on your site can help you convert your traffic into email subscribers and genuine business leads. And we highly recommend that you start creating full screen popups right away.
And if you’re looking for an affordable way to grow your traffic, we recommend using push notifications. Push notifications can help you bring in more repeat traffic and site engagement. You can also create automated push notification campaigns that generate sales.
Не убедились? Ознакомьтесь с этими ресурсами:
- 7 умных стратегий для повышения вовлеченности клиентов
- Эффективны ли push-уведомления? 7 статистических данных + 3 совета экспертов
- Как настроить push-уведомления о брошенной корзине (простое руководство)
- Как добавить плагин веб-уведомлений WordPress на ваш сайт
Мы рекомендуем использовать PushEngage для создания ваших кампаний push-уведомлений. PushEngage — это программное обеспечение для push-уведомлений №1 в мире. Так что, если вы еще этого не сделали, начните использовать PushEngage сегодня!
