Как сделать всплывающее окно (Pop-up) в Tilda
Всплывающее окно или Pop-up — это элемент интерфейса страницы, который появляется поверх содержимого страницы после нажатия на определенные элементы (текст, кнопки, изображения) или при сработке специальных триггеров (заданный тайминг, подводка указателя мыши к закрытию окна).
Такие всплывающие окна есть и в конструкторе Тильда. Их довольно много, каждый Pop-up разберем в конце статьи.
Сейчас же давайте перейдем к основным настройкам всплывающих окон.
Основные настройки всплывающих окон
Для примера, мы будем использовать блок BF501 (форма подписки), который можно найти среди всех блоков в разделе «Форма и кнопка»:
Теперь зайдите в «Контент» созданного блока Popup. Здесь вы можете задать любую картинку для окна, изменить заголовок, описание и другие значения. Но важнее всего поле «ССЫЛКА НА POPUP»:
В этом поле отображается адрес вашего Pop-up. По умолчанию Тильда ставит довольно понятные ссылки, в нашем случае — это #popup:subscribe. Вы можете оставить этот адрес, либо заменить на другой, понятный вам. Помните, что начинаться ссылка должна с обязательного знака # , пробелы не допускаются, только латиница и цифры.
Особенно важно заменить ссылку в случае, если таких всплывающих окон у вас будет много.
Проверить, как выглядит ваш Pop-up, можно кликнув на кнопку «Кликните здесь» в блоке Pop-up:
Теперь, после создания создания Pop-up и применения всех настроек, вы можете добавить его к элементам на сайте. Для этого в поле ССЫЛКА ДЛЯ КНОПКИ (для изображений ССЫЛКА) вам нужно ввести ссылку на созданный Pop-up. В нашем случае — #popup:subscribe:
Если ваш Pop-up должен появляться по клику на текст, то тут тоже все просто. Выделяете нужный текст и нажимаете на кнопку «Ссылка» -> Вставить ссылку:
Дальше вставляем наш #popup:subscribe:
Посмотрите, как будет выглядеть ваш Pop-up в работе в режиме Предпросмотра страницы. Если все устраивает, не забудьте Опубликовать страницу, чтоб изменения вступили в силу.
Pop-up блоки
Вы можете добавить на страницу всплывающие окна (pop-up), которые будут появляться в зависимости от поведения пользователя: при клике на ссылку, при скролле , по времени или при закрытии страницы .
Появление блока при клике на ссылку
Чтобы при клике на кнопку появлялось окно с информацией или формой подписки, вам нужно задать специальную ссылку для кнопки. Ссылку можно создать в блоке с всплывающим окном.
1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок. Подходящие блоки: BF501N, BF502N, BF503, BF504.
2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).
3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название. Например, #popup:superpopup.
4. Теперь эту ссылку можно добавить в кнопку. Откройте меню «Контент» блока с кнопкой и в поле «Ссылка для кнопки» поставьте ссылку вида: #popup:subscription
Опубликуйте страницу или перейдите в режим предпросмотра, чтобы увидеть, как работает всплывающее окно. Оно будет появляться при клике на кнопку.
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.
- Выделите слово, при клике на которое должен появляться pop-up.
- Через появившееся контекстное меню задайте ссылку на всплывающее окно.
- Добавьте pop-up блок (категория «Форма»).
- В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword
Появление блока при скролле
Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.
- В меню «Контент», пропишите ссылку вида: #popup:subscription (слово может быть любым).
2. Добавьте специальный блок-триггер, который будет вызывать появление элемента при скролле. Триггер находится в категории «Другое».
Нужен блок – T183.
3. В меню «Контент» укажите точно такую же ссылку, которую вы задали в pop-up блоке.
Время, на которое запоминается посетитель
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.
Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы pop-up блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы pop-up блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
4. Опубликуйте страницу. Блок появится, когда посетитель проскролит до места, где вы разместили pop-up блок.
Как сделать несколько поп ап окон на странице тильда
Друзья, привет. Открываю полезную рубрику по Тильде «Давай, модифай»!
О чем она? Все, кто работает с тильдой, знают, что часто не хватает стандартных инструментов, чтобы реализовать то, что придумал дизайнер или хочет заказчик. Тогда на помощь приходят изменения стилей и другие коды.. В эту рубрику соберу самые часто встречающиеся вопросы и ответы по таким изменениям.
- Начнем с всплывающих окон. Многие используют стандартные pop-up окна в Тильде и этого бывает достаточно. Но в моей практике всплывающие окна модифицировались чаще и возникало 2 основные проблемы с ними:
а) Как использовать своё нестандартное pop-up окно
б) Как сделать так, чтобы окно после заполнения полей и нажатию кнопки закрывалось автоматически.
Вот так может выглядеть нестандартное окно…
Теперь про 2 готовых решения. Поехали.
Создаем на странице блок BF503 и в настройках блока ставим ширину 100% экрана.
Затем создаем ZeroBlock и в нем рисуем свой кастомный pop-up и адаптируем под все разрешения. Далее нам этот блок нужно привязать к ранее созданному BF503. Для этого создаем блок Т123 и вставляем код1. После этого создаем еще один блок Т123 и добавляем Код2, чтобы окно закрывалось после отправки данных.
Как настроить popup в tilda
Как создать меню сайта через Popup форму?
- Вписываем ссылку на открытие этого меню
- В поле заголовок добавляем разделы сайта
- В поле описание добавляем второстепенную информацию (подразделы, телефоны, адрес, режим работы и т.д.)
- Добавляем 2 кнопки, разные по стилю, которые будут располагаться по одной линии на десктопе и в мобильной версии — это удобно
Готово! За 5 минут мы сделали лёгкое, стильное и нестандартное меню в Тильде.
Pop-up блоки
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.
- Выделите слово, при клике на которое должен появляться popup.
- Через появившееся контекстное меню задайте ссылку на всплывающее окно.
- Добавьте popup блок (категория «Форма и кнопка»)
- В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword
Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.
- В меню «Контент», пропишите ссылку вида: #subscribepopup (слово может быть любым).
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.
Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы popup блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы popup блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
Похожие публикации:
- Java update available что это за программа и нужна ли она
- Андроид авто как включить кино
- Где настройки в яндекс картах на андроид
- Как банить в телеграмме
Как сделать несколько поп ап окон на странице тильда
Друзья, привет. Открываю полезную рубрику по Тильде «Давай, модифай»!
О чем она? Все, кто работает с тильдой, знают, что часто не хватает стандартных инструментов, чтобы реализовать то, что придумал дизайнер или хочет заказчик. Тогда на помощь приходят изменения стилей и другие коды.. В эту рубрику соберу самые часто встречающиеся вопросы и ответы по таким изменениям.
- Начнем с всплывающих окон. Многие используют стандартные pop-up окна в Тильде и этого бывает достаточно. Но в моей практике всплывающие окна модифицировались чаще и возникало 2 основные проблемы с ними:
а) Как использовать своё нестандартное pop-up окно
б) Как сделать так, чтобы окно после заполнения полей и нажатию кнопки закрывалось автоматически.
Вот так может выглядеть нестандартное окно…
Теперь про 2 готовых решения. Поехали.
Создаем на странице блок BF503 и в настройках блока ставим ширину 100% экрана.
Затем создаем ZeroBlock и в нем рисуем свой кастомный pop-up и адаптируем под все разрешения. Далее нам этот блок нужно привязать к ранее созданному BF503. Для этого создаем блок Т123 и вставляем код1. После этого создаем еще один блок Т123 и добавляем Код2, чтобы окно закрывалось после отправки данных.
Как настроить popup в tilda
Как создать меню сайта через Popup форму?
- Вписываем ссылку на открытие этого меню
- В поле заголовок добавляем разделы сайта
- В поле описание добавляем второстепенную информацию (подразделы, телефоны, адрес, режим работы и т.д.)
- Добавляем 2 кнопки, разные по стилю, которые будут располагаться по одной линии на десктопе и в мобильной версии — это удобно
Готово! За 5 минут мы сделали лёгкое, стильное и нестандартное меню в Тильде.
Pop-up блоки
Ссылку можно ставить не только на кнопку, но и на любое слово где угодно — механизм тот же самый.
- Выделите слово, при клике на которое должен появляться popup.
- Через появившееся контекстное меню задайте ссылку на всплывающее окно.
- Добавьте popup блок (категория «Форма и кнопка»)
- В меню «Контент», в поле «Ссылка» укажите ту же самую ссылку — #popup:anyword
Добавьте всплывающий блок, который должен появляться в момент пролистывания страницы. Например, форму подписки или информацию о выгодном предложении.
- В меню «Контент», пропишите ссылку вида: #subscribepopup (слово может быть любым).
В меню «Настройки» триггера в поле Cookie life time укажите время (в днях), насколько запоминать посетителя, чтобы не показывать одному и тому же человеку ваш pop-up много раз.
Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, поставьте значение 10. Если вы хотите, чтобы popup блок был показан один раз, поставьте значений 365 — в течение года, посетитель больше не увидит данный блок. Но если вы хотите, чтобы popup блок показывался каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.
Похожие публикации:
- Java update available что это за программа и нужна ли она
- Андроид авто как включить кино
- Где настройки в яндекс картах на андроид
- Как банить в телеграмме