Всплывающее окно в Tilda создаётся через Zero Block с помощью функции «Popup». Этот блок не отображается на странице по умолчанию – он вызывается по клику на элемент, имеющий ссылку вида #popup:ID, где ID – уникальный идентификатор окна.
Создайте отдельный Zero Block, установите для него позицию Fixed и задайте размеры 100% по ширине и высоте. В настройках слоя включите затемнение фона и задайте Z-index выше, чем у остальных блоков. Добавьте кнопку или иконку с функцией закрытия, присвоив ей действие «Close popup».
Для активации окна добавьте ссылку на любой элемент (текст, кнопку, изображение) с указанием #popup:название в поле URL. Название должно точно совпадать с идентификатором Zero Block, установленным в параметрах блока (поле ID).
Если требуется автоматическое открытие окна, используйте настройку через HTML-блок с JavaScript-кодом, вызывающим функцию click() на нужном элементе после загрузки страницы. Это пригодно для показа окна с задержкой или при выполнении условия (например, при уходе курсора за пределы экрана).
В Tilda для создания всплывающего окна подходят блоки из категории «Окна и всплывающие окна» (Popup). Основные блоки: BF801, BF802, BF803, BF804 и BF805. Отличаются расположением элементов, фоновыми опциями и возможностью добавления формы.
Для простого уведомления достаточно блока BF801 – он содержит заголовок, текст и кнопку закрытия. Если нужно встроить форму подписки или обратной связи, используйте BF803 или BF805. Они поддерживают интеграцию с email-сервисами и имеют отдельные поля для ввода.
При необходимости показа изображения или баннера подходит блок BF802 – он позволяет разместить медиафайл и добавить текстовую подпись. BF804 – оптимальный выбор для промоакций: поддерживает таймер, фон с затемнением и кнопку с переходом.
Не используйте обычные блоки с формами (например, из категории «Форма и кнопка») – они не рассчитаны на всплывающее отображение и не поддерживают автоматическое появление или закрытие.
Для анимации появления и настройки триггеров (по кнопке, через время, при выходе) блок должен поддерживать соответствующие параметры в панели настроек. Проверяйте наличие вкладки «Popup Settings» в интерфейсе блока.
Настройка триггера открытия окна при клике
Откройте настройки блока Zero, содержащего попап, и скопируйте его ID. Пример: #popup:myform.
Перейдите к элементу, который будет служить триггером. Это может быть кнопка, ссылка или изображение. В настройках этого элемента найдите поле «Ссылка» и вставьте скопированный ID.
Если используется стандартная кнопка Tilda, откройте её настройки и в поле «Ссылка» укажите #popup:myform. Для текста или изображения используйте редактирование ссылки через иконку цепочки в редакторе.
Убедитесь, что попап размещён на той же странице. Если он находится на другой, окно не откроется.
Если необходимо вызвать окно программно, используйте JavaScript: tildapopup.open(‘myform’). Вставьте скрипт в блок T123 или T229 внизу страницы.
Проверьте работу окна в предпросмотре. Убедитесь, что ID введён без пробелов и ошибок. Если окно не открывается, проверьте, активирован ли блок с попапом и не скрыт ли он через CSS.
Автоматическое появление окна с задержкой
Чтобы настроить автоматическое появление всплывающего окна в Tilda с задержкой, откройте Zero Block и выберите элемент Popup. В правой панели перейдите в раздел Settings → Trigger.
Установите тип триггера «By time delay». В поле «Time delay (ms)» укажите нужное значение в миллисекундах. Например, для появления окна через 5 секунд введите 5000.
Если окно размещено на нескольких страницах, убедитесь, что задержка указана на каждой из них. Учитывайте, что окно не должно мешать восприятию основного контента: оптимальная задержка – от 3000 до 7000 мс.
При тестировании в браузере сбрасывайте кэш или открывайте страницу в режиме инкогнито – таймер срабатывает только при первой загрузке.
Чтобы избежать повторного показа окна пользователю, активируйте опцию «Show only once». Это особенно важно при использовании задержки, чтобы не раздражать посетителя постоянными всплывающими элементами.
Ограничение показа окна одному посещению
Чтобы окно появлялось только один раз за сессию, достаточно использовать cookie или sessionStorage. В Tilda встроенных инструментов для этого нет, поэтому потребуется добавить фрагмент кода вручную через блок T123 или T123A.
Пример с использованием sessionStorage:
<script>
document.addEventListener("DOMContentLoaded", function() {
if (!sessionStorage.getItem("popupShown")) {
sessionStorage.setItem("popupShown", "true");
var popup = document.querySelector("#rec123456"); // замените на ID блока с popup
if (popup) {
popup.style.display = "block";
}
}
});
</script>ID блока можно узнать, включив отображение ID в настройках проекта Tilda. Убедитесь, что блок с popup изначально скрыт через настройки или CSS.
Если нужно сохранить ограничение на более длительный срок, например, на сутки, используйте cookies:
<script>
function setCookie(name, value, days) {
var d = new Date();
d.setTime(d.getTime() + (days*24*60*60*1000));
document.cookie = name + "=" + value + "; expires=" + d.toUTCString() + "; path=/";
}
function getCookie(name) {
var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
document.addEventListener("DOMContentLoaded", function() {
if (!getCookie("popupShown")) {
setCookie("popupShown", "yes", 1);
var popup = document.querySelector("#rec123456"); // замените на ID блока с popup
if (popup) {
popup.style.display = "block";
}
}
});
</script>Убедитесь, что код вставлен в самый конец страницы, чтобы элементы успели загрузиться. Использование cookies подходит, если нужно ограничить показ окна на несколько дней без привязки к сессии браузера.
Добавление формы подписки во всплывающее окно
Чтобы встроить форму подписки в всплывающее окно на Tilda, выполните следующие шаги:
- Перейдите в раздел Zero Block или стандартный блок с формой.
- Создайте или выберите форму подписки, укажите необходимые поля (например, email и имя).
- Настройте интеграцию с вашей почтовой рассылкой через API или встроенные сервисы Tilda (Mailchimp, GetResponse, UniSender и др.).
- Скопируйте форму или экспортируйте её в Zero Block для последующего размещения.
- Откройте настройки всплывающего окна и вставьте форму внутрь его контента.
- Проверьте корректность работы формы: введите тестовый email, отправьте заявку и убедитесь в получении письма или записи в базу.
Рекомендации по улучшению формы подписки:
- Минимизируйте количество обязательных полей, чтобы не отпугнуть посетителей.
- Добавьте четкий призыв к действию на кнопке (например, «Подписаться» или «Получить скидку»).
- Используйте подсказки и маски для полей, чтобы снизить ошибки при вводе данных.
- Включите подтверждение успешной отправки – уведомление или перенаправление на страницу благодарности.
- Для мобильных устройств убедитесь в удобстве заполнения и отображении формы.
Если нужна автоматизация, настройте цепочку писем в вашем сервисе рассылок, чтобы сразу после подписки пользователь получил приветственное письмо.
После размещения формы протестируйте всплывающее окно на разных браузерах и устройствах, чтобы исключить баги и повысить конверсию.
Проверка отображения окна на мобильных устройствах
Для корректной работы всплывающего окна на мобильных важно проверить адаптивность и взаимодействие с элементами страницы. В Tilda откройте режим предпросмотра и выберите отображение для смартфонов. Обратите внимание на размер окна: оптимальная ширина не должна превышать 90% экрана, чтобы избежать горизонтальной прокрутки.
Проверьте, что кнопка закрытия и поля формы легко нажимаются, не перекрываются другими элементами. Минимальный рекомендуемый размер клика – 44×44 пикселя. Используйте инструменты разработчика браузера (например, Chrome DevTools) с эмуляцией мобильных устройств для тестирования.
Обратите внимание на время загрузки и появление окна: на слабых устройствах анимации не должны задерживать отображение. Если всплывающее окно содержит изображения, проверьте, что они масштабируются без искажений и не выходят за границы экрана.
Тестируйте разные ориентации экрана – портретную и ландшафтную. В Tilda можно задать отдельные настройки для мобильной версии в разделе «Адаптивность», убедитесь, что они применены и корректны.
Если в окне используются шрифты или шрифтовые иконки, убедитесь, что они читаемы при разрешении от 320 пикселей по ширине. Для проверки взаимодействия с клавиатурой мобильного устройства активируйте поля ввода и убедитесь, что окно корректно сдвигается вверх, не перекрывая поля.
Вопрос-ответ:
Как добавить всплывающее окно на сайт, созданный в Tilda?
Чтобы добавить всплывающее окно в Tilda, нужно открыть нужную страницу в редакторе, выбрать блок «Popup» из категории «Прочее» и добавить его. Затем в настройках блока можно задать содержимое окна, размеры и условия появления. После сохранения и публикации сайт будет показывать окно согласно установленным параметрам.
Какие есть варианты триггеров для показа всплывающего окна в Tilda?
В Tilda можно настроить разные способы запуска всплывающего окна: по нажатию на кнопку или ссылку, через заданное время после загрузки страницы, при попытке покинуть сайт (exit intent), а также при скролле до определённого места на странице. Выбор триггера влияет на то, когда и как посетители увидят окно.
Можно ли сделать всплывающее окно адаптивным для мобильных устройств в Tilda?
Да, всплывающие окна в Tilda автоматически адаптируются под размеры экранов. При настройке блока есть возможность проверить, как окно выглядит на разных устройствах — мобильных, планшетах и компьютерах. Важно внимательно проверить текст и кнопки, чтобы они корректно отображались и были удобны для пользователей с небольшими экранами.
Как ограничить количество показов всплывающего окна для одного посетителя на сайте в Tilda?
Для ограничения частоты появления окна в Tilda в настройках блока есть опция, позволяющая задать период, в течение которого окно не будет показываться повторно одному и тому же посетителю. Это делается с помощью cookies — при первом показе браузер запоминает событие, и окно не появляется повторно в заданный срок.
Можно ли сделать так, чтобы всплывающее окно открывалось только на определённых страницах сайта в Tilda?
Да, Tilda позволяет включать или отключать всплывающие окна для каждой страницы отдельно. Для этого в настройках блока есть возможность указать, на каких страницах окно должно появляться. Это удобно, если нужно показывать разные сообщения на разных разделах сайта или запускать окно только там, где это действительно актуально.
Как добавить всплывающее окно на сайт в Tilda?
Для создания всплывающего окна в Tilda зайдите в раздел «Настройки» нужной страницы и выберите блок с типом «Popup» или «Всплывающее окно». После добавления блока можно настроить его содержимое — текст, изображения, кнопки. Затем задайте параметры появления: при клике на кнопку, через заданное время или при прокрутке страницы. Сохраните изменения и опубликуйте страницу, чтобы проверить работу окна.
Можно ли сделать всплывающее окно, которое появляется только один раз для каждого посетителя?
Да, в Tilda есть возможность ограничить показ всплывающего окна, чтобы оно появлялось только один раз для каждого пользователя. Для этого в настройках блока с всплывающим окном нужно включить функцию, которая использует куки (cookie) или локальное хранилище браузера. Благодаря этому при повторном посещении сайта окно не будет всплывать повторно, что улучшает пользовательский опыт и снижает навязчивость.
Загрузка...
