О НАС
КЛИЕНТАМ
ПАРТНЁРАМ
СЛЕДИТЕ ЗА НАМИ
ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:
В ЧАТ-БОТЕ:
- Что такое попап (всплывающее окно) на сайте?
- Какие бывают попап (всплывающие окна) на Тильде?
- Где устанавливаются попапы (всплывающие окна)?
- Как установить попап (всплывающее окно) в Тильде?
- Модификации для попап (всплывающих окон) от Nolim
- Аналитика попап (всплывающих окон)
- А как сделать на Тильде?
Время прочтения: 38 минут
Апрель, 2023
Как сделать попап на Тильде?
Итак, друзья, разберёмся, что такое всплывающие окна, известные также как "popup", "попап", и о том, какие типы попап доступны на платформе Тильда, а также как их настроить, чтобы использовать их эффективно на вашем сайте.
Что такое попап на Тильде?
Всплывающее окно на сайте — это дополнительное окно, которое появляется поверх основного содержимого страницы и обычно содержит какую-то информацию или предлагает выполнить какое-то действие.
Всплывающие окна на сайте могут использоваться для разных целей. Например, они могут служить для сбора контактных данных посетителей, предложения подписаться на рассылку, выбор языка, уведомления о скидках, акциях или новостях. Всплывающие окна могут быть использованы для активации дополнительной функциональности, например, для запуска видео или слайдера.
Всплывающие окна на сайте могут использоваться для разных целей. Например, они могут служить для сбора контактных данных посетителей, предложения подписаться на рассылку, выбор языка, уведомления о скидках, акциях или новостях. Всплывающие окна могут быть использованы для активации дополнительной функциональности, например, для запуска видео или слайдера.
Типы всплывающих окон
Существует несколько типов всплывающих окон:
- Модальные — Блокируют остальную часть сайта.
- Немодальные — Не блокируют остальную часть сайта.
- Триггерные — Окна всплывают при определенных действиях пользователя, например, при скроллинге страницы или нажатии на кнопку.
- Таймерные — Окна всплывают через определенный промежуток времени.
Интерфейс всплывающих окон
Интерфейс всплывающих окон включают в себя следующие элементы:
- [1] Активная зона — Это зона содержит контент всплывающего окна, с котором взаимодействует пользователь.
- [2] Неактивная зона — Область всплывающего окна, которая обычно затемнена и отделяет активную зону от остального контента на сайте. Это помогает сделать акцент на контенте активной зоны и привлекает внимание пользователя за счет контраста между активной и неактивной зонами.
- [3] Иконка крестика — Иконка нужна для закрытия всплывающего окна. Также попап можно закрыть кликнув на неактивную зону
В целом, всплывающие окна могут быть полезным инструментом для улучшения пользовательского опыта и увеличения конверсии, но их использование должно быть осознанным и не навязчивым. Важно учитывать, что некоторые пользователи могут воспринимать всплывающие окна как навязчивую рекламу, поэтому важно находить баланс между их использованием и уважением к пользователю.
Какие бывают попап на Тильде?
Тильда подготовила достаточно большое количество решений для различных ситуаций. Для удобства мы поделили блоки на следующие категории:
Информационные всплывающие окна нужны для того, чтобы сообщать различную информацию пользователям, таких как, куки, скидки, акции и другие важные события, о которых должен знать пользователь.
Информационные
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
#rec581430322,#rec581430323,#rec581430434,#rec581430677,#rec581430678,#rec581431017,#rec581431018,#rec581432246,#rec581432248
Для того чтобы редактировать контент в информационных попап, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Контент». При нажатии на кнопку «Контент» появляется боковое меню, и мы видим следующие пункты:
[1] ТЕКСТ — В первом поле нужно внести текст, который будет читать посетитель сайта при заходе на сайт. Так как блок предназначен для уведомления о файлах cookie, обычно в данном поле указывают следующий текст: "Мы используем файлы cookie для обеспечения наилучшего взаимодействия с сайтом."
[2] ТЕКСТ КНОПКИ — Следующее поле отвечает за текст кнопки, в котором пользователь понимает и принимает условия использования файлов cookie
[2] ТЕКСТ КНОПКИ — Следующее поле отвечает за текст кнопки, в котором пользователь понимает и принимает условия использования файлов cookie
Не забудьте сохранить изменения, прежде чем закрыть панель редактирования, а после опубликовать, чтобы изменения отобразились на сайте.
Чтобы настроить блок T657, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Настройки». При нажатии на кнопку «Настройки» появляется боковое меню, и мы видим следующие пункты:
[1] ОСНОВНЫЕ НАСТРОЙКИ
Это раздел настроек, в котором вы сможете изменить следующие параметры:
[a] Цвет фона
[b] Цвет иконки закрытия
[c] Галочка «Положение: вдоль нижнего края экрана»
[d] Отступы от краев экрана «СЛЕВА» и «СПРАВА». Отступы нужно проставлять лишь от одного края, например если вам нужно чтобы блок появился в правой нижней части, в поле «СПРАВА» нужно добавить значение 20px. Таким образом, блок будет отображаться в правом нижнем углу экрана с отступом от края в 20px."
Это раздел настроек, в котором вы сможете изменить следующие параметры:
[a] Цвет фона
[b] Цвет иконки закрытия
[c] Галочка «Положение: вдоль нижнего края экрана»
[d] Отступы от краев экрана «СЛЕВА» и «СПРАВА». Отступы нужно проставлять лишь от одного края, например если вам нужно чтобы блок появился в правой нижней части, в поле «СПРАВА» нужно добавить значение 20px. Таким образом, блок будет отображаться в правом нижнем углу экрана с отступом от края в 20px."
[2] ТИПОГРАФИКА
Настройка “Типографики” помогает настроить стили шрифтов у попапа (всплывающего окна), при нажатии на раздел, раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Выравнивание — Настройка выравнивания действует только на текст. Доступны следующие параметры выравнивания:
[b] Текст — Настраиваются следующие параметры:
Настройка “Типографики” помогает настроить стили шрифтов у попапа (всплывающего окна), при нажатии на раздел, раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Выравнивание — Настройка выравнивания действует только на текст. Доступны следующие параметры выравнивания:
- По левому краю
- По центру
[b] Текст — Настраиваются следующие параметры:
- Цвет текста
- Размер шрифта
- Шрифт (выбрать из базовых или загрузить свой)
- Межстрочное расстояние
- Межбуквенное расстояние
- Насыщенность (толщина шрифта)
- Отображение текста заглавными буквами
[3] КНОПКИ
При нажатии на настройку “Кнопки” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Кнопка
При нажатии «Дополнительные настройки» появляются еще настройки для кнопки, где можно настроить:
[b] Тень. Настройка размера тени и прозрачности кнопки в статическом состоянии, а также прозрачности самой тени.
[c] Шрифт кнопки. Выбор шрифта для кнопки из базовых вариантов, предлагаемых Тильдой, или настроенных вами вариантов.
[d] Насыщенность. Настройка толщины текста на кнопке.
[e] Регистр текста кнопки. Изменение регистра текста на кнопке, например, превращение текста в заглавные буквы.
[f] Цвета при наведении. Изменения цвета фона, текста и границы кнопки при наведении курсора.
[g] Тень при наведении. Настройка тени на кнопке при наведении курсора, например, изменение ее размера.
[h] Скорость анимации. Скорость изменения цвета и размера тени при наведении на кнопку. Обычно используются значения от 0,2 до 0,4 секунд.
При нажатии на настройку “Кнопки” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Кнопка
- Цвет текста кнопки
- Цвет фона кнопки
- Цвет обводки кнопки
- Толщина обводки кнопки
- Радиус скругления обводки
При нажатии «Дополнительные настройки» появляются еще настройки для кнопки, где можно настроить:
[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. Кроме того, при переходе к следующему вопросу, все ранее введенные данные сохранятся, что значительно упрощает процесс заполнения формы и сокращает время, необходимое для ее заполнения.
Как редактировать контент и настройки попап форм
В этом разделе мы разберем информацию о том, как редактировать контент и настраивать параметры в попап формах.
#rec582075323,#rec582075324,#rec582075636,#rec582075661,#rec582075662,#rec582075869,#rec582075870,#rec582075944,#rec582075945,#rec582076073,#rec582076074,#rec582076221,#rec582076223,#rec582076483,#rec582076484,#rec582076921
#rec582068343,#rec582068344,#rec582072417,#rec582072435,#rec582073044,#rec582073206,#rec582073207,#rec582073715,#rec582073717,#rec582073925,#rec582073926,#rec582074337,#rec582074339,#rec582074819
Для того чтобы редактировать контент в попап формах, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Контент». При нажатии на кнопку «Контент» появляется боковое меню, и мы видим следующие пункты:
[1] ИЗОБРАЖЕНИЕ
Можно загрузить изображение в шапку всплывающего окна, ширина данной картинки определяется шириной попапа (ширина задаётся в настройках блока), а высота изменяется пропорционально ширине
Обратите внимание, что изображения в попап могут отображаться некорректно на разных устройствах пользователей, особенно когда попап отображается на экранах с большим разрешением. Кроме того, изображения могут занимать слишком много места, затрудняя заполнение формы, поэтому лучше использовать узкие изображения или вообще отказаться от них. Стоит отметить, что в настоящее время использование изображений в попап стало менее популярным, так как может отвлекать от основной информации, которую нужно передать через попап.
Можно загрузить изображение в шапку всплывающего окна, ширина данной картинки определяется шириной попапа (ширина задаётся в настройках блока), а высота изменяется пропорционально ширине
Обратите внимание, что изображения в попап могут отображаться некорректно на разных устройствах пользователей, особенно когда попап отображается на экранах с большим разрешением. Кроме того, изображения могут занимать слишком много места, затрудняя заполнение формы, поэтому лучше использовать узкие изображения или вообще отказаться от них. Стоит отметить, что в настоящее время использование изображений в попап стало менее популярным, так как может отвлекать от основной информации, которую нужно передать через попап.
[2] ЗАГОЛОВОК И ОПИСАНИЕ
В этом поле вы можете задать заголовок и описание всплывающего окна, исходя из ваших целей. Если вы меняете тут жирность, цвет, тип и размер шрифта, то эти настройки будут преобладать над настройками в блоке типографика, которая находится в настройках блока
В этом поле вы можете задать заголовок и описание всплывающего окна, исходя из ваших целей. Если вы меняете тут жирность, цвет, тип и размер шрифта, то эти настройки будут преобладать над настройками в блоке типографика, которая находится в настройках блока
[3] ПОЛЯ ДЛЯ ВВОДА
Поля для ввода это основная часть формы. В этом разделе вы можете добавить поле и задать ему тип, соответствующий вашим задачам, например, имя, телефон, почта, вопрос с вариантами ответов и.т.д.
Для примера расскажу как добавить поле для сбора почты посетителей:
Если поля будут отсутствовать во всплывающем окне, то оно превратится просто в информационное окно.
Поля для ввода это основная часть формы. В этом разделе вы можете добавить поле и задать ему тип, соответствующий вашим задачам, например, имя, телефон, почта, вопрос с вариантами ответов и.т.д.
Для примера расскажу как добавить поле для сбора почты посетителей:
- В раскрывшемся разделе «Поля для ввода», прокрутите вниз и нажмите кнопку «Добавить поле для ввода».
- В поле «Тип» выберите «E-mail».
- В поле «Заголовок поля» напишите «Укажите вашу электронную почту».
- В поле «Подсказка значения» напишите «example@mail.ru».
- В поле «Имя переменной» напишите «pochta». Когда вы получите заявку от пользователя, данное поле поможет вам понять что пользователь заполнял электронную почту.
- В конце списка полей также поставьте галочку в поле «Обязательно для заполнения», чтобы пользователь не мог отправить заявку без заполнения нынешнего веса.
- После добавления всех нужных полей, сохраните изменения, нажав на оранжевую кнопку «Сохранить и закрыть» в верхней части панели настроек блока.
- Не забудьте опубликовать изменения на сайт. Для этого наведите на правый верхний угол экрана, курсор мыши и нажмите кнопку «Опубликовать».
Если поля будут отсутствовать во всплывающем окне, то оно превратится просто в информационное окно.
[4] ССЫЛКА НА POP-UP
Ссылка на pop up может быть любой, самое главное, чтобы она начиналась с решетки # Что бы не путать с другими ссылками, можно вначале добавлять приписку #popup: плюс какое то обозначение, например заявка, получаем такую ссылку #popup:заявка. Но Тильда может ругать на русские слова, поэтому лучше всегда писать на английском. Можно не добавлять в тело ссылки обозначение «popup», а писать просто #заявка или #zayavka
Часто на сайте присутствуют несколько попап окон, и для того, чтобы не путать пользователей, каждый попап должен иметь свою уникальную ссылку в соответствии с его задачами.
После того как придумали название ссылки, мы должны ее указать на нужной кнопке, при нажатии на которую будет появляться наше всплывающее окно. Также можно привязать один попап к нескольким кнопкам. Если нужно собирать статистику с разных частей сайта, можно делать разные попап, но для метрических данных лучше иметь отдельный попап для каждой кнопки. Более подробно ссылки разобрали в статье «КАК СДЕЛАТЬ ССЫЛКУ НА ТИЛЬДЕ? »
Ссылка на pop up может быть любой, самое главное, чтобы она начиналась с решетки # Что бы не путать с другими ссылками, можно вначале добавлять приписку #popup: плюс какое то обозначение, например заявка, получаем такую ссылку #popup:заявка. Но Тильда может ругать на русские слова, поэтому лучше всегда писать на английском. Можно не добавлять в тело ссылки обозначение «popup», а писать просто #заявка или #zayavka
Часто на сайте присутствуют несколько попап окон, и для того, чтобы не путать пользователей, каждый попап должен иметь свою уникальную ссылку в соответствии с его задачами.
После того как придумали название ссылки, мы должны ее указать на нужной кнопке, при нажатии на которую будет появляться наше всплывающее окно. Также можно привязать один попап к нескольким кнопкам. Если нужно собирать статистику с разных частей сайта, можно делать разные попап, но для метрических данных лучше иметь отдельный попап для каждой кнопки. Более подробно ссылки разобрали в статье «КАК СДЕЛАТЬ ССЫЛКУ НА ТИЛЬДЕ? »
[5] ПРИЁМ ДАННЫХ ИЗ ФОРМЫ
Приемщики данных можно разделить на два типа: Тильда CRM, находящаяся слева, и все остальные, расположенные справа. Вы можете получать данные не только на свою электронную почту, но и в другие сервисы и CRM системы, которые интегрированы с Тильдой, такие как MailChimp, GetResponse, UniSender, SendGrid, amoCRM, Мегаплан и многие другие. Для того чтобы приёмщик начал работать, нужно поставить галочку у соответствующего приёмщика. Для добавления новых сервисов, вам нужно подключить их в настройках сайта в разделе “Формы”. Подробную инструкцию по каждому сервису вы сможете найти в том же разделе.
Приемщики данных можно разделить на два типа: Тильда CRM, находящаяся слева, и все остальные, расположенные справа. Вы можете получать данные не только на свою электронную почту, но и в другие сервисы и CRM системы, которые интегрированы с Тильдой, такие как MailChimp, GetResponse, UniSender, SendGrid, amoCRM, Мегаплан и многие другие. Для того чтобы приёмщик начал работать, нужно поставить галочку у соответствующего приёмщика. Для добавления новых сервисов, вам нужно подключить их в настройках сайта в разделе “Формы”. Подробную инструкцию по каждому сервису вы сможете найти в том же разделе.
[6] ТЕКСТ КНОПКИ — это один из самых важных элементов интерфейса, который привлекает внимание пользователя и заставляет его совершать действия на вашем сайте. Поэтому текст на кнопке должен быть кратким, информативным и точно передавать ее функцию. Рекомендуется использовать глаголы в повелительном наклонении, такие как "Отправить", "Сохранить", "Подтвердить" и т.д. Текст на кнопке также должен соответствовать контексту, в котором она будет использоваться, и быть понятным для пользователей.
Примеры текста на кнопке:
- "Отправить"
- "Подтвердить заказ"
- "Зарезервировать"
[7] СООБЩЕНИЯ ОБ УСПЕШНОЙ ОТПРАВКЕ ДАННЫХ — по умолчанию здесь уже прописано стандартное сообщение "Спасибо! Данные успешно отправлены". Это поле присутствует во всех формах.
[8] АДРЕС СТРАНИЦЫ В СЛУЧАЕ УСПЕХА — С помощью данного поля вы можете указать страницу, на которую пользователь будет перенаправлен после успешной отправки заявки, покупки и т.д. Это полезно, если вы хотите дать пользователю дальнейшие инструкции или подробную информацию о заказе. Функция заменяет поле "Сообщение об успешной отправке данных".
[9] ТЕКСТ ПОД ФОРМОЙ — Данное поле находится под кнопкой формы и позволяет вам предупредить пользователя о чем-то важном, например, что его ожидает после отправки заявки или заказа. Какое содержание поместить в это поле зависит от ваших целей и не является обязательным для заполнения.
Примеры текста на кнопке:
- "Отправить"
- "Подтвердить заказ"
- "Зарезервировать"
[7] СООБЩЕНИЯ ОБ УСПЕШНОЙ ОТПРАВКЕ ДАННЫХ — по умолчанию здесь уже прописано стандартное сообщение "Спасибо! Данные успешно отправлены". Это поле присутствует во всех формах.
[8] АДРЕС СТРАНИЦЫ В СЛУЧАЕ УСПЕХА — С помощью данного поля вы можете указать страницу, на которую пользователь будет перенаправлен после успешной отправки заявки, покупки и т.д. Это полезно, если вы хотите дать пользователю дальнейшие инструкции или подробную информацию о заказе. Функция заменяет поле "Сообщение об успешной отправке данных".
[9] ТЕКСТ ПОД ФОРМОЙ — Данное поле находится под кнопкой формы и позволяет вам предупредить пользователя о чем-то важном, например, что его ожидает после отправки заявки или заказа. Какое содержание поместить в это поле зависит от ваших целей и не является обязательным для заполнения.
По закону владельцы сайтов имеют право обрабатывать персональные данные клиентов только после их согласия, поэтому мы рекомендуем разместить под формой предупреждающий текст со ссылкой на вашу политику в отношении обработки персональных данных (можно разместить на отдельной странице). Пример: «Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности».
Не забудьте сохранить изменения перед закрытием панели редактирования.
Не забудьте сохранить изменения перед закрытием панели редактирования.
Чтобы настроить блоки-формы, нужно навести курсор мыши в левый верхний угол блока и нажать на кнопку «Настройки». При нажатии на кнопку «Настройки» появляется боковое меню, и мы видим следующие пункты:
[1] ШИРИНА — Данная настройка определяет ширину попапа (всплывающего окна) на вашем сайте. Для компьютерной версии вы можете выбрать один из 7 вариантов ширины, начиная от 6 и заканчивая 12 столбцами с шагом в 1 столбец, или установить ширину в 100%, чтобы всплывающее окно растягивалось на всю ширину экрана, не зависимо от его размера.
На Тильде один столбец равен 60 пикселям, а между столбцами есть фиксированный отступ в 40 пикселей. Всплывающее окно всегда будет располагаться по центру экрана, независимо от его ширины. Например, если вы установите размер блока в 8 столбцов, то его ширина будет составлять 8х60+7х40=760 пикселей.
В мобильной версии ширина всплывающего окна всегда будет 100% от ширины экрана мобильного устройства, обычно это от 320 до 480 пикселей.
[2] ВЫРАВНИВАНИЕ — Эта настройка относится только к контенту внутри попапа (всплывающего окна), такому как текст и кнопка. Доступны три опции: "По центру", "По левому краю" и "По правому краю". Само всплывающее окно всегда будет выравниваться по центру экрана.
[3] НАЗВАНИЕ ФОРМЫ — Данное поле помогает понять, из какой формы пришла заявка. Не отображается на сайте.
На Тильде один столбец равен 60 пикселям, а между столбцами есть фиксированный отступ в 40 пикселей. Всплывающее окно всегда будет располагаться по центру экрана, независимо от его ширины. Например, если вы установите размер блока в 8 столбцов, то его ширина будет составлять 8х60+7х40=760 пикселей.
В мобильной версии ширина всплывающего окна всегда будет 100% от ширины экрана мобильного устройства, обычно это от 320 до 480 пикселей.
[2] ВЫРАВНИВАНИЕ — Эта настройка относится только к контенту внутри попапа (всплывающего окна), такому как текст и кнопка. Доступны три опции: "По центру", "По левому краю" и "По правому краю". Само всплывающее окно всегда будет выравниваться по центру экрана.
[3] НАЗВАНИЕ ФОРМЫ — Данное поле помогает понять, из какой формы пришла заявка. Не отображается на сайте.
[4] POP-UP
При нажатии на настройку “POPUP” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
На скриншоте вы можете заметить "синюю пипетку" рядом с полями, которая позволяет выбрать цвет без необходимости вводить его код вручную. Эта удобная функция не доступна в стандартной версии Тильды, но я использую расширение от Нолим, которое позволяет модифицировать и улучшать не только блоки, но и интерфейс самой платформы. Если вам интересно, вы можете установить это расширение, перейдя по ссылке.
При нажатии на настройку “POPUP” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
- [a] Цвет фона всплывающего окна — В этом поле выбирается цвет фона (активной зоны), не путать с затемнением (не активной зоны)
- [b] Затемнение фона: цвет — Это поле отвечает за цвет затемнения
- [c] Затемнение фона: непрозрачность — Настройка прозрачности затемнения, где 100% - это полностью затемняет, 0% - затемнения фона отсутствует и контент позади попапа будет виден.
- [d] Цвет иконки закрытия — Иногда нужно перекрасить цвет иконки закрытия, чтобы пользователь мог найти и закрыть попап
На скриншоте вы можете заметить "синюю пипетку" рядом с полями, которая позволяет выбрать цвет без необходимости вводить его код вручную. Эта удобная функция не доступна в стандартной версии Тильды, но я использую расширение от Нолим, которое позволяет модифицировать и улучшать не только блоки, но и интерфейс самой платформы. Если вам интересно, вы можете установить это расширение, перейдя по ссылке.
[5] СТИЛЬ ПОЛЕЙ ДЛЯ ВВОДА
Этот раздел отвечает за визуальное оформление полей для ввода. В этом разделе вы сможете редактировать следующие параметры:
[a] Цвета
[b] Толщину и радиус скругления обводки
[c] Стилизовать поля для ввода - оставить только нижнюю границу поля
[d] Оставлять подсказку поля видимой при клике на поле
Этот раздел отвечает за визуальное оформление полей для ввода. В этом разделе вы сможете редактировать следующие параметры:
[a] Цвета
- галочек/переключателей
- текста
- фона
- обводки
- заголовка
[b] Толщину и радиус скругления обводки
[c] Стилизовать поля для ввода - оставить только нижнюю границу поля
[d] Оставлять подсказку поля видимой при клике на поле
[6] КНОПКИ
При нажатии на настройку “Кнопки” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Первая кнопка
При нажатии «Дополнительные настройки» появляются еще настройки для кнопки, где можно настроить:
[b] Тень — Настройка размера тени и прозрачности кнопки в статическом состоянии, а также прозрачности самой тени.
[c] Шрифт кнопки — Выбор шрифта для кнопки из базовых вариантов, предлагаемых Тильдой, или настроенных вами вариантов.
[d] Насыщенность — Настройка толщины текста на кнопке.
[e] Регистр текста кнопки — Изменение регистра текста на кнопке, например, превращение текста в заглавные буквы.
[f] Цвета при наведении — Изменения цвета фона, текста и границы кнопки при наведении курсора.
[g] Тень при наведении — Настройка тени на кнопке при наведении курсора, например, изменение ее размера.
[h] Скорость анимации — Скорость изменения цвета и размера тени при наведении на кнопку. Обычно используются значения от 0,2 до 0,4 секунд.
При нажатии на настройку “Кнопки” раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Первая кнопка
- Цвет текста кнопки
- Цвет фона кнопки
- Цвет обводки кнопки
- Толщина обводки кнопки
- Радиус скругления обводки
- И галочка «Отправлять данные о клике в систему аналитики»
При нажатии «Дополнительные настройки» появляются еще настройки для кнопки, где можно настроить:
[b] Тень — Настройка размера тени и прозрачности кнопки в статическом состоянии, а также прозрачности самой тени.
[c] Шрифт кнопки — Выбор шрифта для кнопки из базовых вариантов, предлагаемых Тильдой, или настроенных вами вариантов.
[d] Насыщенность — Настройка толщины текста на кнопке.
[e] Регистр текста кнопки — Изменение регистра текста на кнопке, например, превращение текста в заглавные буквы.
[f] Цвета при наведении — Изменения цвета фона, текста и границы кнопки при наведении курсора.
[g] Тень при наведении — Настройка тени на кнопке при наведении курсора, например, изменение ее размера.
[h] Скорость анимации — Скорость изменения цвета и размера тени при наведении на кнопку. Обычно используются значения от 0,2 до 0,4 секунд.
[7] ТИПОГРАФИКА
Настройка “Типографики” помогает настроить стили шрифтов у попапа (всплывающего окна), при нажатии на раздел, раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Заголовок, [b] описание — Порядок настройки для этих элементов идентичен, настраиваются следующие параметры:
Настройка “Типографики” помогает настроить стили шрифтов у попапа (всплывающего окна), при нажатии на раздел, раскрывается окно и в появившемся окне мы можем изменить следующие параметры:
[a] Заголовок, [b] описание — Порядок настройки для этих элементов идентичен, настраиваются следующие параметры:
- Цвет текста
- Размер шрифта
- Шрифт (выбрать из базовых или загрузить свой)
- Межстрочное расстояние
- Насыщенность (толщина шрифта)
- Отображение текста заглавными буквами
- Отступ сверху
- Отступ снизу
- Максимальная ширина
Не забудьте сохранить изменения перед закрытием панели редактирования.
триггерные
Триггерные блоки предлагают различные способы автоматизации открытия всплывающих окон, но будьте осторожны, так как обычно пользователи не любят этот тип попапов и могут вызвать негативную реакцию.
t183 Триггер: показывать поп-ап при скролле
Блок T183 поможет вам настроить появления всплывающего окна при прокрутки страницы в нужном вам участке сайта.
t188 Триггер: показывать поп-ап по таймеру
Блок T188 автоматически открывает попап по истечении заданного вами времени.
t723 Триггер: показывать попап при закрытии окна
Блок t723 автоматически открывает попап, когда посетитель закрывает вкладку.
Как редактировать контент и настройки Триггерных блоков
В этом разделе мы разберем информацию о том, как редактировать контент и настраивать параметры триггерных блоков.
#rec582078910,#rec582078911,#rec582079363,#rec582080086,#rec582079364,#rec582080352,#rec582080353,#rec582080463,#rec582080464,#rec582080630,#rec582080631,#rec582080776,#rec582080779,#rec582081674
Для того чтобы редактировать контент или настройки триггерных блоков, нужно навести курсор мыши в левый верхний угол блока с формой и нажать на кнопку соответствующей вашей задачи.
ПРИНЦИП РАБОТЫ ТРИГГЕРНЫХ БЛОКОВ
Триггерные блоки позволяют автоматизировать открытие всплывающего окна, поэтому вся настройка, которую можно отредактировать в панели управления — это ссылка на всплывающее окно, которое вы хотите открыть. Если вы хотите внести изменения в поля формы или кнопки, вам нужно перейти к редактированию самого всплывающего окна, а не триггерного блока.
Вот инструкция по применению триггерного блока:
Триггерные блоки позволяют автоматизировать открытие всплывающего окна, поэтому вся настройка, которую можно отредактировать в панели управления — это ссылка на всплывающее окно, которое вы хотите открыть. Если вы хотите внести изменения в поля формы или кнопки, вам нужно перейти к редактированию самого всплывающего окна, а не триггерного блока.
Вот инструкция по применению триггерного блока:
- Добавьте любой всплывающий блок. В меню "Контент" укажите ссылку в формате #popup:block (ссылку можете указать свою, но не забывайте про # в начале ссылки).
- Добавьте триггерный блоки и настройте параметры в настройках. Про настройки каждого триггерного блока мы описали ниже
- Укажите ссылку попапа, который вы задали на шаге 1: #popup:block.
- Опубликуйте страницу.
НАСТРОЙКИ БЛОКА T723
В настройках блока T723 вы можете найти такой параметр как «ЗАДЕРЖКА ПЕРЕД НАЧАЛОМ РАБОТЫ ТРИГГЕРА (В СЕКУНДАХ)»
Настройка устанавливает время посещения страницы, после которого триггер на закрытие вкладки будет срабатывать для посетителя. Она позволяет снизить негативный опыт для посетителей, которые решили сразу покинуть страницу или перейти на другую вкладку. Время указывайте в секундах.
В настройках блока T723 вы можете найти такой параметр как «ЗАДЕРЖКА ПЕРЕД НАЧАЛОМ РАБОТЫ ТРИГГЕРА (В СЕКУНДАХ)»
Настройка устанавливает время посещения страницы, после которого триггер на закрытие вкладки будет срабатывать для посетителя. Она позволяет снизить негативный опыт для посетителей, которые решили сразу покинуть страницу или перейти на другую вкладку. Время указывайте в секундах.
НАСТРОЙКИ БЛОКА T188
В настройках блока T188 вы можете найти такой параметр как «ТАЙМЕР (В СЕКУНДАХ)»
Укажите в данном поле через какое время будет всплывать попап. Время указывайте в секундах.
В настройках блока T188 вы можете найти такой параметр как «ТАЙМЕР (В СЕКУНДАХ)»
Укажите в данном поле через какое время будет всплывать попап. Время указывайте в секундах.
НАСТРОЙКИ БЛОКА T183
В настройках блока T183 вы можете найти такой параметр как «КОГДА СРАБАТЫВАТЬ ПРИ ПОЯВЛЕНИИ БЛОКА В ОКНЕ»
В данном поле вы настраиваете когда будет всплывать попап с момента достижения триггерного блока. Например если выбрать значение «В середине», то триггер сработает, когда достигнет середины вашего экрана.
Доступны следующие занчения:
В настройках блока T183 вы можете найти такой параметр как «КОГДА СРАБАТЫВАТЬ ПРИ ПОЯВЛЕНИИ БЛОКА В ОКНЕ»
В данном поле вы настраиваете когда будет всплывать попап с момента достижения триггерного блока. Например если выбрать значение «В середине», то триггер сработает, когда достигнет середины вашего экрана.
Доступны следующие занчения:
- При появлении (внизу экрана)
- В середине
- При покидании (вверху экрана)
КОЛИЧЕСТВО ДНЕЙ ДО ПОВТОРНОГО ПОЯВЛЕНИЯ БЛОКА
Данный параметр есть в каждой настройке триггерных блоков.
Укажите количество дней, после которого блок по этому триггеру покажется еще раз. Если установить -1, то блок будет показываться при каждом открытии сайта
Данный параметр есть в каждой настройке триггерных блоков.
Укажите количество дней, после которого блок по этому триггеру покажется еще раз. Если установить -1, то блок будет показываться при каждом открытии сайта
COOKIE NAME (НАЗВАНИЕ ПЕРЕМЕННОЙ)
Данный параметр есть в каждой настройке триггерных блоков.
Укажите название переменной, которая будет использоваться при аналитике, чтобы понять, какой триггер открыл попап.
Данный параметр есть в каждой настройке триггерных блоков.
Укажите название переменной, которая будет использоваться при аналитике, чтобы понять, какой триггер открыл попап.
Не забудьте сохранить изменения перед закрытием панели редактирования.
В интернет-магазинах также используются всплывающие окна, которые помогают более подробно ознакомиться с товаром и отображают содержимое корзины покупателя.
Интернет магазин
ST100 Корзина с формой заказа для одного или нескольких товаров/услуг, С онлайн оплатой или без
Корзина в интернет-магазине может использоваться как для продажи ассортимента товаров, так и для единичных товаров или услуг, например, если нужно выбрать количество. После нажатия на кнопку "Купить", появляется всплывающее окно корзины, в котором отображается заказ, предоставляется возможность редактирования заказа и заполнения полей для перехода к оплате.
ST105 Платежная система. прямая оплата без корзины
Блок ST105 позволяет добавить функцию оплаты на ваш сайт к любой кнопке или тексту. Он особенно удобен, если у вас только один товар или услуга и вы не хотите усложнять процесс покупки для пользователей, добавляя дополнительный шаг в виде корзины.
ST300, ST305N, ST310N, ST315N, ST320N, ST330, ST500, ST505, ST510 Карточки продуктов с кнопками, с фильтрами и фоном + Popup с подробной информацией
Основная функция блоков ST300, ST305N, ST310N, ST315N, ST320N, ST330, ST500, ST505 и ST510 заключается в демонстрации товаров в интернет-магазине, но нам интересно дополнительная функция этих блоков — попап с подробной информацией товара. При нажатии на товар всплывает окно, в котором можно просмотреть слайдер с изображениями товара, заголовок, описание, выбрать опцию товара, цену и кнопка для взаимодействия.
Медиа
С помощью всплывающих окон можно также показывать различный медийный контент, например, изображения и видео. Для этого можно использовать сервисы, такие как YouTube или Vimeo, или загрузить видео непосредственно с компьютера.
VD09 popup: Youtube
Всплывающее окно с видео. В этом блоке добавить видео можно только через сервис YouTube
VD10 popup: Vimeo
Всплывающее окно с видео. В этом блоке добавить видео можно только через сервис Vimeo
VD15 popup: Видео MP4 размещение ссылки на файл с внешнего хостинга
Всплывающее окно с видео. В этом блоке добавить видео можно путем загрузки из компьютера или размещением ссылки на файл с внешнего хостинга. Формат видео только MP4
Уникальные
Помимо готовых решений, Тильда предлагает различные блоки и виджеты, которые могут быть использованы в сотрудничестве с другими полезными сервисами. Однако, если вам нужна более гибкая настройка, вы можете использовать код для настройки информации во всплывающем окне.
T868 popup: html-код в попапе
Блок используется для добавления специфичных функций или уникальных элементов. Вставить можно абсолютно любой код, включая тэги script и style.
SM401 Popup: Facebook social plugin
Это попап блок с возможностью подписки на страницу в Facebook. С помощью одной ссылки, вы сможете настроить возможность подписки на вашу страницу в Facebook прямо у вас на сайте.
* Facebook, продукт компании Meta, которая признана экстремистской и запрещена на территории России.
SM402 Popup: VKontakte social plugin
Это попап блок с возможностью подписки на страницу во Vkontakte. С помощью id, вы сможете настроить возможность подписки на вашу страницу или группу во Vkontakt прямо у вас на сайте.
t151N Попап с виджетом TimePad
Данное всплывающее окно позволяет интегрировать сервис Timepad на ваш сайт и добавить возможность покупки билетов напрямую через вашу страницу.
Bf901 Виджет для заказа обратного звонка
Блок BF901 используют для получения номера телефона от посетителя сайта, для последующей связи с ним.
Bf902N Виджет для отправки сообщения
Блок BF902N — это виджет, который фиксируется в углу экрана и при нажатии на него раскрывает форму для отправки сообщения. Вы можете редактировать поля формы, учитывая свои цели.
Bf903 Виджет с формой подписки
Блок BF903 — это виджет, который фиксируется в углу экрана и при нажатии на него раскрывает форму для подписки. В отличие от предыдущего блока BF902N, поле формы в этом попап не редактируется и принимает только e-mail.
Bf904 Виджет с номером телефона
Блок BF904 предназначен для размещения на сайте контактного номера телефона владельца. Он также предоставляет возможность разместить окно с номером в удобном для посетителя месте на экране.
Bf905 Виджет с мессенджерами
Блок BF905 используется для информирования посетителей сайта о способах связи с владельцем сайта через все подключенные мессенджеры.
BF905A Виджет с мессенджерами cо всплывающими иконками вверх
Блок BF905A используется для информирования посетителей сайта о способах связи с владельцем сайта через все подключенные мессенджеры, как и блок BF905, но отличие в том, что мессенджеры располагаются друг под другом во всплывающем окне
Обратите внимание, что попап блоки доступны только при использовании платной подписки на Tilda.
Как использовать всплывающие окна?
Как видно из перечня выше, попап окна используются для разных целей и могут располагаться на сайте в разных местах. Рассмотрим наиболее распространенные места для размещения всплывающих окон на сайте.
Шапка или подвал сайта
В шапках и подвалах часто используются popup-окна для различных целей, таких как изменение языка сайта, авторизация или регистрация пользователя, уведомления, контакты обратной связи или выбор местоположения. Такие popup-окна позволяют пользователям быстро и удобно получить доступ к необходимым функциям, не покидая главную страницу сайта.
Скриншот всплывающего окна, был взят с сайта ozon.ru
Рекламные баннеры или предложения о подписке на рассылку.
Всплывающие окна — это эффективный инструмент для отображения рекламных баннеров, таких как сезонные скидки, распродажи и других маркетинговых акций, которые могут привлечь внимание посетителей. Они также могут использоваться для приглашения пользователей подписаться на рассылку сайта, например, для получения новостей и эксклюзивных предложений.
Скриншот всплывающего окна, был взят с сайта pinterest.com
Блок призыв к действию
Попап окна могут использоваться в блоках с призывом к действию, чтобы привлечь внимание пользователя и убедить его выполнить определенное действие, например, оставить заявку или оставить свой email для уточнения деталей заказа/услуги. Как правило, эти окна появляются после того, как пользователь провел некоторое время на сайте или прокрутил страницу до определенного момента, что говорит о том, что он заинтересован в контенте. Также в таких окнах может быть предложена какая-то выгода или бонус, например, скидка на услугу или бесплатная консультация. Цель таких окон - повысить конверсию и мотивировать пользователя на действие.
Скриншот всплывающего окна, был взят с сайта pinterest.com
Каталог товаров
Попап окна могут использоваться в каталогах товаров, корзинах и других местах на сайте для предоставления пользователю дополнительной информации о товаре, например, фотографий товара, характеристик, сопутствующих товаров или акций, которые могут привести к сэкономленным деньгам. Кроме того, они могут быть использованы для уведомления пользователя о том, что товар добавлен в корзину, а также для предложения дополнительных товаров или акций, чтобы увеличить средний чек покупки. Они также могут использоваться для предоставления пользователю возможности изменить количество товаров в корзине, удалить товары или выбрать определенный вариант доставки или оплаты.
Скриншот всплывающего окна, был взят с сайта tilda.cc
условия использования или политика конфиденциальности.
Попап окна могут использоваться для предоставления пользователям информации о правилах использования сайта или политике конфиденциальности. Как правило, эта информация размещается на отдельной странице сайта, но можно использовать popup-окно, чтобы пользователи могли ознакомиться с этой информацией, не покидая текущую страницу.
Скриншот всплывающего окна, был взят с сайта pinterest.com
Как правило, сайты могут использовать всплывающие окна в различных местах, включая главную страницу, страницы товаров, корзину покупок и т.д. Однако, следует помнить, что некоторые пользователи могут реагировать отрицательно на использование всплывающих окон, особенно если они появляются слишком часто или появляются несколько сразу, мешая работе с сайтом.
Как добавить попап в Тильде?
Давайте рассмотрим как выглядит установка всплывающего окна в Tilda. Чтобы добавить любой попап, необходимо открыть каталог блоков, перейти в раздел "Форма" или воспользоваться поиском блоков, введя номер или ключевое слово.
Подсказка. Если ввести слово "pop" в строку поиска, то вы увидите большинство попап блоков. Это сэкономит ваше время, потому что вам не придется искать нужное окно в разных разделах.
Блок BF501N
После добавления блока BF501N мы можем видеть следующие обозначения
Некоторые элементы окна Tilda могут отличаться от элементов, которые у вас, так как у меня установлено расширение от Нолим, которое помогает модифицировать и улучшать не только блоки, но и интерфейс Tilda. Вы также можете установить это расширение, перейдя по этой ссылке.
[1] НОМЕР БЛОКА
При нажатии на номер блока появится список всех блоков из соответствующего раздела, в данном случае раздел формы. Вы можете легко переключаться между блоками, если случайно вставили не тот, который нужен. В этом списке также есть ползунок "сохранить контент при переключении". Если он включен, настройки в попапе сохранятся, даже если вы измените тип блока. Однако стоит быть внимательным, так как этот метод не всегда работает корректно. Для безопасности лучше скопировать блок [9] и на его копии проводить эксперименты. Если ваш блок еще не заполнен, тогда можно безопасно переключаться между блоками.
При нажатии на номер блока появится список всех блоков из соответствующего раздела, в данном случае раздел формы. Вы можете легко переключаться между блоками, если случайно вставили не тот, который нужен. В этом списке также есть ползунок "сохранить контент при переключении". Если он включен, настройки в попапе сохранятся, даже если вы измените тип блока. Однако стоит быть внимательным, так как этот метод не всегда работает корректно. Для безопасности лучше скопировать блок [9] и на его копии проводить эксперименты. Если ваш блок еще не заполнен, тогда можно безопасно переключаться между блоками.
[2] НАЗВАНИЕ БЛОКА
[3] НАСТРОЙКИ
В настройках блока вы можете настроить множество параметров, таких как ширина всплывающего окна, выравнивание текста внутри, название окна, цвета фона и затемнения, стили полей ввода, текст на кнопке и анимацию.
В настройках блока вы можете настроить множество параметров, таких как ширина всплывающего окна, выравнивание текста внутри, название окна, цвета фона и затемнения, стили полей ввода, текст на кнопке и анимацию.
[4] КОНТЕНТ
В панели редактирования контента вы можете настроить следующие параметры: ссылку для вызова попап, получателей данных, заголовок, описание и изображение, поля ввода формы, сообщение об успешной отправке данных, адрес при успешной отправке, текст под формой и текст на кнопке.
В панели редактирования контента вы можете настроить следующие параметры: ссылку для вызова попап, получателей данных, заголовок, описание и изображение, поля ввода формы, сообщение об успешной отправке данных, адрес при успешной отправке, текст под формой и текст на кнопке.
[5] КОПИРОВАНИЕ ID БЛОКА
Кнопка "Скопировать ссылку" используется для быстрого получения ссылки на блок и вставки ее в нужное место, например, в код. Чтобы использовать эту функцию, необходимо установить расширение "Нолим" себе в браузер. Кнопка станет активной после установки расширения.
Кнопка "Скопировать ссылку" используется для быстрого получения ссылки на блок и вставки ее в нужное место, например, в код. Чтобы использовать эту функцию, необходимо установить расширение "Нолим" себе в браузер. Кнопка станет активной после установки расширения.
[6] ПОДСКАЗКА
Эта подсказка информирует о том, какие приемщики данных были подключены и с какого доменного имени будут отправляться данные. После публикации страницы, подсказка исчезнет, но если вы вносите новые изменения, она снова появится, напоминая, что необходимо опубликовать страницу, чтобы изменения вступили в силу.
Эта подсказка информирует о том, какие приемщики данных были подключены и с какого доменного имени будут отправляться данные. После публикации страницы, подсказка исчезнет, но если вы вносите новые изменения, она снова появится, напоминая, что необходимо опубликовать страницу, чтобы изменения вступили в силу.
[7] ПРЕДПРОСМОТР ВСПЛЫВАЮЩЕГО ОКНА
При нажатии на ссылку «Кликните здесь». Таким образом можно увидеть как будет выглядеть попап не опубликовывая страницу.
При нажатии на ссылку «Кликните здесь». Таким образом можно увидеть как будет выглядеть попап не опубликовывая страницу.
[8] НАЗВАНИЕ ССЫЛКИ
Название ссылки для вызова попап окна, которую можно изменить при редактировании контента [4].
Название ссылки для вызова попап окна, которую можно изменить при редактировании контента [4].
[9] ДУБЛИРОВАНИЕ БЛОКА
При нажатии на эту кнопку блок дублируется и автоматически помещается ниже оригинала.
При нажатии на эту кнопку блок дублируется и автоматически помещается ниже оригинала.
[10] УДАЛЕНИЕ БЛОКА
Кнопка удаляет блок. При случайном удалении блока можно его легко восстановить через корзину в настройках страницы - в разделе "Дополнительно" - "Корзина". Также вы можете нажать на кнопку "Отменить" в верхнем правом углу экрана, чтобы вернуть удаленный блок без использования корзины.
Кнопка удаляет блок. При случайном удалении блока можно его легко восстановить через корзину в настройках страницы - в разделе "Дополнительно" - "Корзина". Также вы можете нажать на кнопку "Отменить" в верхнем правом углу экрана, чтобы вернуть удаленный блок без использования корзины.
[11] СКРЫТИЕ БЛОКА
При нажатии на данную кнопку, блок будет скрыт и после публикации страницы не будет отображаться на вашем сайте.
При нажатии на данную кнопку, блок будет скрыт и после публикации страницы не будет отображаться на вашем сайте.
[12] ЕЩЕ ФУНКЦИИ
При нажатии появляется выпадающий список, который содержит следующие функции:
При нажатии появляется выпадающий список, который содержит следующие функции:
- «Вырезать» – после нажатия блок пропадает и сохраняется в кэше, после его можно вставить в нужное место нажав на кнопку «Вставить»;
- «Копировать» - после нажатия блок копируется и сохраняется в кэше, после его можно вставить в нужное место нажав на кнопку «Вставить»;
- «Вставить» - после нажатия блок, который был до этого сохранен в кэше, вставляется в нужное место;
- «Выделить» - поможет произвести действия описание выше делать с несколькими блоками сразу.
[13] ПЕРЕМЕСТИТЬ
Две стрелки позволяют переместить блок вверх или вниз на странице. Нажмите на соответствующую стрелку, чтобы изменить порядок расположения блоков на странице.
Две стрелки позволяют переместить блок вверх или вниз на странице. Нажмите на соответствующую стрелку, чтобы изменить порядок расположения блоков на странице.
Модификации для попап от Нолим
Нолим предлагает обширный набор модификаций для различных блоков, позволяющих легко и быстро изменять стандартные блоки от Tilda или создавать совершенно новые блоки без необходимости знания программирования. И конечно же, доступны модификации для всплывающих окон, о которых мы расскажем подробнее ниже.
Как в Zero Block сделать popup со своей кнопкой закрытия в Tilda
В Нолим есть отличная модификация с подробной видеоинструкцией, которая поможет вам создать свой собственный попап в zero block всего за 2 минуты. С её помощью вы можете создавать pop-up-окна без необходимости писать код, благодаря простому и понятному процессу.
Как в стандартных попап блоках TILDA перенести крестик закрытия?
Благодаря этой модификации ты легко сможешь переместить иконку закрытия внутрь стандартных попап, таких как, BF502N, BF503 и ST500.
Как показать popup при скролле вверх из ZERO BLOCK?
Данная модификация предоставляет код, с помощью которого ты можешь настроить автоматический показ попап из Зеро Блок Тильда после определенного блока при скроллинге страницы вверх. И самое главное, нет необходимости редактировать код самостоятельно – всё уже настроено!
Аналитика и защита попап
Для того чтобы отслеживать данные об открытии попап блоков в системе аналитики, необходимо включить соответствующую опцию в настройках блока с формой. Для этого нужно поставить галочку «Отправлять данные об открытии попапа в систему аналитики», которая доступна в панели редактирования настроек блока. Для отслеживания аналитики попап блоков можно воспользоваться сторонними сервисами анализа, такими как Google Analytics, Facebook Pixel, Яндекс Метрика, Mail.ru Counter (VK Pixel). Инструкции по настройке соответствующей системы аналитики можно найти в разделе «Аналитика» настроек вашего сайта.
CAPTCHA (капча)
Капча — это технология, которая используется для защиты форм от спама и автоматизированных атак. Капча включает в себя задачу, которую пользователь должен решить, чтобы доказать, что он не бот. Это может быть например, ввод символов, решение математической задачи или выбор изображений, содержащих определенные объекты.
Капчи могут быть включены в формы на сайтах для защиты от автоматизированных атак, таких как спам-боты, которые могут отправлять массовые сообщения на сайт. Они также могут помочь предотвратить попытки взлома сайта и защитить конфиденциальную информацию, которая может быть передана через формы.
В Тильда уже установлена эта технология на каждой форме и защищает ваш сайт от спама и автоматизированных атак ботов.
Капчи могут быть включены в формы на сайтах для защиты от автоматизированных атак, таких как спам-боты, которые могут отправлять массовые сообщения на сайт. Они также могут помочь предотвратить попытки взлома сайта и защитить конфиденциальную информацию, которая может быть передана через формы.
В Тильда уже установлена эта технология на каждой форме и защищает ваш сайт от спама и автоматизированных атак ботов.
А как сделать на Тильде?
В данном разделе мы ответим на ваши вопросы о возможностях, функциях и настройках всплывающих окон.
У меня марафон по похудению и нужно добавить поля с нынешним весом и с желаемым. Есть такая возможность?
Да, это возможно. На примере блока BF502N покажу как добавить поля в которых пользователи могли указать нынешний и желаемый вес:
Эти инструкции подходят для настройки всех форм.
- В Tilda откройте редактирование страницы, на которой находится форма для заявки в марофон и перейдите к блоку или попап с формой
- Наведите курсор в левую верхнюю часть блока и нажмите на кнопку «Контент».
- В открывшейся панели раскройте ячейку «Поля для ввода».
- В раскрывшейся ячейке прокрутите вниз и нажмите кнопку «Добавить поле для ввода».
- В поле «Тип» выберите «Поле для ввода в одну строку».
- В поле «Заголовок поля» напишите «Ваш нынешний вес».
- В поле «Подсказка значения» напишите «Укажите ваш нынешний вес в кг».
- Нажмите на поле «Правило валидации».
- В раскрывшемся меню выберите «Номер», чтобы пользователь смог ввести только цифры в данном поле.
- В конце списка полей также поставьте галочку в поле «Обязательно для заполнения», чтобы пользователь не мог отправить заявку без заполнения нынешнего веса.
- Для добавления поля «Желаемый вес», проделайте все шаги начиная с пункта 4.
- После добавления всех нужных полей, сохраните изменения, нажав на оранжевую кнопку «Сохранить и закрыть» в верхней части панели настроек блока.
- Не забудьте опубликовать изменения на сайт. Для этого наведите на правый верхний угол экрана, курсор мыши и нажмите кнопку «Опубликовать».
Эти инструкции подходят для настройки всех форм.
Считаете, что наша статья недостаточно полная и мы упустили важные моменты?
Дополните ее, заполнив форму ниже
Сообщение об успешной отправке!
Было полезно?