LightBox с точки зрения UX/UI и как он меняет продукты

В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
и сервисов.
Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.

Что такое LightBox и почему именно «LightBox», а не «LightWindow», в чем его отличие от Pop-up, как он способен изменить продукт. Все это я постараюсь рассказать ниже.

1 — С точки зрения разработки LightBox представляет собой всплывающее окно с изображением.

2 — Pop-up или модальное окно, представляет собой всплывающее окно с минимальным набором функционала не имеющего отдельного URL.

Его основная задача информировать пользователя, спрашивать и уточнять, предупреждать, открывать просмотр и медиа контента.

3 — Модальные окна занимают, как правило, менее 30% экрана. LightBox — это уже полноценная страница, с полноценным функционалом и имеющая отдельный URL и площадью покрытия от 70% до 90%.

4 — Почему мы считаем данное решение ключевым и важным для UХ и UI большинства продуктов?
Все просто. Все интерфейсы и дизайн решения имеют несколько целей и единый путь развития. Все меняется и имеет цикличность, так вот — если углубиться в историю первых интерфейсных решений, то все они были основаны на LightWindows, это были функциональные всплывающие окна. Сейчас же весь дизайн стремится к максимальному удобству, оптимизации времени и минимализму одного окна.

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

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

Это порядка 7-10минут, а в сложных продуктах и более 25минут.

Человек теряет время, теряет контекст и начинает свой путь заново.

LightBox, помогает решить проблему потери контекста, фильтров, поиска и выдачи. Это страница с уникальным URL (всегда можно отследить переход на нее и поделиться ссылкой), открывается поверх страницы выдачи и позволяет вернуться в тот же экран откуда пользователь ушел. При тестировании данной технологии на пользователях еще на стадии прототипов и макетов 100 из 100 пользователей положительно оценили такое решение.
Так же при большом количестве схожих продуктов или услуг, LightBox позволяет пользователю перелистывать страницу не закрывая ее.

Преимущества LightBox:
— Уникальный URL
— Полноценная страница с сохранением функционала
— Сохранение контекста
— Интуитивность
— Свобода реализации и дизайна

— 70%-90% рабочего пространства с возможностью отображать интерфейс в полном объеме
— Возможность блочного построения и интеграции внедренного скролла.

Экосистема для фермеров (Своё | Фермерство)

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

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

Меня зовут Кирилл Тагинцев, я возглавляю UI/UX экосистемы РСХБ, мы разрабатываем проекты и применяем LightBox в своих проектах. В статье представлены лишь часть из них.
В одном из последних продуктов, для которого применялось данное решение, по рейтинг markswebb, заняло 1-е место, и LightBox был решающим с точки зрения удобства пользовательского взаимодействия.

Новостной портал, с социальными блогами для фермеров (Новости и Блоги)

Портал поиска сотрудников и работы в агро направлении (Подбор персонала)

Какие компании используют LightBox:
— Яндекс
— Facebook
— Mail.group
— dribbble.com
— Bechance.net
— Сбербанк

Лайтбокс — Компоненты — Контур.Гайды

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

Лайтбокс (от англ. lightbox) — источник света большой площади. Излучает максимально ровный свет, равный по яркости по всей их поверхности.

Используется в виде носителей рекламы, в фотографии для просмотра отснятых слайдов, в медицине для просмотра МРТ- и рентгеновских снимков.

Когда использовать

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

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

Описание работы

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

Содержание

Лайтбокс может состоять из:

• «Шапки» — заголовка и крестика
,
• контент-зоны
,
• «подвала» — или «терминальной зоны» с кнопками основных действий.

Ни один из этих пунктов, кроме крестика, не является обязательным.

Заголовок

Если лайтбокс предназначен для выполнения одной конкретной задачи, она должна быть отражена 
в заголовке. Заголовок должен быть кратким (1-3 слова) и являться названием процесса или объекта.

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

В лайтбоксах-подтверждениях заголовком является вопрос:

Действия

Чаще всего в лайтбоксе есть минимум два терминальных (закрывающих лайтбокс) действия:

1. Цветная кнопка — действие по умолчанию, сохраняет проделанную работу или подтверждает вызванную ранее команду. Такую кнопку нельзя называть «ОК».
2. Кнопка отмены — закрывает лайтбокс без сохранения введенных данных, называется «Отменить», не должна называться «Отмена».

Кнопки и ссылки расположены на специальной плашке слева направо: чем правее — тем менее важное 
и менее частотное действие. Плашка делает кнопки более заметными и позволяет лучше ориентироваться 
в интерфейсе. Рекомендуем использовать такие плашки и в обычных формах.

Закрытие лайтбокса

В правом верхнем углу лайтбокса всегда должна быть кнопка закрытия в виде крестика. Действие кнопки аналогично действию ссылки «Отменить». Также лайтбокс должен закрываться по нажатию клавиши Escape на клавиатуре.

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

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

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

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

Размер и расположение

По горизонтали лайтбокс позиционируется по центру. 
По вертикали — по центру и на 10% смещенным к верхней части окна браузера.

Если размер лайтбокса по вертикали приближается к размеру окна браузера, чтобы лайтбокс 
не прилип к верней границе, он позиционируется с отступом 40 px от верхнего края.

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

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

Прокрутка

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

Если лайтбокс не входит по высоте в окно браузера, при открытии он позиционируется с отступом 40 px от верхнего края страницы. Полоса прокрутки должна появляться у всей страницы, а не внутри лайтбокса. Контент страницы под затемнением не должен скроллиться.

После прокрутки до нижнего края лайтбокс позиционируется с отступом 40 px от нижнего края страницы.

Залипающие панели

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

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

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

Наложение лайтбоксов

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

Это исключительный случай, старайтесь избегать вложенности лайтбоксов.

Фокус и работа с клавиатурой

Если лайтбокс содержит поля ввода, при открытии лайтбокса ставьте фокус в первое поле автоматически.

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

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

Клавиша Esc закрывает лайтбокс.

Дизайн, размеры и отступы

Лайтбокс с терминальной плашкой:

Дополнительные кнопки и ссылки в терминальной плашке:

Лайтбокс без терминальной плашки:

Нельзя использовать лайтбокс без терминальной плашки, если в нем присутствуют поля не выровненные по левому краю, или текст выровненный по центру:

