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

Обновлено: 02.07.2024

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

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

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

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

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

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

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

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

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

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

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

Здесь поп-ап оформлен в стиле сайта и благодаря этому воспринимается как его элемент и не так отвлекает внимание. Дизайн Алекс Бернштейн на Dribbble

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

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

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

О всплывающих окнах: что это такое

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

Варианты разблокировать показ

В настройках браузера

Отключаем блокировку для всех сайтов

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

Только для одного определенного ресурса

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

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

Как снять запрет показа в настройках расширений

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

Коротко о плагинах для блокировки

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

Инструкция деактивации блокирования всплывающих окон на примере Adblock

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

Включение разрешения на показ

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

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

Как снять блокирование для конкретного сайта

Выключение плагина

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

Чтобы отключить Adblock:

Способы для смартфонов

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

Полное включение/отключение

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

Android

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

На iPhone и iPad реклама в Chrome также блокируется автоматически. Функциональность мобильного приложения позволяет разрешить показ уведомлений в интернете.

Для одного сайта

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

Андроид

iPhone/iPad

Похожим образом можно синхронизировать мобильный Chrome с компьютерной версией на устройствах IOS.

Чтобы это сделать:

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

В этой статье описаны все настройки Mozilla Firefox, предназначенные для контроля над всплывающими окнами.

Всплывающие окна — это окна, появляющиеся автоматически без вашего разрешения. Они могут быть разными по размеру, но обычно не достигают размера всего экрана. Некоторые всплывающие окна появляются сверху окна Firefox (они называются pop-ups), другие могут появляться под окном Firefox (они называются pop-unders).

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

При блокировании всплывающего окна Firefox показывает информационную панель (если она не была отключена ранее – смотрите ниже), и значок в адресной панели.

Когда вы щёлкаете либо по кнопке Настройки Настройки в информационной панели, либо по значку в адресной строке, появляется меню со следующими опциями:

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

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

Для доступа к настройкам блокирования всплывающих окон:

На Панели меню в верхней части экрана щёлкните Firefox и выберите Настройки . Нажмите на кнопку меню и выберите Настройки Настройки . Нажмите на кнопку меню и выберите Настройки .

В разделе Разрешения снимите флажки рядом с Блокировать всплывающие окна, чтобы отключить блокировщик всплывающих окон полностью.
Щёлкните по кнопке Исключения… , чтобы открыть окно с перечнем сайтов, которым разрешено открывать всплывающие окна.
Диалоговое окно имеет следующие кнопки:

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

Проверьте, является ли Firefox источником всплывающего окна

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

Если вы видите адресную панель с кнопкой Защита от отслеживания и Информации о сайте (щит и замок) во всплывающем окне, то это знак того, что всплывающее окно появляется из Firefox.
Если вы не видите кнопку эти кнопки, то, возможно, у вас на компьютере работает вредоносная программа, которая открывает всплывающие окна. Для получения помощи прочтите статью Устранение проблем Firefox, вызванных вредоносными программами.

Проверьте, включено ли блокирование всплывающих окон и распространяется ли оно на этот сайт

Всплывающее окно появляется после щелчка мышью или нажатия клавиши на клавиатуре

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

Проверьте, что всплывающее окно на самом деле является всплывающим окном

Иногда рекламные баннеры созданы так, чтобы выглядят как окна, но, на самом деле, они ими не являются. Блокирование всплывающих окон Firefox не может остановить эти баннеры.

Опросы Mozilla

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

Эти прекрасные люди помогли написать эту статью:

Станьте волонтёром

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

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