Итак, друзья, разберёмся, что такое всплывающие окна, известные также как «popup», «попап», и о том, какие типы попап доступны на платформе Тильда, а также как их настроить, чтобы использовать их эффективно на вашем сайте.
- Что такое попап на тильде?
- Какие бывают попап на Тильде?
- Как использовать всплывающие окна?
- Как добавить попап в Тильде?
- Модификации для попап от Нолим
- Как сделать попап в Zero block?
- Аналитика и защита попап
- А как сделать на Тильде?
Что такое попап на Тильде?
Всплывающее окно на сайте — это дополнительное окно, которое появляется поверх основного содержимого страницы и обычно содержит какую-то информацию или предлагает выполнить какое-то действие.
Всплывающие окна на сайте могут использоваться для разных целей. Например, они могут служить для сбора контактных данных посетителей, предложения подписаться на рассылку, выбор языка, уведомления о скидках, акциях или новостях. Всплывающие окна могут быть использованы для активации дополнительной функциональности, например, для запуска видео или слайдера.
Tutorial: Add A YouTube Subscribe Pop-up Box
Типы всплывающих окон
Существует несколько типов всплывающих окон:
- Модальные — Блокируют остальную часть сайта.
- Немодальные — Не блокируют остальную часть сайта.
- Триггерные — Окна всплывают при определенных действиях пользователя, например, при скроллинге страницы или нажатии на кнопку.
- Таймерные — Окна всплывают через определенный промежуток времени.
Интерфейс всплывающих окон
Интерфейс всплывающих окон включают в себя следующие элементы:
- [1] Активная зона — Это зона содержит контент всплывающего окна, с котором взаимодействует пользователь.
- [2] Неактивная зона — Область всплывающего окна, которая обычно затемнена и отделяет активную зону от остального контента на сайте. Это помогает сделать акцент на контенте активной зоны и привлекает внимание пользователя за счет контраста между активной и неактивной зонами.
- [3] Иконка крестика — Иконка нужна для закрытия всплывающего окна. Также попап можно закрыть кликнув на неактивную зону
В целом, всплывающие окна могут быть полезным инструментом для улучшения пользовательского опыта и увеличения конверсии, но их использование должно быть осознанным и не навязчивым. Важно учитывать, что некоторые пользователи могут воспринимать всплывающие окна как навязчивую рекламу, поэтому важно находить баланс между их использованием и уважением к пользователю.
Какие бывают попап на Тильде?
Тильда подготовила достаточно большое количество решений для различных ситуаций. Для удобства мы поделили блоки на следующие категории:
- Интернет магазин
- Медиа контент
- Уникальные
Информационные всплывающие окна нужны для того, чтобы сообщать различную информацию пользователям, таких как, куки, скидки, акции и другие важные события, о которых должен знать пользователь.
What is a Popup? Definition & How Popups Should Be
Информационные
BF503 Popup: information опционально: заголовок, описание, кнопки и кнопки «поделиться»
Блок BF503 используют для информирования посетителей сайта, с функцией поделиться страницей в социальных сетях: Facebook, Вконтакте, Twitter и Одноклассники
T657, t886, t887 Уведомление об использовании куки
Блоки T657, T886, T887 используют для информирования посетителей сайта о сборе и обработке данных Cookie. Отличие между ними заключается в расположении контента. Настройка и редактирование данных блоков одинаковые.
T972 Уведомление об использовании куки с возможностью выбора типа блокирует появление куки от счетчиков и пикселей до подтверждения пользователем
Блок T972 имеют такой же функционал, как блок T657, но отличие в том, что контент расположен немного по-другому и есть настройки отключения сбора данных для посетителей сайта
T658 Предупреждение о возрастном ограничении
Блок T658 используют для информирования посетителей сайта о возрастном ограничении с двумя кнопками
Сообщение ОБ УСПЕШНОЙ ОТПРАВКЕ ДАННЫХ
После отправки заявки на сайте, пользователю показывается всплывающее окно, уведомляющее об успешной отправке данных. Настройка текста данного окна доступна в панели редактирования контента, а визуальное оформление можно настроить в настройках соответствующего блока.
Уведомление о добавлении товара в избранное в блоке ST110 избранное
При добавлении товара в избранное, появляется информационное окно, уведомляющее вас о добавлении товара в список избранных.
Как редактировать контент и настройки информационных попап окон
В этом разделе мы разберем информацию о том, как редактировать контент и настраивать параметры информационных блоков.
Как редактировать контент
#rec581419916,#rec581419917,#rec581420936,#rec581421042,#rec581421043,#rec581421594
Как изменять настройки
Для того чтобы редактировать контент в информационных попап, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Контент». При нажатии на кнопку «Контент» появляется боковое меню, и мы видим следующие пункты:
[1] ТЕКСТ — В первом поле нужно внести текст, который будет читать посетитель сайта при заходе на сайт. Так как блок предназначен для уведомления о файлах cookie, обычно в данном поле указывают следующий текст: «Мы используем файлы cookie для обеспечения наилучшего взаимодействия с сайтом.»
[2] ТЕКСТ КНОПКИ — Следующее поле отвечает за текст кнопки, в котором пользователь понимает и принимает условия использования файлов cookie
Не забудьте сохранить изменения, прежде чем закрыть панель редактирования, а после опубликовать, чтобы изменения отобразились на сайте.
Чтобы настроить блок T657, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Настройки». При нажатии на кнопку «Настройки» появляется боковое меню, и мы видим следующие пункты:
[1] ОСНОВНЫЕ НАСТРОЙКИ
Это раздел настроек, в котором вы сможете изменить следующие параметры:
[a] Цвет фона
[b] Цвет иконки закрытия
[c] Галочка «Положение: вдоль нижнего края экрана»
[d] Отступы от краев экрана «СЛЕВА» и «СПРАВА». Отступы нужно проставлять лишь от одного края, например если вам нужно чтобы блок появился в правой нижней части, в поле «СПРАВА» нужно добавить значение 20px. Таким образом, блок будет отображаться в правом нижнем углу экрана с отступом от края в 20px.»
[2] ТИПОГРАФИКА
Настройка “Типографики” помогает настроить стили шрифтов у попапа (всплывающего окна), при нажатии на раздел, раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
- По левому краю
- По центру
- Цвет текста
- Размер шрифта
- Шрифт (выбрать из базовых или загрузить свой)
- Межстрочное расстояние
- Межбуквенное расстояние
- Насыщенность (толщина шрифта)
- Отображение текста заглавными буквами
[3] КНОПКИ
При нажатии на настройку “Кнопки” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
- Цвет текста кнопки
- Цвет фона кнопки
- Цвет обводки кнопки
- Толщина обводки кнопки
- Радиус скругления обводки
[b] Тень. Настройка размера тени и прозрачности кнопки в статическом состоянии, а также прозрачности самой тени.
[c] Шрифт кнопки. Выбор шрифта для кнопки из базовых вариантов, предлагаемых Тильдой, или настроенных вами вариантов.
[d] Насыщенность. Настройка толщины текста на кнопке.
[e] Регистр текста кнопки. Изменение регистра текста на кнопке, например, превращение текста в заглавные буквы.
[f] Цвета при наведении. Изменения цвета фона, текста и границы кнопки при наведении курсора.
[g] Тень при наведении. Настройка тени на кнопке при наведении курсора, например, изменение ее размера.
[h] Скорость анимации. Скорость изменения цвета и размера тени при наведении на кнопку. Обычно используются значения от 0,2 до 0,4 секунд.
Попап формы часто используются, так как они помогают собирать нужную информацию у пользователей, такие как, контактные данные, детали заказа, отзывы и другое.
формы
BF501N Popup: форма подписки
Всплывающее окно BF501N используют для сбора электронной почты, которым в последствии можно делать различные информационные и рекламные рассылки
BF502N Popup: форма с множеством полей
Всплывающее окно BF502N часто используемый pop-up на Tilda. Его гибкость позволяет настроить поля формы под различные задачи, начиная от сбора контактных данных посетителя сайта, заканчивая уточнением деталей заказа, товара или услуги.
BF504 Popup: форма в углу экрана
Блок BF504 имеет такой же функционал, как блок BF502N, но отличие в том, что можно расположить всплывающее окно в конкретном углу экрана.
BF920 Popup: пошаговая форма
Блок BF920 является уникальным попапом, который позволяет создать на сайте своего рода тест, также известный как квиз. Вы можете составить список вопросов, а пользователь сможет ответить на каждый из них по порядку, благодаря возможностям BF920. Кроме того, при переходе к следующему вопросу, все ранее введенные данные сохранятся, что значительно упрощает процесс заполнения формы и сокращает время, необходимое для ее заполнения.
Как редактировать контент и настройки попап форм
В этом разделе мы разберем информацию о том, как редактировать контент и настраивать параметры в попап формах.
Как редактировать контент
Как изменять настройки
Для того чтобы редактировать контент в попап формах, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Контент». При нажатии на кнопку «Контент» появляется боковое меню, и мы видим следующие пункты:
[1] ИЗОБРАЖЕНИЕ
Можно загрузить изображение в шапку всплывающего окна, ширина данной картинки определяется шириной попапа (ширина задаётся в настройках блока), а высота изменяется пропорционально ширине
Обратите внимание, что изображения в попап могут отображаться некорректно на разных устройствах пользователей, особенно когда попап отображается на экранах с большим разрешением. Кроме того, изображения могут занимать слишком много места, затрудняя заполнение формы, поэтому лучше использовать узкие изображения или вообще отказаться от них. Стоит отметить, что в настоящее время использование изображений в попап стало менее популярным, так как может отвлекать от основной информации, которую нужно передать через попап.
[2] ЗАГОЛОВОК И ОПИСАНИЕ
В этом поле вы можете задать заголовок и описание всплывающего окна, исходя из ваших целей. Если вы меняете тут жирность, цвет, тип и размер шрифта, то эти настройки будут преобладать над настройками в блоке типографика, которая находится в настройках блока
[3] ПОЛЯ ДЛЯ ВВОДА
Поля для ввода это основная часть формы. В этом разделе вы можете добавить поле и задать ему тип, соответствующий вашим задачам, например, имя, телефон, почта, вопрос с вариантами ответов и.т.д.
Для примера расскажу как добавить поле для сбора почты посетителей:
[4] ССЫЛКА НА POP-UP
Ссылка на pop up может быть любой, самое главное, чтобы она начиналась с решетки # Что бы не путать с другими ссылками, можно вначале добавлять приписку #popup: плюс какое то обозначение, например заявка, получаем такую ссылку #popup:заявка. Но Тильда может ругать на русские слова, поэтому лучше всегда писать на английском. Можно не добавлять в тело ссылки обозначение «popup», а писать просто #заявка или #zayavka
Часто на сайте присутствуют несколько попап окон, и для того, чтобы не путать пользователей, каждый попап должен иметь свою уникальную ссылку в соответствии с его задачами.
После того как придумали название ссылки, мы должны ее указать на нужной кнопке, при нажатии на которую будет появляться наше всплывающее окно. Также можно привязать один попап к нескольким кнопкам. Если нужно собирать статистику с разных частей сайта, можно делать разные попап, но для метрических данных лучше иметь отдельный попап для каждой кнопки. Более подробно ссылки разобрали в статье «КАК СДЕЛАТЬ ССЫЛКУ НА ТИЛЬДЕ? »
[5] ПРИЁМ ДАННЫХ ИЗ ФОРМЫ
Приемщики данных можно разделить на два типа: Тильда CRM, находящаяся слева, и все остальные, расположенные справа. Вы можете получать данные не только на свою электронную почту, но и в другие сервисы и CRM системы, которые интегрированы с Тильдой, такие как MailChimp, GetResponse, UniSender, SendGrid, amoCRM, Мегаплан и многие другие. Для того чтобы приёмщик начал работать, нужно поставить галочку у соответствующего приёмщика. Для добавления новых сервисов, вам нужно подключить их в настройках сайта в разделе “Формы”. Подробную инструкцию по каждому сервису вы сможете найти в том же разделе.
[6] ТЕКСТ КНОПКИ — это один из самых важных элементов интерфейса, который привлекает внимание пользователя и заставляет его совершать действия на вашем сайте. Поэтому текст на кнопке должен быть кратким, информативным и точно передавать ее функцию. Рекомендуется использовать глаголы в повелительном наклонении, такие как «Отправить», «Сохранить», «Подтвердить» и т.д. Текст на кнопке также должен соответствовать контексту, в котором она будет использоваться, и быть понятным для пользователей.
Примеры текста на кнопке:
— «Отправить»
— «Подтвердить заказ»
— «Зарезервировать»
[7] СООБЩЕНИЯ ОБ УСПЕШНОЙ ОТПРАВКЕ ДАННЫХ — по умолчанию здесь уже прописано стандартное сообщение «Спасибо! Данные успешно отправлены». Это поле присутствует во всех формах.
[8] АДРЕС СТРАНИЦЫ В СЛУЧАЕ УСПЕХА — С помощью данного поля вы можете указать страницу, на которую пользователь будет перенаправлен после успешной отправки заявки, покупки и т.д. Это полезно, если вы хотите дать пользователю дальнейшие инструкции или подробную информацию о заказе. Функция заменяет поле «Сообщение об успешной отправке данных».
По закону владельцы сайтов имеют право обрабатывать персональные данные клиентов только после их согласия, поэтому мы рекомендуем разместить под формой предупреждающий текст со ссылкой на вашу политику в отношении обработки персональных данных (можно разместить на отдельной странице). Пример: «Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности».
Не забудьте сохранить изменения перед закрытием панели редактирования.
Чтобы настроить блоки-формы, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Настройки». При нажатии на кнопку «Настройки» появляется боковое меню, и мы видим следующие пункты:
Источник: nolim.cc
Video PopUp видео всплывающее окно на сайт WordPress плагин
Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта wordpress ! Сегодня вы узнаете как сделать на своём сайте всплывающее видео окно. Пользователи вашего сайта смогут просматривать видео в отдельном всплывающем окне, при нажатии на любой текст или изображение, который вы укажите. Всплывающее видео в лайтбокс окне вы сможете добавить на сайт с помощью простого шорткода. В шорткоде вам нужно только указать URL адрес видео YouTube или Vimeo и текст, при нажатии на который будет появляться видео.
Всё просто, на сайте жмёте на текст в виде ссылки. (Можно изображение. В конце записи мы рассмотрим как сделать всплывающее видео при нажатии на изображение)
После чего появляется видео во всплывающем окне.
Установить плагин Video PopUp вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, на странице установленных плагинов, рядом с названием плагина нажмите на вкладку — Детали . В «Деталях» плагина на вкладке «Установка» скопируйте шорткод.
Всё готово ! На сайте будет отображаться текст, при нажатии на который будет появляться видео.
Всплывающее видео при нажатии на изображение
Смотрите, всё очень просто. Открываете для редактирования любую запись или страницу. Переходите на вкладку «Текст» в верхнем правом углу. Вставляете специальный код. В код вы добавляете URL адрес своего видео и изображения, как показано на скриншоте.
Сохраняете страницу.
Вот этот код:
На сайте у вас будет отображаться изображение, при нажатии на которое будет появляться видео.
При нажатии на изображение появляется видео во всплывающем окне.
Остались вопросы ? Напиши комментарий ! Удачи !
Источник: info-effect.ru
Всплывающие окна с видео (урок CSS)
Как настроить PopUp с YouTube видео (модальное окно) работающий на CSS — смотрите в уроке Александра Новикова.
Ваши ссылки: скачать видео
Информация о видео
Постоянная ссылка на страницу:
Вам также может понравиться
Закачка видео в телефон с YouTube (урок Telegram)
Психотриггеры (видеоурок)
Семь шагов для заработка на реселлинге (видеокурс)
Сокращатель партнерских ссылок (видеоурок)
Форматированные посты с кнопками (урок Telegram)
Структура сайта (видеоурок)
Оставить комментарий X
You must be logged in to post a comment.
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
Навигация по архиву
Ещё интересное видео
JQuery FancyBox — всплывающие окна с видео (видеоурок)
YouTube FancyBox — всплывающие окна с видео (урок WordPress)
Как работать с плагином YouTube FancyBox, который управляет всплывающими окнами со встроенным видео с YouTube на сайтах работающих под управлением CMS WordPress — смотрите в уроке Александра Новикова. Дополнительные ссылки: Скачать исправленную версию плагина YouTube FancyBox. Параметры проигрывателя. Демонстрация YouTube Player API. Улучшайте функционал вашего сайта на движке WordPress с помощью всплывающих окон со встроенным […]
PopUp для сайта (видеоурок)
Источник: prodaga.com