Лайтбокс без заголовка:

Если лайтбокс не содержит контента, не следует использовать терминальную плашку:

Информационный лайтбокс — лайтбокс без кнопок:

Что такое Lightbox? | Light Box

Услышав вопрос о том, что такое лайтбокс, на ум приходят яркие светящиеся картинки с разнообразной рекламой на зданиях. Но есть другие лайтбоксы, которые используют в качестве ночника в доме. Эти источники света представляют собой многослойные бумажные картины и во включённом состоянии создают удивительные 3D изображения. Сейчас подобные дизайнерские вещи занимают топовые места среди подарков дорогим людям.

Как удивить любимую?

Часто молодые люди теряются при выборе подарка для своей любимой. Ведь хочется презентовать что-то оригинальное и незабываемое. Конечно, можно купить эксклюзивные украшения или билет на концерт мегапопулярной звезды, а можно выбрать в подарок девушке Paper Lightbox. Необычную резную картину из бумаги невозможно принять без восторженных возгласов и радостной улыбки. Проверено! Такой подарок девушке будет уместен на любой праздник и особенно удивит, если презентовать его просто так без повода.

Тайна в комнате.

LightBox как ночник идеально подходит для создания романтического настроения в спальне. Мягкий струящийся свет добавит интерьеру загадочности и настроит на позитивные мысли. А как приятно засыпать, наблюдая за игрой света и тени на картине с 3D эффектом. Небольшой по размеру лайтбокс станет украшением помещения. Благодаря крепкому коробу и качественной подсветке этот элемент декора прослужит долгие годы и будет напоминать о многочисленных тайных разговорах и приятном времяпровождении.
Paper Lightbox — дизайнерская вещь, поэтому каждая картина уникальна. При этом стоят такие красивые и неповторимые аксессуары недорого. Это одна из причин растущей популярности лайтбоксов. И ещё один ответ для тех, кто хотел узнать о том, что такое лайтбокс. Дизайнерские изделия с подсветкой помогут оригинально оформить интерьер, независимо от его стилевого решения.
Окружить себя волшебством и подарить его любимому человеку легко. Стоит только купить лайтбокс с удивительным пейзажем, влюблёнными силуэтами или сказочными животными. Выбор необычных произведений искусств огромен, а покупку можно совершить, сделав всего пару кликов.

Lightbox2 — создаем галерею.

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

Теперь попробуем разобраться как добавить LightBox на страницу.

1. Установка LightBox:

Lightbox использует JavaScript-библиотеки Prototype Framework и Scriptaculous, эти скрипты необходимо подключить к Вашей странице, для этого вставьте следующий код между тэгами <head> и </head>.

<script type=»text/javascript» src=»js/prototype.js»></script>
<script type=»text/javascript» src=»js/scriptaculous.js?load=effects»></script>
<script type=»text/javascript» src=»js/lightbox.js»></script>

2. Затем нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте на страницу следующий код (между тэгами )

<link rel=»stylesheet» href=»css/lightbox.css» type=»text/css» media=»screen» />

3. Также не забудьте проверить в файле CSS ссылки на prev.gif next.gif. и убедитесь в правильности ссылок на loading. gif и close.gif, в файле lightbox.js.

4. Использование LightBox:

а. Вставляем ссылку ссылку в тело документа, затем ссылке добавляем атрибут rel=»lightbox».
Например:

<a href=»images/image-1.jpg» rel=»lightbox» title=»Название»><img src=” images/image.jpg”></a>

Атрибут title необходим для добавления подписи к картинки.

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

<a href=»images/image-1.jpg» rel=»lightbox[roadtrip]»>image #1</a>
<a href=»images/image-2.jpg» rel=»lightbox[roadtrip]»>image #2</a>
<a href=»images/image-3.jpg» rel=»lightbox[roadtrip]»>image #3</a>

Теперь картинки можно просматривать используя клавиши «Влево» и «Вправо».
Пример можно посмотреть здесь — Lightbox 2

С оригиналом статьи на английском языке можно ознакомится здесь

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

что это такое, виды конструкции, применение

Лайтбокс – эффективный вид наружной рекламы. Lightbox в переводе с английского означает «световой ящик». Яркие, светящиеся короба притягивают взгляд, обеспечивают легкое считывание информации и нередко становятся дополнением стандартного уличного освещения.

Достоинства самосветящейся наружной рекламы

К единственному недостатку лайтбокса можно отнести необходимость во внешнем питании. В остальном такой вид наружной рекламы обладает преимуществами:

• Низкая себестоимость. Их эффективность гарантирует быструю окупаемость;

• Использование нескольких изображений. Взамен старому в короб помещается новое. Процедура замены постера не вызывает никаких сложностей;

• В тонких и сверхтонких лайтбоксах информационный материал можно быстро заменить;

• Не ограничены формами;

• Световые короба не теряются на фоне другой рекламы;

• Оснастка лайтбокса неприхотлива в обслуживании, а долговечность встроенной экономичной LED-подсветки измеряется десятками тысяч часов;

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

Виды

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

    Лайтбоксы отличаются:

• количеством рекламных плоскостей – односторонние, обратная сторона которых используется для крепления и проводки, или двухсторонние, представленные глухими полуавтономными конструкциями;

• способом крепления – настенные, подвесные, устанавливаемые на тумбы, столбы, землю;

• формой – дешевые классические, в виде прямоугольных ящиков, и фигурные, стоимость которых увеличивается по мере сложности конструкции;

• толщиной корпуса в зависимости от размещения – наружные лайтбоксы имеют усиленный, защищенный от воздействия окружающей среды и вандалов, корпус. Интерьерные, толщина которых в пределах 60–90 мм, рассчитаны на установку в помещениях. Глубина ультратонких световых коробов снижается до 26 мм.

Где применяют лайтбоксы

Область применения лайтбоксов широка. Они выполняют функции:

• вывесок заведений общественного питания, торговли, кинотеатров;

Из чего состоит Лайтбокс

Лайтбокс состоит из:

• профиля;

• источника света;

• светорассеивающей поверхности;

• механизма, меняющего постеры.

Профиль лайтбокса

Выбор материала для короба зависит от его размера, места размещения и возможного воздействия:

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

• Алюминий. Легкие и прочные конструкции с привлекательной внешностью. Недостаток – высокая цена. Часто размещаются в местах большого скопления людей.

• Сталь. Лайтбоксы из стали обладают высокой прочностью, но имеют увеличенный вес, а значит требуется более надежное крепление конструкции. Часто размещаются на крышах и фасадах зданий. Стоимость выше чем у коробов из ПВХ или алюминия. 

Источник света

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

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

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

Cветорассеивающая поверхность

Это лицевые панели, которые изготавливаются из прозрачного полимерного материала со специальным покрытием. Материалы, из которых изготавливают светорассеивающие поверхности:

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

акрил. Из этого материала лайтбоксы изготавливаются чаще всего. 

поликарбонат (сотовый и монолитный). Материал крепкий, его нелегко разбить.

Механизм, меняющий постеры

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

Нюансы подсветки лайтбоксов

По расположению ламп подсветка бывает торцевой и фронтальной. 

Фронтальная подсветка

Торцевая подсветка

Изготовление лайтбоксов в Москве. Lightbox

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

 

Участвуют несколько материалов, из которых чаще всего выполняют производство светового короба, а именно:

• Алюминиевый короб

• Световой короб

• Короб из поликарбоната

• Короб с баннерной тканью

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

 

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

 

В чем же заключается преимущества лайтбокса?

 

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

 

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

 

 

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

 

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

  Наш адрес: Москва  ул. Адмирала Макарова 2

 Телефоны: +7(977)-273-60-96

   Email:  [email protected]

lightbox — это… Что такое lightbox?

Lightbox — In photography, a lightbox has several applications. One is a container with several lightbulbs and a pane of frosted glass on the top. It is used by photography professionals viewing translucent films, such as slides. This device was originally… …   Wikipedia

lightbox — noun a) A box containing a source of light and a white, translucent cover; used to view photographic transparencies b) A box containing fluorescent tubes; used to treat people with seasonal affective disorder …   Wiktionary

Lightbox (JavaScript) — Desarrollador Lokesh Dhakar Información general Género ? Licencia ? …   Wikipedia Español

Lightbox (disambiguation) — Lightbox may refer to:* Lightbox, a tool used by photographers to view slides * Lightbox (JavaScript), a JavaScript application that displays images using modal dialogs on web pages * Lightbox, a form of point of sale display advertising * Light… …   Wikipedia

Lightbox Interactive — est un studio américain de jeu vidéo fondé en Janvier 2009 par Dylan Jobe et d anciens membres d Incognito Entertainment (Warhawk, Twisted Metal: Black). Le studio est actuellement engagé dans un partenariat avec Sony Computer Entertainment… …   Wikipédia en Français

Lightbox (JavaScript) — Infobox Software name = Lightbox caption = A webpage showing a Lightbox 2 window. developer = Lokesh Dhakar latest release version = 2.04 latest release date = release date|2008|03|09 operating system = Cross platform language = English status =… …   Wikipedia

JJ Furnished Apartments Downtown Toronto: TIFF Bell LightBox — (Торонто,Канада) Категория отеля: Адрес …   Каталог отелей

Toronto International Film Festival — Coordinates: 43°38′48″N 79°23′25″W / 43.64667°N 79.39028°W / 43.64667; 79.39028 TIFF redirects here …   Wikipedia

Point of sale display — A point of sale display (POS) is a specialized form of sales promotion that is found near, on, or next to a checkout counter (the point of sale ). They are intended to draw the customers attention to products, which may be new products, or on… …   Wikipedia

Kid’s World — For other uses, see Kids World. Kid s World Location Dreamworld Coordinates 27°51′51″S 153°19′00″E …   Wikipedia

Penciller — Artist Whilce Portacio sketching at a convention. A penciller (or penciler) is an artist who works in the creation of comic books, graphic novels, and similar visual art forms. The penciller is the first step in rendering the story in visual form …   Wikipedia

Что такое лайтбокс в веб-дизайне и как его создать

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

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

Когда вы начинаете разработку своего веб-сайта, примите во внимание преимущества, которые лайтбокс может иметь для вашего бизнеса. Если все сделано правильно, всплывающее окно лайтбокса может резко увеличить количество потенциальных клиентов и количество подписок вашей компании. Это исследование, проведенное OptiMonk, показывает, как BitNinja удалось увеличить количество потенциальных клиентов на 65% благодаря добавлению лайтбокса в стратегической точке своего сайта. Представьте, что это может означать для дохода.

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

Что такое лайтбокс?

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

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

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

Примеры лайтбоксов

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

Рекламный лайтбокс

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

Мобильный лайтбокс

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

Электронный лайтбокс

Яркий оттенок желтого и жирный узор приветствуют вас во всплывающем окне «Хаул» в Нью-Йорке. Честный и насмешливый тон предложения внизу вызывает улыбку на наших лицах, побуждая нас присоединиться к их списку рассылки.

Lightbox для файлов cookie

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

Когда и как использовать всплывающее окно лайтбокса на вашем веб-сайте

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

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

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

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

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

• Не все сообщения должны быть в форме всплывающих окон. Хотя всплывающие окна отлично подходят для привлечения внимания, они также могут быть ошеломляющими.Сведите к минимуму использование всплывающих окон, подумав, могут ли определенные элементы или сообщения отображаться в альтернативном формате. Например, если у вас есть некоммерческий веб-сайт и вы хотите, чтобы посетители делали пожертвования, было бы столь же эффективно включить в меню кнопку «Пожертвовать», которая остается на месте во время прокрутки, как это сделали HERoines Inc. на своем сайте Wix. То же самое касается отображения сообщений об ошибках при неправильном заполнении онлайн-формы, как в примере ниже. В подобных случаях часто используются всплывающие предупреждающие знаки, но простое сообщение или красный предупреждающий знак также могут помочь.

Советы по дизайну и копирайтингу для лайтбоксов

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

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

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

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

• Сделайте вашу кнопку CTA (призыв к действию) выделяющейся. Обычно должна быть только одна кнопка, которую пользователи должны нажимать во всплывающем окне — обычно это кнопка «Зарегистрироваться» (или другая форма CTA). Сделайте его заметным, используя доминирующий цвет, выделяющийся на фоне, или выделите его рамкой.

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

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

Как создать лайтбокс

Чтобы добавить всплывающее окно на ваш сайт Wix, нужно выполнить несколько простых шагов:

1. В редакторе нажмите «Добавить» слева.

2. Щелкните «Lightbox».

3. Выберите свой любимый дизайн лайтбокса из списка категорий.

4. Перетащите элемент лайтбокса на свою страницу.

5. Нажмите «Установить триггеры», чтобы начать настройку лайтбокса.

6. Наконец, вы можете редактировать текст, настраивать размещение лайтбокса на экране (нажмите кнопку «Макет») и настроить дизайн (нажмите кнопку «Дизайн») в соответствии со своими потребностями. Теперь все готово!

Автор: Дана Меир

Эксперт и писатель по дизайну

Что такое лайтбокс в веб-дизайне?

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

Эффективное использование лайтбоксов, не вызывающее разочарования

(через https://www.printful.com/blog/40-website-popup-ideas-to-steal-for-your-online-store/)

Лайтбоксы — это тип всплывающего окна, используемого для выделения части контента, включая купоны, загружаемые файлы PDF, новые продукты, опросы и важные объявления. Это окно появляется в верхней части вашего веб-сайта (как всплывающее окно), которое блокирует и затемняет фон, не позволяя пользователям взаимодействовать с контентом в фоновом режиме, пока всплывающее окно находится на экране. Это привлекает внимание пользователей к содержанию всплывающего окна.

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

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

Эффективны ли лайтбоксы?

Достаточно шокирующе, да. Да, они.

Sumo проанализировал данные из 2 МИЛЛИАРДОВ всплывающих окон (включая лайтбоксы) и обнаружил, что средний коэффициент конверсии всплывающих окон составил чуть более 3%. У 10% всплывающих окон коэффициент конверсии превышал 9%.

Неплохо для маленького окошка, от которого пользователям легко избавиться.

---

См. По теме: Как нанять компанию по веб-разработке

---

(через https: // sumo.ru / stories / pop-up-statistics)

Итак, если бы у вас был самый эффективный лайтбокс и 150 посетителей веб-сайта в день, у вас было бы 418 подписок в месяц. Если у вас средний лайтбокс, это все равно 139 подписчиков в месяц. А теперь представьте, что у вас есть веб-сайт, который посещают 100 000 человек в месяц. Средний лайтбокс по-прежнему будет приносить вам 3 000 подписчиков в месяц.

Математика проста. Чем больше у вас посетителей, тем больше подписчиков вы получите даже при средней эффективности лайтбокса.

Когда мне следует использовать лайтбокс?

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

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

Скидки.

(через https://naldzgraphics.net/pop-up-designs/)

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

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

Объявление о продукте.

(через https://naldzgraphics.net/pop-up-designs/)

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

Информационный справочник.

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

Политика в отношении файлов cookie.

(через https://pk.godaddy.com/help/add-cookie-and-tracking-alert-to-my-website-27806 )

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

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

Восстановить потерянного пользователя.

(через https://getsitecontrol.com/p/kql71p6z)

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

(через https://getsitecontrol.com/blog/exit-popups/)

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

Напоминание об активности.

(через https: // getsitecontrol.com / p / mqkk3dq1)

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

Заключительное слово

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

–

Thrive Design — это клиентоориентированное агентство веб-дизайна и разработки из Сиэтла. Свяжитесь с нами сегодня, чтобы узнать, как мы можем улучшить ваш бизнес в Интернете! Найдите нас в Clutch, UpCity, LinkedIn, Facebook и Twitter.

Категория: Веб-дизайн Сиэтл

Что такое лайтбокс? > Stock Photo Secrets

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

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

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

Чтобы узнать больше о функции лайтбокса Stock Photo Secrets и получить 200 изображений XXL за 99 долларов, щелкните здесь.

Что такое лайтбокс фондовой фотографии?

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

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

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

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

Как использовать лайтбокс Stock Photo Secrets

Использовать лайтбокс довольно просто. Мы собрали для вас небольшое видео о том, как сделать его для Stock Photo Secrets.

Stock Photo Secrets предлагает новое членство за 99 долларов за 200 изображений XXL только на ограниченное время.

Пошаговая процедура использования функции лайтбокса магазина Stock Photo Secrets

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

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

3. Для доступа к лайтбоксу щелкните ссылку в правом верхнем углу.

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

5. Вы можете нажать на «Новый лайтбокс» и затем ввести желаемое имя вашего лайтбокса.

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

Лучший способ организовать и выбрать Стоковые Фото

Проще говоря, лайтбокс стокового фотоагентства поможет вам организовать изображения в разные папки (или «лайтбоксы»), чтобы вы могли просматривать все изображения, которые вы сохранили во время поиска изображений.

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

Чтобы узнать больше о том, как выполнять тщательный поиск изображений, прочитайте наши «5 главных советов, которые помогут вам тратить меньше времени на поиск стоковых фотографий».

Что такое лайтбокс и как его сделать?

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

Popups — противоречивая тенденция в веб-дизайне. Они могут ухудшить впечатление пользователя, если не выбраны время, дизайн или копия. Вот почему Google начал обесценивать мобильные страницы, которые показывают «навязчивые межстраничные объявления», в том числе всплывающие окна, скрывающие основной контент, еще в 2016 году.

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

Когда всплывающие окна представляют ценность для посетителей, они могут иметь огромный успех. Согласно исследованию, проведенному Sumo 1,7 миллиарда всплывающих окон, средний коэффициент конверсии для всех всплывающих окон составляет 3,09%. Но у 10% самых эффективных всплывающих окон был гораздо более высокий средний показатель, с колоссальным коэффициентом конверсии 9,28%.

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

Что такое лайтбокс на веб-сайте?

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

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

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

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

Примеры лайтбоксов

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

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

лайтбокс для подписки на информационный бюллетень

Рассылка новостей или подписка по электронной почте — самые распространенные всплывающие окна в лайтбоксах. Ниже приведен один из The New Yorker . Этот простой и минималистичный дизайн появляется, когда вы просматриваете статью на их сайте.Единственный яркий цвет — это кнопка CTA, которая делает ее более привлекательной, чем кнопка «Удалить».

Источник изображения

Вход / Регистрация в лайтбоксе

Увеличение количества регистраций и входов в систему — это ключевой показатель для любого цифрового бизнеса. Джефф Чанг, технический руководитель Pinterest, определяет это как «искусство создания новых намерений пользователей и преобразования намерений в пользователей, прошедших проверку подлинности» в блоге Growth Engineering Blog.

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

Источник изображения

Лайтбоксы с предложением контента

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

Возьмем для примера Marketing 112. Эта венгерская маркетинговая компания показывает лайтбокс ниже, предлагая свое исследование маркетинговых тенденций на 2019-2020 годы бесплатно после того, как посетитель просмотрел несколько своих сообщений в блоге.

Источник изображения

Вот то же всплывающее окно на английском языке:

Лайтбоксы со скидкой

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

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

Источник изображения

лайтбокс допродажи

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

Источник изображения

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

Как сделать лайтбокс для вашего сайта

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

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

Как сделать лайтбокс в HubSpot

Мы кратко рассмотрим процесс создания лайтбокса в HubSpot. Более подробную инструкцию вы можете найти в этой статье базы знаний.

1. Для начала перейдите к Forms в своей учетной записи HubSpot.Если у вас есть профессиональный или корпоративный аккаунт, вы перейдете к Marketing > Lead Capture > Forms . Если у вас есть начальная или бесплатная учетная запись, вы просто перейдете к Marketing > Forms .

2. В правом верхнем углу нажмите Создать форму . Выберите Всплывающая форма на левой ползунке. Нажмите Далее .

3. Выберите тип всплывающей формы, затем щелкните Далее .

4. Настройте текст, текст и кнопку всплывающего окна на вкладках Выноска .

5. Затем создайте и настройте форму, которую посетители увидят, если нажмут кнопку CTA.

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

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

7. Когда вы будете готовы, просто нажмите Опубликовать в правом верхнем углу, чтобы открыть всплывающую форму.

Как создать лайтбокс в WordPress

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

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

Источник изображения

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

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

лайтбокс2

Примеры

Два отдельных изображения

Набор из четырех изображений

Начало работы

1. Загрузите zip-архив с последней версией (или любой предыдущей) со страницы Github Releases.

   Или установите с помощью npm:

     npm install lightbox2 --save  

2. Откройте zip-файл и взгляните на barebones, рабочий пример, который находится в папке / examples .

3. Готовы установить лайтбокс на своей странице? Начните с включения Lightbox CSS и Javascript. Вы можете взять оба этих файла из папки / dist .

   • Включите CSS вверху страницы в тег :

   • Включите Javascript внизу страницы перед закрывающим тегом :

4. Убедитесь, что jQuery, который требуется для Lightbox, также загружен.

   • Если вы уже используете jQuery на своей странице, убедитесь, что он загружен до lightbox.js . Требуется jQuery 1. 7 или выше, а поскольку используется модуль эффектов, тонкая сборка jQuery не поддерживается.
   • Если вы в настоящее время не используете jQuery, я создал упакованный файл, который включает как Lightbox, так и jQuery. Включите dist / js / lightbox-plus-jquery.js вместо lightbox.js .
5. Убедитесь, что четыре изображения загружены в лайтбокс .css находятся в правильном месте. Вы можете получить изображения из папки / dist / images .

Инициализировать с помощью HTML

• Отдельные изображения. Добавьте атрибут data-lightbox к любой ссылке на изображение, чтобы включить лайтбокс. В качестве значения атрибута используйте уникальное имя для каждого изображения. Например:
  Дополнительно:
  • Добавьте атрибут data-title , если вы хотите показать заголовок.
  • Добавьте атрибут data-alt , если вы хотите установить атрибут alt для связанного изображения.
• Наборы изображений. Если у вас есть группа связанных изображений, которые вы хотите объединить в набор, используйте одно и то же значение атрибута data-lightbox для всех изображений. Например:

Опции

Если вы хотите изменить какие-либо параметры по умолчанию, вызовите метод параметра.

Опция	По умолчанию	Описание
alwaysShowNavOnTouchDevices	ложь	Если true, стрелки навигации влево и вправо, которые появляются при наведении курсора мыши при просмотре наборов изображений, всегда будут видны на устройствах, поддерживающих сенсорный ввод.
альбом Этикетка	«Изображение% 1 из% 2»	Текст, отображаемый под заголовком при просмотре набора изображений.Текст по умолчанию показывает номер текущего изображения и общее количество изображений в наборе.
отключить прокрутку	ложь	Если true, запретить прокрутку страницы при открытом лайтбоксе. Это работает за счет переполнения настроек, скрытого на теле.
fadeDuration	600	Время, необходимое для того, чтобы контейнер лайтбокса и наложение появлялись и исчезали, в миллисекундах.
fitImagesInViewport	правда	Если true, измените размер изображений, которые будут выходить за пределы области просмотра, чтобы они точно помещались внутри нее. Это избавляет пользователя от необходимости прокручивать, чтобы увидеть все изображение.
imageFadeDuration	600	Время, необходимое для постепенного появления изображения после загрузки, в миллисекундах.
макс.ширина		Если установлено, ширина изображения будет ограничена этим числом в пикселях.Соотношение сторон не будет поддерживаться.
maxHeight		Если установлено, высота изображения будет ограничена этим числом в пикселях. Соотношение сторон не будет поддерживаться.
позиция Сверху	50	Расстояние от верха области просмотра, на котором будет отображаться контейнер лайтбокса, в пикселях.
изменение размера Продолжительность	700	Время, необходимое контейнеру Lightbox для анимации своей ширины и высоты при переходе между изображениями разного размера, в миллисекундах.
showImageNumberLabel	правда	Если false, текст, указывающий номер текущего изображения и общее количество изображений в наборе (например, «изображение 2 из 4») будет скрыт.
обертка	ложь	Если истина, когда пользователь достигает последнего изображения в наборе, появится стрелка навигации вправо, и он продолжит движение вперед, что вернет его к первому изображению в наборе.

Поддержка браузера

Lightbox2 успешно протестирован в следующих браузерах:

• Internet Explorer.
  Файл lightbox-plus-jquery.js включает jQuery v2.x и поддерживает IE 9+. Если вы хотите поддерживать IE 6, 7 и 8, используйте свою собственную копию jQuery v1.x с lightbox.js .
• Хром
• Safari
• Firefox
• iOS Safari
• iOS Chrome
• Браузер Android
• Android Chrome

Лицензия

Lightbox2 находится под лицензией MIT License.

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

Справка

Есть вопрос о том, как использовать лайтбокс?

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

1. Найдите Stackoverflow, чтобы узнать, не сталкивались ли другие люди с той же проблемой, что и вы.
2. Если ваша проблема уникальна, задайте новый вопрос в Stackoverflow. Используйте тег lightbox2 .

Не используйте Github Issues для сообщения личных запросов в службу поддержки.

Нашли ошибку?

Если вы обнаружите ошибку, сообщите о проблеме на Github.

Создано Lokesh Dhakar

Веб-сайт Twitter

Как создать всплывающее окно лайтбокса, чтобы расширить список рассылки

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

Догадайтесь, почему это так?

Если вы ответили «чтобы привлечь внимание зрителя», вы попали в точку.

Всплывающие окна лайтбоксов (также называемые модальными всплывающими окнами) — один из наиболее эффективных способов превратить посетителей вашего веб-сайта в подписчиков и клиентов электронной почты.

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

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

Создание всплывающего окна лайтбокса: Хотите узнать, как создать всплывающее окно лайтбокса, шаг за шагом? Щелкните здесь, чтобы перейти к руководству!

Что такое всплывающее окно лайтбокса?

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

Всплывающие окна лайтбоксов чаще всего используются для ввода адресов электронной почты.Однако их можно использовать для отображения любого призыва к действию (например, «Поставьте нам лайк на Facebook» или «Используйте этот код купона при оформлении заказа»).

Вы можете спросить: «Что такое лайтбокс и откуда взялся этот термин?» Это довольно интересная история о соединении аналоговых и цифровых технологий.

Лайтбоксы — это знаки, которые подсвечиваются сзади, например:

Lightbox — это также библиотека JavaScript, которая показывает изображения и видео, заполняя ими экран, а затем затемняя все, что изображения и видео не покрывают.

Точно как всплывающее окно лайтбокса.

6 причин, почему всплывающие окна лайтбоксов собирают больше писем

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

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

Связанное содержимое: Как создать виджет боковой панели в WordPress, чтобы привлечь больше подписчиков

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

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

1. Всплывающие окна в лайтбоксах, первый элемент, четкий призыв к действию

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

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

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

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

И вот что, : даже если они в конечном итоге примут решение, они будут менее довольны этим решением , чем если бы вы предоставили им только один выбор.

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

2. Привлекают внимание всплывающие окна лайтбоксов

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

Именно поэтому они так хорошо работают.

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

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

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

Главное — персонализировать всплывающие окна и запускать их в нужный момент для нужных посетителей с правильным предложением (см. № 3, № 4 и № 5 ниже).

3. Всплывающие окна в лайтбоксах срабатывают в нужный момент

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

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

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

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

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

При первом просмотре страницы они хотят совершить покупку или просто хотят прочитать ваш блог? Готовы ли они подписаться на ваш список рассылки ко второму, третьему или четвертому просмотру страницы?

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

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

Пример: Как косметическая упаковка теперь увеличила свой список рассылки на 754% благодаря двухэтапной подписке

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

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

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

4. Всплывающие окна лайтбоксов отображают предложение на основе интересов

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

Что было бы лучшим предложением для любого пользователя, просматривающего ваш сайт?

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

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

Вот пример с веб-сайта CountryLiving. Это всплывающее окно отображается для посетителей, которые просматривали сообщения о домашних улучшениях:

Но если посетитель просматривал сообщения с рецептами, вместо этого он увидит это всплывающее окно:

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

5. Всплывающие окна лайтбоксов персонализированы для определенных посетителей

OptinMonster также позволяет отображать всплывающие окна лайтбоксов только для определенных посетителей. Таким образом, вы можете еще больше персонализировать свои предложения.

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

Или вы можете отображать всплывающие окна для людей, посещающих определенный источник, например популярную публикацию, в которой вы только что были представлены.Таким образом, вы можете обращаться к этим посетителям по имени (например, «Добро пожаловать, читатели HuffPo!») И еще больше увеличивать количество конверсий.

6.

Всплывающие окна лайтбоксов фиксируют уходящих посетителей

Знаете ли вы, что 70% посетителей, покинувших ваш сайт, больше никогда не вернутся?

В большинстве случаев это означает, что 95–98% ваших маркетинговых усилий будут потрачены впустую, и вы потеряете деньги на затратах на привлечение клиентов.

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

Технология exit-intent®

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

Вот пример всплывающего окна лайтбокса при намерении выхода .

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

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

На самом деле, количество разговоров в Medstar Media увеличилось на 500%, когда они внедрили всплывающие окна с намерением выхода.

Чтобы узнать больше о лайтбоксах с намерением выхода, ознакомьтесь с 40 советами о всплывающих окнах выхода, которые увеличат количество подписчиков и доходы.

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

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

Специалист по социальным сетям добавил 250 000 подписчиков по электронной почте

Social Media Examiner выбрал OptinMonster, потому что он отвечал всем критериям, которые они искали:

Они начали с добавления всплывающего окна exit-intent® и сразу увидели огромный рост конверсии.

Когда было написано тематическое исследование, Social Media Examiner использовал 4 варианта OptinMonster:

1. лайтбокс, который отображается вскоре после посещения сайта.
2. Опция exit-intent®, которая отображается, когда пользователь движется для выхода с сайта.
3. Выдвижной вариант, который появляется после того, как пользователь просматривает страницу более пяти секунд и прокручивает 60% страницы.
4. Подписка для мобильных устройств, которая появляется вскоре после посещения сайта на мобильном устройстве.

До использования OptinMonster Social Media Examiner набирал около 600 подписчиков в день. С момента перехода на OptinMonster они набирают около 1000 подписчиков в день. Это на 66% больше!

За первый год, когда Social Media Examiner использовала OptinMonster, они добавили в свой список 62 000 подписчиков.

WebMechanix восстановил 1281 покинувшего посетителя за один месяц

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

В результате они увидели увеличение конверсий на 13,076% и конверсий всего за первый месяц!

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

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

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

Начните с регистрации в OptinMonster и входа в свою учетную запись OptinMonster.

1. Создайте кампанию

Войдите в свою учетную запись OptinMonster и нажмите зеленую кнопку Create Campaign .

Мы будем использовать тип кампании Lightbox Popup .

Выберите шаблон кампании. В этом руководстве мы используем Simple .

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

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

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

2. Измените свою кампанию

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

Вы можете редактировать внешний вид любых кнопок, нажав на кнопку.

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

3. Установить правила отображения

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

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

Щелкните Next Step , чтобы выбрать действие Action . Мы установим действие . Показать вид кампании , который вы хотите отобразить (у нас это представление Optin). На этом этапе нажмите зеленую кнопку «Сохранить» в правом верхнем углу.

4. Настройте интеграцию электронной почты

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

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

5. Опубликуйте всплывающее окно лайтбокса

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

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

Прокрутите страницу «Публикация» вниз, чтобы найти широкий спектр возможностей публикации OptinMonster.Если вам нужна дополнительная информация, ознакомьтесь с документацией по встраиванию OptinMonster на ваш сайт.

Теперь вы точно знаете, как создать всплывающий лайтбокс с помощью OptinMonster!

У вас есть WordPress?

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

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

Нажмите кнопку Go Live рядом с названием кампании, чтобы активировать кампанию на вашем сайте.

Вот и все! Всплывающее окно вашего лайтбокса WordPress доступно!

Захватывайте больше писем сегодня с помощью всплывающих окон лайтбоксов

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

Если вам понравилась эта статья, вы также можете прочитать этот пост «Как использовать эффекты анимации всплывающих окон для привлекательных рекламных акций». Или, чтобы увидеть еще больше всплывающих окон, ознакомьтесь с этими 37 типами всплывающих окон, которые вы можете создать для увеличения конверсии!

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

Начните работу с OptinMonster сегодня и превратите больше посетителей веб-сайта в подписчиков и клиентов электронной почты!

Опубликовано Jacinda Santora

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

Все, что вы когда-либо хотели знать о лайтбоксе WordPress

Прежде чем мы вообще углубимся в какие-либо подробности, обо всем по порядку:

Что такое лайтбокс WordPress?

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

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

Как они работают?

Лайтбоксы

— это сценарий JavaScript, jQuery или CSS3, в котором используется графический элемент управления, известный как модальное окно, для отображения изображений и других мультимедийных файлов и файлов. Это делается в родительском / дочернем режиме. Открывается дочернее окно, которое затемняет родительское окно, чтобы его нельзя было увидеть или почти не было видно. Взаимодействие с родительским окном прекращается до тех пор, пока пользователь не взаимодействует с дочерним окном. Адаптивные лайтбоксы удобны для мобильных устройств, поэтому они адаптируются к размеру экрана.

Как создать и реализовать лайтбокс вручную

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

Чтобы добавить свой собственный код, вам необходимо знать редактор кода WordPress.Большая часть кода будет написана на jQuery, JavaScript, HTML и CSS.

Разработка собственного кода с использованием существующего подключаемого модуля

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

Добавьте адаптивный лайтбокс в свою тему WordPress

Из этого туториала Брайс Адамс на Tuts + вы узнаете, как добавить адаптивный лайтбокс к вашей теме.Он использует плагин fancyBox, но вы можете использовать и многие другие. Он автоматически добавляет функциональность лайтбокса к любому файлу с расширением изображения. Затем тот же код используется для создания галереи, лайтбокса для видео, лайтбокса iFrame и подписей. Это подробное руководство, которое хорошо написано и простое в использовании.

Как добавить лайтбокс в WordPress без плагина

В этом руководстве на FearlessFlyer.com показано, как настроить существующий плагин под названием PrettyPhoto (но подойдет любой), чтобы добавить функцию лайтбокса непосредственно в вашу тему WordPress.Если файл заканчивается расширением изображения, запускается PrettyPhoto. Добавленные функции включают скорость анимации, отступы и заголовок шоу. Его также можно применить к другим типам файлов, таким как YouTube, flash и внешние файлы.

Разработка собственного кода с нуля

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

Как создать свой собственный лайтбокс jQuery

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

Узнайте, как создать лайтбокс jQuery с нуля

В этом руководстве используются HTML5, CSS3 и jQuery для создания лайтбокса, который будет демонстрировать изображения.Инструкции приведены пошагово, и вы можете изменить код по своему усмотрению, чтобы настроить свой собственный лайтбокс. Источник изображения задается вручную в HTML. Даже если вы изменяете другой плагин, это руководство дает вам основы программирования лайтбоксов и показывает, как вносить все настройки, такие как размер и цвет рамки, вручную.

Какие плагины использовать

Хорошо, а что, если вы не хотите кодировать собственный лайтбокс? Что, если вы хотите использовать готовый лайтбокс и не беспокоитесь о том, чтобы иметь полный контроль над всеми настройками и функциями? В этом случае вы захотите использовать плагин.Для WordPress доступно множество плагинов для лайтбоксов. Многие из них бесплатны, но если вам нужны определенные функции и настройки, вам, возможно, придется использовать плагин премиум-класса. Ниже приведен список бесплатных и дополнительных услуг, которые могут удовлетворить все ваши требования.

HUGE-IT лайтбокс

HUGE-IT Lightbox — это бесплатный плагин для отображения больших изображений и видео. Их можно отображать в виде слайд-шоу. Вы контролируете его размер и положение, используя настройки стиля, которые вы контролируете. Он также может отображать видео с Vimeo и YouTube.Это хороший базовый лайтбокс, который хорошо работает, особенно если учесть тот факт, что он бесплатный.

Простой лайтбокс

Simple Lightbox — это бесплатный плагин для лайтбоксов с множеством вариантов настройки. Он имеет настраиваемые темы и анимацию и даже работает с дочерними темами. Существуют надстройки премиум-класса, которые расширяют его еще больше, включая надстройку для видео и надстройку, которая интегрируется с WooCommerce. Он автоматически активирует ваши ссылки и быстро реагирует, поэтому его размер будет изменяться в соответствии с размером любого экрана.Отлично работает на iOS.

Адаптивный лайтбокс от dFactory

Responsive Lightbox — это бесплатный плагин от dFactory, который поставляется с несколькими скриптами, которые автоматически добавляют лайтбокс в ваши галереи изображений, ссылки на изображения и ссылки на видео для Vimeo и YouTube. Это очень настраиваемый. Вы можете отображать отдельные изображения публикации в виде галереи, изменять размер изображения ссылки галереи и запускать скрипт в зависимости от условий. Вы можете настроить запуск jQuery на основе событий. Вы можете выбрать для лайтбокса.Кроме того, он обладает широкими возможностями настройки, поддерживает работу с несколькими сайтами и является одним из самых популярных плагинов для лайтбоксов.

WP лайтбокс 2

WP Lightbox 2 — это адаптивный лайтбокс, который отображает фотоальбом, галерею изображений и карты. В нем пять тем. Вы можете отобразить заголовок и описание изображения в лайтбоксе. Вы также можете сгруппировать изображения для воспроизведения в виде слайд-шоу. Конфигурация не требуется. Вы можете использовать шорткоды для создания галерей эскизов, и это бесплатно по лицензии GNU.

Lightbox Plus Colorbox

Lightbox Plus Colorbox — это бесплатный плагин, который реализует Colorbox Джека Мура для использования в качестве лайтбокса. Он будет отображать большие изображения, слайд-шоу, видео, формы и даже внешний контент. Он создаст светлый или темный фон и отобразит заголовок изображения в лайтбоксе. Подписи добавляются через поле заголовка изображения. Вы также можете добавить их вручную с помощью простого кода.

лайтбокс WonderPlugin

WonderPlugin Lightbox — это адаптивный лайтбокс, который отображает изображения и видео.Он поддерживает больше форматов видео, чем большинство: Vimeo, YouTube, SWF, MP4 и WebM. Он отобразит галерею лайтбоксов с навигацией по миниатюрам, и вы можете добавить шорткод к любой ссылке, и эффект лайтбокса будет автоматическим.

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

Есть три различных коммерческих лицензии. Стандарт стоит 59 долларов и удаляет водяной знак, может использоваться на коммерческих веб-сайтах и ​​добавляет 6 месяцев поддержки и бесплатных обновлений.Его можно использовать на одном сайте. Unlimited стоит 79 долларов США, имеет один год поддержки и бесплатные обновления и может использоваться на неограниченном количестве веб-сайтов. Enterprise стоит 99 долларов и не имеет ограничений на поддержку и бесплатные обновления. Также доступны пакетные цены.

Lightbox Pop

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

лайтбокс CSS3

Lightbox CSS3 уникален тем, что не использует код JQuery или JavaScript. Вместо этого он использует встроенные в браузеры функции CSS3. Это делает его быстрым, потому что он не зависит от внешних библиотек.Это также делает его легким. Он будет отображать изображения, HTML, значки социальных сетей и т. Д. Это бесплатно, но не все функции включены в плагин. Например, плагин премиум-галереи доступен как надстройка.

Простой лайтбокс

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

Плагин WordPress Lightbox Ultimate

WordPress Lightbox Ultimate Plugin — это плагин премиум-класса с большим количеством функций, чем у большинства лайтбоксов. Это адаптивный лайтбокс, который отображает различные типы мультимедиа, включая изображения, видео и аудио. Типы файлов включают MP3, MP4, YouTube, Vimeo, PDF, FLV, SFW, Viddler и другие. Он работает с видео, размещенными в вашей учетной записи Amazon S3 и с Google Диска. Галереи размещаются в вашем сообщении с помощью шорткода, поэтому вы можете встроить несколько галерей изображений в одно сообщение.Вы даже можете загрузить другую HTML-страницу со своего сайта для отображения в окне лайтбокса.

Доступно три пакета: Бесплатная опция будет отображать изображения и видео, которые поддерживают большинство браузеров и систем, включая iOS. Он будет отображать изображения, flash, YouTube, Vimeo, iFrame и т. Д. Стандартный вариант стоит 39,95 долларов США и поддерживает использование для одного сайта, имеет доступ к форуму поддержки и бесплатные обновления на всю жизнь. Опция разработчика составляет 79,95 долларов США и позволяет использовать неограниченное количество сайтов.

FooBox

FooBox — это плагин для лайтбокса, который добавляет элемент социальной сети.Он размещает значки социальных сетей на самом лайтбоксе, чтобы ваши читатели могли делиться вашими медиа в своих любимых социальных сетях. Он поддерживает Facebook, Twitter, Pinterest, Google+, LinkedIn и многие другие. Он использует Deep-Linking, поэтому каждый медиа-элемент может иметь свой собственный URL-адрес. Он адаптивен и поддерживает подписи к изображениям, которые могут содержать HTML-код внутри подписи.

Этот плагин также поддерживает Justified Image Grid для автоматического создания макета. Он будет отображать видео с YouTube и Vimeo и отображать субтитры над видео.Его также можно использовать для отображения HTML-кода, поэтому вы можете использовать его для полей регистрации для форм подписки на информационные бюллетени и т. Д. Он совместим с Gravity Forms и поддерживает галереи, созданные плагином NextGen, а также собственные галереи WordPress и мозаичные галереи JetPack. FooBox также поддерживает iFrames, так что вы можете сделать предварительный просмотр другого сайта, и вашим посетителям не придется покидать ваш.

Для FooBox есть три лицензии: Personal стоит 27 долларов и может использоваться в одном домене, которым вы владеете.Поддержка и обновления подтверждены сроком на один год. Multi стоит 67 долларов и может использоваться на 5 доменах. Бизнес за 97 долларов можно использовать на неограниченном количестве доменов для вас и ваших клиентов. Вы не можете перепродавать свою лицензию. Все продления лицензий со скидкой 50% от полной цены.

iLightBox

iLightbox — еще один плагин для лайтбоксов с функциями обмена в социальных сетях. Он использует глубокие ссылки, поэтому каждое окно получает свой собственный URL-адрес. Он поддерживает Facebook, Twitter, Delicious, Reedit, Digg и Google+ и имеет значки социальных сетей по умолчанию, или вы можете добавить свои собственные.Иконки можно легко скрыть на мобильных устройствах простым жестом. Он поддерживает видео для Vimeo и YouTube, flash, Ajax, iFrames, HTML и полностью настраивается. Он даже отобразит Google Maps. Он совместим с галереями JetPack, галереями NextGen и оптимизирован для SEO.

Это плагин премиум-класса. Обычная лицензия стоит 20 долларов и может использоваться вами или одним клиентом для одного конечного продукта, за который пользователи не взимают плату. Расширенная лицензия составляет 100 долларов США и может использоваться вами или отдельным клиентом в одном конечном продукте, за который пользователям может взиматься плата.

Завершение

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