Как сделать всплывающее окно (Pop-up) в Tilda

🗓️ Обновлено: 27.08.2021
💬Комментариев: 0
👁️Просмотров: 3941
web

Всплывающее окно или 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 в работе в режиме Предпросмотра страницы. Если все устраивает, не забудьте Опубликовать страницу, чтоб изменения вступили в силу.

Виды всплывающих окон в Тильде

Статья была полезной?
👍
Да - 1
👎
Нет - 13
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 54833
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 41408
Появление элементов при скролле
Просмотров: 40645
Как выровнять картинку по центру с помощью CSS
Просмотров: 28279
Как изменить цвет SVG в CSS
Просмотров: 27995
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649