Всплывающие окна: абсолютное зло или эффективный инструмент
Содержание:
- Hello Bar – сервис для создания и тестирования баннеров
- Как правильно оформить pop-up
- Таблица стилей для всплывающих окон.
- Центрируйте окна вертикально
- Что лучше?
- Модальное окно
- Позиционирование всплывающего окна при изменении размеров окна браузера
- Комментарии
- Сертифицированный курс «Ведение бюджетного учета в программе «1С:Бухгалтерия бюджетного учреждения 8»
- CSS
- HTML
- Основные причины, по которым pop-up не работает
- Интересные идеи по настройке всплывающих окон
- Как сделать всплывающее окно на сайте WordPress
- JS JSON
- Рейтинг качественных моделей на 2020 год
- МЕНЮ
Hello Bar – сервис для создания и тестирования баннеров
У Hello Bar, в отличие от предыдущих сервисов, только одна функция — создание баннера
Он закрепляется в верхней части сайта и решает разные задачи: приветствует пользователей, сообщает об акциях и скидках, направляет посетителей к важному контенту, собирает адреса электронной почты
Главное достоинства Hello Bar — возможность создавать разные баннеры в зависимости от контента страницы. Например, в блоге можно вывести окно с предложением подписаться на новости, а в магазине показать панель с информацией о скидке по промо-коду. На старших тарифах количество не ограничено: вы можете создавать новый баннер хоть для каждой страницы, а затем сравнивать их показатели с помощью A/B-тестирования.
Плюсы:
- Шаблоны и автоматическое определение цвета для быстрого создания подходящего дизайна.
- Адаптивный дизайн.
- Большой выбор целей для всплывающих окон.
- A/B-тестирование для выбора наиболее эффективных баннеров.
- Простые настройки для таргетирования по дате, типу устройства, местоположению клиента на сайте, времени нахождения на странице.
- Интеграция с другими сервисами маркетинга и рассылок.
Минусы:
- Высокая стоимость.
- Бесплатный тариф подходит только для изучения базовых возможностей сервиса.
Стоимость:
- Бесплатный тариф — не более 5000 просмотров баннера в месяц, не более 10 всплывающих окон, базовые возможности для изменения дизайна, таргетирование только по типу устройства, 1 сравнительный тест, стандартные возможности для интеграции с другими маркетинговыми сервисами, отображение логотипа Hello Bar.
- Growth ($29 в месяц) — до 50 000 просмотров, безлимитное количество всплывающих окон, продвинутые инструменты кастомизации и возможности для таргетирования, неограниченное A/B-тестирование, продвинутые возможности для интеграции, удаление логотипа Hello Bar.
- Elite ($99 в месяц) — до 500 000 просмотров, премиальные настройки дизайна, возможности таргетирования и интеграции, приоритетная техническая поддержка.
При оплате тарифа на год 2 месяца вы получаете в подарок.
Как правильно оформить pop-up
При создании всплывающих окон главная цель — создать pop-up, который будет решать поставленные задачи и не будет раздражать.
Вот 5 правил хорошего попапа:
- Понятный интерфейс. У пользователя должна быть возможность сразу принять решение, а не разбираться с функционалом. Текст, поля и кнопки должны быть крупными и заметными.
- Адаптивность. Учитывайте, что немалая часть трафика приходится на мобильную аудиторию. Всплывающее окно должно полностью помещаться на экране смартфона и быть удобным для просмотра. С закрытием pop-up не должно возникать сложностей.
- Уместность демонстрации. Нужно учитывать логику показа окна и релевантность текущим действиям пользователя. Например, нецелесообразно показывать форму подписки тем, кто уже оставил свой email или предлагать подписку на новые статьи сразу после перехода в блог.
- Pop-up не должен быть навязчивым. Если пользователь закрыл окно, оно не должно открываться вновь. Также не стоит несколько раз подряд предлагать одно и то же. Можно предусмотреть на окне надпись «Я же подписан» или «Не показывать больше».
- Чёткий призыв к действию. Пользователю нужно понимать, какие действия от него ожидаются. Например — «Подписаться на рассылку», «Перейти в каталог товаров», «Читать блог».
Практически в любом сервисе по созданию всплывающих окон все перечисленные требования можно настроить вручную. Если же вы ставите ТЗ на создание попапов верстальщику, не забудьте прописать это в требованиях.
При создании всплывающих окон, нужно учитывать, что попапы — это форма рекламы. Поэтому, следует соблюдать требования Coalition for Better Ads — «Коалиции за лучшую рекламу», созданную ведущими международными торговыми ассоциациями и компаниями. Требованиями Coalition for Better Ads руководствуется Google Chrome, когда решает, нужно ли блокировать сайт и в каком виде его увидит пользователь.
Согласно Coalition for Better Ads нельзя:
- вставлять в попапы видео с автозапуском;
- настраивать фиксированное всплывающее окно, закрывающее 30+% площади экрана;
- применять агрессивные эффекты вроде динамического изменения цветов или мигающих элементов.
Полный текст требований Coalition for Better Ads можно изучить на сайте коалиции. Кроме того, отчет о качестве рекламы доступен в сервисе Google Search Console. Владелец сайта с подтверждёнными правами может изучить отчёт и выявить нарушения стандартов Coalition for Better Ads.
Таблица стилей для всплывающих окон.
Приведём здесь только стили, относящиеся к анимации на CSS3, всё-такие наша основная задача — прокачать скилл владения JavaScript.
CSS
.fadeIn, .fadeOut, .slideInDown, .slideOutUp {
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
animation-timing-function: ease-out;
}
@keyframes fadeIn {
from {opacity: 0; visibility: hidden;}
to {opacity:1; visibility: visible;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
opacity: 1;
visibility: visible;
}
@keyframes fadeOut {
from {opacity: 1; visibility: visible;}
to {opacity:0; visibility: hidden;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
opacity: 0;
visibility: hidden;
}
@keyframes slideInDown {
from {top: -320px;}
to {top: 180px;}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
top: 180px;
}
@keyframes slideOutUp {
from {top: 180px;}
to {top: -320px;}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
top: -320px;
}
|
1 |
.fadeIn, .fadeOut, .slideInDown, .slideOutUp { -webkit-animation-duration0.4s; animation-duration0.4s; animation-timing-functionease-out; } @keyframes fadeIn { from {opacity;visibilityhidden;} to {opacity1;visibilityvisible;} } .fadeIn { -webkit-animation-namefadeIn; animation-namefadeIn; opacity1; visibilityvisible; } @keyframes fadeOut { from {opacity1;visibilityvisible;} to {opacity;visibilityhidden;} } .fadeOut { -webkit-animation-namefadeOut; animation-namefadeOut; opacity; visibilityhidden; } @keyframes slideInDown { from {top-320px;} to {top180px;} } .slideInDown { -webkit-animation-nameslideInDown; animation-nameslideInDown; top180px; } @keyframes slideOutUp { from {top180px;} to {top-320px;} } .slideOutUp { -webkit-animation-nameslideOutUp; animation-nameslideOutUp; top-320px; } |
Полный код таблицы стилей вы можете взять из архива. Отметим здесь только некоторые особенности.
И подложке, и всплывающему окну задано . Для чего это необходимо? Во-первых, их позиционирование будет осуществляться относительно границ экрана, а не документа. Во-вторых, при прокручивании колёсика мыши, позиционирование overlay и pop-up останется неизменным.
Продолжая разговор о позиционировании, остановимся подробнее на положении всплывающего окна. По вертикали задано смещение , т. е. расстояние от верхнего края экрана монитора составит . Вы можете установить своё значение — это совершенно не принципиально.
По горизонтали нам необходимо всплывающее окно установить точно по центру. Это делается в два этапа:
-
1
Задаём pop-up отступ слева равным 50% — , при этом его левая граница будет совпадать с центром экрана по горизонтали.
-
2
Уменьшим отступ слева на половину ширины pop-up c помощью свойства ‘margin-left’ с отрицательным значением — . Теперь центр по горизонтали у всплывающего окна совпадает с центром экрана.
Центрируйте окна вертикально
Просто добавьте класс к элементу с классом , чтобы вертикально отцентрировать окно. Если у модального окна длинный контент, вы можете дополнительно применить класс к , чтобы сделать контентную часть прокручиваемой. Пример:
<!-- HTML-код кнопки (триггер модального окна) -->
<a href="#modalCenter" role="button" class="btn btn-primary" data-toggle="modal">Вертикально-отцентрированное окно</a>
<!-- HTML-код модального окна -->
<div id="modalCenter" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Вертикальное выравнивание</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Здесь текст...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
Что лучше?
На самом деле каждый приведенный метод отлично работает и может применяться на любых веб-сервисах. Все зависит от желания разработчика, его умений и сложности создаваемого проекта.
Поэтому экспериментируйте, изучайте новые способы реализации и не забывайте подписываться на мой блог. Я всегда рад новым подписчикам! До встречи! Пока-пока!
Прочитано: 1031 раз
Модальное окно
Для создания всплывающего модального окна, берём элемент , оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
</style>
</head>
<body>
<div id="okno">
Всплывающее окошко!
</div>
<a href="#okno">Вызвать всплывающее окно</a>
</body>
</html>
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему и оформив:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#okno:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
<a href="#okno">Вызвать всплывающее окно</a>
</body>
</html>
Попробовать »
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :
<div id="zatemnenie"> <div id="okno"> Всплывающее окошко!<br> <a href="#" class="close">Закрыть окно</a> </div> </div>
Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему и перенаправляем ссылку вызова окна на него.
У дочернего убираем (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
</style>
</head>
<body>
<div id="zatemnenie">
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
</div>
<a href="#zatemnenie">Вызвать всплывающее окно</a>
</body>
</html>
Попробовать »
Позиционирование всплывающего окна при изменении размеров окна браузера
В начале статьи я обещал вам показать, как сохранить позиционирование открытого всплывающего окна при изменении размера окна браузера. Настало время поговорить и об этом. Т. к. по горизонтали pop-up центрируется с помощью CSS и это уже работает, то поговорим о центрировании по вертикали
Хочу обратить ваше внимание, что центрирование по вертикали должно происходить только открытого всплывающего окна, т. к. закрытое окно всегда находится за пределами верхней границы окна браузера
Реализовано позиционирование будет в простенькой функции, состоящей всего из одной строки:
JavaScript
function setTopOpenOuter() {
// берётся половина разности между текущей высотой окна браузера
// и родительским контейнером
// результат будет являться значением свойства ‘top’ родительского элемента
// всплывающих окон
outer.style.top = (window.innerHeight — outer.offsetHeight) / 2 + ‘px’;
}
|
1 |
functionsetTopOpenOuter(){ // берётся половина разности между текущей высотой окна браузера // и родительским контейнером // результат будет являться значением свойства ‘top’ родительского элемента // всплывающих окон outer.style.top=(window.innerHeight-outer.offsetHeight)/2+’px’; } |
Вызываться данная функция будет по событию . Назначим обработчик события, как обычно, с помощью функции .
JavaScript
window.addEventListener(‘resize’, setTopOpenOuter);
|
1 |
window.addEventListener(‘resize’,setTopOpenOuter);
|
и запишем этот код в самый конец функции — как говорилось выше, изменение позиционирования может быть только у открытого всплывающего окна.
Чтобы это условие выполнялось в полном объёме, необходимо после закрытия всплывающего окна, удалить этот обработчик. Для этого в конец функции необходимо добавить такую строчку:
JavaScript
window.removeEventListener(‘resize’, setTopOpenOuter);
|
1 |
window.removeEventListener(‘resize’,setTopOpenOuter);
|
Итак, мы полностью рассмотрели различные варианты открытия всплывающих окон — и с использованием анимации CSS3, и с применением js-анимации. Хочу добавить только, что по такому же принципу можно сделать появления pop-up из-за нижней или боковой границы окна браузера.
Валидация формы обратной связи.
Таймер обратного отсчёта
Комментарии
Всего: 4 комментария
Требования при посте комментариев:
-
Комментарии должны содержать вопросы и дополнения по статье, ответы на вопросы других пользователей.
Комментарии содержащие обсуждение политики, будут безжалостно удаляться. -
Для удобства чтения Вашего кода, не забываейте его форматировать. Вы его можете подсветить код с помощью тега :
— — HTML;
— — CSS;
— — JavaScript. - Если что-то не понятно в статье, постарайтесь указать более конкретно, что именно не понятно.
Сертифицированный курс «Ведение бюджетного учета в программе «1С:Бухгалтерия бюджетного учреждения 8»
CSS
А вот и стили для формирования модальных окон:
.main {
background: #aaa url(../images/bg.jpg) no-repeat;
width: 800px;
height: 600px;
margin: 50px auto;
}
.panel {
background-color: #444;
height: 34px;
padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
border: 2px solid #aaa;
color: #fff;
display: block;
float: right;
margin-right: 10px;
padding: 5px 10px;
text-decoration: none;
text-shadow: 1px 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
border-color: #eee;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
margin-bottom: 10px;
}
.popup label {
display: inline-block;
text-align: left;
width: 120px;
}
.popup input, .popup input {
border: 1px solid;
border-color: #999 #ccc #ccc;
margin: 0;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.popup input:hover, .popup input:hover {
border-color: #555 #888 #888;
}
HTML
HTML состоит их двух частей:
– ссылки на окно;
– собственно самого окна
Важно! Менять разметку окон нельзя иначе оно не будет работать.
Само окно может быть размещено на странице где угодно
Вариант 1
<!— ССЫЛКА НА ОКНО —>
<a href=»javascript:void(0)» onclick=»this.nextElementSibling.style.display=’block’;»>Нажмите на ссылку</a>
<!— ОКНО —>
<div id=»parent_popup_click1″ class=»parent_popup_click»>
<div class=»popup_click»>
<h2>Всплывающее окно на CSS</h2>
<p><center>Тут может быть абсолютно любой html или даже скрипты</center>
<a class=»close» title=»Закрыть» onclick=»document.getElementById(‘parent_popup_click1′).style.display=’none’;»>X</a>
</div>
</div>
|
1 |
<!—ССЫЛКАНАОКНО—> <ahref=»javascript:void(0)»onclick=»this.nextElementSibling.style.display=’block’;»>Нажмитенассылку<a> <!—ОКНО—> <div id=»parent_popup_click1″class=»parent_popup_click»> <div class=»popup_click»> <h2>ВсплывающееокнонаCSS<h2> <p><center>Тутможетбытьабсолютнолюбойhtmlилидажескрипты<center> <aclass=»close»title=»Закрыть»onclick=»document.getElementById(‘parent_popup_click1′).style.display=’none’;»>X<a> <div> <div> |
Вариант 2
<!— ССЫЛКА НА ОКНО —>
<a href=»javascript:void(0)» onclick=»this.nextElementSibling.style.display=’block’;»>Нажмите на ссылку</a>
<!— ОКНО —>
<div id=»parent_popup_click1″ class=»modal» onclick=»document.getElementById(‘parent_popup_click1′).style.display=’none’;»>
<div class=»modal-content»>
<a class=»closess» title=»Закрыть» onclick=»document.getElementById(‘parent_popup_click1′).style.display=’none’;»>×</a>
<p>Some text in the Modal..</p>
</div>
</div>
|
1 |
<!—ССЫЛКАНАОКНО—> <ahref=»javascript:void(0)»onclick=»this.nextElementSibling.style.display=’block’;»>Нажмитенассылку<a> <!—ОКНО—> <div id=»parent_popup_click1″class=»modal»onclick=»document.getElementById(‘parent_popup_click1′).style.display=’none’;»> <div class=»modal-content»> <aclass=»closess»title=»Закрыть»onclick=»document.getElementById(‘parent_popup_click1′).style.display=’none’;»>×<a> <p>Some text inthe Modal..<p> <div> <div> |
Основные причины, по которым pop-up не работает
Некоторые из указанных причин могут оказаться неожиданными, но именно из-за них эффективность поп-ап сводится к нулю.
Всплывающее окно не настроено под нужды пользователей смартфонов
Примерно треть гостей на сайты заходят через мобильные устройства. Если не адаптировать баннер под электронные гаджеты, то он будет некрасиво растягивать экран или вовсе отображаться некорректно. Обязательно нужно проверить функциональность pop-up как в браузерной, так и в мобильной версиях сайта.
«Тяжелые» плагины не позволяют быстро загрузить страницу
Каждая новая надстройка замедляет работу сайта. Если страница медленная, то посетители не захотят ждать ее загрузки. Проверить скорость работы вашего ресурса можно с помощью сервисов Sitespeed.ru или PageSpeed Insights, а при необходимости провести работы по ускорению сайта.
Кроме того, некоторые плагины могут вступать в конфликт друг с другом, деформируя вид страницы со всплывающим окном
Перед тем как демонстрировать всплывающие окна посетителям, важно убедиться, что все выглядит и работает нормально
Всплывающее окно имеет некачественный дизайн
Дизайн инструментов поп-ап должен быть проработан до мелочей и перекликаться с общей стилистикой сайта
Важно сделать действительно удобную страницу для посетителей.
Текст для всплывающего окна неуникален
Если посетитель заметит, что вы пользуетесь чужим интеллектуальным трудом, копируя текст с популярных сайтов, на лояльность посетителей рассчитывать не придется.
Используется нерелевантный контент
Содержание всплывающего окна должно быть тщательно продуманным. Например, если покупатель положил товар в корзину, но в последний момент закрывает вкладку, ему можно предложить скидку или бесплатную доставку, но никак не другой товар, поскольку выбор уже сделан, но на покупку посетитель так и не решился.
Интересные идеи по настройке всплывающих окон
1. Заменяем баннеры всплывающими окнами
Указанный прием имеет как достоинства, так и недостатки. К числу положительных аспектов можно отнести:
- Возможность сэкономить место на странице, что особенно актуально, если баннер был большим.
- Всплывающее окно загружается мгновенно, а на открытие «тяжелого» баннера требуется время.
Все это может положительно сказаться на конверсии.
Минус здесь всего один:
Окошко поп-ап не может разместить много информации, в отличие от полноценного баннера. Но креативный подход позволит избежать трудностей.
2. Заменяем подписки всплывающими окнами
Речь идет о формах подписки, которые могут быть размещены и на отдельных страничках, и сбоку и внизу главной. Можно просто убрать все поля, заменив их единственной кнопкой для клика, которая и будет вызывать всплывающее окно. Оно-то уже сможет содержать всю необходимую информацию и поля.
Достоинства такого подхода:
- Увеличивается число подписчиков, поскольку столь корректный подход вызывает расположение со стороны посетителей. В случае когда форма подписки доступна сразу, больше риск, что ее проигнорируют.
- Отсутствие лишней информации помогает сделать страницу более аккуратной.
Среди недостатков можно назвать:
Маркетологу следует быть осторожным при создании кнопок, поскольку пользователь может неверно истолковать их значение. Так, от слова «Загрузить» люди будут ждать возможности скачать файлы.
3. Заменяем слова благодарности всплывающими окнами
Нет необходимости создавать целю страницу сайта под слова благодарности. Но вполне можно демонстрировать popup окно по истечении определенного времени.
Достоинства подхода:
Потребуется совсем немного времени на создание окна, чем на оформление полноценной страницы.
Недостатки:
- Не все всплывающие окна могут перенаправлять посетителя на социальные сети.
- Создание более хитрого кода с благодарностью требует привлечения хорошего специалиста.
4. Благодарность за подписку заменяем всплывающим окном
Пример схож с предыдущим. Но вместо отсылки к форме с благодарностью, происходит перенаправление на продающую страницу с необходимыми ссылками и словами благодарности за подписку. Это окно pop-up может также содержать данные о платном товаре или предложения поучаствовать в акции.
Достоинства подхода:
- Не нужно создавать отдельную страницу благодарности.
- Увеличивается конверсия, поскольку посетители при закрытии окна будут попадать на загруженную полностью страницу с рекламой товаров. Это ненавязчиво подтолкнет к покупке.
Недостатки:
Необходимо добиться моментального появления всплывающего окна, чтобы посетители не заподозрили сайт в обмане.
5. Секретный баннер pop-up
Идеальное решение для постоянных покупателей и людей, которые долгое время пребывают на страницах сайта. Можно их порадовать выгодными предложениями, доступными при переходе по ссылкам, указанным во всплывающем окне. Правильная настройка позволит сделать ссылку доступной только для ограниченного числа лиц.
Достоинства подхода:
Своеобразное пасхальное яйцо поможет добиться лояльности от определенного числа посетителей ресурса.
Недостатки:
При неправильной настройке «секретное» окно будет всплывать абсолютно для всех, что приведет компанию к убыткам.
6. Персонализация в мини-версии
Персонализацию сейчас используют не так активно, как пару лет назад. Но в совокупности с pop-up она могла бы работать крайне эффективно. Разработчику нужно будет всего лишь настроить автоматическое заполнение формы подписки на соответствующей странице, а все прочие ненужные строки заменить рекламой.
Такой метод сулит только плюсы:
- Можно добиться высоких показателей конверсии, ведь от посетителя не потребуются усилия по заполнению полей. Достаточно лишь кликнуть на кнопку.
- Стандартная страница сайта будет вмещать больше рекламы.
7. Всплывающее окно внутри страницы
Ненавязчивый способ продемонстрировать всплывающее окно на сайте — разместить ссылку на него внутри страницы. Чем объемнее статья, тем больше кнопок, вызывающих поп-ап, можно разместить.
Достоинства инструмента:
- Абсолютно ненавязчивы способ показать дополнительную информацию или пригласить в рассылку.
- Конверсия повышается чрезвычайно легко, поскольку пользователь сам нажимает на кнопки вызова всплывающего окна.
Недостатки:
Статья будет содержать ненужные элементы, потому потребуется настойка страницы. Человек, оформивший подписку или отказавшийся от нее, не должен встречать в тексте те же кнопки.
Как сделать всплывающее окно на сайте WordPress
Вот мы и добрались до самого главного, каким способом можно сделать попап на сайте собранном на CMS WordPress. Сразу отметим, что задача это не сложная и существует очень много инструментов, позволяющих создавать красивые попапы, которые будут отвечать всем рекомендациям, написанным выше.
Также помимо стандартных попапов, некоторые плагины умеют легко создавать и остальные виды всплывающих окон.
Давайте посмотрим на 5 плагинов для создания всплывающих окон, а один полностью настроим для наглядного примера.
Master Popups
Название плагина говорит само за себя. Плагин имеет 25 шаблонов всплывающих окон, 12 форм подписки на рассылку и красивый drag-n-drop редактор.
Вы можете таргетировать попап по типам страниц или постов, по тегам и категориям. Можно показывать одну всплывашку на весь сайт.
Количество попапов в плагине не ограничено, вы можете делать столько окон, сколько вам нужно. Каждому окну можно задавать свою ширину и высоту, менять цвет заднего фона страницы,
Помимо прочего, вы можете настраивать даже свой собственный прелоадер для каждого попапа.
Для каждого всплывающего окна можно задать шорткод и вызывать его по клику на кнопку или ссылку. Все настройки плагина можно экспортировать для использования на другом сайте.
К сожалению, плагин обновляется не так часто как хотелось бы, тем не менее, он прекрасно работает с последними версиями WordPress.
Из недостатков плагина — он полностью на английском языке.
Popup by Supsystic
Создать лайтбокс за пару минут, выбрав один из 18 типов всплывающих окон и один из 69 адаптивных шаблонов? Легко.
Плагин позволяет вам создавать неограниченное количество всплывашек, каждую из которых можно настраивать по размеру, цвету и любому другому стандартному критерию.
Таргетировать всплывающие окна можно по категориям или типам страниц. Также можно делать различные задержки и целые серии попапов с помощью тонких настроек.
Вы можете выбирать место на странице для каждого попапа и сделать одну из двадцати возможных анимаций открытия. В общем очень много настроек, шаблонов и типов всплывающих окон.
Плагин часто обновляется, но также не поддерживает русский язык. Однако, пусть английский язык не пугает вас. Администрирование плагина и создание новых окон настолько просто и понятно, что с этим справится любой неопытный пользователь.
Popup Builder — Responsive WordPress Pop up — Subscription & Newsletter
Очень популярный и функциональный плагин. Поддерживает интеграцию практически со всеми более-менее крупными плагинами для создания форм на сайте, поддерживает интеграцию и с конструкторами страниц (Visual Composer, Elemental, DIVI, WPML и другие).
Плагин действительно довольно функциональный и имеет все необходимые для комфортной работы настройки. Вы можете выбирать анимации открытия, расположение всплывающего окна на странице, таргетироваться по страницам, рубрикам и тегам, а также вызвать модальное окно по шорткоду.
У плагина есть и платная версия. В ней доступен функционал интеграции в WooCommerce, делать всплывающие окна регистрации и авторизации на сайте, делать всплывающие окна с счетчиками и вызывать попап когда пользователь пытается покинуть страницу. Также для платной версии доступен функционал обхода Adblock и еще более двадцати настроек.
Плагин постоянно обновляется, имеет более 100 000 скачиваний и основная масса оценок это 5*.
Popup Maker — Popup Forms, Opt-ins & More
В платной версии доступен функционал показа попапа пользователю, покидающему страницу, подгрузки попапов с помощью AJAX, все верификационные окна, внутренняя аналитика плагина и большое количество таргетингов.
Плагин очень крупный и “тяжелый”. Хорошо подойдет тем, кто продумывает стратегию размещения модальных окон, создает цепочки и отслеживает аналитику. Если вам нужно одно окно на весь сайт и вы не заморачиваетесь настройками, лучше воспользоваться более “легким” плагином.
На момент написания статьи плагин имеет более 400 000 установок и более 3 000 наивысших оценок. Кстати, плагин поддерживает русский язык.
Popups by OptinMonster
Самый популярный плагин из этой подборки. Плагион обладает всем функционалом своих конкурентов описанных выше. Есть возможность проводить А/Б тесты всего в пару кликов и без сложных настроек. Все виды таргетинга и всплывающих окон.
Есть и внутренняя аналитика поведения на всплывашках. Вы можете воспользоваться одним из шаблонов в библиотеке плагина или создать своё модальное окно с помощью drag-n-drop редактора.
Плагин постоянно обновляется и имеет более 1 000 000 активных установок. Русского языка к сожалению в плагине не имеется.
JS JSON
Рейтинг качественных моделей на 2020 год
МЕНЮ
Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок
